On this page
Overview
Show code, ProjectStatus.tsx
Variants
Density
Density changes only the rows' padding. Controls in cells keep the small height.
Show code, RowDensity.tsx
- Extra small
Logs.
- Small
Scanning many rows.
- Medium
Most tables. The default.
- Large
Reading row by row.
Cells
A cell can line its content up for comparing, keep it on one line, or head its row.
Show code, NumericColumns.tsx
- Numeric
Numbers that compare down a column, on the header cell too.
- At the end
Other content at the end of its cell, such as actions.
- On one line
Short values that read badly broken, such as names and dates.
- Row header
A header cell that heads its row, such as Total.
Anatomy
Region
Caption
Header row
Header cell
Sort button
Row
Cell
Show code, TableAnatomy.tsx
Behaviour
Sort by a column
A header can sort the rows by its column. The sorted column shows its order; the other sortable headers show their arrow while the pointer is over the header row or one has keyboard focus, and always on touch.
Show code, SortableColumns.tsx
Select rows
A selected row takes a lighter tint of the selection fill, so wide rows don't outweigh what is in them, and the full fill at high contrast.
- A checkbox labelled with the row's name selects it.
- A row selected without a checkbox in its first cell, such as the one open in a detail pane, also takes a bar at its start.
Show code, SelectRows.tsx
Resizable columns
People can resize columns by dragging the boundary at the end of a header, or with the arrow keys. A double click restores the starting widths.
Show code, ResizableColumns.tsx
Sticky header
The header row can stay in view while the rows scroll beneath it, in a region of a set height.
Show code, StickyHeader.tsx
Loading
While its rows load, a table shows as its own skeleton, as Loading shows.
Adapting to width
By default the columns keep their width and the region scrolls sideways.
- A table can stack its rows instead where it is narrow, such as on a phone.
- Each row then becomes a compact block. Its first cell titles it, with the next value, such as a status, beside it.
- The other cells sit two to a line, under their columns' names.
Show code, StackedRows.tsx
Rules
Numbers line up and states have names, so rows compare at a glance.
Use it when
- Values compared across rows and columns, such as invoices by client and date
- Records with the same fields to scan, sort or select, such as files or orders
- Figures side by side with their totals, such as hours per invoice
Show code, NumbersAligned.tsx
Show code, NumbersUnaligned.tsx
States
Name each state in words, such as in a Badge, never by color alone.
Names
Name every table, with a caption above it or by a heading just before it.
Editing
A table has no editing cell by cell and no moving between cells with the arrow keys.
Row titles
Start each row with the cell that identifies it, which titles the row when rows stack.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the scroll region, then to each sort button, resize handle and control. |
| ←, →, ↑, ↓ on the region | Scrolls a table that doesn't fit its region. |
| Enter or Space on a sort button | Asks the application to sort the rows by the column. |
| ← or → on a resize handle | Moves the column's end by 1 percent, in the reading direction. |
| Shift+← or Shift+→ on a resize handle | Moves the column's end by 5 percent. |
| Page Up, Page Down on a resize handle | Widens or narrows the column by 5 percent. |
| Home, End on a resize handle | Narrows the column to its smallest width, or widens it to its largest. |