Tables

Data table

Standard data table with sorting options.

Buttons used within these tables should stick to button--small.

The td containing any buttons can have data-th="Actions" to stop the buttons wrapping. The heading of the buttons column can have the class column-actions-heading to hide the 'Actions' heading text (this text will still be available to screen readers).

Debitis totam Doloribus et Recusandae odio accusantium voluptas id ipsam Temporibusquoset Voluptas totam Account status Actions
Error voluptatum Rerum quia qui Nesciunt totam perspiciatis Est labore voluptatem
Delete
Rerum porro Non nemo expedita Quia quam doloremque Voluptatem reiciendis
Delete
Et quidem Et fugit accusamus Porro voluptates ipsam Non officiis aliquam
Delete
Laudantium et Rerum neque ea Consequuntur corporis recusandae Et sed molestiae
Delete
Enim ut Ratione et repellendus Velit corrupti ea Similique quia
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">Dolor ab</a></th>
        <th>Animi eos</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Voluptatum ratione autem consequatur ipsum excepturi</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset Et voluptatem</a></th>
        <th>Account status</th>
        <th class="column-actions-heading">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-row-disabled">
        <th>Voluptas doloremque</th>
        <td>Odit et voluptates</td>
        <td>Vel voluptas molestias</td>
        <td>Nesciunt quis voluptates</td>
        <td><p class="icon-inline--left icon--account-monza">Unverified</p></td>
        <td data-th="Actions">
          <div class="buttons">
            <button class="button button--small" disabled>Edit</button>
            <a href="#" class="button button--small disabled" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Qui possimus</th>
        <td>Tempora id sed</td>
        <td>Nesciunt maxime nam</td>
        <td><a href="#" title="Test link">Voluptatem voluptates</a></td>
        <td><p class="icon-inline--left icon--account-monza">Unverified</p></td>
        <td data-th="Actions">
          <div class="buttons">        
            <button class="button button--small">Edit</button>
            <a href="#" class="button button--small" role="button">Delete</a>         
          </div>
        </td>
      </tr>
      <tr class="table-row-disabled">
        <th>Animi rem</th>
        <td>Quis deleniti enim</td>
        <td>Quis excepturi voluptatem</td>
        <td>Sed accusamus quia</td>
        <td><p class="icon-inline--left icon--account-dark">Verified</p></td>
        <td data-th="Actions">
          <div class="buttons">
            <button class="button button--small" disabled>Edit</button>
            <a href="#" class="button button--small disabled" role="button">Delete</a>
          </div>
        </td>
      </tr>
      <tr>
        <th>Nesciunt officia</th>
        <td>Suscipit quasi doloribus</td>
        <td>Ut saepe non</td>
        <td>Porro saepe alias</td>
        <td><p class="icon-inline--left icon--account-monza">Unregistered</p></td>
        <td data-th="Actions">
          <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>Laboriosam error</th>
        <td>Autem debitis adipisci</td>
        <td>Dolores ut illo</td>
        <td><a href="#" title="Test link">Id culpa</a></td>
        <td><p class="icon-inline--left icon--account-monza">Unregistered</p></td>
        <td data-th="Actions">
          <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 -->

Table with fixed columns width

Adding the class table--fixed-column-width will make the columns equal width - this can look neater.

Neque molestias Qui aliquid Quia adipisci rerum earum voluptate aut Temporibusquoset Veniam molestiae Account status Actions
Nihil amet Et totam dolorum Dolores id omnis Velit placeat nesciunt Delete
Assumenda consequatur Ea sequi incidunt Saepe dignissimos temporibus Tempora id Delete
Iusto eligendi Qui quam dicta Officia temporibus voluptas Molestiae quod magni Delete
Nobis voluptas Sed ipsum autem Mollitia dicta aut Sapiente non explicabo Delete
Aliquid consectetur Tempore voluptate id Tempore sit soluta Et officia Delete

Finer control of a table

There are some classes that in combination can give you a lot more control of how your table looks.

Borderless table

We can add table-borderless to the surrounding div.

QualificationRequirementNotes
UCAS Tariff100 Tariff pointsFrom either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Bold text in a column

We can add a class to make text bold in a specific column. This class is added to the surrounding div.

In the following example table-col2-bold had been added to bold the text in the second column.

QualificationRequirementNotes
UCAS Tariff100 Tariff pointsFrom either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Align a column's text to the right

We can add a class to align the text to the right in a specific column.

In the following example table-col1-right had been added to right align the text in the first column.

QualificationRequirementNotes
UCAS Tariff100 Tariff pointsFrom either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Control column widths by %

We can state the percentage widths of the columns by attaching classes to tds.

In the following example column-width--20pc had been added to all the tds that make up the first and second columns. The class column-width--60pc had been added to all the tds that make up the third column.

It's a good idea for the tds in a row to add up to 100%!

QualificationRequirementNotes
UCAS Tariff 100 Tariff points From either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Hide table head row

We can hide the top row if the columns are self-explanatory. They will still appear to screen readers.

We do this by adding the class table-hide-head-row to the div surrounding the table.

QualificationRequirementNotes
UCAS Tariff 100 Tariff points From either A level, International Baccalaureate, or Scottish Higher
A levelBBB

Data table, responsive list

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

This table will break to a list view on smaller devices. If you would like it to break sooner you can add the class table-responsive--list--break-at-medium

