Column Oriented Table
Data table for cases where each column is a meaningful unit.
Projects /
Projects /
Data table for cases where each column is a meaningful unit.
Tables can be used to organize data in a two-dimensional grid so that correlation is clear to users.
The Column Oriented Table component has been designed for cases where each column 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 column headers are used as button labels (in the demo, 'Spring', 'Summer', 'Autumn' and 'Winter').
If you want the row headers to be used as button labels, take a look at the Row 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 .cl-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 .cl-table--sticky-header class to the .cl-table element (example).
