TaskBoard - Swimlanes | PrimeUI Pro

#Usage

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

<TaskBoard.Root v-model:tasks="tasks" :swimlanes="swimlanes" swimlane-field="teamId" data-key="id" column-field="columnId">
    <TaskBoard.Content>
        <TaskBoard.SwimlaneHeader />
        <TaskBoard.SwimlaneColumnHeader />
        <TaskBoard.Column v-for="column in columns" :key="column.id" :value="column.id" :label="column.label">
            <TaskBoard.ColumnContent>
                <TaskBoard.Card />
            </TaskBoard.ColumnContent>
        </TaskBoard.Column>
    </TaskBoard.Content>
</TaskBoard.Root>

Swimlanes group items by the configured swimlane-field. TaskBoard still uses the same columns and movement events, with swimlane ids added when cards cross rows. Card placement and move indexes are scoped to the active row cells rather than the whole column.

#Swimlane Data

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

const swimlanes: TaskBoardSwimlane[] = [
    { id: 'frontend', label: 'Frontend', order: 0 },
    { id: 'operations', label: 'Operations', order: 1 }
];

const tasks: TaskBoardItem[] = [{ id: 'task-1', title: 'Review onboarding flow', columnId: 'todo', teamId: 'frontend' }];

Field	Use
`id`	Value matched against the item field named by `swimlane-field`.
`label`	Visible row name and accessible row-group label.
`collapsed`	Seeds initial collapsed state; runtime changes are tracked by TaskBoard state and methods.
`order`	Sorts swimlane rows before rendering. Missing values sort as `0`.

Items without a value for swimlane-field do not appear in a swimlane cell. Keep the field on every task that should participate in the row grid.

#Swimlane Surfaces

Use TaskBoard.SwimlaneHeader for the left row header and TaskBoard.SwimlaneColumnHeader for the column labels above the grid. Regular TaskBoard.Column children still define the workflow columns and card outlets.

The swimlane header slot receives swimlane, itemCount, isCollapsed, and toggleCollapse. The swimlane column-header slot receives column and itemCount. TaskBoard keeps row grouping, counts, collapse state, drag targets, print-only row markup, and ARIA labels on the runtime wrappers.

Counts are calculated from the current item data for each row and cell. They update after create, update, delete, move, filter, sort, and virtual-scroll range changes without requiring the app to recalculate row totals.

#Move Payloads

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 swimlane cells.
`oldSwimlaneId`, `newSwimlaneId`	Swimlane values when the board uses `swimlane-field`.

#Collapse State

Use collapseSwimlane, expandSwimlane, and toggleSwimlane methods for imperative controls. Listen to @swimlane-collapse to mirror state outside the board.

<TaskBoard.Root :swimlanes="swimlanes" swimlane-field="teamId" @swimlane-collapse="onSwimlaneCollapse">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

function onSwimlaneCollapse(payload: { swimlane: TaskBoardSwimlane; collapsed: boolean }) {
    console.log(payload.swimlane.id, payload.collapsed);
}

Collapsed swimlanes stay in the grid so users can reopen them. Their cards are hidden from the row body, but counts and row labels remain available to the header UI.

#Basic Swimlanes

The swimlane sample groups operational work by team while sharing one workflow column set. Row headers use the standard swimlane UI, including the chevron for collapsing a row when space is tight.

Loading Demo...