'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Data display
StructuredList
Rows of facts in columns, lighter than a table: plan comparisons, settings summaries, specs. With selectionMode="single" each row is a choice. On phones each row stacks its cells with their labels.
import { StructuredList } from '@alea/ui';
Examples
StructuredList
Rows of facts in columns, lighter than a table. With selectionMode="single" each row is a choice. On phones each row stacks its cells with their labels.
Tokens
The design tokens this component reads, with their value in the current theme. Override any of them to restyle it.
Color
--alea-accent…--alea-accent-on…--alea-accent-subtle…--alea-border…--alea-border-control…--alea-focus…--alea-surface-hover…--alea-text-muted…
Space
--alea-space-4…
Radius
--alea-radius-sm…
Type
--alea-font-size-md…--alea-font-size-xs…--alea-font-weight-semibold…
Motion
--alea-motion-duration-fast…
Props
StructuredList props
Rows of facts in columns, lighter than a table: plan comparisons, settings summaries. With selectionMode="single", each row is a choice. On phones each row stacks its cells.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-labelrequired | string | - | Name for screen readers. |
columnsrequired | { key: keyof T & string; label: ReactNode; align?: "start" | "end" | undefined; width?: string | undefined; }[] | - | The columns: key in each row, header, and alignment. |
rowsrequired | T[] | - | The rows. |
className | string | - | Extra class names. |
defaultValue | string | - | The chosen row at first. |
onChange | ((id: string) => void) | - | Called with the chosen row id. |
selectionMode | "single" | "none" | 'none' | single: each row is a choice (a radio), for plans and options compared side by side. Default none. |
showHeader | boolean | true | Shows the column headers. Default true. |
value | string | - | The chosen row id (controlled). |
Specs
Generated from the source: the variants in the types, the states and tokens in the CSS, and the motion patterns that apply. The grids render the real component in both themes; the numbers are measured from the page.
- Variants
selectionModesinglenone- States
- HoverSelectedKeyboard focus
- Dark and light
- Every color comes from theme tokens, so it follows data-theme (and presets like Graphite) on the page or any wrapper. Contrast is checked in both themes.
- Styling hooks
.alea-slist-row.alea-slist-head.alea-slist-cell.alea-slist.alea-slist-option.alea-slist-check- Data attributes
data-align=enddata-label
Accessibility
- Read only, it is a table with column headers and row headers.
- With selection, it is a radio group: arrows move between rows and the chosen one is announced.
Keyboard
| Key | Does |
|---|---|
| Arrow Up / Down | Move between choices (selection) |
| Space | Choose the row |
Do and don't
Do
- Keep it to a few columns; use Table or DataGrid for sorting and many rows.
Don't
- Don't put buttons in selectable rows.