Table

Shows rows of readings, devices or records, with sorting, selection and three densities.

Live React portTableRoot, Table, TableBody, TableRow, TableHead, TableCell, TableCheck

Try it

Change the density and the ground, then click a header to sort.

	Last Reading		Target %
Bore 12	2m ago	34.1	50.0	−15.9
Bore 7	4m ago	48.9	50.0	−1.1
Bore 3	3m ago	61.2	50.0	+11.2
Ridge Tank	11m ago	72.4	60.0	+12.4
South Pivot	1h ago	28.6	45.0	−16.4
North Paddock	Mar 14, 2026	No value	45.0	No value

Density

Ground

Selectable

Tone

<TableRoot density="default">
  <Table minWidth={520}>
    <TableHeader>…</TableHeader>
    <TableBody>
      <TableRow>
        <TableCell>Bore 12</TableCell>
        <TableCell numeric tone="bad">−15.9</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableRoot>

Density changes the row height only. The header stays at 40px.

When to use

Use a table to compare readings, devices or records across the same columns.
Use it when people sort, scan or select rows.
Pair it with Pagination when the rows run past one screen.

Don’t use it

For a few values about one site. Use a Card.
For a reading over time. Use a Line chart.

Anatomy

Set striped, bordered and interactive once on TableBody, so every row matches.

Site	Last Reading	Soil %	Target %	Gap %
Bore 12	2m ago	34.1	50.0	−15.9
Bore 7	4m ago	48.9	50.0	−1.1
Bore 3	3m ago	61.2	50.0	+11.2
Ridge Tank	11m ago	72.4	60.0	+12.4
South Pivot	1h ago	28.6	45.0	−16.4
North Paddock	Mar 14, 2026	No value	45.0	No value
5 of 6 sites reporting

<TableRoot density="default">
  <Table>
    <TableColgroup><TableCol width="15%" /></TableColgroup>
    <TableHeader>
      <TableRow><TableHead numeric>Soil %</TableHead></TableRow>
    </TableHeader>
    <TableBody striped interactive>…</TableBody>
    <TableFooter>…</TableFooter>
  </Table>
</TableRoot>

Sorting and selection

Click a header, then tick some rows.

	Last Reading		Target %
Bore 12	2m ago	34.1	50.0	−15.9
Bore 7	4m ago	48.9	50.0	−1.1
Bore 3	3m ago	61.2	50.0	+11.2
Ridge Tank	11m ago	72.4	60.0	+12.4
South Pivot	1h ago	28.6	45.0	−16.4
North Paddock	Mar 14, 2026	No value	45.0	No value

No rows selected · 6 shown

Sorting cycles ascending, descending, then off. Empty values stay at the bottom.

Tone

Tone a cell when the number is the finding, such as the gap to target.

Site	Last Reading	Soil %	Target %	Gap %
Bore 12	2m ago	34.1	50.0	−15.9
Bore 7	4m ago	48.9	50.0	−1.1
Bore 3	3m ago	61.2	50.0	+11.2
Ridge Tank	11m ago	72.4	60.0	+12.4
South Pivot	1h ago	28.6	45.0	−16.4
North Paddock	Mar 14, 2026	No value	45.0	No value

Empty and unknown values

Pass an empty state to empty on TableRoot. The header stays.

Site	Last Reading	Soil %	Target %	Gap %

No sites match this filterSix sites are hidden by the current filter.

A cell with no value shows an em dash, and a screen reader hears “No value”.

Content

Write headers as short nouns in Title Case: Site, Last Reading.
Put the unit in the header, so cells hold only the figure: Soil %.
Give every value in a column the same decimal places.

Accessibility

A sortable header announces the order it will switch to. Name each row’s checkbox after the row, and announce the selected count.

Key	What it does
Tab	Moves through sort headers, select-all and row checkboxes.
Enter / Space	Changes the sort, or ticks a row’s checkbox.

Props

Prop	Type	Default	Description
TableRoot density	'compact' \| 'default' \| 'comfortable'	'default'	Row height: 32, 40 or 48px.
TableRoot maxHeight	number	—	Scrolls rows under a sticky header.
TableRoot empty	ReactNode	—	Shown under the header.
Table selectable	boolean	false	Sets aria-selected on rows. TableCheck announces the state.
Table minWidth	number	—	Scrolls sideways below this width.
TableCol width	number \| string	—	Column width, in px or percent.
TableBody striped	boolean	false	Shades every second row.
TableBody bordered	boolean	false	Rules between rows and cells.
TableBody interactive	boolean	false	Hover ground for clickable rows.
TableRow selected	boolean	false	Blue tint and a 3px start bar.
TableRow onClick	() => void	—	Pointer shortcut. Pair with TableCheck.
TableHead sort	'asc' \| 'desc' \| 'none'	—	Sets the caret and aria-sort.
TableHead onSort	() => void	—	Makes the whole header cell a sort button.
TableHead label	string	—	Sort button name when children aren’t text.
TableHead numeric	boolean	false	Right-aligns the label.
TableCell numeric	boolean	false	Right-aligns, with tabular figures.
TableCell tone	'ok' \| 'note' \| 'act' \| 'bad' \| 'live' \| 'idle'	—	Colours the value as a finding.
TableCell muted	boolean	false	Secondary ink.
TableCheck checked	boolean	—	The ticked state.
TableCheck onToggle	() => void	—	Runs on click, Enter or Space.
TableCheck label	string	—	Accessible name, such as “Select Bore 12”.
TableCheck indeterminate	boolean	false	Dash for a partial selection.

Tokens

Token	Value	Where it lands
--spacing-8 / -10 / -12	32 / 40 / 48px	Row heights.
--spacing-3	12px	Cell padding, left and right.
--font-size-md	13px	Cell values.
--font-size-sm	12px	Column headers.
--font-weight-medium	475	Headers and numbers.
--color-grey-100	#F5F5F5	Striped rows, header hover.
--color-grey-200	#F1F1F1	Row hover.
--color-primary-light	#EBFAFF	Selected row.
--color-primary-active	#1877F2	Selected bar, active caret, focus ring.
--global-neutral-grey-900	#7F7D83	Sort caret at rest.
--color-grey-300	#ECECED	Cell rules when bordered.
--color-border-default	#E6E6E6	Outer hairline and header rule.
--radius-lg	8px	Outer corners.