TaskBoard - Columns

Configure workflow columns, collapse state, reorder behavior, locked columns, and pinned columns.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root :columns="columns" column-collapsible column-reorderable data-key="id" column-field="columnId">
    <TaskBoard.Content>
        <TaskBoard.Column v-for="column in columns" :key="column.id" :value="column.id" :label="column.label">
            <TaskBoard.ColumnHeader />
            <TaskBoard.ColumnContent>
                <TaskBoard.Card />
            </TaskBoard.ColumnContent>
        </TaskBoard.Column>
    </TaskBoard.Content>
</TaskBoard.Root>

Columns come from the columns prop or from explicit TaskBoard.Column children. Collapse and reorder behavior stays on the root, while each column owns its header, body, empty state, and footer surfaces.

#Column Registration

Pass :columns when the board data already has a column array. TaskBoard sorts that array by order, filters hidden columns through access.columnAccess, and uses it for counts, column groups, swimlanes, drag targets, and exposed methods.

You can also render TaskBoard.Column children without a columns prop. In that mode, each column registers itself from its value, label, and optional column object. When both are present, the columns prop is the source of truth and the rendered children provide the visible outlets for headers, bodies, empty states, and footers.

Adding or removing workflow columns is an app-state operation. Update the columns array, persist that change wherever the product stores board configuration, and decide what should happen to cards that still point at a removed column.

#Column Metadata

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

const columns: TaskBoardColumn[] = [
    { id: 'backlog', label: 'Backlog', statusType: 'todo', order: 0 },
    { id: 'active', label: 'Active', statusType: 'in-progress', wipLimit: 6, order: 1 },
    { id: 'done', label: 'Done', statusType: 'done', locked: true, order: 2 }
];
FieldUse
id, labelRequired column identity and visible name. id is matched to each item's column-field.
orderSorts columns before rendering. Missing values sort as 0.
statusTypeAdds status classes for todo, in-progress, done, or blocked.
wipLimitSupplies WIP helpers and warning or exceeded classes.
collapsedSeeds initial collapsed state; runtime changes are tracked by TaskBoard state and methods.
lockedPrevents dragging that column and prevents reorder calculations from displacing it.
pinnedApplies sticky positioning with left: 0; use it for the leading column in horizontal boards.
allowedTransitionsFrom, allowedTransitionsTo, requiredFields, confirmOnEnterWorkflow rules for guarded movement.

#Collapse and Reorder

column-collapsible defaults to true. Set it to false when columns should not expose a collapse button or accept collapse commands. Collapsing emits @column-collapse and updates the exposed methods collapseColumn, expandColumn, and toggleColumn.

Column reorder requires all of these conditions:

  • column-reorderable is true;
  • features.columnReorder is not false;
  • access.canReorderColumns is not false;
  • the header UI calls the startDrag function from the TaskBoard.ColumnHeader slot.

Locked columns can still render in a reorderable board, but the reorder controller rejects a move that would shift another locked column away from its original index.

Dragging a column header near the horizontal edges scrolls the board until the real left or right bound is reached. Reorder payloads use the current DOM column order after scrolling, so repeated reorders do not fall back to stale indexes.

Collapsed columns keep an accessible header and aria-expanded state. The built-in collapsed header is icon-only, while a custom TaskBoard.ColumnHeader slot remains mounted and receives isCollapsed so the app can render its own compact control.

#Column Events

EventPayloadWhen it fires
@column-collapse{ column, collapsed }A user or method toggles a column.
@column-reorder{ columns, oldIndex, newIndex }A reorder drag completes with a new column order.
@card-move{ card, oldColumnId, newColumnId, oldIndex, newIndex, oldSwimlaneId, newSwimlaneId }A card moves between columns or rows.
@card-reorder{ card, columnValue, oldIndex, newIndex }A card changes position within the same column.

#Column States

Runtime classes include p-taskboard-column-collapsed, p-taskboard-column-locked, p-taskboard-column-pinned, p-taskboard-column-dragging, p-taskboard-column-wip-warning, p-taskboard-column-wip-exceeded, and status classes such as p-taskboard-column-in-progress.

TaskBoard.Column renders role="group", data-column-id, an item-count label, and aria-expanded when column collapse is enabled. Keep those runtime wrappers in place when replacing the visible header or card UI.

#Basic Columns

The columns sample renders a standard workflow board with collapsible and reorderable columns.

Loading Demo...

#Collapsible Columns

The collapse sample shows column state, compact collapsed headers, and @column-collapse handling.

Loading Demo...

#Reorderable Columns

The reorder sample enables column dragging and emits the reordered column array.

Loading Demo...

#Dynamic Columns

The dynamic columns sample adds and removes workflow lanes from app state. TaskBoard reindexes the column layout from the updated columns array.

Loading Demo...

#Locked Columns

The locked-column sample prevents selected columns from being moved while keeping them visible in the workflow.

Loading Demo...