Data display

SortableList and KanbanBoard

Reorder items, or move cards between columns, by dragging or with the keyboard.

Ant Design: Pro kanban, dnd-kit sortable

import { SortableList, KanbanBoard } from '@alea/ui';

Examples

Drag the handle, or focus it, press Enter, move with the arrows and press Enter again.

Ship chartsLine, bar, pie

Data grid

Figma kit pages

Templates

Move cards between columns by dragging or with the keyboard.

Chart docsDocs

Figma spec framesFigma

DataGrid editingCode

Tokens v2Done

Reorder by dragging the handle, or with the keyboard: focus the handle, Enter to pick up, arrows to move, Enter to drop (Mantine/dnd-kit sortable).

Prop	Type	Default	Description
`aria-label`required	`string`	-	Name of the list for screen readers.
`items`required	`T[]`	-	The items: id, label, optional description.
`className`	`string`	-	Extra class names for the root element.
`onReorder`	`((items: T[]) => void)`	-	Called with the new order after a move.
`renderItem`	`((item: T) => ReactNode)`	-	Renders the item content (default: label and description).

Cards in columns you drag between, with the keyboard too (Ant Pro kanban, Trello-style).

Prop	Type	Default	Description
`cards`required	`T[]`	-	The cards: id, title, column (a column id) and optional meta.
`columns`required	`{ id: string; title: string; }[]`	-	The columns, in order: id and title.
`headingLevel`	`2 \| 3 \| 4`	`3`	Heading level of the column titles, to fit the page outline. Default 3.
`onChange`	`((cards: T[]) => void)`	-	Called with all cards after a move (column and order changed).
`renderCard`	`((card: T) => ReactNode)`	-	Renders a card (default: title and meta).

Drag and drop from React Aria: focus the handle, press Enter to pick up, arrows or Tab to choose where, Enter to drop. Every move is announced.
Each column is a named grid list with a card count.

Don't