Table

Runs table

Separators

How rows are told apart. row is the default hairline under every row; zebra alternates a faint fill instead; grid adds vertical rules for dense numeric columns; none removes the divisions entirely and leaves whitespace to do the work. Zebra re-states hover, the expanded hold and the selected fill at its own specificity, so a striped row still lights up under the pointer — a stripe that goes dead on hover is the usual bug here.

Density

The size axis moves padding and row height only — never font-size. A table that shrinks its own text stops matching the page around it. Density travels as three custom properties rather than per-part variants, so a cell can never disagree with the row it sits in, and size is deliberately left unset by default: an ancestor that declares those properties — a Table Card, for instance — becomes the single owner of density for everything inside it, and a plain Table simply inherits. Pass size on the table only to override a shell that disagrees.

Sorting and selection

Both axes are controlled, and neither is implemented here. TableSortHeader renders the arrow, sets aria-sort and calls onSort with the direction you should move to — it does not sort anything. TableSelectHead and TableSelectCell only fix the column to a stable width so the checkbox stops sliding as the widest cell changes between pages; you supply the Checkbox, and select-all goes half-checked by passing checked="indeterminate". A selected row is marked with data-state="selected" and tints with the selected green, the same token the checkbox fills with. The idle sort chevron is held at zero opacity rather than unmounted, so the column keeps its width whether or not the pointer is over it.

Cell layout

TableCellStack is the one cell shape worth owning — a bold primary over a muted secondary, with an optional leading media slot. Every other pattern inside a cell (a status badge, a progress bar, an avatar group, a rating) is an existing component dropped straight into a TableCell, and wrapping those would only duplicate their props. TableActions holds the trailing icon buttons and is visible at rest on purpose: actions that fade in on row hover are undiscoverable, and on a touch screen unreachable.

Sticky header

A sticky header needs a bounded scroller to stick against, and that scroller is the container every table already renders inside — reach it through containerProps. The header hairline is drawn by a pseudo-element rather than a border here: a collapsed border belongs to the table rather than the cell, so it would stay behind with the body and the header would visibly shed its underline mid-scroll.

Empty and loading

TableEmpty renders the row as well as the cell, because the row is the part that keeps getting written wrong: an empty state that inherits the row hover fill reads as a clickable record. Drop a small EmptyState inside it. TableSkeletonRows takes one entry per column and offsets each row against the stagger token, turning a block pulsing in unison — which reads as one big flashing rectangle — into a sweep travelling down the table. Set aria-busy on the Table while they are up; the placeholder rows are hidden from assistive tech, since reading out thirty-five empty cells is worse than silence.

Props