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).

Reiciendis ad Facere omnis
Cumque blanditiis
Temporibusquoset Account status Actions
Ut beatae Quasi voluptatibus ut Suscipit sunt magni Sunt ut beatae
Delete
Dolores reprehenderit Eum officia sed Ut veniam quos Quia aut
Delete
Eum est Ipsam quibusdam sit Voluptate consequatur qui At exercitationem dignissimos
Delete
Nemo rerum Consequatur odio culpa Unde optio consectetur Id molestiae quia
Delete
Sed suscipit Odit sit qui Quod soluta molestiae Culpa autem
Delete
Quod et Aut repellendus cupiditate Quis aut dignissimos Omnis eum

Selected

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">Eaque incidunt</a></th>
        <th>Expedita quos
        <!-- START form-item-text_field component -->
        <div class="form-item">
            <label for="text_field_01" class="hide-element">Search column</label>
            <input type="text" id="text_field_01">
        </div>
        <!-- END form-item-text_field component -->
        </th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Dolore aut</a>
        <!-- START form-item-text_field component -->
        <div class="form-item">
            <label for="text_field_02" class="hide-element">Search column</label>
            <input type="text" id="text_field_02">
        </div>
        <!-- END form-item-text_field component -->
        </th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset</a></th>
        <th>Account status</th>
        <th class="column-actions-heading">Actions</th>
      </tr>
    </thead>
    <tbody>
      <tr class="table-row-disabled">
        <th>Accusantium facilis</th>
        <td>Minus esse blanditiis</td>
        <td>Reiciendis autem cum</td>
        <td>Modi explicabo porro</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>Voluptatum asperiores</th>
        <td>Temporibus illo id</td>
        <td>Perspiciatis consequatur et</td>
        <td><a href="#" title="Test link">Laudantium sit</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>Voluptatem voluptatem</th>
        <td>Sunt accusantium illum</td>
        <td>Molestiae molestias iusto</td>
        <td>Quod non sunt</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>Velit tenetur</th>
        <td>Eius sit et</td>
        <td>Odit cum vitae</td>
        <td>Eos quia deserunt</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>Quis et</th>
        <td>Ut ut et</td>
        <td>Veniam qui culpa</td>
        <td><a href="#" title="Test link">Qui nam</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>
      <tr>
        <th>Consectetur odit</th>
        <td>Ducimus enim eos</td>
        <td>Corrupti commodi doloribus</td>
        <td><a href="#" title="Test link">Qui non</a></td>
        <td><p class="icon-inline--left icon--account-monza">Unregistered</p></td>
        <td class="items-inline-center" data-th="Actions">
          <p class="icon--check-dark icon-inline--larger icon-hide-text margin-reset">Selected</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
<!-- END data table component -->

Table with striped rows

Adding the class table--striped-rows will make the rows striped.

Deleniti dolorem autem Illum velit voluptas Molestias distinctio eligendi Delete
Eius magnam qui Ratione eum rerum Eius consequatur Delete
Modi occaecati ipsum Pariatur veritatis cumque Ipsum natus non Delete
Natus rerum nulla Ea dolores quia Non qui minima Delete
Sint sit ipsam Autem beatae enim Voluptatem vitae Delete

Table with fixed columns width

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

Incidunt nostrum Nemo et Unde minus incidunt non aspernatur sed Temporibusquoset Odio illo Account status Actions
Mollitia nihil Hic occaecati qui Velit necessitatibus illum Dolor distinctio mollitia Delete
Et voluptate Et omnis sit Est laboriosam doloremque Aut ipsum Delete
Sit eius Et voluptas deserunt Molestiae inventore incidunt Voluptatem voluptatibus quisquam Delete
Aut rerum Architecto ut nulla Quidem amet in Et deserunt nemo Delete
Vitae quia Recusandae optio odio Sint doloribus ducimus Voluptatem iure 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 level

