Tables

This component has been deprecated

See the Table component in Garden's @zendeskgarden/react-tables package for the latest updates.

The .c-table components are intended to provide consistent styling for HTML <table> elements. See the Garden React tables package for enhanced keyboard and event behavior.

Basic Layout

The basic BEM class structure is .c-table > .c-table__row > .c-table__row__cell , which can be used to style a table along with rows and cells.

R0, C0	R0, C1	R0, C2	R0, C3	R0, C4
R1, C0	R1, C1	R1, C2	R1, C3	R1, C4
R2, C0	R2, C1	R2, C2	R2, C3	R2, C4

Table Modifications

Use the settings menu to modify the styling for the tables displayed throughout the page.

Toggle "RTL" to add the .is-rtl table class.
Select "Display Density" to apply either .c-table--sm (cozy) or .c-table--lg (airy) row sizing.

Row Modifications

Add .c-table__row--header to style the header row for your table.

TH, C0	TH, C1	TH, C2	TH, C3	TH, C4
R0, C0	R0, C1	R0, C2	R0, C3	R0, C4

Use .c-table__row--group to format a grouping row. Be sure to apply a colspan attribute to the group-by cell equal to the number of columns in the table.

Status
R0, C0	R0, C1	R0, C2	R0, C3	R0, C4
R1, C0	R1, C1	R1, C2	R1, C3	R1, C4

Use the "Zebra Stripes" settings control on this page to apply .c-table__row--stripe to every other table row.

Cell Modifications

Most table layouts will benefit from the addition of .c-table__row__cell--truncate to prevent cell content from wrapping.

Wrapped Cell	Shaman ugh cronut iceland occupy hoodie copper mug quinoa. Shoreditch vegan paleo occupy you probably haven't heard of them.
Truncated Cell	Shaman ugh cronut iceland occupy hoodie copper mug quinoa. Shoreditch vegan paleo occupy you probably haven't heard of them.

Table cells for Garden are rendered using fixed layout. This means cell width (which defaults to auto) is controlled by the first row. Add the .c-table__row__cell--min class to any column that should receive a minimum amount of fixed width (i.e. columns used to contain checkboxes or icons). The first two columns in the table below demonstrate this treatment.

TH, C2	TH, C3	TH, C4
R0, C2	R0, C3	R0, C4
R1, C2	R1, C3	R1, C4
R2, C2	R2, C3	R2, C4

Add .c-table__row__cell--overflow to prepare a column for receiving .c-table__row__cell__overflow child content. Overflow menus are displayed in the last column of the table. Overflow for non-header rows is only displayed on hover or focus. Note, in order to control stacking, a .is-active state class is toggled whenever the menu for a .c-table__row__cell__overflow component is shown.

TH, C0	TH, C1	TH, C2	TH, C3	TH, C4
R0, C0	R0, C1	R0, C2	R0, C3	R0, C4
R1, C0	R1, C1	R1, C2	R1, C3	R1, C4
R2, C0	R2, C1	R2, C2	R2, C3	R2, C4

Use <strong> tags within table cells to apply semibold font weight to cell text.

Table State

.c-table__row.is-hovered
.c-table__row.is-focused
.c-table__row.is-selected
.c-table__row__cell__sortable
.c-table__row__cell__sortable.is-hovered
.c-table__row__cell__sortable.is-focused
.c-table__row__cell__sortable.is-ascending
.c-table__row__cell__sortable.is-descending
.c-table__row__cell__sortable.is-ascending.is-hovered
.c-table__row__cell__sortable.is-ascending.is-focused
.c-table__row__cell__sortable.is-descending.is-hovered
.c-table__row__cell__sortable.is-descending.is-focused
.c-table__row__cell__overflow.is-hovered
.c-table__row__cell__overflow.is-focused

.c-table__row__cell__overflow.is-active

Playground

