Table/Datalist component

[smcgrath0]

Please describe the problem.
There is currently no table component in Peregrine.

Describe the solution you'd like
This component should have dialog to name column headings and choose what data from the model will go in that column, each row would represent one record.

Also these options should be in the dialog

• striped table
• fixed header
• customize border around cells
• dense table ( less spacing )
• scrollable table
• place for a table caption and where to put relative to the table
• selectable table

Additional context

regular with caption ex.

dense ex.

Striped table ex.

scrollable table and fixed header ex.

selectable table ex.

[qial]

I'm pushing the base version of table formation from the dialog. This is set up using "firstName" and "lastName" as the column headers and values. I'm seeing an issue with the column headers just showing up underneath eachother. I suspect it has something to do with the fact that I just added a loop on the <th> element without doing anything else.

The local storage I used for the picture is localStorage.setItem('list','[{"firstName":"Kyle","lastName":"Watson"},{"firstName":"Shane","lastName":"Mcgrath"}]');