Data Table

Sort any header, search, page through. The client column is the row header (<th scope="row">); numeric columns are right-aligned with tabular figures; every visualisation prints its value beside the mark, so nothing is carried by colour or length alone. Sweep across a sparkline and the readout snaps to the nearest real point with a marker on it; the bar names the column maximum it is scaled against and the donut names the total it is a share of — both invisible on the mark. Only one bubble can exist at a time, however fast you sweep.

Heat cell (five binned steps of one hue), progress toward a target with the target marked by a tick rather than implied, and a channel breakdown whose sixth category folds into “Other” — there are five chart tokens, so a sixth colour is never invented. Hover any of the three: the heat cell names the band it landed in, the target bar gives the percentage attained, and the traffic mix names the segment under the pointer, including what “Other” swallowed. Every one of those strings is in the cell's sr-only text too, so the tooltip is a convenience and never the only route to a value.

Each header cycles ascending → descending → unsorted, and writes aria-sort as it goes. Sort by spend: Fernwood Estates has no spend, and a missing value stays last in both directions — it is not a small number.

The header checkbox selects the current page and goes indeterminate on a partial selection. The bulk bar sits above the table rather than floating over the rows, and the checkbox is its own cell — never a control nested inside another.

Four rows a page. Bar lengths and donut shares are computed over the filtered rows, not the page, so a bar means the same thing on page 1 and page 4. Search while on page 3 and the page resets instead of showing an empty body.

density="compact" tightens the row box and drops the type a step. Same columns, same cells, ~35% more rows in the same height — which is the point of a table.

rows={undefined} renders skeleton rows built from each column's skeleton shape — avatar, pill, chart, number — so the placeholder row is the height of the real one and nothing jumps when the data lands.

rows={[]} with no query. Reuses @automindz/empty-state inside the table body, so the header stays put and the message is the first-run one: name the thing, give one action.

A different message from “nothing exists”, because the fix is different: clear the search. Seeded with defaultQuery so the state is here on arrival.

The failure outranks the skeleton — with an error there is nothing coming. Rendered with role="alert", the reason spelled out, and a retry that stays busy while it runs. Press it: this one succeeds.

The renewal note truncates with the full string in title, and minWidth makes the table wider than the frame: it scrolls inside its own container and the page never scrolls sideways.

Held at 360px to show the container query: hideBelow columns drop out on the table's own width, not the viewport's, so the same table works in a sidebar and full-bleed. The donut stays circular and the bars shorten instead of distorting.