TaskBoard - Column Groups

Place workflow columns under phase headers for larger delivery boards.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root :columns="columns" :column-groups="columnGroups" data-key="id" column-field="columnId">
    <TaskBoard.Content>
        <!-- TaskBoard columns -->
    </TaskBoard.Content>
</TaskBoard.Root>

Column groups render labels above one or more visible columns. The columns array remains the source of workflow state, while column-groups adds phase-level headers.

#Group Shape

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

const columnGroups = [
    { label: 'Intake', columns: ['new', 'triage'], color: '#3b82f6' },
    { label: 'Delivery', columns: ['active', 'review'], color: '#f59e0b' },
    { label: 'Closed', columns: ['done'], color: '#10b981' }
] satisfies TaskBoardColumnGroup[];

#Group Rules

Each group lists column ids. The optional color controls the group accent line and falls back to the default TaskBoard accent when omitted. The header renderer walks the current visible column order and creates a segment when consecutive columns belong to the same group. Columns not included in a group render as ungrouped spacers so the header grid stays aligned.

Hidden columns are omitted from group span calculations through access.columnAccess[id].canView === false. If a group names columns that are not consecutive after sorting or access filtering, TaskBoard renders separate header segments for the visible runs instead of stretching one label across unrelated columns.

#Column Source

Column groups depend on the same columns source as the board. Pass :columns or render TaskBoard.Column children with matching value ids, then pass :column-groups to TaskBoard.Root.

<TaskBoard.Root :columns="columns" :column-groups="columnGroups" 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>

Column groups are visual phase headers. They do not change card movement rules, emitted move payloads, WIP limits, or persistence shape. Keep those rules on columns and workflow APIs.

#Styling Hooks

Use p-taskboard-column-group-headers, p-taskboard-column-group-headers-inner, and p-taskboard-column-group-header for the header band.

Use the column-group-header slot on TaskBoard.Content when the group label needs custom markup.

<TaskBoard.Content>
    <template #column-group-header="{ group, columns }">
        <span>{{ group.label }} ({{ columns.length }})</span>
    </template>
    <!-- TaskBoard columns -->
</TaskBoard.Content>

#Grouped Workflow

The column-groups sample places workflow states under broader delivery phases.

Loading Demo...