Tables

Data table

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

Quia sint Odit exercitationem Et ut error suscipit vero quibusdam Temporibusquoset Nobis quam Actions
Assumenda rerum Quod voluptatem assumenda Ad voluptate sed Aut pariatur nemo
Delete
Vel soluta Amet eos hic Ut nobis sapiente Quo dignissimos
Delete
Nam eligendi Et aut sapiente Eum quia ducimus Maxime id numquam
Delete
Tempora in Necessitatibus accusamus eius Non magni voluptates Minus mollitia veritatis
Delete
Sunt totam Soluta iure sed Et molestias facere Rerum enim
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">Error ullam</a></th>
        <th>Unde corrupti</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Quidem itaque necessitatibus minima fugit cum</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset Distinctio exercitationem</a></th>
        <th>Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>Sint aperiam</th>
        <td>Aut hic sequi</td>
        <td>Consequatur tempora ullam</td>
        <td>Et quia reprehenderit</td>
        <td>
          <div class="buttons">
            <button class="button button--small button--color-light">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Reprehenderit tempora</th>
        <td>Reprehenderit similique omnis</td>
        <td>Molestiae optio magnam</td>
        <td><a href="#" title="Test link">Iure harum</a></td>
        <td>
          <div class="buttons">
            <button class="button button--small button--color-light">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Veniam fuga</th>
        <td>Explicabo aut facere</td>
        <td>In nisi debitis</td>
        <td>Inventore quis adipisci</td>
        <td>
          <div class="buttons">
            <button class="button button--small button--color-light">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Animi molestias</th>
        <td>Illum ut recusandae</td>
        <td>Atque non nam</td>
        <td>Eum consequuntur aspernatur</td>
        <td>
          <div class="buttons">
            <button class="button button--small button--color-light">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Soluta est</th>
        <td>Vitae quisquam eaque</td>
        <td>Quas voluptas iste</td>
        <td><a href="#" title="Test link">Et quibusdam</a></td>
        <td>
          <div class="buttons">
            <button class="button button--small button--color-light">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.

Reprehenderit vel Nisi Praesentium quis vero Temporibusquoset placeat repellendus Actions
Sunt delectus Molestias est saepe Voluptate nemo quis Cum minus eligendi
Quisquam sunt Vel molestias enim Esse cum consequatur Alias dolores aliquam
Rem voluptatibus Corporis quasi tenetur Mollitia atque deserunt Ab similique ex
Rem aperiam Ut voluptas autem Sed nostrum voluptatem Quod alias vitae
Consequatur in Dolores omnis dolor Qui consequuntur nesciunt Molestiae adipisci perferendis
Dolorem qui Culpa omnis dolorem Occaecati impedit eum Itaque omnis et
Aliquid voluptas Tempora distinctio aut Pariatur tempore quae Dignissimos dolorem quas
Accusamus repellendus Aut molestiae ut Dolore non tenetur Aliquam mollitia perspiciatis
Esse quia Consequuntur sapiente velit Dignissimos voluptas et Necessitatibus modi reprehenderit
Qui facilis Et quo pariatur Odio mollitia quos Quia mollitia aut
Iste repellat Ad explicabo labore Quis consequatur aut Sunt quaerat maiores
In pariatur Optio nisi illum Velit et ut Vel et distinctio
Perspiciatis voluptatem Voluptatem molestiae nihil Dolorem facilis exercitationem Omnis iste corrupti
Id dignissimos Voluptatem et nobis Consequatur repellat accusantium Possimus architecto libero
Aut nesciunt Pariatur deserunt qui Non ipsum est Sunt temporibus omnis
Aut velit Dicta repudiandae rerum Ab perspiciatis quos Non molestiae ipsum
Ab quaerat Exercitationem soluta deserunt Sed consequatur pariatur Doloremque necessitatibus doloribus
Sed alias Sint odio magnam Sed quam harum Laborum sapiente voluptas
Est rerum Rerum rerum et Delectus ea saepe Aliquid quia culpa
Sequi voluptate Dolor autem inventore Unde a qui Facere distinctio sit

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">Ullam voluptatem</a></th>
        <th>Temporibus</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Excepturi quasi culpa</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset iste hic</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="Ullam voluptatem">Neque ipsa</th>
        <td data-th="Temporibus">Voluptatem architecto architecto</td>
        <td data-th="Excepturi quasi culpa">Eum consectetur et</td>
        <td data-th="Temporibusquoset iste hic">Nihil sunt sit</td>
        <td data-th="Actions">
          <button class="button button--small button--color-light">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="Ullam voluptatem">Sit fugit</th>
        <td data-th="Temporibus">Ut libero nostrum</td>
        <td data-th="Excepturi quasi culpa">Ex tenetur consequatur</td>
        <td data-th="Temporibusquoset iste hic">Ab voluptates est</td>
        <td data-th="Actions">
          <button class="button button--small button--color-light">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="Ullam voluptatem">Aliquid sint</th>
        <td data-th="Temporibus">Ab voluptas magni</td>
        <td data-th="Excepturi quasi culpa">Qui nihil neque</td>
        <td data-th="Temporibusquoset iste hic">Veritatis quo qui</td>
        <td data-th="Actions">
          <button class="button button--small button--color-light">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 Quisquam temporibus Temporibusquoset Non ab Actions
Fugit dicta Deleniti dolores quia Est tempore delectus Doloremque iusto dolor Nisi maxime quas Consequuntur ut numquam Voluptatem iusto porro Occaecati inventore est Consequuntur sunt rem
Maiores sed Maxime exercitationem minima Nostrum vitae nemo Aperiam perspiciatis eaque Sint inventore iure Aspernatur odit consequatur Nulla soluta ut Quam velit ipsam Libero temporibus dolores
Saepe quo Harum qui id Consequatur atque at Nobis quam vitae Ut sint ea Vel quidem aperiam Sunt aspernatur debitis Tempore quaerat dolor Ut et deleniti
Aperiam accusamus Facilis recusandae possimus Minus corrupti ea Occaecati consequatur optio Illum quaerat facere Qui aliquam non Molestias dolores sunt Tempora sint aut Quia ducimus totam
Perspiciatis minima Ab modi et Unde rerum excepturi Quae itaque pariatur Voluptas iure aut Similique et fugit Magni voluptatem optio Exercitationem odio deserunt Sint ipsum et
Non et Quia incidunt quia Accusantium debitis omnis Vel quam laudantium Hic placeat rerum Totam nemo aperiam Libero voluptatem tempora Neque dolor sed Voluptas aliquid magnam

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.

Quos magni Saepe alias Voluptatem ut repudiandae sint facere labore Temporibusquoset Earum neque Actions
Velit corporis Officia eos in Et iusto odit Et consectetur cupiditate
Delete
Doloremque quia Modi repellendus officia Fugit facilis excepturi Adipisci corrupti
Delete
Molestiae voluptatem Qui quod illo Error perspiciatis vitae Soluta sint quis
Delete
Vitae aliquid Debitis est rerum Dolore esse quo Quia et consectetur
Delete
Quaerat ea A tenetur voluptate Ipsa odit nihil Voluptatem nihil provident
Delete