Tables
Data table
Standard data table with sorting options. Buttons used within these tables should stick to button--small.
| Dolores qui | Totam quasi | Fugiat qui voluptate eius ex occaecati | Temporibusquoset Accusantium sunt | Account status | Actions |
|---|---|---|---|---|---|
| Eos ipsum | Pariatur vitae facere | Est veritatis qui | Porro aut nihil | Unverified |
|
| Minus aut | Tenetur deserunt mollitia | Quasi officia in | Omnis fugit | Unverified |
|
| Ducimus dolore | Accusantium voluptatem maxime | Quod rem blanditiis | Suscipit quia incidunt | Verified |
|
| Modi similique | Eveniet maxime magni | Omnis et at | Dolor occaecati laboriosam | Unregistered |
|
| Ipsum quo | Aut alias esse | Ipsum recusandae ullam | Consequatur dolorem | 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">Earum aut</a></th>
<th>Doloremque porro</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Sint eum et quo deserunt soluta</a></th>
<th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset Omnis et</a></th>
<th>Account status</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th>Voluptas voluptatem</th>
<td>Nesciunt et commodi</td>
<td>Illum aliquid ullam</td>
<td>Deserunt aut in</td>
<td><p class="icon-inline--left icon--account-monza">Unverified</p></td>
<td>
<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>Est rerum</th>
<td>Reprehenderit consectetur error</td>
<td>Magni autem eos</td>
<td><a href="#" title="Test link">Qui officia</a></td>
<td><p class="icon-inline--left icon--account-monza">Unverified</p></td>
<td>
<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>At voluptatem</th>
<td>Aliquid sed et</td>
<td>Facere est voluptatibus</td>
<td>Maxime recusandae in</td>
<td><p class="icon-inline--left icon--account-dark">Verified</p></td>
<td>
<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>Dicta magnam</th>
<td>Odio molestias sit</td>
<td>Voluptatum consequatur aut</td>
<td>Dolor architecto at</td>
<td><p class="icon-inline--left icon--account-monza">Unregistered</p></td>
<td>
<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>Accusamus molestiae</th>
<td>Aliquid est eum</td>
<td>Neque dolor qui</td>
<td><a href="#" title="Test link">Nemo similique</a></td>
<td><p class="icon-inline--left icon--account-monza">Unregistered</p></td>
<td>
<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 -->
Data table, responsive list
Adding the class table-responsive--list will render the table as a list at smaller screen widths. The table headers will not be displayed, so this won't be suitable for a table that has sortable columns.
| Fugit temporibus | Beatae | Quasi sint distinctio | Temporibusquoset laborum et | Actions |
|---|---|---|---|---|
| Et dolor | Enim consectetur repudiandae | Voluptatibus sit qui | Quia id voluptatem | |
| Autem ex | Quia qui expedita | Sapiente quo velit | Rerum cumque et | |
| Quod voluptas | Sit et architecto | Sit ipsam consequatur | Explicabo nemo velit | |
| Occaecati voluptatem | Animi fuga rerum | Recusandae illo quo | Qui non officiis | |
| Quis optio | Distinctio accusamus sint | Quia eos facere | Architecto aut ducimus | |
| Voluptatem deleniti | Doloremque sit et | Recusandae quod dolores | Adipisci ex rem | |
| Doloremque incidunt | Ut velit omnis | Quis soluta sunt | Cum voluptatibus aut | |
| Est est | Eos cum laborum | Cumque voluptatem vel | Et voluptas est | |
| Pariatur consequatur | Iste id aperiam | Sint esse dignissimos | Qui minus praesentium | |
| Quis ut | Saepe ea aut | Natus ducimus et | Illo omnis provident | |
| Nulla accusamus | Deserunt deserunt dolorem | Qui ut ipsam | Voluptatem quis debitis | |
| Facere eaque | Deserunt eos deleniti | Et aperiam perspiciatis | Et accusamus sapiente | |
| Ab officia | Iure est inventore | Beatae dolores sequi | Tenetur et rem | |
| Impedit maxime | Quod deserunt earum | Rerum voluptate minus | Ex quisquam incidunt | |
| Impedit qui | Vel quae illo | Et deleniti est | Suscipit explicabo dignissimos | |
| Repellendus eos | Facilis autem id | Quidem quis corrupti | Reiciendis dolorum eligendi | |
| Aut quisquam | Beatae praesentium eaque | Hic qui molestiae | Enim eum et | |
| Est sapiente | Veniam nihil accusamus | Earum dolorum a | Dolores saepe expedita | |
| Nam voluptate | Voluptatem cum explicabo | Nulla et architecto | Sed sed sed | |
| Reprehenderit consequatur | Tenetur est temporibus | Voluptate velit pariatur | Eveniet non enim |
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">Saepe dolorem</a></th>
<th>Aut</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Ut magni sed</a></th>
<th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset illo a</a></th>
<th>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="Saepe dolorem">Hic magni</th>
<td data-th="Aut">Debitis facilis enim</td>
<td data-th="Ut magni sed">Ducimus voluptas officiis</td>
<td data-th="Temporibusquoset illo a">Libero autem nemo</td>
<td data-th="Actions">
<button class="button button--small">Lorem</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="Saepe dolorem">Dolorem deserunt</th>
<td data-th="Aut">Voluptas voluptatem quasi</td>
<td data-th="Ut magni sed">Sapiente adipisci quae</td>
<td data-th="Temporibusquoset illo a">Fuga ut cupiditate</td>
<td data-th="Actions">
<button class="button button--small">Lorem</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="Saepe dolorem">Et nisi</th>
<td data-th="Aut">Laboriosam omnis reprehenderit</td>
<td data-th="Ut magni sed">Aut soluta ut</td>
<td data-th="Temporibusquoset illo a">Repellendus quaerat dicta</td>
<td data-th="Actions">
<button class="button button--small">Lorem</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 | Quis sunt | Temporibusquoset Non ab | Actions |
|---|---|---|---|---|---|---|---|---|---|
| Maiores et | Dolorum doloremque est | Adipisci accusamus aut | Autem exercitationem tempora | Provident et mollitia | Ut incidunt quia | Harum libero iste | Autem similique corporis | Voluptatem ea voluptatem | |
| Optio ratione | Et laborum aperiam | Non sed cupiditate | Odit necessitatibus aut | Eius corrupti quos | Id fugit quia | Eveniet et officiis | Quod voluptatem quia | Ut sunt qui | |
| Quia quisquam | Sit eum inventore | Natus ea temporibus | Ut ut dignissimos | Soluta officiis in | Corporis nesciunt vero | Tempora ex aut | Tempora accusamus est | Quis et beatae | |
| Quis laudantium | Iste sint dolor | Quam nihil vero | Praesentium illo praesentium | In et harum | Ducimus doloremque et | Eius tempore aspernatur | Quae nostrum soluta | Placeat est suscipit | |
| Et ut | Reiciendis veritatis eaque | Ex non at | Doloribus molestiae qui | Molestias ut ut | Temporibus enim nihil | Laudantium non porro | Quidem ut non | Quibusdam rerum natus | |
| Non molestias | Aut aperiam repudiandae | Ipsum rem ipsa | Corporis sit nihil | Repellendus ut minima | Quam vel quos | Iusto maiores quis | Dolores autem alias | Occaecati quia praesentium |
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.
| Quo et | Molestias quis | Vitae numquam explicabo qui consequatur aspernatur | Temporibusquoset Minima sit | Actions |
|---|---|---|---|---|
| Quis minima | Placeat autem illo | Ut delectus impedit | Et amet perferendis | |
| Non asperiores | Voluptates ut id | Optio impedit id | Occaecati numquam | |
| Magnam delectus | Natus nulla expedita | Consequatur enim unde | Maiores vel sint | |
| Earum facere | Eveniet dolores inventore | Eligendi aut qui | Et officia quo | |
| Consequuntur adipisci | Ut incidunt corrupti | Ab ipsam eveniet | Ipsa reprehenderit tempora |
