Table

Data tables used to organize and display information in rows and columns.

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 are used to list information from a data set in a two-dimensional grid so that the data correlation is understandable by the user.

The basic idea behind a table in HTML is organizing items in rows (<tr> elements). However, when we do so, we create an implicit correlation between the columns as well. Besides the obvious "data correlation", we're referring to the size correlation: even if the content of the cells within the same column is different, they share the same size. A corollary to this point is that if we want to change the size of a column, we need to target only one cell.

Because table cells want width and min-width defined as inline style, we can create a bridge between inline style and the CSS of the component using CSS Variables. In the example below, we want to set a width for the first column (style="width: var(--table-cell-width-xs)"), and a minimum width for the paragraphs (style="min-width: var(--table-cell-width-lg);"): 

The --sticky-header variation comes in handy if we're dealing with complex tables with plenty of rows. It requires you to set a fixed height on the .table__body (by default it's 500px).

The utility classes can be used to modify the behavior of the cells (e.g., content alignment).

/* utility classes */
.table {

  .table__cell--no-wrap {
    white-space: nowrap;
  }
  
  .table__cell--center-x {
    text-align: center;

    > * {
      margin-left: auto;
      margin-right: auto;
    }
  }
  
  .table__cell--center-y {
    vertical-align: middle;
  }
  
  .table__cell--left {
    text-align: left;
  }
  
  .table__cell--right {
    text-align: right;

    > * {
      margin-left: auto;
    }
  }
  
  .table__cell--top {
    vertical-align: top;
  }
  
  .table__cell--bottom {
    vertical-align: bottom;
  }

  .table__row--is-hidden {
    height: 0;
    margin: 0;
    visibility: hidden;
    overflow: hidden;
  
    > * {
      height: 0;
      padding-top: 0;
      padding-bottom: 0;
      line-height: 0;

      * {
        display: none;
      }
    }
  }
}

Bug Report & Feedback

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