Kanban
Cards in columns that people move by dragging, with the keyboard, or with screen reader actions.Sprint board
Preview
Code
To do
Add partners to the map legend
Collect the Chin State sheetsThree townships are still missing.
Update the Kobo form
In progress
Clean the September dataMerge duplicate rows and fix the township codes.
Review
Dashboard filters
Done
No cards
Installation
Package
CLI (copy source)
pnpm
pnpm add @advui/datanpm
npm install @advui/dataUsage
import { Kanban } from '@advui/data'
<Kanban
aria-label="Sprint board"
defaultValue={[
{ id: 'todo', title: 'To do', items: [{ id: 'a', title: 'Write the report' }] },
{ id: 'done', title: 'Done', items: [] },
]}
onItemMove={(move) => save(move)}
/>Examples
Custom cards
`renderItem` draws a priority and an owner; a closed request is `disabled`.Preview
Code
New
Request from Magway
High
Request from Sagaing
Low
Assigned
Request from Kachin
Medium
Closed
Request from Shan
Low
API reference
Kanban
Takes size props such as `width`; the board scrolls sideways inside it.| Prop | Type | Default | Description |
|---|---|---|---|
value | KanbanColumn<T>[] | — | The columns and their cards: `{ id, title, items }`. |
defaultValue | KanbanColumn<T>[] | — | Starting `value` when uncontrolled. |
onValueChange | (columns: KanbanColumn<T>[]) => void | — | Called with the columns after a card moves. |
onItemMove | (move: KanbanMove) => void | — | `{ itemId, from, to }` after a move, each `{ columnId, index }`: save it here. |
onItemPress | (item: T) => void | — | A card was pressed, or Enter pressed on it: open it here. |
onItemDragStart | (item: T) => void | — | A card was picked up. On iOS and Android, stop a scroll view around the board that is not a ScrollArea or AppShell here (`scrollEnabled={false}`). |
onItemDragEnd | (item: T) => void | — | A picked-up card was dropped or put back. |
renderItem | (item: T) => ReactNode | — | Draws a card’s content; the card around it moves. Default: the title and description. Keep buttons and links out of it. |
columnWidth | SizeTokens | number | '72' | Width of each column. |
aria-label | string | — | Names the board for screen readers. Recommended. |
labels | Partial<KanbanLabels> | — | The keyboard instructions, announcements (`pickedUp`, `moved`, `dropped`, `cancelled`) and action names, for other languages. |
KanbanItem
A card. Extend it with your own fields and draw them with `renderItem`.| Prop | Type | Default | Description |
|---|---|---|---|
id required | string | — | Unique key. |
title required | string | — | Shown by default, and used in announcements. |
description | string | — | Shown under the title by default. |
disabled | boolean | — | Stays where it is: it cannot be picked up. |
moveItem(columns, itemId, columnId, index)
The columns with one card moved: apply a `KanbanMove` from a server, or move cards from your own controls.findItem(columns, itemId)
A card’s column and index, or null.Accessibility
- The board is a named
regionthat scrolls sideways; each column is alistnamed with its title and count (a namedgroupwhile empty), and each card alistitemholding abutton(web). A default card is named by its title and described by its description; arenderItemcard is named by its content. - Keyboard: Space picks a card up, the arrow keys move it within and between columns, and Space or Enter drops it; Escape, or moving focus away, puts it back. Each card is described by these instructions.
- Each step is announced through an assertive live region: “Picked up Update the Kobo form. To do, position 3 of 3.”, then the new place, then where it was dropped.
- A moved card keeps focus, even when it mounts again in another column.
- On iOS and Android each card has screen reader actions, Move up, Move down and Move to the next column’s name, and the move is announced. Swipe up or down on a card to choose one.
| Key | Action |
|---|---|
| Tab | Moves between cards. |
| Space | Picks a card up, or drops it. |
| Arrow Up / Arrow Down | Moves the card within its column. |
| Arrow Left / Arrow Right | Moves the card to the next column. |
| Enter | Drops a picked-up card, or presses a card when `onItemPress` is set. |
| Escape | Puts the card back where it was. |
Platform notes
Web
A mouse drags once it moves; a finger after holding still for a moment, so a swipe still scrolls the board. The board scrolls sideways near its edges while dragging.
iOS
A long press picks a card up and the finger drags it. The board and the ScrollArea or AppShell around it stop scrolling until the finger lifts, so a quick first move drags the card. Stop any other scroll view around the board in
onItemDragStart. Not yet checked on a device.Android
Same as iOS. Checked on a phone before scroll views stopped during a drag: a quick first move scrolled the screen and cancelled the drag.