TaskBoard - Compound Components

#Usage

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

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

Compound parts expose the board as named surfaces instead of one closed widget. Use this form when the product needs its own toolbar, card body, column chrome, empty state, drag preview, right-click menu, or swimlane header while TaskBoard keeps the workflow behavior.

This is the customization boundary for full product boards: TaskBoard owns movement, selection, focus, collapse, and payloads; the app owns the visual system, dialogs, menus, filters, and product-specific card fields.

#Choose a Surface

Start with the smallest part that owns the area you want to change.

Use Custom Styles when the structure is right and only spacing, color, density, or state treatment needs to change. Use UI Parts when you want PrimeOne or Tailwind visuals as editable starting points.

#Small Override

Keep the runtime parts in place and replace only the visible content. This keeps focus, selection, drag and drop, data attributes, and emitted payloads attached to the right DOM surfaces.

<TaskBoard.Column value="review" label="Review">
    <TaskBoard.ColumnHeader>
        <ReviewColumnHeader />
    </TaskBoard.ColumnHeader>

    <TaskBoard.ColumnContent v-slot="{ item, column }">
        <TaskBoard.Card :item="item" :column="column">
            <ReviewCard />
        </TaskBoard.Card>
    </TaskBoard.ColumnContent>
</TaskBoard.Column>

#Compound Parts

#Runtime Boundary

TaskBoard owns data lookup, context, selection ids, drag math, filter state, collapse state, focus, keyboard behavior, and emitted payloads. The app owns the children rendered inside the parts: text, badges, buttons, icons, product metadata, and local styling.

Do not reimplement movement, selection, or hit testing in custom markup. Use slot props for inline templates, or use part hooks such as useTaskBoardColumnContext() and useTaskBoardCardContext() inside extracted components. Persist changes from TaskBoard events such as move, reorder, create, update, or delete.

#Compound Board

The compound board preview uses explicit runtime parts and product-owned visual markup for headers, cards, and footer totals. It is a small version of the same pattern used by the richer Card Slots, Column Slots, Custom Styles, and UI Parts pages.

#Checklist

• Keep TaskBoard.Root, TaskBoard.Content, TaskBoard.Column, and TaskBoard.ColumnContent in the tree.
• Pass stable task and column ids through data-key and column-field.
• Use TaskBoard.Card when a custom card needs card context or subparts.
• Use slot props or context hooks such as useTaskBoardCardContext() instead of querying the DOM.
• Keep custom buttons keyboard reachable and give icon-only controls an accessible label.
• Style state with public data attributes and runtime classes before reaching for deep selectors.
• Treat dialogs, menus, and filters as app-owned components triggered by TaskBoard events.

#API

Relevant parts include TaskBoard.Root, TaskBoard.Header, TaskBoard.Content, TaskBoard.Column, TaskBoard.ColumnHeader, TaskBoard.ColumnContent, TaskBoard.Card, TaskBoard.ColumnFooter, TaskBoard.ColumnEmpty, TaskBoard.DragPreview, TaskBoard.DragConfirm, TaskBoard.SwimlaneHeader, and TaskBoard.SwimlaneColumnHeader. Use @card-context-menu for app-owned right-click menus. See Slots and Contexts for slot payloads and Data Attributes for styling and test hooks.

#Related Docs

• UI Parts
• Card Slots
• Column Slots
• Data Attributes
• Slots and Contexts
• Theming