Table
A grid of data with sorting and selection.
Examples
| Title | Year | Citations | |
|---|---|---|---|
| When checking is easier than solving | 2022 | 133 | |
| Scale is not depth | 2023 | 62 | |
| Circuit lower bounds for reasoning | 2024 | 41 | |
| Benchmarks that isolate one bottleneck | 2025 | 7 |
| Run | Result |
|---|---|
No rows. | |
Props
Table
A grid of data. Arrow keys move between cells; with a selectionMode, Space selects and a checkbox column appears; columns with allowsSorting sort on press.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label? | string | — | Defines a string value that labels the current element. Names the table for screen readers when no caption or heading does. |
fullBleed? | boolean | false | For a table that is the page's main content: no outer border or radius. |
Also takes 95 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
TableHeader
Also takes 77 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Column
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | |
icon? | ReactNode | — | A 16px icon for the column's type, before its label, from |
Also takes 81 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
TableBody
Also takes 75 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Row
Also takes 97 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Cell
Also takes 77 props it passes to the underlying React Aria component or element (events, ARIA attributes, state such as isDisabled), documented by React Aria.
Keyboard
| Key | Does |
|---|---|
| Arrow keys | Move between cells |
| Space | Selects the focused row |
| Enter | Sorts by the focused column header |
| Home or End | Go to the first or last cell in the row |
Accessibility
- A grid with row headers; sort state is announced on the column header (aria-sort).
- Row height follows the density theme.