/// Data Display

Table

The styled table primitive — thin compound wrappers over the native table elements that carry the console look.

import { Table } from "@protocore/pds";

View as Markdown

Basics

Compose Table.Head, Table.Body, Table.Row, Table.HeaderCell, and Table.Cell. They're thin wrappers over <thead>/<tbody>/<tr>/<th>/<td> that add the console styling: mono uppercase header labels on a sunken surface, hairline row rules, no zebra.

Run	Pipeline	Status
run_4820	ledger-settle	success
run_4819	fx-reconcile	running
run_4818	ledger-settle	failed

Numeric columns

Mark amount columns numeric on both the header cell and the body cells: they right-align and render in tabular mono so figures line up on the decimal. Table.Caption adds a mono micro-label above the grid.

Daily net movement · EUR
Account	Debits	Credits	Net
acct_eu_00417	€128.40	€512.00	+€383.60
acct_eu_00418	€9,900.00	€4,120.00	−€5,780.00
acct_eu_00419	€0.00	€42,500.00	+€42,500.00

Interactive rows

interactive gives a row a hover affordance and pointer cursor; selected tints it with the accent. The primitive only carries the styling — you attach your own onClick/onKeyDown. For built-in keyboard row navigation, sorting, and selection, use DataTable instead.

Key	Label	Scope
key_live_9f2c	Production ingest	write
key_live_7a10	Analytics export	read
key_test_1b83	Sandbox	write

Table vs DataTable

Table is the low-level styled primitive: you own the markup, the data, and any interaction. Use it for small, static, fully-controlled grids — a config summary, a fixed comparison, a handful of rows you render yourself.

DataTable is the server-driven console workhorse built *on top of* these recipes: TanStack columns, manual sorting/pagination, row selection, roving-tabindex keyboard nav, and the five body states (loading / empty / error / data). Reach for DataTable the moment a list is paginated, sortable, selectable, or fetched from a server. If you find yourself re-implementing sort headers or a selection bar over Table, switch to DataTable.

For key→value record display (one entity's fields) use DefinitionList, not a two-column Table.

Usage

Use Table for small, static, hand-rendered grids you fully control.
Mark amount columns `numeric` on both header and body cells so they align.
Set `sticky` when a tall table scrolls inside a fixed-height region.
Graduate to DataTable as soon as you need sorting, pagination, or selection.

Don't

Don't hand-roll sort headers or a selection bar over Table — that's DataTable's job.
Don't use a two-column Table for one record's fields; use DefinitionList.
Don't add zebra striping or box-shadows; the hairline console look is deliberate.
Don't forget an `onKeyDown` when you make rows `interactive` — hover alone isn't keyboard-operable.

Accessibility

Keys	Action
`Tab`	Moves through any focusable controls inside cells. Rows themselves are not focusable unless you make them so.

Table renders semantic `<table>`/`<thead>`/`<tbody>`/`<th scope="col">` markup, so screen readers announce row/column structure natively.
`Table.Caption` becomes a real `<caption>` — the accessible name for the whole grid.
`interactive`/`selected` are visual only. If a row is a click target, add `onKeyDown` (Enter/Space), a `tabIndex`, and an appropriate role — or use DataTable, which wires roving-tabindex navigation for you.
The root wraps the table in an `overflow-x` scroll region so wide grids scroll instead of forcing the page to scroll horizontally.

`Table` props

Prop	Type	Default	Description
`className`	`string`	—
`scrollLabel`	`string`	`Table`	Accessible name for the horizontal-scroll region (so keyboard users can Tab to and scroll it).
`sticky`	`boolean`	`false`	Make the header row stick to the top of the scroll container while the body scrolls.
`style`	`CSSProperties`	—
`wrapperClassName`	`string`	—	Extra className on the outer horizontal-scroll wrapper (the ref points at the `<table>`).