Kanban

Board of columns with draggable cards and WIP limits. Pointer: drag a card (touch: use the grip). Keyboard: Space or Enter picks a card up, arrows move it, Space or Enter drops it, Escape cancels. Moves are announced in a live region.

Import

import { Kanban } from "@jcsoftdev/ui/containers";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/containers/kanban.

Usage

<Kanban
  defaultColumns={columns}
  enforceLimit={false}
  emptyLabel="Sin citas"
/>

Props

Prop	Type	Default	Description
columns	KanbanColumnData[]		Controlled board. Pair with onColumnsChange.
defaultColumns	KanbanColumnData[]	[]
onColumnsChange	((columns: KanbanColumnData[], move: KanbanMove) => void)		Called after a drop (pointer release or keyboard drop) with the new board and the move.
enforceLimit	boolean	false	Refuse drops into another column that already reached its WIP limit.
renderCard	((card: KanbanCardData) => ReactNode)		Replaces the default card body.
emptyLabel	string	"Sin tarjetas"
aria-label	string
className	string

* marks a required prop.

Storybook stories

• Default
• Enforced Limit
• Narrow
• Brutal Preset
• Glass Compact

Source

packages/ui/src/containers/kanban/kanban.tsx