Tables

Data table

Standard data table with sorting options. Buttons used within these tables should stick to button--small.

Dolores qui Totam quasi Fugiat qui voluptate eius ex occaecati Temporibusquoset Accusantium sunt Account status Actions
Eos ipsum Pariatur vitae facere Est veritatis qui Porro aut nihil
Delete
Minus aut Tenetur deserunt mollitia Quasi officia in Omnis fugit
Delete
Ducimus dolore Accusantium voluptatem maxime Quod rem blanditiis Suscipit quia incidunt
Delete
Modi similique Eveniet maxime magni Omnis et at Dolor occaecati laboriosam
Delete
Ipsum quo Aut alias esse Ipsum recusandae ullam Consequatur dolorem
Delete

Standard sortable data table. Wrapping the table in table-responsive is optional and simply ensures wide tables don't break layout on small devices.

In general data tables should be limited to admin interfaces, which would be less likely to be accessed via mobile devices. They may also be used to display smaller amounts of tabular data where other layout methods don't exist.

The <th> of a sorted header should include aria mark-up: aria-sort="ascending|descending|none|other". You should apply aria-sort to only one header at a time. In the following code the first column header has aria-sort="ascending" and no aria code on any other <th>

<th> is used in rows to help clarify to screen-readers which row the action buttons apply to.

Note: a <th> should not remain empty. According to WAVE, "If the table cell is a header, provide text within the cell that describes the column or row. If the cell is not a header or must remain empty (such as the top-left cell in a data table), make the cell a <td> rather than a <th>."

<!-- START data table component -->
<div class="table-responsive">
  <table>
    <thead>
      <tr>
        <th class="column-sortable" aria-sort="ascending"><a href="#" class="column-sortable__link column-sortable__link--up">Earum aut</a></th>
        <th>Doloremque porro</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Sint eum et quo deserunt soluta</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset Omnis et</a></th>
        <th>Account status</th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Voluptas voluptatem</th>
        <td>Nesciunt et commodi</td>
        <td>Illum aliquid ullam</td>
        <td>Deserunt aut in</td>
        <td><p class="icon-inline--left icon--account-monza">Unverified</p></td>
        <td>
          <div class="buttons">
            <button class="button button--small">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Est rerum</th>
        <td>Reprehenderit consectetur error</td>
        <td>Magni autem eos</td>
        <td><a href="#" title="Test link">Qui officia</a></td>
        <td><p class="icon-inline--left icon--account-monza">Unverified</p></td>
        <td>
          <div class="buttons">
            <button class="button button--small">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>At voluptatem</th>
        <td>Aliquid sed et</td>
        <td>Facere est voluptatibus</td>
        <td>Maxime recusandae in</td>
        <td><p class="icon-inline--left icon--account-dark">Verified</p></td>
        <td>
          <div class="buttons">
            <button class="button button--small">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Dicta magnam</th>
        <td>Odio molestias sit</td>
        <td>Voluptatum consequatur aut</td>
        <td>Dolor architecto at</td>
        <td><p class="icon-inline--left icon--account-monza">Unregistered</p></td>
        <td>
          <div class="buttons">
            <button class="button button--small">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Accusamus molestiae</th>
        <td>Aliquid est eum</td>
        <td>Neque dolor qui</td>
        <td><a href="#" title="Test link">Nemo similique</a></td>
        <td><p class="icon-inline--left icon--account-monza">Unregistered</p></td>
        <td>
          <div class="buttons">
            <button class="button button--small">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- END data table component -->

Data table, responsive list

Adding the class table-responsive--list will render the table as a list at smaller screen widths. The table headers will not be displayed, so this won't be suitable for a table that has sortable columns.

Fugit temporibus Beatae Quasi sint distinctio Temporibusquoset laborum et Actions
Et dolor Enim consectetur repudiandae Voluptatibus sit qui Quia id voluptatem
Autem ex Quia qui expedita Sapiente quo velit Rerum cumque et
Quod voluptas Sit et architecto Sit ipsam consequatur Explicabo nemo velit
Occaecati voluptatem Animi fuga rerum Recusandae illo quo Qui non officiis
Quis optio Distinctio accusamus sint Quia eos facere Architecto aut ducimus
Voluptatem deleniti Doloremque sit et Recusandae quod dolores Adipisci ex rem
Doloremque incidunt Ut velit omnis Quis soluta sunt Cum voluptatibus aut
Est est Eos cum laborum Cumque voluptatem vel Et voluptas est
Pariatur consequatur Iste id aperiam Sint esse dignissimos Qui minus praesentium
Quis ut Saepe ea aut Natus ducimus et Illo omnis provident
Nulla accusamus Deserunt deserunt dolorem Qui ut ipsam Voluptatem quis debitis
Facere eaque Deserunt eos deleniti Et aperiam perspiciatis Et accusamus sapiente
Ab officia Iure est inventore Beatae dolores sequi Tenetur et rem
Impedit maxime Quod deserunt earum Rerum voluptate minus Ex quisquam incidunt
Impedit qui Vel quae illo Et deleniti est Suscipit explicabo dignissimos
Repellendus eos Facilis autem id Quidem quis corrupti Reiciendis dolorum eligendi
Aut quisquam Beatae praesentium eaque Hic qui molestiae Enim eum et
Est sapiente Veniam nihil accusamus Earum dolorum a Dolores saepe expedita
Nam voluptate Voluptatem cum explicabo Nulla et architecto Sed sed sed
Reprehenderit consequatur Tenetur est temporibus Voluptate velit pariatur Eveniet non enim

