TaskBoard - Virtual Scroll

Render larger TaskBoard datasets with buffered rows and predictable item-height estimates.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root :items="tasks" virtual-scroll :virtual-scroll-item-height="120" :virtual-scroll-buffer="4" 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.ColumnContent>
                <TaskBoard.Card />
            </TaskBoard.ColumnContent>
        </TaskBoard.Column>
    </TaskBoard.Content>
</TaskBoard.Root>

Virtual scroll keeps the rendered range close to the viewport. Use it for larger boards with many cards per column or many swimlane rows, and provide realistic height estimates.

#Virtual Options

PropDefaultUse
virtual-scrollfalseEnables buffered rendering in column bodies and swimlane row grids.
virtual-scroll-item-height250Estimated task or swimlane row height in pixels.
virtual-scroll-buffer3Extra cards or rows rendered before and after the visible range.

Column bodies measure rendered card heights and fall back to virtual-scroll-item-height before measurements exist. Swimlane grids measure row heights and use spacer rows above and below the visible row range.

#Scroll Stability

When item data changes, TaskBoard keeps a nearby visible card or swimlane row anchored whenever that item still exists. Updates, creates, moves, and sorting should not reset the column body or swimlane row grid to the top.

When filtering or deletion removes the old anchor, TaskBoard clamps the scroll position to the nearest valid range. That preserves context as much as the reduced data set allows, but it cannot keep an exact pixel position when the matching rows no longer exist.

#Rendered Range

TaskBoard calculates a dynamic range from the scroll position, viewport height, measured heights, and buffer size. Until measurements are available, it renders an estimated first range from the item-height value.

Use a smaller estimate for compact cards and a larger estimate for swimlane rows. A buffer of 3 to 5 usually keeps scrolling stable without rendering the whole board.

#Data Strategy

Pair virtual scroll with stable ids, compact card markup, and external mode when the board reads from a store. Avoid card content that changes height dramatically after render.

Virtual scroll changes how many cards or swimlane rows are mounted, not what data TaskBoard owns. Filtering, sorting, selection, drag state, and move payloads still operate against the full task collection.

#Responsive Layout

The structural CSS uses container queries and viewport fallbacks to keep columns and swimlane cells wide enough on small screens.

#Large Board

The virtual-scroll sample renders a larger task set while keeping the visible DOM compact.

Loading Demo...