Kanban
KanbanColumn
Individual Kanban column with item count badge, add button, drag-over highlight, and column limit enforcement.
Kanban
The Kanban category provides a complete board UI with drag-and-drop between columns, responsive mobile column switching, and optional deep integration with useXCrud for automatic data management. Cards are fully customizable via slots.
Components
<XAKanbanColumn />
A single board column. Handles drag-over highlighting, item count badge, optional limit warning footer, and an add button. Passes drag events up to XAKanban.
<XAKanbanColumn
:column="{ id: 'todo', label: 'To Do', color: 'neutral' }"
:items="todoItems"
:draggable="true"
:droppable="true"
:show-count="true"
:show-limit="true"
:allow-add="true"
:allow-delete="false"
column-width="320px"
column-min-width="280px"
:card-config="{ showAvatar: true, showDueDate: true, showPriority: true }"
@add="openCreate"
@card-click="openDetail"
@drop="handleDrop"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
column | Object | required | Column definition object |
items | Array | [] | Items in this column |
draggable | Boolean | true | Allow cards to be dragged |
droppable | Boolean | true | Allow cards to be dropped here |
cardConfig | Object | { showAvatar, showDueDate, showPriority, showTags, showAssignee: true, compact: false } | Card display options passed to each XAKanbanCard |
columnWidth | String | '320px' | Column CSS width |
columnMinWidth | String | '280px' | Column CSS min-width |
showCount | Boolean | true | Show item count badge in header |
showLimit | Boolean | true | Show limit warning footer |
allowAdd | Boolean | false | Show add button in column header |
allowDelete | Boolean | false | Show delete button on each card |
Emits
add, card-click, card-delete, drop
AI Context
component: XAKanbanColumn
package: "@xenterprises/nuxt-x-app"
category: Kanban
use-when: >
Rarely used directly — XAKanban renders XAKanbanColumn automatically.
Use standalone only when building a fully custom board layout.
key-patterns:
- column prop must have at minimum id and label
- cardConfig is forwarded to each XAKanbanCard inside the column
- column.limit enforces WIP limits — drops are blocked when limit is reached