'/%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
Table
Rows and columns with sorting, row selection, a sticky header, resizable columns and an empty state.
Ant Design: Table
import { Table, TableHeader, Column, TableBody, Row, Cell } from '@alea/ui';
Examples
Sorting and selection
Click a header to sort; the checkboxes select rows.
Plugin | Kind | Users | Status | |
|---|---|---|---|---|
| Contrast Checker | Accessibility | 3,410 | Live | |
| Palette Generator | Color | 1,240 | Live | |
| Type Scale | Type | 860 | Live | |
| Spec Sheet | Handoff | 120 | Beta | |
| Icon Audit | Icons | 95 | Beta |
0 selected
Sticky header, compact, resizable
A fixed height scrolls the body; drag the column edges.
Token | Sample |
|---|---|
--alea-bg | |
--alea-surface | |
--alea-surface-deep | |
--alea-surface-raised | |
--alea-border | |
--alea-border-strong | |
--alea-text | |
--alea-text-muted | |
--alea-text-faint | |
--alea-accent | |
--alea-accent-strong | |
--alea-focus |
Empty
renderEmptyState for no rows.
File | Format |
|---|---|
No exports yetExport tokens from the Figma plugin and they show up here. | |
Props
Table props
Data in rows and columns: sorting, row selection, sticky header, resizing, keyboard grid navigation (Ant's Table).
| Prop | Type | Default | Description |
|---|---|---|---|
density | "compact" | "comfortable" | 'comfortable' | compact rows (40 px) or comfortable (52 px, default). |
maxHeight | string | number | - | Max height of the scroll area, e.g. 400. |
resizable | boolean | - | Lets people drag column edges to resize. |
stickyHeader | boolean | - | Header stays visible while the body scrolls (needs a height on the container). |
Column props
A column header; allowsSorting shows the sort arrow and makes it pressable.
| Prop | Type | Default | Description |
|---|---|---|---|
align | "center" | "start" | "end" | 'start' | Right-aligns numbers. |
children | ReactNode | - | The children of the component. A function may be provided to alter the children based on component state. |
Row props
A row; with selection it starts with a checkbox.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. (React Aria) |
className | ClassNameOrFunction<TableRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. (React Aria) |
href | string | - | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). (React Aria) |
id | Key | - | The unique id of the column. (React Aria) |
isDisabled | boolean | - | Whether the row is disabled. (React Aria) |
onPress | ((e: PressEvent) => void) | - | Handler that is called when the press is released over the target. (React Aria) |
style | StyleOrFunction<DisclosureGroupRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. (React Aria) |
target | HTMLAttributeAnchorTarget | - | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). (React Aria) |
textValue | string | - | A string representation of the column's contents, used for accessibility announcements. (React Aria) |
value | object | - | The object value that this row represents. When using dynamic collections, this is set automatically. (React Aria) |
Cell props
| Prop | Type | Default | Description |
|---|---|---|---|
align | "center" | "start" | "end" | - | Text alignment: start (default), center, or end for numbers. |
Accessibility
- A grid: arrow keys move between cells, sorting is announced with aria-sort.
- Mark one column isRowHeader so rows have names.
Keyboard
| Key | Does |
|---|---|
| Arrow keys | Move between cells |
| Enter (header) | Sorts |
| Space | Selects the row |
| ⌘A / Ctrl+A | Selects all |
Do and don't
Do
- Right-align numbers (align="end").
- Use renderEmptyState.
Don't
- Don't use a table for layout.