CodyHouse Framework + Components are featured on Product Hunt! Join the discussion →

Projects

Progress value is 30%

Cross Table

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

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

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.

Responsiveness

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.

Alignment

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.

 

Changelog

  • ✅ Component created
    🗓 October 09, 2019

Bug Report & Feedback

Get in touch: suggest a component or report a bug.

✅ Project duplicated

✅ Project created

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