Table

What the table lists ("Open invoices"). Rendered as the caption and the accessible name; visually hidden with `hideCaption` when a Heading directly above already says it.

Accessibility: The <caption> (web) / aria-label on the container; never omitted.

Heading level of the caption in the page outline; its size is captionSize regardless.

Content below the table: a row count, pagination, a total. Rendered in the `footer` part with the table's font: a string footer renders in Text (web: inside a `<p>`) with the `fontFamily`/`fontSize`/`lineHeight` bindings; other content brings its own typography (React Native has no cascade). Absent or `false` renders no footer part at all. Lit takes only slotted content in its `footer` slot — the string form has no Lit spelling, so slot a `<ds-text>` — and because `slotchange` only reports for a slot that is in the tree, the Lit wrapper always renders and takes the `footer` part only once something is assigned to it.

Visually hide the caption; it remains the accessible name. On web and Lit the caption part is the composed Heading element itself, with no wrapper, so hiding it also sends `space.0` in place of `captionGap`: a hidden caption leaves no gap above the header, and it wins over a `captionGap` override, which does not reinstate one. The visually-hidden clip is what actually takes effect there — its own margin beats the forwarded gap — so the forward states the intent and the clip produces it. React Native has no way to put either the part hook or the hiding on a Heading, so there the caption part is a wrapper View that carries the testID and the clipping.

Column definitions in display order. `header` is the visible heading; `align: end` for numbers; `sortable` adds the sort button; exactly one column may be `isRowHeader` (its cells become row headers, and it is the row's name when stacked); `hideBelow` drops a column below a layout width in `responsive: stack` only (scrolling tables keep every column), compared against the table's own measured width as `responsive` is, never the window; `width: min` shrinks to content without wrapping (web: `inline-size: 1%` plus nowrap), `fill` takes the remaining width (web: `inline-size: 100%`); `render` formats the cell (a Text, Link, Meter, or Button — never raw HTML).

The rows. `id` must be stable; it is what selection and keys use.

Controlled sort state. The table shows it; the caller sorts the data (so server-side sorting works the same way).

Initial sort for uncontrolled use; the table then sorts `data` itself by the column value (localeCompare for strings, numeric otherwise).

Adds a first column of Checkboxes (radio-like behavior for `single`) and a select-all in the header for `multiple`. Selection is row identity, not a visual state alone.

Controlled selected row ids.

Initially selected ids.

Below `layout.maxWidth.prose`: `stack` turns each row into a block with the column header repeated as a label before each value (content tables — orders, people); `scroll` keeps the columns and scrolls horizontally inside a labelled region with the row-header column sticky (data tables where columns are the point). Roles are explicit on every element so both keep table semantics. "Below" compares the table's own measured width (a container query on web and Lit, onLayout on React Native) with the token, and means strictly less: at exactly `layout.maxWidth.prose` the table is still columnar, and `hideBelow` compares the same way; `scroll` keeps the columns at every width on every platform, phones included.

The header row stays visible while the body scrolls (the page, or `maxHeight`). In `responsive: scroll` the scroll region is the sticky container, so the header sticks only with `maxHeight: viewport`; against the page scroll it has no effect there. React Native sticks the header only when the list scrolls itself — that is, with `maxHeight: viewport` — at every `responsive` value, since the page scroll is not the list's; the default being inert for a page-scrolled native table logs nothing, since the default is not the caller's doing. Stacked, what sticks is the whole header row that `responsive: stack` keeps: on web and Lit that means the stacked `thead` is `display: block` and only the row is the flex container, or the sticky band would be sized to its content and stop mid-table.

`viewport` caps the table at the viewport height minus two `layout.gap.section` and scrolls a frame around the table (the scroll region itself in `responsive: scroll`), which is also the root of the header-shadow observer; `none` lets the page scroll. React Native measures the cap against the window height — it cannot know what chrome sits above it — and applies it to the list, which is the frame inside the horizontal ScrollView.

Cell padding: layout.inset.sm or layout.inset.md.

Alternate row backgrounds: the even rows carry the tint, so the first data row keeps `surface`. Stacked blocks alternate the same way. Useful past about eight columns; borders are the default row separator.

Shown in place of the body when `data` is empty. Defaults to `copy.empty`.

Data is being fetched: aria-busy is set on the table element (web and Lit: the `<table role="table">`; React Native: accessibilityState busy on the list) and `copy.loading` shows — with no rows, in the emptyState in place of `emptyMessage`; with rows, as Text `size: sm`, tone muted, in its own polite live region below the table and above the footer — the sort and selection announcements keep the visually-hidden region, so the two never overwrite each other. Existing rows stay visible while re-sorting.

Renders a trailing actions cell: Buttons (ghost, sm, iconOnly with Tooltip) or a Menu. Kept out of `columns` so the header can be a visually-hidden "Actions".

Fired when a sortable header is activated, with `{ column, direction }` (cycling ascending → descending on the same column, ascending on a new one).

Fired with the new array of selected ids.

Fired when a row is activated, with its id. Only when the row has no other interactive content; the row header cell becomes a Button and the row is styled interactive. On web and Lit a pointer click anywhere on the row outside a control also fires it; keyboard and assistive technology use the Button. Lit cannot see whether anyone listens, so rows are interactive only when the host has the `pressable-rows` attribute — a reflected boolean property `pressableRows`. Prefer a Link in the row header for navigation.