Column Oriented Table

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

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

By default, the table is displayed using the standard, expanded table layout (rows + columns).

If you use one of the .cl-table--expanded@{breakpoint} class modifiers, the layout is presented 1) in the collapsed (accordion-like) form before the breakpoint and 2) in the expanded form after the breakpoint. The collapsed variation is optimized for smaller screens.

Here's a list of the class modifiers:

.cl-table--expanded@xs
.cl-table--expanded@sm
.cl-table--expanded@md
.cl-table--expanded@lg
.cl-table--expanded@xl

For the accordion-like layout, the column headers are used as button labels (in thedemo, 'Spring', 'Summer', 'Autumn' and 'Winter').

If you want the row headers to be used as button labels, take a look at theRow 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).

Alignment

To modify the content alignment within a cell, you can apply the following utility classes to the .cl-table__cell element:

.text-left
.text-center
.text-right
.align-top
.align-middle
.align-bottom

Sticky Header

If you want the header of the table to be sticky on scrolling (expanded layout only), you can add the .cl-table__header--sticky class to the .cl-table__header element (example).