TaskBoard - Column Slots

#Usage

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

<TaskBoard.Root v-model:tasks="tasks" data-key="id" column-field="columnId" :column-collapsible="true">
    <TaskBoard.Column value="review" label="Review">
        <TaskBoard.ColumnHeader>
            <WorkflowColumnHeader />
        </TaskBoard.ColumnHeader>
        <TaskBoard.ColumnContent>
            <TaskBoard.Card />
        </TaskBoard.ColumnContent>
    </TaskBoard.Column>
</TaskBoard.Root>

Column slots expose column metadata, counts, collapse state, and visible items. Inline templates can read those as slot props; extracted components can call useTaskBoardColumnContext() instead. Keep TaskBoard column parts in place so layout, data attributes, drag targets, and keyboard behavior remain attached.

Use this layer when the product needs workflow chrome around the cards: WIP targets, owners, service-level targets, review hints, app-owned add actions, or empty-state copy. Card slots own task content; column slots own the frame around a list of tasks.

#Choose a Column Surface

Use card slots for task-level content. Use column slots for the frame around a list of cards.

#Small Override

Build a header with WIP status and a footer with a column-aware add action.

const qaColumn = {
    id: 'qa',
    label: 'QA',
    wipLimit: 4
};

<TaskBoard.Column value="qa" label="QA" :column="qaColumn">
    <TaskBoard.ColumnHeader>
        <QaColumnHeader />
    </TaskBoard.ColumnHeader>

    <TaskBoard.ColumnContent>
        <template #default="{ item, column }">
            <TaskBoard.Card :item="item" :column="column" />
        </template>
        <template #empty>Ready for the next QA item.</template>
    </TaskBoard.ColumnContent>

    <TaskBoard.ColumnFooter v-slot="{ column, itemCount }">
        <span>{{ itemCount }} items</span>
        <button type="button" @click="openCreateDialog(column)">Add QA task</button>
    </TaskBoard.ColumnFooter>
</TaskBoard.Column>

<script setup lang="ts">
import { useTaskBoardColumnContext } from '@primeui/vue-taskboard';

const column = useTaskBoardColumnContext();
</script>

<template>
    <header class="column-header">
        <button type="button" :aria-expanded="!column.isCollapsed.value" @click.stop="column.toggleCollapse">
            {{ column.isCollapsed.value ? 'Open' : 'Collapse' }}
        </button>
        <strong>{{ column.columnData.label }}</strong>
        <span>{{ column.itemCount.value }}/{{ column.columnData.wipLimit }}</span>
    </header>
</template>

#Column Surfaces

#Slot Data

Column surfaces expose small payloads:

• TaskBoard.ColumnHeader: column, itemCount, isCollapsed, toggleCollapse, and startDrag.
• TaskBoard.ColumnFooter: column and itemCount.
• TaskBoard.SwimlaneHeader: swimlane, itemCount, isCollapsed, and toggleCollapse.
• TaskBoard.SwimlaneColumnHeader: column and itemCount.
• TaskBoard.ColumnContent: item, column, isSelected, and isDragging.
• TaskBoard.ColumnContent named slots: #empty renders empty copy. Use TaskBoard.DropIndicator when the insertion marker needs custom structure.

Create dialogs, inline forms, and add buttons should call your own handler with the column payload, then update v-model:tasks or the external store.

#Context Boundary

Custom column UI can call exposed helpers, but movement rules, collapse state, and column ordering remain TaskBoard-owned.

If a custom header has multiple controls, stop pointer events on only the controls that should not start column drag from the header surface. Keep the header readable when collapsed, and keep counts accurate by using itemCount from the slot payload or useTaskBoardColumnContext() instead of counting the original array yourself.

When a custom TaskBoard.ColumnHeader slot is provided, it remains mounted for both expanded and collapsed states. Use isCollapsed and toggleCollapse from the slot payload to draw the collapsed treatment instead of depending on the built-in expand button.

#Swimlane Notes

Swimlane headers receive row-level data and counts across that row. Swimlane column headers receive column metadata for the grid header. Keep those surfaces visually quieter than cards so the board can still scan by task.

#Column Chrome Studio

The column chrome preview adds product metadata to the frame around each column: owner, target, WIP status, empty copy, footer summaries, and column-aware app actions. The cards still use the standard UI part so the customization boundary stays visible.

#Checklist

• Use itemCount from the slot payload for counts and WIP badges.
• Keep collapse controls reachable by keyboard and label their expanded state.
• Call toggleCollapse from slot helpers instead of editing internal state.
• Wire add buttons to app-owned dialogs, drawers, or local handlers that update the bound task data.
• Use #empty for empty-state copy inside TaskBoard.ColumnContent.
• Keep column-level metadata in column records or derived app state; do not infer it from DOM order.
• Keep drag indicator styling separate from header and footer styling.
• Use data-column-id for test selectors and column-specific CSS.

#API

Relevant parts include TaskBoard.Column, TaskBoard.ColumnHeader, TaskBoard.ColumnContent, TaskBoard.ColumnFooter, TaskBoard.ColumnEmpty, TaskBoard.SwimlaneHeader, and TaskBoard.SwimlaneColumnHeader. See Slots and Contexts for payloads and Data Attributes for stable selectors.

#Related Docs

• Compound Components
• UI Parts
• Card Slots
• Drop Indicators
• Data Attributes
• Slots and Contexts
• Theming