Kanban
ProA kanban board component with columns, cards, and drag-and-drop.
vu-kanban · @velkin/react-pro/kanban
A kanban board component with columns, cards, and drag-and-drop.
vu-kanban · @velkin/react-pro/kanban
npm i @velkin/react-pro
import { LicenseInfo } from "@velkin/license";
// Vite: import.meta.env.VITE_VELKIN_LICENSE_KEY
// Next: process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY
LicenseInfo.setLicenseKey(import.meta.env.VITE_VELKIN_LICENSE_KEY ?? process.env.NEXT_PUBLIC_VELKIN_LICENSE_KEY ?? "");
// @velkin-pro
import { VuKanban } from "@velkin/react-pro/kanban";Tables match the member selected under Import.
| Prop | Type | Default | Description |
|---|---|---|---|
| columns | VuKanbanColumnModel[] | [] | Column definitions (data mode). |
| cards | VuKanbanCardModel[] | [] | Cards ordered within each column by array appearance. |
| dragEnabled | boolean | true | Enables HTML5 drag-and-drop. Default: `true`. |
| mutable | boolean | true | Updates `cards` / slotted DOM after move when true. Default: `true`. |
| placeholder | string | "" | Empty-column placeholder (overrides localized default). |
| Event | Detail | Description |
|---|---|---|
| vu-move | VuKanbanMoveDetail | Fired when a card is moved. |
| vu-change | VuKanbanChangeDetail | Fired with the next cards array. |
| Slot | Description |
|---|---|
| — | - Optional slotted `vu-kanban-column` children (rich composition mode). |
| empty | Shown when there are no columns and no cards. |
| Part | Description |
|---|---|
| board | Root board container (horizontal scroll). |
| Method | Description |
|---|---|
| refreshLayout | - Requests a board reflow/repaint. |
| moveCard | - Programmatically move a card (same path as drop/keyboard). |
| Name | Definition |
|---|---|
| VuKanbanChangeDetail | |
| VuKanbanMoveDetail | |