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).
| Excepturi exercitationem | Voluptas occaecati | Sed sed distinctio eos necessitatibus nemo | Temporibusquoset Odit assumenda | Account status | Actions |
|---|---|---|---|---|---|
| Quia debitis | Laborum aut modi | Nisi maxime minus | Exercitationem ex eligendi | Unverified |
|
| Unde sunt | Rerum sed atque | Iusto quaerat omnis | Voluptas voluptas | Unverified |
|
| Id modi | Aut molestias unde | Sint sed ut | Laudantium magni dolor | Verified |
|
| Quae sunt | Est voluptas nisi | Sunt enim nobis | Hic occaecati accusamus | Unregistered |
|
| Rerum voluptates | Minus odio voluptatem | Rerum laudantium optio | Quas non | 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">Dolorem fugiat</a></th>
<th>Autem qui</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Reiciendis et provident voluptate labore nam</a></th>
<th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset Ipsam harum</a></th>
<th>Account status</th>
<th class="column-actions-heading">Actions</th>
</tr>
</thead>
<tbody>
<tr class="table-row-disabled">
<th>Eum hic</th>
<td>Quo consequuntur consectetur</td>
<td>Qui et ut</td>
<td>Voluptatibus ut nihil</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>Sequi ad</th>
<td>Ea vitae labore</td>
<td>Ut rem ullam</td>
<td><a href="#" title="Test link">Et 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>Quia ullam</th>
<td>Id ea fugiat</td>
<td>Amet autem facilis</td>
<td>Rerum eius facilis</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>Aperiam nobis</th>
<td>Qui quibusdam quasi</td>
<td>Minus delectus rem</td>
<td>Exercitationem repudiandae cumque</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>Praesentium reiciendis</th>
<td>Deleniti cupiditate deserunt</td>
<td>Enim et expedita</td>
<td><a href="#" title="Test link">Iusto magnam</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.
| Similique est | In debitis | Deleniti quae aliquid labore voluptatem omnis | Temporibusquoset Ea maiores | Account status | Actions |
|---|---|---|---|---|---|
| Dolor blanditiis | Rerum officiis eos | Architecto iure autem | Consequuntur voluptatibus laborum | Unverified |
Delete |
| Facere modi | Molestiae vel exercitationem | Aut repudiandae quo | At quos | Unverified |
Delete |
| Repellendus vel | Officia et delectus | Soluta omnis vero | Illo non laboriosam | Verified |
Delete |
| Iusto dolores | Minus ab eos | Qui libero totam | Et dolorem similique | Unregistered |
Delete |
| Dolores tempora | Sed hic enim | Ab similique ullam | Consequuntur dignissimos | 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 |
Snug table
We can add table-snug to the surrounding div to reduce the vertical padding in cells.
| 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
| Velit consectetur | Quia | Et quam eos | Temporibusquoset magnam ducimus | Actions |
|---|---|---|---|---|
| Neque totam | Exercitationem delectus velit | Non dicta id | Aut dignissimos est | |
| Necessitatibus itaque | Dolor ipsam explicabo | Quibusdam quaerat laboriosam | Aut voluptatem magni | |
| Vero non | Iusto consequuntur accusamus | Autem veniam rerum | Iure at quae | |
| Perferendis voluptas | Quia voluptatum repellat | Iure aut in | Dolores eaque aut | |
| Mollitia ea | Laborum laborum quaerat | Provident officiis minus | Fugit harum provident | |
| Quisquam aliquid | Vel sint et | Rerum omnis enim | Commodi et facilis | |
| Quidem dolore | Iure sed alias | Porro ea quidem | Consequuntur non est | |
| Totam nulla | Culpa dicta sit | Enim et rerum | Quasi officia eos | |
| Porro veritatis | Beatae minima ut | Excepturi ullam autem | Dicta et totam | |
| Assumenda eius | Hic libero consequatur | Enim sunt et | Sit ut quo | |
| Ut reprehenderit | Quia voluptate voluptate | Nulla nostrum et | Fugit possimus minus | |
| Incidunt dolorem | Quis eum tenetur | Iste atque minima | Quis est sint | |
| Ipsum necessitatibus | Molestiae est mollitia | Omnis reprehenderit non | Explicabo quisquam et | |
| Laboriosam facere | Id unde ut | Excepturi ipsam nihil | Et odit in | |
| Labore aperiam | Esse molestiae earum | Itaque aut dolores | Consequatur vitae magni | |
| Est illo | Architecto eaque aperiam | Unde facilis aspernatur | Ducimus voluptates et | |
| Voluptatem eius | Qui repudiandae sunt | Quos reiciendis magni | Eum neque optio | |
| Libero ratione | Eaque porro consequatur | Eveniet et quis | Facilis tempore non | |
| Fugit ut | Deserunt a eos | Porro esse non | Facere saepe repellendus | |
| Cumque itaque | Ut et iusto | Ipsa pariatur vel | Itaque voluptatem tenetur |
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">Facere officiis</a></th>
<th>Consequatur</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Sapiente ea aut</a></th>
<th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset nihil sunt</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="Facere officiis">Dolorem repudiandae</th>
<td data-th="Consequatur">Qui repellendus perspiciatis</td>
<td data-th="Sapiente ea aut">Molestiae et quod</td>
<td data-th="Temporibusquoset nihil sunt">Id voluptate voluptates</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="Facere officiis">Numquam unde</th>
<td data-th="Consequatur">Velit velit omnis</td>
<td data-th="Sapiente ea aut">Expedita molestiae culpa</td>
<td data-th="Temporibusquoset nihil sunt">A animi a</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="Facere officiis">Totam cum</th>
<td data-th="Consequatur">Veritatis ad sint</td>
<td data-th="Sapiente ea aut">Dolores sit atque</td>
<td data-th="Temporibusquoset nihil sunt">Quidem qui autem</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 | At dolorem | Temporibusquoset Non ab | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Et cumque | Id unde consequuntur | Praesentium quia neque | Reiciendis et ut | Neque nesciunt incidunt | Rerum dolores aut | Deleniti doloribus aliquid | Sapiente fuga architecto | Non iure nihil | |
| Consequatur omnis | Repellendus non voluptatum | Reiciendis unde quos | Doloremque quis omnis | Accusamus et assumenda | Aliquid quia odit | Perferendis quis incidunt | Et vel ex | Velit dolorum nobis | |
| Debitis dolorem | Temporibus consequatur vel | Incidunt suscipit commodi | Fuga alias ut | Quis temporibus laborum | Suscipit corrupti accusamus | Consectetur eos est | Autem in delectus | Enim sit repellat | |
| Et ut | Beatae odit architecto | Deleniti sequi non | At nihil nostrum | Tenetur occaecati perferendis | Saepe suscipit sapiente | Earum explicabo accusantium | Sunt cupiditate neque | Aliquam quis in | |
| Aut fugiat | Voluptatem rem possimus | Aut quas est | Rerum esse ut | Eveniet quae quia | Officiis qui temporibus | Illo dolor et | Fuga officiis sit | Ab officiis dolores | |
| Odio voluptas | Libero blanditiis autem | Perspiciatis eos earum | Exercitationem consectetur unde | Nisi quasi reiciendis | Non iusto voluptatibus | Exercitationem ipsam et | Velit sint temporibus | Vitae eum nostrum |
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.
| Omnis numquam | Voluptatem a | Ipsa dolorem modi in ullam ea | Temporibusquoset Maiores nihil | Actions |
|---|---|---|---|---|
| Ipsum quaerat | Aliquam sint laborum | Quis tenetur voluptates | Saepe nisi eligendi | Delete |
| Accusantium rerum | Ut eligendi omnis | Nobis qui animi | Dignissimos perspiciatis | Delete |
| Doloribus hic | Nobis iure alias | Vitae nobis animi | Rerum laborum saepe | Delete |
| Similique nihil | Quo nihil molestias | Voluptatem et facilis | Distinctio velit nobis | Delete |
| Tempora sit | Quibusdam expedita libero | Molestias rerum corrupti | Molestias ipsum est | Delete |