KanbanBoard
The records of the ambient <List> as columns, one per column definition, with a card per record. The board fetches nothing, so give the list a perPage that covers every card; a record whose group value names no column is not shown. A drop writes the target column's id to groupSource through an optimistic update: the card changes column at once, and a failed write puts the card back and notifies. A card drags only with edit access on the resource. The board imports from /kanban and installs dnd-kit. A card drags with mouse, touch or pen; a touch drag starts after a hold, so a swipe still scrolls the board. The Move to menu on each card is the keyboard path.
Installation
pnpm dlx shadcn@latest add @chelone/kanban-boardThe records of the ambient <List> as columns, one per column definition, with a card per record. The board fetches nothing, so give the list a perPage that covers every card; a record whose group value names no column is not shown. A drop writes the target column's id to groupSource through an optimistic update: the card changes column at once, and a failed write puts the card back and notifies. A card drags only with edit access on the resource. The board imports from /kanban and installs dnd-kit. A card drags with mouse, touch or pen; a touch drag starts after a hold, so a swipe still scrolls the board. The Move to menu on each card is the keyboard path.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| cardRenderer | (record: TRecord) => ReactNode | — | Replaces the title and description inside a card. |
| className | string | — | |
| columns | readonly KanbanColumnDef[] | — | The columns, in order. A record whose group value names none is not shown. |
| descriptionSource | SourceProp<TRecord> | — | The field shown as a second line when its value is not empty. |
| groupSource | SourceKey<TRecord> | — | The top-level field whose value names a column; a drop writes the target column's `id` to it. |
| linkType | false | "show" | "edit" | — | Where a card goes when `onSelectCard` is not given. `edit` by default, `show` when the resource has no edit view. `false` leaves cards inert. |
| onSelectCard | (record: TRecord) => void | — | Called with the record when a card is selected, in place of navigating. |
| titleSource | SourceProp<TRecord> | — | The field shown as the card title; the record representation when it is null or undefined. |