カンバンボードKanbanBoardExperimental
A kanban / status board: ordered columns (lanes) of cards, grouped from a flat items list by getColumnId, with per-column count badges, a card render-prop, optional activatable cards, empty-column placeholders, header accent dots, and a contained horizontal scroll that doesn't push the page on mobile. Each column is a labelled region and cards are real buttons when selectable (keyboard-operable). Drag-and-drop is bring-your-own. For editorial boards, CRM pipelines, support queues, task boards and any column-of-cards workflow.
プレビュー
Props
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| columns | KanbanColumn[] | - | Ordered lanes: { id, title, tone? }. tone draws an accent dot in the header. |
| items | T[] | - | All cards in any order — grouped into columns via getColumnId. |
| getItemId | (item: T) => string | - | Stable React key per card. |
| getColumnId | (item: T) => string | - | Which column a card belongs to (matches a columns[].id). |
| renderCard | (item: T) => ReactNode | - | Render a card's body (compose Badge / text / etc.). |
| onCardSelect | (item: T) => void | - | When set, each card is an activatable button (click / Enter / Space). |
| showCount | boolean | true | Per-column count badge. |
| emptyLabel | ReactNode | "なし" | Placeholder for an empty column. |
| columnWidth | number | 260 | Column width in px. |
Usage
import { KanbanBoard, Badge, type KanbanColumn } from "@gunjo/ui"
const columns: KanbanColumn[] = [
{ id: "todo", title: "未着手", tone: "muted" },
{ id: "doing", title: "進行中", tone: "info" },
{ id: "done", title: "完了", tone: "success" },
]
<KanbanBoard<Task>
columns={columns}
items={tasks} // flat list
getItemId={(t) => t.id}
getColumnId={(t) => t.status} // grouped into columns
onCardSelect={(t) => openTask(t)} // cards become buttons
renderCard={(t) => (
<div className="flex flex-col gap-1">
<span className="text-sm font-medium">{t.title}</span>
<span className="text-xs text-muted-foreground">{t.assignee}</span>
</div>
)}
/>
// drag-and-drop is bring-your-own (e.g. dnd-kit) around the board