Go to homepage

Projects /

Column Oriented Table

Data table for cases where each column is a meaningful unit.

View Demo

How to

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.

Responsiveness

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.

Column Width

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).

Sticky Header

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).

Categories

Bug report & feedback

Component Github page ↗

Project duplicated

Project created

Globals imported

There was an error while trying to export your project. Please try again or contact us.