<table class="c-table u-bg-white">
  <caption class="c-table__caption u-fs-lg u-semibold u-mb-sm">Table Caption</caption>
  <thead>
    <tr class="c-table__row c-table__row--header">
      <th class="c-table__row__cell c-table__row__cell--min">
        <div class="c-chk">
          <input class="c-chk__input" id="chk-all" type="checkbox">
          <label class="c-chk__label is-hidden" for="chk-all">Select All</label>
        </div>
      </th>
      <th class="c-table__row__cell c-table__row__cell--truncate">Header 1</th>
      <th aria-sort="none" class="c-table__row__cell c-table__row__cell--truncate">
        <button class="c-table__row__cell__sortable" type="button">Header 2</button>
      </th>
      <th class="c-table__row__cell c-table__row__cell--truncate">Header 3</th>
      <th class="c-table__row__cell c-table__row__cell--overflow">
        <button aria-haspopup="true" class="c-table__row__cell__overflow js-menu" type="button">
          <div class="menu-container">
            <ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
              <li class="c-menu__item" role="menuitem">One</li>
              <li class="c-menu__item" role="menuitem">Two</li>
              <li class="c-menu__item" role="menuitem">Three</li>
            </ul>
          </div>
        </button>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr class="c-table__row c-table__row--group">
      <td aria-sort="ascending" class="c-table__row__cell" colspan="5">Status <strong>Platinum</strong></td>
    </tr>
    <tr class="c-table__row" tabindex="0">
      <td class="c-table__row__cell">
        <div class="c-chk">
          <input class="c-chk__input" id="chk-one" type="checkbox">
          <label class="c-chk__label is-hidden" for="chk-one">Select Row One</label>
        </div>
      </td>
      <td class="c-table__row__cell">Row 1, Column 1</td>
      <td class="c-table__row__cell">Row 1, Column 2</td>
      <td class="c-table__row__cell">Row 1, Column 3</td>
      <td class="c-table__row__cell c-table__row__cell--overflow">
        <button aria-haspopup="true" class="c-table__row__cell__overflow js-menu" type="button">
          <div class="menu-container">
            <ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
              <li class="c-menu__item" role="menuitem">One</li>
              <li class="c-menu__item" role="menuitem">Two</li>
              <li class="c-menu__item" role="menuitem">Three</li>
            </ul>
          </div>
        </button>
      </td>
    </tr>
    <tr class="c-table__row" tabindex="0">
      <td class="c-table__row__cell">
        <div class="c-chk">
          <input class="c-chk__input" id="chk-two" type="checkbox">
          <label class="c-chk__label is-hidden" for="chk-two">Select Row Two</label>
        </div>
      </td>
      <td class="c-table__row__cell">Row 2, Column 1</td>
      <td class="c-table__row__cell">Row 2, Column 2</td>
      <td class="c-table__row__cell">Row 2, Column 3</td>
      <td class="c-table__row__cell c-table__row__cell--overflow">
        <button aria-haspopup="true" class="c-table__row__cell__overflow js-menu" type="button">
          <div class="menu-container">
            <ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
              <li class="c-menu__item" role="menuitem">One</li>
              <li class="c-menu__item" role="menuitem">Two</li>
              <li class="c-menu__item" role="menuitem">Three</li>
            </ul>
          </div>
        </button>
      </td>
    </tr>
    <tr class="c-table__row c-table__row--group">
      <td aria-sort["descending"] class="c-table__row__cell" colspan="5">Status <strong>Gold</strong></td>
    </tr>
    <tr class="c-table__row" tabindex="0">
      <td class="c-table__row__cell">
        <div class="c-chk">
          <input class="c-chk__input" id="chk-three" type="checkbox">
          <label class="c-chk__label is-hidden" for="chk-three">Select Row Three</label>
        </div>
      </td>
      <td class="c-table__row__cell">Row 3, Column 1</td>
      <td class="c-table__row__cell">Row 3, Column 2</td>
      <td class="c-table__row__cell">Row 3, Column 3</td>
      <td class="c-table__row__cell c-table__row__cell--overflow">
        <button aria-haspopup="true" class="c-table__row__cell__overflow js-menu" type="button">
          <div class="menu-container">
            <ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
              <li class="c-menu__item" role="menuitem">One</li>
              <li class="c-menu__item" role="menuitem">Two</li>
              <li class="c-menu__item" role="menuitem">Three</li>
            </ul>
          </div>
        </button>
      </td>
    </tr>
    <tr class="c-table__row" tabindex="0">
      <td class="c-table__row__cell">
        <div class="c-chk">
          <input class="c-chk__input" id="chk-four" type="checkbox">
          <label class="c-chk__label is-hidden" for="chk-four">Select Row Four</label>
        </div>
      </td>
      <td class="c-table__row__cell">Row 4, Column 1</td>
      <td class="c-table__row__cell">Row 4, Column 2</td>
      <td class="c-table__row__cell">Row 4, Column 3</td>
      <td class="c-table__row__cell c-table__row__cell--overflow">
        <button aria-haspopup="true" class="c-table__row__cell__overflow js-menu" type="button">
          <div class="menu-container">
            <ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
              <li class="c-menu__item" role="menuitem">One</li>
              <li class="c-menu__item" role="menuitem">Two</li>
              <li class="c-menu__item" role="menuitem">Three</li>
            </ul>
          </div>
        </button>
      </td>
    </tr>
    <tr class="c-table__row" tabindex="0">
      <td class="c-table__row__cell">
        <div class="c-chk">
          <input class="c-chk__input" id="chk-five" type="checkbox">
          <label class="c-chk__label is-hidden" for="chk-five">Select Row Five</label>
        </div>
      </td>
      <td class="c-table__row__cell">Row 5, Column 1</td>
      <td class="c-table__row__cell">Row 5, Column 2</td>
      <td class="c-table__row__cell">Row 5, Column 3</td>
      <td class="c-table__row__cell c-table__row__cell--overflow">
        <button aria-haspopup="true" class="c-table__row__cell__overflow js-menu" type="button">
          <div class="menu-container">
            <ul aria-hidden="true" class="c-menu c-menu--down" role="menu">
              <li class="c-menu__item" role="menuitem">One</li>
              <li class="c-menu__item" role="menuitem">Two</li>
              <li class="c-menu__item" role="menuitem">Three</li>
            </ul>
          </div>
        </button>
      </td>
    </tr>
  </tbody>
</table>