Data display
Table
A data table with sortable columns, row headers and a keyboard-scrollable container.
Live example
| Isla Calandra | 7 | €2,140 |
|---|---|---|
| Kestrel Lakes | 4 | €990 |
| Lumen City | 3 | €880 |
| Mirrow Peaks | 5 | €1,620 |
Usage
<Table
caption="Bookings"
rows={bookings}
getRowId={(b) => b.id}
defaultSort={{ key: 'date', direction: 'descending' }}
columns={[
{ key: 'title', header: 'Destination', rowHeader: true, sortValue: (b) => b.title },
{ key: 'amount', header: 'Value', align: 'end', sortValue: (b) => b.amount },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
caption | string | none | Names the table and its scroll region. |
columns | Column<T>[] | none | key, header, render, sortValue, align, rowHeader, firstDirection. |
rows | T[] | none | Complete filtered row data, before sorting and limiting. |
rowLimit? | number | none | Display this many rows after sorting all rows. Omit to display all. |
getRowId | (row: T) => string | none | Stable key per row. |
defaultSort? | SortState | null | null | Initial sort. |
sort? | SortState | null | none | Controlled sort. |
onSortChange? | (sort: SortState) => void | none | Called when a header is activated. |
locale? | string | 'en' | Used for numeric-aware string sorting. |
hideCaption? | boolean | false | Hide the caption visually. |
Do and don't
Do
- Mark the identifying column as rowHeader.
- Right-align numbers and use tabular figures.
- Start date and amount columns descending.
Don't
- Use a table for layout.
- Make whole rows clickable without a real link or button inside.
Accessibility
- Sort controls are buttons inside column headers. Only the sorted column has aria-sort.
- Sort changes are announced: "Sorted by Value, descending".
- The scroll container is a focusable, labelled region so keyboard users can scroll wide tables on phones.
Keyboard
| Keys | Action |
|---|---|
| Tab | Moves between sort buttons and controls in cells |
| Enter, Space | Sorts by the focused column, or flips the direction |
| Arrow keys | Scroll the table when its region has focus |