TaskBoard - Print | PrimeUI Pro

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
import { ref } from 'vue';
const board = ref(null);
function onPrint() {
    board.value?.print();
}

<TaskBoard.Root ref="board" v-model:tasks="tasks" data-key="id" column-field="columnId" :swimlanes="swimlanes">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

Call print from an app-owned toolbar button or menu action. TaskBoard prepares the root as the print target, scrolls to the top, opens the browser print dialog, and keeps print state active until the browser fires afterprint.

#Root Method

Method	Behavior
`print`	Prepares the board root and calls `window.print()`.

Use the root method instead of calling window.print() directly when the board sits inside a docs preview, drawer, scroll panel, or application shell. The method marks only the active board and its ancestors, so surrounding layout wrappers do not clip the printed output.

Call print from a direct user action such as a button click. Browsers may block or ignore print dialogs triggered from background work.

#Print State

TaskBoard adds temporary hooks while the print dialog is open.

Hook	Applied to	Purpose
`data-print-target="true"`	TaskBoard root	Identifies the board that should print.
`p-taskboard-printing`	TaskBoard root	Applies board-level print layout rules.
`p-taskboard-print-active`	`document.body`	Hides content outside the active board path.
`p-taskboard-print-ancestor`	Ancestor shells	Keeps parent wrappers visible and unclipped.

The hooks are removed after afterprint. Existing print-state classes on the same elements are restored instead of being overwritten permanently.

#Print Output

Screen boards are optimized for interaction. Print boards are optimized for a document page.

Board type	Printed layout
Columns	Columns wrap to the page width. Column borders, color strips, collapse controls, and count chips are removed. The column title remains, and card tags keep a simple border so metadata stays readable in black-and-white print.
Swimlanes	Each swimlane prints as its own section with a compact title and item count. The workflow columns repeat inside that swimlane, and the column groups wrap to the next row when they do not fit the page.

Filtered-out cards remain hidden. Collapsed columns print their card list so a saved collapsed state does not remove work from the printed board. Drag previews, drop indicators, column footers, and interactive-only controls are hidden. App-owned overlays such as menus and dialogs should use their own print hiding rules.

#App Controls

Keep print buttons, filters, and export controls outside TaskBoard.Root when they should not appear on paper. If a product toolbar belongs inside TaskBoard.Header, hide individual controls with print CSS and keep only the title, date, or report metadata that should be printed.

The board header can be useful in print. Add a concise title, date, team, or saved-view label there when the printed page needs context away from the app.

The print sample keeps the button outside the print target, prints the board header as report context, expands collapsed card lists for print, and uses the browser print dialog.

Loading Demo...

#Swimlane Print

Swimlane print output repeats the workflow columns inside each swimlane section. This keeps a region, team, account, or release lane readable even when the board has more columns than fit on one printed row.

Loading Demo...