Kanban boardPro

Drag cards between columns with a line where they land, work-in-progress limits, a filter by person and quick add.

When to use

Cards in columns you drag between, with work-in-progress limits, a filter by person and quick add.
Task boards, sales pipelines, hiring and content calendars.

When not to use

Long lists people sort and filter more than they move: Orders table or a Data Table.
Work with more than six or so stages: the columns stop fitting; a table with a status filter.

Usage

Kanban board with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { KanbanBoard } from "@/components/dashral/blocks/kanban-board"
2
3<KanbanBoard
4  title="Sprint 14"
5  people={team}
6  columns={columns}
7  tasks={tasks}
8  onMove={(id, column, before) => api.tasks.move(id, column, before)}
9  onAdd={(column, title) => api.tasks.create({ column, title })}
10  onDelete={(id) => api.tasks.delete(id)}
11/>

API reference

KanbanBoard

A project board: four columns with counts and work-in-progress limits that warn when crossed. Drag a card to move or reorder it, with a line where it will land; every card's menu moves it too, for the keyboard and touch. Filter by person, and add a task at the bottom of any column. Your board comes from props (a new task list replaces what's shown), and every change goes to your handlers; one that throws is undone, with its message.

Prop	Type	Default
`title`	`React.ReactNode`	`"Website relaunch"`
`note`	`string` After the count of tasks done.	`"launch on Nov 4"`
`people`	`KanbanPerson[]`	`sample`
`columns`	`KanbanColumn[]`	`sample`
`labels`	`Record<string, LabelColor>` Each label's badge color.	`sample`
`tasks`	`KanbanTask[]`	`sample`
`today`	`Date` For due dates: overdue before it, soon within two days.	`sample`
`onMove`	`(id: string, column: string, before: string \| null) => Promise<void> \| void` A card moved: to this column, before this task (or at the end).	—
`onAdd`	`(column: string, title: string) => Promise<KanbanTask \| void> \| KanbanTask \| void` A task added at the bottom of a column; return it as stored to show it so.	—
`onDelete`	`(id: string) => Promise<void> \| void`	—

type KanbanPerson

Prop	Type	Default
`id`	`string`	—
`name`	`string`	—
`src`	`string`	—

type KanbanColumn

A column: its title, a work-in-progress limit that warns when crossed, and its dot's color class. The last is "done".

Prop	Type	Default
`id`	`string`	—
`title`	`string`	—
`limit`	`number`	—
`dot`	`string`	—

type KanbanTask

Prop	Type	Default
`id`	`string`	—
`title`	`string`	—
`column`	`ColumnId`	—
`label`	`Label`	—
`assignee`	`string`	—
`due`	`string`	—
`comments`	`number`	—
`subtasks`	`[done: number, total: number]`	—