On this page
Overview
Show code, SortAndPaginate.tsx
Variants
Select and act on several rows
While rows are selected, a bulk bar shows the count and its actions.
- Archive acts at once, with Undo.
- Delete asks first.
Show code, SelectAndBulkActions.tsx
Row actions
The name links to the record; the other actions wait in a Menu named for the row, "More actions for Website refresh".
Show code, RowActions.tsx
Anatomy
Selection
Sort
Record link
Numbers
Pagination
Show code, DataTableAnatomy.tsx
Behaviour
Sorting and paging
A Table holds the data, with its own sorting, selection and stacking.
- Pagination below it gives the range, "1–4 of 6".
- It keeps working while the next set loads.
Adapting to width
Where the table is narrow, such as on a phone, each row stacks into a block titled by its name, with each value beside its column's name. The pages stay below it.
The header and its sort buttons are hidden then, so one Select above the rows shows and changes the order.
Show code, RowsThatStack.tsx
Rules
A data table says what each column and each action holds in as few words as people need.
Use it when
- Records compared by several values, such as owner, status and date
- Sorting records, paging through them or acting on several at once
Built from
Table, Checkbox, Toolbar, Menu, Button, Tooltip, Link, Avatar, Badge, Select, RelativeTime, Pagination, ConfirmDialog
Content
Name columns with short nouns, "Open tasks".
- Put the unit in the name, "Size (MB)", not in every cell.
- Show recent dates as relative times, and further ones as dates.
- Give the count in bulk actions and their confirmation: "Delete 2 projects?".
Accessibility
Focus and keyboard
Tab reaches the table's scroll region, then each sort button and control in the cells.
- Sort and Pagination buttons keep focus as the rows change.
- When an action clears the selection, focus moves to the header's checkbox.
- After a row is deleted, focus moves to the next row's menu button.