Row Oriented Table
Data tables used to organize information, with a specific layout for cases where each row is a meaningful unit.
Projects /
Projects /
Data tables used to organize information, with a specific layout for cases where each row is a meaningful unit.
Tables can be used to organize data in a two-dimensional grid so that correlation is clear to users.
The Row Oriented Table component has been designed for cases where each row is a meaningful unit.
On desktop devices, the table is displayed using the standard, expanded table layout (rows + columns).
On smaller devices, the layout is presented in a collapsed (accordion-like) form. The row headers are used as button labels (in the demo, 'Breakfast', 'Morning Snack', ...).
If you want the column headers to be used as button labels, take a look at the Column Oriented Table component.
If you want to set a fixed width for a table column, you can use one of the width utility classes. You can apply the width class only to one .row-table__cell element: all the other cells in the same columns will automatically adapt. Please note that the width utility classes will affect only the table expanded layout (default rows + columns layout).
If you want the header of the table to be sticky on scrolling (expanded layout only), you can add the .row-table--sticky-header class to the .row-table element (example).
