TaskBoard - Data Binding | PrimeUI Pro

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';

<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

v-model:tasks lets TaskBoard replace the bound item array when a user moves, creates, updates, deletes, or reorders cards through TaskBoard methods or accepted interactions. data-key and column-field are required because TaskBoard reads those fields for identity and placement.

import type { TaskBoardColumn, TaskBoardItem } from '@primeui/vue-taskboard';
const columns = ref<TaskBoardColumn[]>([
    { id: 'todo', label: 'To Do' },
    { id: 'review', label: 'Review' }
]);
const tasks = ref<TaskBoardItem[]>([
    { id: 'TASK-1', title: 'Prepare release notes', columnId: 'todo', order: 0 },
    { id: 'TASK-2', title: 'Review migration guide', columnId: 'review', order: 0 }
]);

Column values must match the rendered column ids. In the example above, an item with columnId: 'review' renders in the column whose id or value is review.

#Item Records

Type	Required fields	App-owned fields
`TaskBoardItem`	A stable value at `data-key`, plus a value at `column-field`.	Any domain metadata: title, customer, severity, owner, due date, score, labels, progress, or product fields.
`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 is still exported as a compatibility and default-card convenience shape, but it is not required. Use TaskBoardItem when your records are tickets, leads, shipments, jobs, cases, or any other product object.

Item records can carry any product metadata. TaskBoard reads the configured id, column, and swimlane fields, then passes the full object through slots and event payloads.

#Binding Modes

Mode	Use	Mutation path
`v-model:tasks`	Parent or local Vue state can accept a replaced array.	TaskBoard applies supported mutations and updates the model.
`:items`	A store, server cache, or immutable state layer owns every write.	TaskBoard emits events and the app applies changes outside the runtime.

#Controlled Writes

When v-model:tasks is used, TaskBoard keeps the original item shape and changes only the configured placement fields for accepted runtime actions. Moving a card updates the field named by column-field; moving across swimlanes also updates the field named by swimlane-field; reordering updates order. Creating, updating, and deleting cards through exposed methods emit the same events as external mode after the model has been updated.

If an item is missing the field named by data-key, TaskBoard cannot select, move, update, delete, or scroll to it reliably. If an item is missing the field named by column-field, it will not be placed in a matching column until the app supplies a valid value.

#Field Mapping

Prop	Required	Description
`data-key`	Yes	Field that contains the item id.
`column-field`	Yes	Field that contains the column id or workflow status.
`swimlane-field`	Only for swimlanes	Field that contains the swimlane id.

#Movement Payload

Field	Meaning
`card`	The item record that moved.
`oldColumnId`, `newColumnId`	Column values before and after the move.
`oldIndex`, `newIndex`	Position inside the source and target list. In swimlane boards, indexes are scoped to the source and target swimlane cells.
`oldSwimlaneId`, `newSwimlaneId`	Swimlane values when the board uses `swimlane-field`.

#Bound Items

The data-binding sample uses v-model:tasks, stable item ids, and a columnId value that changes as cards move.

Loading Demo...