TaskBoard - Custom Fields

Map product-specific item fields into TaskBoard identity, column, and swimlane access.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root v-model:tasks="tickets" data-key="ticketId" column-field="stage">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

Use data-key and column-field when product records use names such as ticketId and stage. Add swimlane-field only when the same data set also has a row field such as team or accountId.

#Mapped Data

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

interface SupportTicket extends TaskBoardItem {
    ticketId: string;
    subject: string;
    stage: 'new' | 'triaged' | 'investigating' | 'resolved';
    severity: 'critical' | 'major' | 'minor' | 'trivial';
    reporter: string;
    product: string;
}

const tickets = ref<SupportTicket[]>([
    {
        ticketId: 'TKT-001',
        subject: 'Login page returns 500 error',
        stage: 'investigating',
        severity: 'critical',
        reporter: 'Sarah Kim',
        product: 'Auth Service'
    }
]);

TaskBoard passes the original object into card, column-content, menu, activation, and drag payloads. Custom fields stay available to the visible card UI and persistence layer, and v-model:tasks keeps them on the item record when the stage field changes.

#Field Contract

Field sourceRoot propRead by TaskBoard
Unique item iddata-keySelection, drag, focus, update, delete, activation, and scroll lookup.
Workflow columncolumn-fieldColumn placement, movement, filtering by column, and move payloads.
Swimlane rowswimlane-fieldSwimlane grouping and cross-row move payloads.

Each rendered column needs a value that matches the item's mapped column field. The sample columns use values such as new, triaged, investigating, and resolved, so the ticket's stage value must be one of those strings.

#Card Rendering

Use slots or context hooks to render custom metadata. TaskBoard.ColumnContent supplies each mapped item record, so the card UI can read fields such as severity, reporter, and product directly.

#Event Payloads

Movement, selection, activation, exposed methods, and context-menu events return the original item record. Persist custom fields from that object instead of mapping back from a demo shape.

#Mapped Tickets

The custom-fields sample binds support tickets with ticketId and stage. Drag a ticket to another column to see TaskBoard update the stage field while the card UI continues to read severity, reporter, and product fields.

Loading Demo...