🎉 Black Friday deal! 25% off your first year of CodyHouse Pro →


Progress value is 30%

Column Oriented Table

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

Copy: View demo


All components are based on CodyFrame.

This component includes variations. All variations share the same SCSS/JS code. They only differ in their HTML.

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.


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

If you use one of the [email protected]{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:

For the accordion-like layout, 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).


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

  • .text-left -> left horizontal alignment
  • .text-center -> center horizontal alignment
  • .text-right ->right horizontal alignment
  • .align-top → top vertical alignment
  • .align-middle → middle vertical alignment
  • .align-bottom → bottom vertical alignment

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

✅ Project duplicated

✅ Project created

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