All cells will need a data-th attribute for the column name. This is used at small screen sizes to identify the cells when displayed as a list.

<!-- START table-data-long-responsive-list component -->
<div class="table-responsive table-responsive--list">
  <table>
    <thead>
      <tr>
        <th class="column-sortable" aria-sort="ascending"><a href="#" class="column-sortable__link column-sortable__link--up">Saepe dolorem</a></th>
        <th>Aut</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Ut magni sed</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset illo a</a></th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <!-- NB: All cells will need a data-th attribute for the column name. -->
        <!-- This is used at small screen sizes to identify the cells when displayed as a list. -->
        <th data-th="Saepe dolorem">Hic magni</th>
        <td data-th="Aut">Debitis facilis enim</td>
        <td data-th="Ut magni sed">Ducimus voluptas officiis</td>
        <td data-th="Temporibusquoset illo a">Libero autem nemo</td>
        <td data-th="Actions">
          <button class="button button--small">Lorem</button>
        </td>
      </tr>
      <tr>
        <!-- NB: All cells will need a data-th attribute for the column name. -->
        <!-- This is used at small screen sizes to identify the cells when displayed as a list. -->
        <th data-th="Saepe dolorem">Dolorem deserunt</th>
        <td data-th="Aut">Voluptas voluptatem quasi</td>
        <td data-th="Ut magni sed">Sapiente adipisci quae</td>
        <td data-th="Temporibusquoset illo a">Fuga ut cupiditate</td>
        <td data-th="Actions">
          <button class="button button--small">Lorem</button>
        </td>
      </tr>
      <tr>
        <!-- NB: All cells will need a data-th attribute for the column name. -->
        <!-- This is used at small screen sizes to identify the cells when displayed as a list. -->
        <th data-th="Saepe dolorem">Et nisi</th>
        <td data-th="Aut">Laboriosam omnis reprehenderit</td>
        <td data-th="Ut magni sed">Aut soluta ut</td>
        <td data-th="Temporibusquoset illo a">Repellendus quaerat dicta</td>
        <td data-th="Actions">
          <button class="button button--small">Lorem</button>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- END table-data-long-responsive-list component -->

Data table, column select

Choose columns to display

Voluptatem perferendis Et al Minima aut accusantium dolorem explicabo eos Nisi sit Dicta ratione Velit quo Quod nam Quis sunt Temporibusquoset Non ab Actions
Maiores et Dolorum doloremque est Adipisci accusamus aut Autem exercitationem tempora Provident et mollitia Ut incidunt quia Harum libero iste Autem similique corporis Voluptatem ea voluptatem
Optio ratione Et laborum aperiam Non sed cupiditate Odit necessitatibus aut Eius corrupti quos Id fugit quia Eveniet et officiis Quod voluptatem quia Ut sunt qui
Quia quisquam Sit eum inventore Natus ea temporibus Ut ut dignissimos Soluta officiis in Corporis nesciunt vero Tempora ex aut Tempora accusamus est Quis et beatae
Quis laudantium Iste sint dolor Quam nihil vero Praesentium illo praesentium In et harum Ducimus doloremque et Eius tempore aspernatur Quae nostrum soluta Placeat est suscipit
Et ut Reiciendis veritatis eaque Ex non at Doloribus molestiae qui Molestias ut ut Temporibus enim nihil Laudantium non porro Quidem ut non Quibusdam rerum natus
Non molestias Aut aperiam repudiandae Ipsum rem ipsa Corporis sit nihil Repellendus ut minima Quam vel quos Iusto maiores quis Dolores autem alias Occaecati quia praesentium

Data table with clickable row highlight

Adding the class .table-responsive--active-row to any <tr> will add a hover highlight to the row and change its cursor to a pointer to indicate that it is a clickable link.
The highlight colour will adopt the scheme colour if used.

Quo et Molestias quis Vitae numquam explicabo qui consequatur aspernatur Temporibusquoset Minima sit Actions
Quis minima Placeat autem illo Ut delectus impedit Et amet perferendis
Delete
Non asperiores Voluptates ut id Optio impedit id Occaecati numquam
Delete
Magnam delectus Natus nulla expedita Consequatur enim unde Maiores vel sint
Delete
Earum facere Eveniet dolores inventore Eligendi aut qui Et officia quo
Delete
Consequuntur adipisci Ut incidunt corrupti Ab ipsam eveniet Ipsa reprehenderit tempora
Delete