Layout & Display
Data-driven Kanban board with dependency-free pointer, touch, and keyboard drag-and-drop, column card limits, and live-region announcements.
Wire the invoice export
Fix pagination off-by-one
Dark-mode token pass
Command palette keyboard nav
Calendar range selection
Release notes for 1.1.0
Ship the heatmap chart
| Prop | Type | Default | Description |
|---|---|---|---|
columns | BoardColumnData[] | — | { id, title, limit?, isDropDisabled?, color?, headerActions?, footer? }. |
items | Item[] | — | Flat list, grouped by column at render. |
getItemId | (item) => string | — | Stable id. |
getItemColumn | (item) => string | — | Which column the item is in. |
renderCard | (item, ctx) => ReactNode | — | ctx: { isDragging, isGrabbed, column, index }. |
columns
BoardColumnData[]
Default: —
{ id, title, limit?, isDropDisabled?, color?, headerActions?, footer? }.
items
Item[]
Default: —
Flat list, grouped by column at render.
getItemId
(item) => string
Default: —
Stable id.
getItemColumn
(item) => string
Default: —
Which column the item is in.
renderCard
(item, ctx) => ReactNode
Default: —
ctx: { isDragging, isGrabbed, column, index }.
| Prop | Type | Default | Description |
|---|---|---|---|
onItemMove | (move) => void | — | move: { item, itemId, from: {columnId,index}, to: {columnId,index} }. Apply it to your state. |
isDragDisabled | boolean | false | Read-only board — no dragging. |
onItemMove
(move) => void
Default: —
move: { item, itemId, from: {columnId,index}, to: {columnId,index} }. Apply it to your state.
isDragDisabled
boolean
Default: false
Read-only board — no dragging.
| Prop | Type | Default | Description |
|---|---|---|---|
renderColumnHeader | (column, { count }) => ReactNode | — | Replace the default title + count pill. |
emptyColumnContent | ReactNode | — | Shown in a column with no cards. |
renderColumnHeader
(column, { count }) => ReactNode
Default: —
Replace the default title + count pill.
emptyColumnContent
ReactNode
Default: —
Shown in a column with no cards.
| Prop | Type | Default | Description |
|---|---|---|---|
columnWidth | number | 288 | Column width in px. |
isCompact | boolean | false | Tighter spacing. |
columnWidth
number
Default: 288
Column width in px.
isCompact
boolean
Default: false
Tighter spacing.
| Prop | Type | Default | Description |
|---|---|---|---|
classNames | { base?, column?, columnHeader?, columnTitle?, columnCount?, list?, card?, footer? } | — | Slot classes. |
classNames
{ base?, column?, columnHeader?, columnTitle?, columnCount?, list?, card?, footer? }
Default: —
Slot classes.
| Prop | Type | Default | Description |
|---|---|---|---|
aria-label | string | — | Required — names the board. |
aria-label
string
Default: —
Required — names the board.
