Table
Hairlines between rows only. Sortable headers, a selection column, striped and compact variants.
Examples
Table
| Status | ||||
|---|---|---|---|---|
| Atlas | Mika | 42 | Review | |
| Harbor | Jun | 9 | Draft | |
| Northlight | Ada | 128 | Live |
Busy
aria-busy dims the rows and pulses three squares over them.| Project | Pages |
|---|---|
| Atlas | 42 |
| Harbor | 9 |
Anatomy
.table-scroll | Optional wrapper that scrolls a wide table sideways instead of the page. |
table.table | A real <table> with <thead> and <tbody>. Numbers are tabular; rows hover-tint. |
th[aria-sort] | Optional sortable header. Draws a triangle that turns with the direction. |
th > input[type=checkbox] | Optional selection column: a cell holding only a checkbox shrinks to fit it. |
td[data-num] | Numeric cells and their header align to the end. |
API
| Attribute | Values | Description |
|---|---|---|
data-num | boolean | On a th or td: aligns the cell to the end, for figures that should line up. |
aria-sorton th | ascendingdescendingnone | Sortable header. none shows a faint triangle; the other two show it solid, pointing the sort direction. |
aria-selectedon tr | true | Tints the row with the accent, for rows ticked in the selection column. |
data-stripedon .table | boolean | Tints every even body row. |
data-sizeon .table | s | Tighter cell padding and smaller type, for dense data. |
data-stickyon .table | boolean | Header cells stick to the top of the nearest scrolling ancestor. |
data-fixedon .table | boolean | Fixed table layout: column widths come from the first row, not the content. |
data-hoveron .table | false | Turns off the row hover tint, for tables whose rows do nothing. |
aria-busy | true | Dims the content and pulses three squares over it; the table ignores the pointer. |
Behaviour
With checkboxes in the tbody, a checkbox in the thead selects or clears every row, each checked row gets aria-selected="true", the header box turns indeterminate for a partial selection, and a sibling .selection-bar shows the count. Without it, the checkboxes are plain inputs and the rows tint only where you set aria-selected.
From aequitas.js. It initialises itself and enhances markup added later on its own, so it works the same in an SPA.
Accessibility
aria-sortonly draws the arrow; sorting is up to you. Put a<button>inside thethso the header can be sorted from the keyboard.aria-selectedis not announced on rows of a plain table. The row's checkbox carries the state; give each one anaria-labelnaming the row.- Keep
<th>in<thead>so cells are announced with their column; use<th scope="row">for a row header. - A
.table-scrollwrapper that overflows needstabindex="0"and anaria-labelin browsers that don't make scroll containers focusable.