TaskBoard - API | PrimeUI Pro

#Root Props

Prop	Type	Default	Use
`columns`	`TaskBoardColumn[]`	`[]`	Column metadata used by layout, workflow, and headers.
`v-model:tasks`	`TaskBoardItem[]`	`[]`	Controlled item array that TaskBoard can update.
`items`	`TaskBoardItem[]`	None	One-way external item array.
`data-key`	`string`	Required	Item id field.
`column-field`	`string`	Required	Item column field.
`swimlane-field`	`string`	None	Item swimlane field.
`swimlanes`	`TaskBoardSwimlane[]`	`[]`	Swimlane rows.
`draggable`	`boolean`	`true`	Enables card dragging.
`selection-mode`	`TaskBoardSelectionMode`	`none`	Card selection mode.
`context-menu`	`boolean`	`false`	Enables card context-menu handling.
`density`	`TaskBoardDensity`	`standard`	Runtime density class.
`features`	`TaskBoardFeatures`	Enabled unless false	Feature flags for drag, collapse, reorder, swimlanes, WIP, context menu, and selection.
`rtl`	`boolean`	`false`	Right-to-left rendering.
`disabled`	`boolean`	`false`	Blocks board interaction.
`readonly`	`boolean`	`false`	Blocks editing and dragging interaction.
`column-width`	`number \| string`	None	Fixed desktop/tablet column width. Numbers use pixels; CSS length strings are accepted.
`card-gap`	`number`	None	Non-negative card-stack gap in pixels.
`scrollable`	`boolean`	`true`	Enables board-owned overflow; `false` lets the containing page own scrolling.
`drag-min-distance`	`number`	None	Pointer distance before a card drag starts.
`column-collapsible`	`boolean`	`true`	Enables column collapse.
`column-reorderable`	`boolean`	`false`	Enables column drag reorder.
`column-groups`	`TaskBoardColumnGroup[]`	`[]`	Group headers above columns.
`virtual-scroll`	`boolean`	`false`	Enables virtual scroll.
`virtual-scroll-item-height`	`number`	`250`	Estimated item or row height.
`virtual-scroll-buffer`	`number`	`3`	Extra rendered items around the visible range.
`access`	`TaskBoardAccess`	None	Permissions and column access.

Layout overrides are opt-in. When omitted, column-width and card-gap preserve the active theme variables. Responsive mobile sizing and collapsed-column sizing take precedence over column-width. Virtual scrolling requires an internal scroll viewport, so virtual-scroll keeps board-owned scrolling active even when scrollable is false.

<TaskBoard.Root v-model:tasks="tasks" :columns="columns" data-key="id" column-field="status" :column-width="320" :card-gap="12" :scrollable="false" />

#Compound Parts

Part	Runtime role
`TaskBoard.Root`	Provides board state, events, data access, keyboard handling, drag handling, and exposed methods.
`TaskBoard.Header`	Reserves a board-level surface for toolbar, search, filters, or app actions.
`TaskBoard.Content`	Renders column, swimlane, group-header, and virtual-scroll layout.
`TaskBoard.Column`	Registers or renders one workflow column and its collapse or reorder state.
`TaskBoard.ColumnContent`	Iterates visible cards for a column or swimlane cell.
`TaskBoard.Card`	Provides card context for custom card subparts. The interactive wrapper is rendered by content.
`TaskBoard.DragPreview`, `TaskBoard.DragConfirm`	Render optional drag feedback and guarded-move surfaces.
`TaskBoard.DropIndicator`	Replaces the insertion marker while TaskBoard owns drag hit testing and target indexes.
`TaskBoard.SwimlaneHeader`, `TaskBoard.SwimlaneColumnHeader`	Render swimlane row and column-header surfaces.

The namespace export is import { TaskBoard } from '@primeui/vue-taskboard'; Named exports such as TaskBoardRoot, TaskBoardColumn, and TaskBoardCard are also available for projects that prefer direct imports.

#Value Types

Type	Values
`TaskBoardSelectionMode`	`none`, `single`, `multiple`
`TaskBoardDensity`	`compact`, `standard`, `comfortable`
`TaskBoardColumnStatus`	`todo`, `in-progress`, `done`, `blocked`

Type	Required fields	App-owned fields
`TaskBoardItem`	A stable value at `data-key`, plus a value at `column-field`.	Any product metadata: title, customer, severity, assignee, due date, labels, progress, score, or custom data.
`TaskBoardColumn`	`id` and `label`.	`statusType`, `wipLimit`, `locked`, `pinned`, transition rules, required fields, color, icon, and order.
`TaskBoardSwimlane`	`id` and `label` when swimlanes are used.	`key`, `collapsed`, and `order`.
`TaskBoardColumnGroup`	`label` and `columns`.	Grouping names, column membership, and optional accent `color` chosen by the app.

TaskBoardTask, TaskBoardPriority, and TaskBoardSubtask remain exported for older code and for apps that use the optional fields rendered by the included card UI parts. The root runtime does not require those fields.

#Feature and Access Types

Feature flag	Default	Controls
`dragDrop`	Enabled	Pointer movement, drag preview, drop indicators, and move payloads.
`columnCollapse`	Enabled	Column collapse state and `@column-collapse`.
`columnReorder`	Enabled by feature flag, gated by `column-reorderable` for UI.	Column drag reorder and `@column-reorder`.
`swimlanes`	Enabled	Swimlane rows and collapse state.
`wipLimits`	Enabled	WIP status helpers and blocked move payloads.
`contextMenu`	Enabled by flag, emits when `context-menu` is set.	Right-click payloads for app-owned menus.
`cardSelection`	Enabled	Selection state and selection-change payloads.

const access = {
    role: 'reviewer',
    canDrag: true,
    canEdit: false,
    canCreate: true,
    canDelete: false,
    canReorderColumns: false,
    columnAccess: {
        approved: { canMoveIn: false },
        archived: { canView: false }
    }
};

#Exposed Methods

Method group	Methods
Columns	`getColumns`, `getColumnById`, `collapseColumn`, `expandColumn`, `toggleColumn`
Items	`getTasks`, `getTaskById`, `getTasksByColumn`, `addTask`, `updateTask`, `removeTask`, `moveTask`
Selection	`getSelectedCardIds`, `getSelectedCards`, `setSelectedCards`, `clearSelection`
Swimlanes	`collapseSwimlane`, `expandSwimlane`, `toggleSwimlane`
Scrolling	`scrollToColumn`, `scrollToCard`
History	`undo`, `redo`, `canUndo`, `canRedo`, `clearHistory`
Export and print	`exportToJSON`, `exportToCSV`, `downloadJSON`, `downloadCSV`, `print`
State	`serializeState`, `restoreState`, `getAuditLog`, `clearAuditLog`

moveTask(taskId, columnId, index?, swimlaneId?) accepts a fourth swimlane id for swimlane boards. Exposed item, selection, keyboard, and history methods use the configured data-key, column-field, and swimlane-field.

#Composables

useTaskBoardContext, useTaskBoardColumnContext, useTaskBoardCardContext, and useTaskBoardSwimlaneHeaderContext expose the public compound-part contexts. useTaskBoardSelection, useTaskBoardHistory, useTaskBoardAccess, useTaskBoardWorkflow, and useTaskBoardDrag expose focused slices of board state for product-owned controls.