Auto width table

We can add table-auto-width to the surrounding div, so the table sizes itself and is no longer 100% of the page width

QualificationRequirementNotes
UCAS Tariff100 Tariff pointsNone
A levelBBB

Table with row underlining

We can add row-underlining to the table

QualificationRequirementNotes
UCAS Tariff100 Tariff pointsNone
A levelBBB
HNCDD

Snug table

We can add table-snug to the surrounding div to reduce the vertical padding in cells.

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 centre

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

In the following example table-col2-centre 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.

Available widths are: 10, 20, 25, 30, 33, 40, 50, 60, 66, 70, 75, 80, 90.

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

On small screens the widths will revert to auto

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

No table row highlight on hover

We can remove the row highlight on hover for small tables, usually when used in conjunction with table-borderless and table-clear.
A true data table (with lots of numbers, statuses, rows, etc.) needs highlighting.

Add the class table-no-row-hover-highlight 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

Recusandae incidunt Quod Illum fugit ad Temporibusquoset non in Actions
Beatae laboriosam Sapiente sint sit Mollitia consequatur voluptatem Enim unde deleniti
Esse impedit Totam cumque nesciunt Culpa nesciunt accusantium Quos sit laudantium
Accusamus enim Ea assumenda at Dolorum culpa voluptate Rem itaque fugit
Aliquid voluptatum Voluptatem et fugiat Et cumque nam Architecto rem cum
Maiores ipsum Et accusamus dolorem Cum quia iste Eveniet dicta sunt
Aut quo Est repellendus mollitia Non sint atque Illo dolorum magni
Fugit quos Est eius nam Ea minus debitis Commodi nihil autem
Eos voluptatem Architecto dolorum deserunt Vitae nostrum at Soluta velit perferendis
Eos eos Atque fuga non Recusandae laudantium ex Accusantium voluptatum voluptatem
Autem quo Ut sint veniam Tenetur repellat rerum Quis dolor minus
Dolor repellendus Sed iure maxime Ut quasi qui Impedit nulla qui
Illo laboriosam Est enim ut Doloribus architecto ut Omnis occaecati earum
Neque aut Dolorem quibusdam animi Qui aut vitae Sunt quo eum
Non quisquam Dignissimos rerum et Facilis maxime ex Fugiat incidunt non
Dicta veritatis Nihil cumque enim Nulla quia architecto Officia itaque aut
Molestiae magni Totam voluptatem non Autem ipsam non Aut qui odit
Dolor molestiae Qui veritatis autem Non accusantium sint Aut voluptas nostrum
Asperiores accusantium Id corrupti earum Labore in at Voluptatem animi natus
Illo ipsam Non deserunt mollitia Dolor unde architecto Vel laudantium est
Excepturi fugit Voluptatibus iure pariatur Architecto dolor ipsum Eveniet earum vel

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">Voluptatum qui</a></th>
        <th>Deleniti</th>
        <th class="column-sortable"><a href="#" class="column-sortable__link">Praesentium distinctio est</a></th>
        <th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset dolore veritatis</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="Voluptatum qui">Culpa quae</th>
        <td data-th="Deleniti">Dolorum repellendus molestiae</td>
        <td data-th="Praesentium distinctio est"><a href="#">Odit provident in</a></td>
        <td data-th="Temporibusquoset dolore veritatis">Aliquid maiores quo</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="Voluptatum qui">Id quibusdam</th>
        <td data-th="Deleniti">Eum magnam aliquid</td>
        <td data-th="Praesentium distinctio est"><a href="#">Assumenda aliquid maiores</a></td>
        <td data-th="Temporibusquoset dolore veritatis">Asperiores minus provident</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="Voluptatum qui">Consequuntur nobis</th>
        <td data-th="Deleniti">Et vel sit</td>
        <td data-th="Praesentium distinctio est"><a href="#">Qui quas excepturi</a></td>
        <td data-th="Temporibusquoset dolore veritatis">Nemo natus officia</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 Nihil aliquid Temporibusquoset Non ab Actions
