Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to present list/table of properties in material design?

I am refactoring an old web app into React and Material-UI, and I find myself stuck when trying to find the proper way of presenting a "property table". I have looked into several data table implementations, but neither a data table nor Material-UI's List seems to be the right tool for the work.

Data tables are meant for each row having the same properties (columns) repated for different entities, whilst I need a kind of table where each row is a key+value presentation. I will call it a property table unless someone can tell me there is already a better name.

Below is a picture of current view in the refactored app (contains only test data). I realize I might need to think differently and not just copy the old structures.

So what would be the correct way to present a similar list of properties with Material Design?

A "property table" listing key+value properties

like image 238
Leif John Avatar asked Jul 22 '19 10:07

Leif John


People also ask

How do you display data through table?

Double-click the table name in the grid. Select names of tables in the grid, then right-click and select Display Rows from the shortcut menu, or select Display Rows from the File menu.

Where in a data table should Units of measurement be shown?

Units. The most common label used in tables is the unit of measurement for the data; often, it's repeated along with every single data point. Instead of repeating the label, only include it with the first data point in each column.


1 Answers

I seem to find no explicit component or view type for my "property table", so I will simply make a table with Material-UI <Table>component, and skip the header.

enter image description here

like image 58
Leif John Avatar answered Nov 09 '22 22:11

Leif John