Tables
- Data table
- Table with striped rows
- Table with fixed columns width
- Borderless table
- Auto width table
- Table with row underlining
- Snug table
- Bold text in a column
- Align a column's text to the right
- Control column widths by %
- Hide table head row
- No table row highlight
- Data table, responsive list
- Data table, column select
- Table with sticky header
- Data table with clickable row highlight
- Data table with selected row
- Data table with clickable row highlight and selected row
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 | Unverified |
|
Dolores reprehenderit | Eum officia sed | Ut veniam quos | Quia aut | Unverified |
|
Eum est | Ipsam quibusdam sit | Voluptate consequatur qui | At exercitationem dignissimos | Verified |
|
Nemo rerum | Consequatur odio culpa | Unde optio consectetur | Id molestiae quia | Unregistered |
|
Sed suscipit | Odit sit qui | Quod soluta molestiae | Culpa autem | Unregistered |
|
Quod et | Aut repellendus cupiditate | Quis aut dignissimos | Omnis eum | 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">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 | Unverified |
Delete |
Eius magnam qui | Ratione eum rerum | Eius consequatur | Unverified |
Delete |
Modi occaecati ipsum | Pariatur veritatis cumque | Ipsum natus non | Verified |
Delete |
Natus rerum nulla | Ea dolores quia | Non qui minima | Unregistered |
Delete |
Sint sit ipsam | Autem beatae enim | Voluptatem vitae | Unregistered |
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 | Unverified |
Delete |
Et voluptate | Et omnis sit | Est laboriosam doloremque | Aut ipsum | Unverified |
Delete |
Sit eius | Et voluptas deserunt | Molestiae inventore incidunt | Voluptatem voluptatibus quisquam | Verified |
Delete |
Aut rerum | Architecto ut nulla | Quidem amet in | Et deserunt nemo | Unregistered |
Delete |
Vitae quia | Recusandae optio odio | Sint doloribus ducimus | Voluptatem iure | 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 | |
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
Qualification | Requirement | Notes |
---|---|---|
UCAS Tariff | 100 Tariff points | None |
A level | BBB |
Table with row underlining
We can add row-underlining
to the table
Qualification | Requirement | Notes |
---|---|---|
UCAS Tariff | 100 Tariff points | None |
A level | BBB | |
HNC | DD |
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 |
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.
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.
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
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.
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.
Qualification | Requirement | Notes |
---|---|---|
UCAS Tariff | 100 Tariff points | From either A level, International Baccalaureate, or Scottish Higher |
A level | BBB |
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
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 |
Table with sticky header
This is a progressive enhancement and will not work on all browsers, including IE.
Ut reprehenderit | Possimus | Magnam illo eum | Temporibusquoset quisquam corporis | Actions |
---|---|---|---|---|
Repellat aut | Eius nesciunt autem | Est similique qui | Voluptatem doloremque asperiores | |
Velit aut | In a molestiae | Pariatur vel molestiae | Amet earum velit | |
Architecto quaerat | Nihil provident accusamus | Est enim tempora | Eveniet accusamus voluptas | |
Eaque voluptatem | Autem et et | Eveniet ab voluptatibus | Odio illum debitis | |
Nihil quisquam | Est voluptas dolores | Natus dolorem maiores | Qui hic expedita | |
Quibusdam eos | Molestiae cupiditate est | Non non rerum | Magni dolor ex | |
Tempora sunt | Architecto voluptatem modi | Quaerat assumenda omnis | Optio aut repellendus | |
Aut minima | Exercitationem rerum vel | Cumque dolorum maxime | Ea deleniti ipsa | |
Consequatur corporis | Quam aut doloremque | Labore sit et | Fugiat porro commodi | |
Aut rerum | Est harum possimus | Enim cumque debitis | Repudiandae et exercitationem |
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 |