'/%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
DataGrid
A complete data grid: search, sort, column visibility, density, selection with bulk actions, inline editing, pagination and CSV export.
Ant Design: ProTable
import { DataGrid } from '@alea/ui';
Examples
Everything on
Search, sort, hide columns, change density, select rows for bulk actions, edit names inline, page and export.
Plugin | Kind | Users | Status | |
|---|---|---|---|---|
| Color | 40 | Beta | ||
| Accessibility | 437 | Live | ||
| Type | 834 | Live | ||
| Handoff | 1,231 | Live | ||
| Icons | 1,628 | Live | ||
| Tokens | 2,025 | Beta | ||
| Color | 2,422 | Live | ||
| Accessibility | 2,819 | Live |
28 rows
Read only
No selection, no editing, all rows: a sortable, searchable list.
Token | Dark | Light |
|---|---|---|
| accent/default | #cd57ff | #940dc2 |
| text/default | #f7f7f7 | #111011 |
| surface/default | #1d1c1b | #ffffff |
| status/success | #3ddc84 | #006535 |
Props
DataGrid props
A full data grid: search, sort, column visibility, density, selection with bulk actions, inline editing, pagination and CSV export (MUI DataGrid, Ant ProTable).
| Prop | Type | Default | Description |
|---|---|---|---|
aria-labelrequired | string | - | Name of the grid for screen readers. |
columnsrequired | GridColumn<T>[] | - | The columns: key, label, and optional format, render, sortable, editable, hidden, align, width. |
rowsrequired | T[] | - | The rows; each needs a unique id. |
bulkActions | ((selected: T[]) => ReactNode) | - | Toolbar buttons that act on the selected rows. |
className | string | - | Extra class names for the root element. |
emptyTitle | ReactNode | 'Nothing to show' | Shown when there are no rows (or none match). |
exportName | string | null | 'data.csv' | File name for Export. Default "data.csv". Leave null to hide Export. |
onCellEdit | ((row: T, key: keyof T, value: string) => boolean | void) | - | Called when a cell is edited: return false to refuse the value. |
pageSize | number | 10 | Rows per page. Default 10; 0 shows all. |
selectionMode | "single" | "multiple" | "none" | 'multiple' | none, single or multiple row selection. Default multiple. |
Accessibility
- Built on Table: a grid with arrow keys between cells and aria-sort.
- Editable cells are buttons named "value, edit column of row"; Enter saves, Escape cancels, and a refused value is marked invalid.
- The toolbar is a named toolbar.
Keyboard
| Key | Does |
|---|---|
| Arrow keys | Move between cells |
| Enter (on an editable cell) | Edits; Enter again saves |
| Escape | Cancels the edit |
| Space | Selects the row |
Do and don't
Do
- Mark one column isRowHeader.
- Return false from onCellEdit to refuse a value.
Don't
- Don't use it for a few rows: Table is lighter.
In Figma
Data grid template with toolbar, header, rows in three states and pagination.