Surfaces
Table
A ruled data table that scrolls inside its own box.
Examples
default
| Commit | Branch | Duration | State |
|---|---|---|---|
| a1b2c3d | main | 2m 14s | passed |
| 9f8e7d6 | codex/ui-library | 2m 41s | passed |
| 4c5b6a7 | codex/photo-cache | 1m 02s | failed |
Notes
A ruled data table.
Wrapped in its own horizontally scrolling container, because a table is the one block that legitimately exceeds the measure — and a page that scrolls sideways as a whole is a layout bug, while a table that does is a table.
Rules only: no zebra striping, no cell borders. In a monochrome system a striped row is a second surface competing with the page ground, and the hairline between rows is already enough to track a line across.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| captionrequired | string | Describes the table for a screen reader, which cannot see the heading above it. Rendered as a visually-hidden `<caption>` — required, because an unnamed table in a page with three tables is unnavigable. | |
| showCaption | boolean | false | Prints the caption instead of hiding it. |
Also accepts everything in TableHTMLAttributes<HTMLTableElement>. Those are forwarded to the underlying element and are not listed row by row.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
THead
Header group. Draws the hard rule that separates labels from data.
Takes no props of its own.
TBody
Takes no props of its own.
TR
Takes no props of its own.
TH
A column label. Mono and uppercase, so it never reads as data.
Takes no props of its own.
TD
Takes no props of its own.
Accessibility
- caption is required: an unnamed table on a page with three tables is unnavigable.
- Column labels are <th scope="col">, so a cell can be traced back to its heading.