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).
Ratione voluptatem | Maiores voluptatem | Praesentium ut asperiores voluptas sed dolorem | Temporibusquoset Nihil voluptas | Account status | Actions |
---|---|---|---|---|---|
Omnis autem | Ea quo et | Doloribus blanditiis et | Ipsa dolore vel | Unverified |
|
Veniam exercitationem | Architecto autem quibusdam | Deleniti laboriosam et | Illum minima | Unverified |
|
Quae et | Omnis consequatur iure | Sint distinctio nobis | Itaque modi non | Verified |
|
Doloribus corrupti | Maiores fugit et | Dolores aut voluptatem | Et sit consequatur | Unregistered |
|
Soluta non | Architecto porro quis | In et molestiae | Sunt cupiditate | 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">Voluptas voluptas</a></th>
<th>Deleniti autem</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Nobis qui rem iusto doloribus cum</a></th>
<th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset Quo impedit</a></th>
<th>Account status</th>
<th class="column-actions-heading">Actions</th>
</tr>
</thead>
<tbody>
<tr class="table-row-disabled">
<th>Quisquam facere</th>
<td>Explicabo delectus rem</td>
<td>Perferendis quia aspernatur</td>
<td>Voluptatem sed suscipit</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 alias</th>
<td>Ipsum quia amet</td>
<td>Consequatur quia nulla</td>
<td><a href="#" title="Test link">Qui minima</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>Deleniti sunt</th>
<td>Quas eos tempora</td>
<td>Et repellendus quisquam</td>
<td>Eveniet et velit</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>Enim quis</th>
<td>Repellat veritatis occaecati</td>
<td>Soluta eligendi aut</td>
<td>Praesentium ipsa sequi</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>Molestiae est</th>
<td>Earum pariatur eos</td>
<td>Deserunt vel quae</td>
<td><a href="#" title="Test link">Consectetur temporibus</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.
Tempora temporibus | Quibusdam est | Dicta quia ut hic ex molestiae | Temporibusquoset Praesentium voluptatem | Account status | Actions |
---|---|---|---|---|---|
Et et | Enim eum quibusdam | Nemo iste dolores | Enim deleniti voluptas | Unverified |
Delete |
Sint ut | Tempore qui est | Et quod in | Reprehenderit non | Unverified |
Delete |
Porro doloribus | Eius qui rem | Omnis quae dolores | Aut minus quisquam | Verified |
Delete |
Incidunt voluptatem | Libero placeat repudiandae | Voluptatibus et dolores | Tempore aliquam sit | Unregistered |
Delete |
Omnis inventore | Expedita dolorem minus | Sed voluptates libero | Sed vitae | 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
Veniam eligendi | Illum | Dignissimos laborum in | Temporibusquoset aut et | Actions |
---|---|---|---|---|
Sunt aut | Iure deleniti beatae | Enim consectetur corrupti | Architecto assumenda laborum | |
Ratione repellat | Assumenda in aperiam | Perferendis eos voluptate | Fugit exercitationem eos | |
Nostrum cum | Id minima nostrum | Aut est explicabo | Nemo voluptatem sed | |
Fuga doloremque | Rerum sit vel | Exercitationem autem nihil | Vitae maiores molestias | |
Deserunt impedit | Similique deleniti ex | Quia sunt voluptas | Iure repellat numquam | |
Rerum deleniti | Omnis quaerat quis | Earum enim sint | Et et repellendus | |
Sit reiciendis | Odio quia aut | Aut natus ipsum | Nesciunt et et | |
Qui blanditiis | Eum non voluptas | Sint sit velit | Sapiente eos et | |
Praesentium necessitatibus | Rerum sint magnam | Magnam reprehenderit libero | Ut blanditiis distinctio | |
Fugit eos | Molestiae veniam ut | Id at unde | Ea eos in | |
Harum voluptatibus | Fugiat omnis praesentium | Molestiae quis est | Et maiores sunt | |
Aut consequatur | Corporis velit nisi | Temporibus molestiae amet | Voluptas quibusdam voluptatibus | |
Nemo laborum | Et harum blanditiis | Laudantium porro est | Fugiat ut enim | |
Officia et | Nobis corrupti tempore | Labore fugit quos | Consequatur et voluptatem | |
Nemo soluta | Repellat quia suscipit | Atque animi vel | Delectus praesentium unde | |
Quod est | Dolores ut voluptatem | Repellat fuga officia | Quaerat excepturi eaque | |
Dolorum maxime | Nisi dolorum quis | Numquam quo reiciendis | Explicabo ut vel | |
Sit quo | Et animi ut | Et quibusdam debitis | Consequuntur est ducimus | |
Vel odit | Nulla quas temporibus | Ut veritatis dolor | Ullam et doloremque | |
Accusantium dicta | Facere ratione sunt | Minus et expedita | Vero magnam omnis |
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">Est dicta</a></th>
<th>Placeat</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Quibusdam sint impedit</a></th>
<th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset corrupti architecto</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="Est dicta">Omnis suscipit</th>
<td data-th="Placeat">Suscipit distinctio nihil</td>
<td data-th="Quibusdam sint impedit">Reprehenderit ducimus et</td>
<td data-th="Temporibusquoset corrupti architecto">Corporis voluptate voluptatem</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="Est dicta">Velit eum</th>
<td data-th="Placeat">Quae ullam placeat</td>
<td data-th="Quibusdam sint impedit">Praesentium ea sint</td>
<td data-th="Temporibusquoset corrupti architecto">Atque quo nobis</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="Est dicta">Tempore natus</th>
<td data-th="Placeat">Voluptatum accusamus et</td>
<td data-th="Quibusdam sint impedit">Beatae minima aliquam</td>
<td data-th="Temporibusquoset corrupti architecto">Tempora repudiandae doloribus</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 | Illum occaecati | Temporibusquoset Non ab | Actions |
---|---|---|---|---|---|---|---|---|---|
Quod eos | Possimus qui illum | Voluptatem soluta porro | Quibusdam modi voluptatem | Animi autem et | Inventore dolor ut | Quidem vel voluptatem | Sit aliquam quos | Omnis modi eos | |
Enim debitis | Rerum quidem eum | Nesciunt velit praesentium | Asperiores nihil repudiandae | Deserunt qui et | Et impedit sint | Rerum aut et | Neque ducimus eos | Laborum quaerat neque | |
Sed consequuntur | Incidunt dolorum est | Debitis et est | Odio deserunt hic | Nihil tenetur inventore | Corrupti eligendi asperiores | Velit excepturi ut | Harum sit quibusdam | Omnis esse optio | |
Magnam eos | Nihil dignissimos harum | Optio reiciendis et | Deleniti voluptatibus deserunt | Est reprehenderit dolores | Alias quaerat perferendis | Commodi a delectus | Ex omnis illum | Cupiditate pariatur tempore | |
Ex et | Quia eligendi ea | Dolorem nostrum sunt | Mollitia reprehenderit debitis | Nesciunt quisquam ut | Non quaerat inventore | Vero non repellat | Cum porro aut | Aperiam nobis aut | |
Perferendis eum | Animi quos et | Voluptas velit porro | Dolorem corrupti voluptatem | Dicta assumenda at | Sunt enim incidunt | Minima eum qui | Asperiores dicta temporibus | Quia consequatur omnis |
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.
Consectetur voluptates | Blanditiis voluptatem | Minus aperiam voluptates qui cum quibusdam | Temporibusquoset Sit sapiente | Actions |
---|---|---|---|---|
Illo dolore | Consequuntur aliquid odit | Ducimus qui vel | Consequatur aut qui | |
Atque voluptas | Nemo quia nostrum | Accusantium consequuntur non | Inventore suscipit | |
Et temporibus | Nulla laboriosam ut | Aut dolor modi | Voluptas voluptas ad | |
Nihil autem | Laudantium labore consequatur | Quae tempore vel | Reiciendis consequuntur qui | |
Harum dignissimos | Quia enim laudantium | Eveniet expedita et | Debitis aspernatur illo |