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 | Unverified |
|
| Rerum porro | Non nemo expedita | Quia quam doloremque | Voluptatem reiciendis | Unverified |
|
| Et quidem | Et fugit accusamus | Porro voluptates ipsam | Non officiis aliquam | Verified |
|
| Laudantium et | Rerum neque ea | Consequuntur corporis recusandae | Et sed molestiae | Unregistered |
|
| Enim ut | Ratione et repellendus | Velit corrupti ea | Similique quia | Unregistered |
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 | Unverified |
Delete |
| Assumenda consequatur | Ea sequi incidunt | Saepe dignissimos temporibus | Tempora id | Unverified |
Delete |
| Iusto eligendi | Qui quam dicta | Officia temporibus voluptas | Molestiae quod magni | Verified |
Delete |
| Nobis voluptas | Sed ipsum autem | Mollitia dicta aut | Sapiente non explicabo | Unregistered |
Delete |
| Aliquid consectetur | Tempore voluptate id | Tempore sit soluta | Et officia | Unregistered |
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.
| Qualification | Requirement | Notes |
|---|---|---|
| UCAS Tariff | 100 Tariff points | From either A level, International Baccalaureate, or Scottish Higher |
| A level | BBB |
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.
| Qualification | Requirement | Notes |
|---|---|---|
| UCAS Tariff | 100 Tariff points | From either A level, International Baccalaureate, or Scottish Higher |
| A level | BBB |
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.
| Qualification | Requirement | Notes |
|---|---|---|
| UCAS Tariff | 100 Tariff points | From either A level, International Baccalaureate, or Scottish Higher |
| A level | BBB |
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%!
| Qualification | Requirement | Notes |
|---|---|---|
| UCAS Tariff | 100 Tariff points | From either A level, International Baccalaureate, or Scottish Higher |
| A level | BBB |
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.
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
| 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 | |
| Fugit dolores | Et repellat repellendus | Provident aut animi | Aut explicabo | |
| Placeat cupiditate | Quos suscipit explicabo | Alias in quia | Dolorem ut dolores | |
| Maxime qui | Dolores temporibus aperiam | Debitis necessitatibus cumque | In consequatur autem | |
| Veniam itaque | Ut est corporis | Quo aliquid sit | Ut numquam vero |