Natus iste Ad Aperiam consequatur itaque Temporibusquoset quas officia Actions
Provident non Hic nam architecto Voluptate alias perferendis Et exercitationem soluta
Aspernatur quia Aperiam ut laboriosam Aspernatur consequatur ipsa Ducimus magnam ut
Ullam quidem Beatae assumenda aperiam Placeat quia cum Rerum non consequatur
Enim delectus Accusamus numquam tempore Mollitia ex non Rerum illo aliquid
Est illo Molestias velit ipsum Molestias quisquam quae Et deserunt eos
Ea aspernatur Nam consequatur velit Quibusdam molestiae tempore Adipisci quam accusantium
Deleniti rem Eum perspiciatis autem Molestiae suscipit earum Rerum ea et
Ut illo Fuga est et Et exercitationem corrupti Accusamus rerum inventore
Eius atque Porro vitae commodi Vero cupiditate et Voluptates similique commodi
Nihil sed Deserunt nulla aspernatur Rerum ut nobis Sapiente amet sunt
Facilis totam Nihil quos accusantium Dicta ullam hic Molestiae quo aut
Doloremque corporis Et quia modi Qui ratione minima Sed eveniet sed
Quidem saepe Reprehenderit molestiae ducimus Ad optio odio Cumque perspiciatis sunt
Velit dolor Illo in vero Sunt sit accusamus Vel voluptatem expedita
Voluptates voluptatem Qui qui aperiam Sed veritatis doloremque Cumque autem aliquid
Qui dolores Sint commodi ipsum Sed sed animi Voluptatibus nihil reiciendis
Non et Corporis et et Sapiente rerum est Excepturi provident doloremque
Eos reiciendis Voluptatem perferendis sit Consequatur eum provident Vel ea rerum
Ut iste Et dolores aut Animi harum quisquam Ullam tempora architecto
Harum totam Doloremque corporis vitae Possimus ratione animi Accusantium sint distinctio

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">Deserunt dolor</a></th>
        <th>Asperiores</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Repudiandae modi repudiandae</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset iure repudiandae</a></th>
        <th class="column-actions-heading">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="Deserunt dolor">Aperiam alias</th>
        <td data-th="Asperiores">Error veniam hic</td>
        <td data-th="Repudiandae modi repudiandae">Odit provident aut</td>
        <td data-th="Temporibusquoset iure repudiandae">Perferendis tempora ut</td>
        <td data-th="Actions">
          <button class="button button--small">View</button>
          <button class="button button--small">Delete</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="Deserunt dolor">Reprehenderit maiores</th>
        <td data-th="Asperiores">Quia omnis quasi</td>
        <td data-th="Repudiandae modi repudiandae">Incidunt voluptate nisi</td>
        <td data-th="Temporibusquoset iure repudiandae">Quibusdam eaque excepturi</td>
        <td data-th="Actions">
          <button class="button button--small">View</button>
          <button class="button button--small">Delete</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="Deserunt dolor">Rerum voluptas</th>
        <td data-th="Asperiores">Ut consectetur ipsum</td>
        <td data-th="Repudiandae modi repudiandae">Quo in possimus</td>
        <td data-th="Temporibusquoset iure repudiandae">Totam rem beatae</td>
        <td data-th="Actions">
          <button class="button button--small">View</button>
          <button class="button button--small">Delete</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 Eum consectetur Temporibusquoset Non ab Actions
Doloremque velit Quis blanditiis est Est perspiciatis odit Saepe tempora dolorum Perferendis quod sapiente Rerum quos reiciendis Quos dolorem iusto Voluptatibus sed nulla Vel accusamus vero
Labore libero Repellat ea repudiandae Et perspiciatis et Ipsum maiores ea Qui sit alias Qui maiores autem Neque optio voluptatibus Sunt ad praesentium Rerum voluptatibus quisquam
Eos omnis Nisi in quo Reprehenderit consequatur cumque Molestiae aut porro Praesentium placeat voluptatem Eos perspiciatis facilis Error nihil aut Maiores ullam adipisci Corrupti voluptatem voluptatem
Consequatur rerum Ut est ab Et repellendus hic Illum quibusdam et Molestiae laboriosam hic Reiciendis perferendis totam Culpa et autem Laboriosam quisquam repudiandae Molestiae molestias natus
Omnis sequi Possimus voluptas nesciunt Soluta modi et Sint praesentium culpa Nam alias asperiores Aut voluptate modi Animi dolor dolor Error quibusdam aliquid Impedit rerum vel
Sit ut Id natus delectus Earum natus officia Possimus dignissimos voluptatem Consectetur temporibus voluptatem Dolor tempore vero Ex dolorum debitis Aut sit perferendis Deserunt reiciendis dolores

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.

Iste nihil Ab libero Enim in aliquam voluptas sint voluptas Temporibusquoset Accusamus ut Actions
Sunt quo Similique ullam est Ad consequuntur est Repellendus velit a
Delete
Fugit dolores Et repellat repellendus Provident aut animi Aut explicabo
Delete
Placeat cupiditate Quos suscipit explicabo Alias in quia Dolorem ut dolores
Delete
Maxime qui Dolores temporibus aperiam Debitis necessitatibus cumque In consequatur autem
Delete
Veniam itaque Ut est corporis Quo aliquid sit Ut numquam vero
Delete