opinion
Kanban
Columns, cards, drag.
Project boardDrag, drop, touch; WIP limit on In progress
To do
ResearchDue Fri
PN
Ops
LS
Design
MC
In progress
2/3
Eng
JW
Design
MC
Done
Design
MC
Ops
LS
Blocked
In progress
2/2
EngDue 26 Oct
JW
Design
MC
In context
Project screenThe board inside a project page, and the same board on a phone
Harbour rebrand
9 of 14 done · launch 24 Oct
MCJWPNLS
DesignOpsTo do
ResearchDue Fri
PN
Ops
LS
Design
MC
In progress
2/3
Eng
JW
Design
MC
Done
Design
MC
Ops
LS
Harbour rebrand
To do 3In progress 2Done
Eng
JWOffline sync for tasks
Design
MCHarbour homepage
Props
| Prop | Type | Required | Default |
|---|---|---|---|
columns | KanbanColumn[] | Yes | — |
cards | Record<string, KanbanCard> | Yes | — |
onChange | ((next: KanbanState) => void) | undefined | No | — |
search | string | undefined | No | |
filterCard | ((card: KanbanCard) => boolean) | undefined | No | — |
cardVariant | "default" | "sticky" | undefined | No | default |
stickyDefaultLimit | number | false | undefined | No | 3 |
renderCard | ((card: KanbanCard, ctx: KanbanCardRenderContext) => ReactNode) | undefined | No | — |
renderColumnTitle | ((column: KanbanColumn) => ReactNode) | undefined | No | — |
onCardLongPress | ((card: KanbanCard) => void) | undefined | No | — |
collapsedColumnIds | string[] | undefined | No | — |
onColumnCollapsedChange | ((columnId: string, collapsed: boolean) => void) | undefined | No | — |
addPosition | "start" | "end" | undefined | No | end |
className | string | undefined | No | — |
Accessibility
Cards and columns drag with the mouse (native HTML5 drag and drop) and with touch (a long-press lifts a card). There is no keyboard-operable move yet; a documented gap. Each card title is a real Editable, so renaming works from the keyboard.
data-rebar-* attributes
data-rebar-component="kanban"; each column, section and card carries data-rebar-part="column", "section" or "card".
Migrating to Ant Design
Not codemod-covered. AntD has no board component; a migration reimplements the board on top of a drag-and-drop library of the consuming team's choice.