Primitive

Table

Dense table anatomy: viewport, table element, rows, cells, selection, sort, and empty state.

Use Table for product-grade grid anatomy. Keep filtering, sorting, pagination state, row ids, column definitions, and rich cell data mapping in the owning component.
data
TableDefault
Status
router-contractaccepted$0.42
policy-reviewreview$0.31
trace-summarizerblocked$0.18

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Dense table anatomy with sortable columns and selected rows.
Status
router-contractaccepted$0.42
policy-reviewreview$0.31
trace-summarizerblocked$0.18

Frozen

Frozen first column with horizontal table anatomy.
OwnerModeRuns
Research opsAdasupervised1,284
Launch deskNoorautonomous842

Empty

Empty state inside table anatomy.
No rows

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
Table.childrenReactNode-Table sections and row content.
TableViewport.maxBlockSizestring-Optional runtime max-block-size token or value.
TableHeaderCell.align'left' | 'center' | 'right'leftHeader cell alignment.
TableHeaderCell.frozenbooleanfalsePins the cell to the inline start.
TableHeaderCell.widthstring-Runtime column width.
TableCell.align'left' | 'center' | 'right'leftBody cell alignment.
TableSortButton.sortablebooleanfalseEnables sort affordance.
TableRow.selectedbooleanfalseMarks a selected row.