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
DOM renderImage render
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
Render state

Frozen

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

Empty

Empty state inside table anatomy.
No rows
Render state

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.