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


Progress value is 30%

Cross Table

Two-way data table used to display correlation between row and column variables.

Copy: View demo


All components are based on CodyFrame.

How To

The Cross Table component can be used to organize data in a two-dimensional grid to show the correlation between row and column variables.


By default, the table is showed using the default rows+columns layout.

You can use one of the [email protected]{breakpoint} classes to modify the layout: 1) cards layout (optimized for smaller screens) before the breakpoint and 2) expanded after the breakpoint.

Here's a list of the class modifiers:

The elements with the .js-cross-table__label class, inside the .cross-table__header, are used as inline lables for the cards layout (in the demo, labels are 'Basic', 'Pro' and 'Enterprise').

Column Width

To set a fixed width for a column, apply one of the width utility classes to the .cross-table__cell element. Because of the implicit size correlation among cells belonging to the same column (they share the same size), you can apply the width class only to one .cross-table__cell element. All the other cells in the same column will adapt accordingly.

Please note that the width utility classes will affect only the table expanded layout (default rows + columns layout).

Other framework utility classes that help you modify columns width are the .min-width-{size} and .text-nowrap utility classes.


To modify the content alignment within a cell, you can apply the following utility classes to the .cross-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

Full Width Rows

The . cross-table__row--w-full elements are used to create full-width rows to divide the table into different row sections.

The full width is set using the colspan attribute equal to the total number of table columns (4 in the demo). If you change the number of columns of your table, make sure to update the value of the colspan attribute as well.


✅ Project duplicated

✅ Project created

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