Repudiandae sed Tenetur ut corrupti Non totam perferendis Alias cumque veritatis Veniam consectetur voluptates Voluptas eos aut Praesentium ea voluptatum Explicabo cumque sunt Debitis nam est
Qui veritatis Facere exercitationem mollitia Enim suscipit ipsam Voluptatum fuga quidem Eligendi rem velit Qui atque soluta Omnis autem facilis Est rem ut Est eos atque
Et porro Eum officiis dicta Enim quo deleniti Sit quia numquam Praesentium veniam sed Maxime quos numquam Molestiae reprehenderit numquam Temporibus consectetur voluptas Ut sed esse
Illum nam Ipsam quibusdam aut Eveniet blanditiis et Non et ut Aut amet qui Sequi sunt rerum Rem porro est Eos eos sed Quia repellendus repudiandae
Et laboriosam Ullam molestiae quia Reprehenderit aut est Omnis ut molestiae Expedita aspernatur dolores Id et quo Illo cupiditate sapiente Velit et sequi Voluptatum commodi possimus
Et necessitatibus Rerum et et Eveniet repellendus aut Veniam velit qui Perferendis nemo architecto Ut voluptatem et Accusamus laudantium placeat Necessitatibus numquam sint Aut alias natus

Data table with clickable row highlight

Adding the class .table__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.

Tenetur sunt Commodi odio Fuga nostrum ullam et odio ipsum Temporibusquoset Beatae corrupti Actions
Minus quam Eveniet placeat velit Rerum voluptatibus explicabo Reiciendis voluptatem qui Delete
Porro aperiam
Vel facere
Exercitationem laborum voluptatibus Iure doloribus Delete
Molestiae enim
Rerum aliquid
Quia aperiam quam Fugit dicta aut Delete
Omnis necessitatibus Velit aspernatur dolor Et et provident Nesciunt assumenda qui Delete
A occaecati Sed ut est Rerum totam labore Saepe aspernatur doloribus Delete

Data table responsive list with clickable row highlight

Qualification Start date Study mode Duration Location Actions
Doctor of Philosophy - PhD 10/2018
Voluptates asperiores
48 Months Main Site
Doctor of Philosophy - PhD 11/2018
Nulla necessitatibus
48 Months Main Site
Doctor of Philosophy - PhD 12/2018 Full-time 48 Months Main Site

Data table with selected row

Adding the class .table__selected-row to any <tr> will highlight the row.

Culpa nihil Aut tenetur Quo repellat quia numquam architecto excepturi Temporibusquoset Et cumque Actions
Nostrum et Officia nam dolorem Ducimus sed asperiores Saepe est alias Delete
Iusto eaque
Et sit
Qui totam tenetur Ut velit Delete
In velit
Omnis minima
Omnis mollitia totam Ipsa facere vel Delete
Dolorem voluptate Ipsa ut qui Saepe quam nihil Alias asperiores rerum Delete
Architecto expedita Sit quas velit Non hic nisi Laudantium omnis voluptas Delete

Data table with clickable row highlight and selected row

Adding the class .table__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.

Adding the class .table__selected-row to any <tr> will highlight the row.

Et facere Modi qui Dolorem blanditiis consectetur reiciendis consectetur dicta Temporibusquoset Et quam Actions
Omnis velit Ducimus sapiente quo Aut labore maxime Voluptas omnis dolores Delete
Odio dolor
Et ea
Corporis est qui Placeat fuga Delete
Corporis accusamus
Voluptas nemo
Et totam nihil Maiores ut quo Delete
Qui maiores Debitis eius nemo Rerum ut blanditiis Sunt vel exercitationem Delete
In doloribus Natus et explicabo Voluptatem dignissimos porro Quo suscipit dicta Delete