StructuredList
Lightweight React structured list for header and text rows, with selectable rows, compact density, and no sorting overhead. Renders a real table.
StructuredList is lighter than Table: no sorting or filtering. Add selectable for per-row checkboxes that toggle on row click.
When to use
Use StructuredList for simple row data that needs no sorting or filtering: a list of documents, contacts, or options with a few attributes. Add selectable when users pick rows.
When the data needs sorting, filtering, or many columns, use Table.
Examples
Props
Props declared by StructuredList. Native attributes of the underlying element pass through.
<StructuredList>
| Prop | Type | Default | Description |
|---|---|---|---|
compact | boolean | ||
contained | boolean | ||
rowDivider | boolean | ||
colDivider | boolean | ||
selectable | boolean |
<StructuredListRow>
| Prop | Type | Default | Description |
|---|---|---|---|
selected | boolean | Selected state of a selectable row (controlled). Drives the row's
auto-rendered checkbox + data-state="selected". | |
onSelectedChange | (selected: boolean) => void | Fired when a selectable row toggles - by its checkbox, a click anywhere
on the row, or keyboard on the checkbox. | |
disabled | boolean | Visually + interactively mutes the row and its checkbox. | |
selectionLabel | string | Accessible name for a selectable row's auto-rendered checkbox. |
<StructuredListHead>
| Prop | Type | Default | Description |
|---|---|---|---|
align | Align |
<StructuredListCell>
| Prop | Type | Default | Description |
|---|---|---|---|
align | Align | ||
__control | react.ReactNode |
Accessibility
The list renders a native <table> with header cells, so columns are announced with each value. Selectable rows expose role="checkbox" with the checked state and toggle on click or Space.
Give the table an aria-label that names the data set.