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

Projects

Progress value is 30%

Row Oriented Table

Data tables used to organize information, with a specific layout for cases where each row is a meaningful unit.

Copy: View demo

Dependencies

All components are built upon the CodyHouse Framework.

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

How To

Tables can be used to organize data in a two-dimensional grid so that correlation is clear to users. 

The Row Oriented Table component has been designed for cases where each row 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 [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 row headers are used as button labels (in the demo, 'Breakfast', 'Morning Snack', ...).

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

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

Changelog

  • ✅ Component created
    🗓 October 02, 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