Data table
Standard data table with sorting options. Buttons used within these tables should stick to button--small.
Quia sint | Odit exercitationem | Et ut error suscipit vero quibusdam | Temporibusquoset Nobis quam | Actions |
---|---|---|---|---|
Assumenda rerum | Quod voluptatem assumenda | Ad voluptate sed | Aut pariatur nemo | |
Vel soluta | Amet eos hic | Ut nobis sapiente | Quo dignissimos | |
Nam eligendi | Et aut sapiente | Eum quia ducimus | Maxime id numquam | |
Tempora in | Necessitatibus accusamus eius | Non magni voluptates | Minus mollitia veritatis | |
Sunt totam | Soluta iure sed | Et molestias facere | Rerum enim |
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">Error ullam</a></th>
<th>Unde corrupti</th>
<th class="column-sortable"><a href="#" class="column-sortable__link">Quidem itaque necessitatibus minima fugit cum</a></th>
<th class="column-sortable"><a href="#" class="column-sortable__link column-sortable__link--down">Temporibusquoset Distinctio exercitationem</a></th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<th>Sint aperiam</th>
<td>Aut hic sequi</td>
<td>Consequatur tempora ullam</td>
<td>Et quia reprehenderit</td>
<td>
<div class="buttons">
<button class="button button--small button--color-light">Edit</button>
<a href="#" class="button button--small" role="button">Delete</a>
</div>
</td>
</tr>
<tr>
<th>Reprehenderit tempora</th>
<td>Reprehenderit similique omnis</td>
<td>Molestiae optio magnam</td>
<td><a href="#" title="Test link">Iure harum</a></td>
<td>
<div class="buttons">
<button class="button button--small button--color-light">Edit</button>
<a href="#" class="button button--small" role="button">Delete</a>
</div>
</td>
</tr>
<tr>
<th>Veniam fuga</th>
<td>Explicabo aut facere</td>
<td>In nisi debitis</td>
<td>Inventore quis adipisci</td>
<td>
<div class="buttons">
<button class="button button--small button--color-light">Edit</button>
<a href="#" class="button button--small" role="button">Delete</a>
</div>
</td>
</tr>
<tr>
<th>Animi molestias</th>
<td>Illum ut recusandae</td>
<td>Atque non nam</td>
<td>Eum consequuntur aspernatur</td>
<td>
<div class="buttons">
<button class="button button--small button--color-light">Edit</button>
<a href="#" class="button button--small" role="button">Delete</a>
</div>
</td>
</tr>
<tr>
<th>Soluta est</th>
<td>Vitae quisquam eaque</td>
<td>Quas voluptas iste</td>
<td><a href="#" title="Test link">Et quibusdam</a></td>
<td>
<div class="buttons">
<button class="button button--small button--color-light">Edit</button>
<a href="#" class="button button--small" role="button">Delete</a>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<!-- END data table component -->