TaskBoard - Sort

Sort app-owned item arrays before passing the visible data to TaskBoard.

#Usage

import { TaskBoard } from '@primeui/vue-taskboard';
<TaskBoard.Root v-model:tasks="boardTasks" data-key="id" column-field="columnId">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

Sorting belongs to the application. Keep the sort field and direction beside the toolbar controls, then expose a writable board model that returns the sorted view and accepts TaskBoard movement updates.

#Sort Config

const sortConfig = { field: 'priority', direction: 'asc' };

const boardTasks = computed({
    get() {
        return normalizeColumnOrder(sortTasks(tasks.value, sortConfig));
    },
    set(nextTasks) {
        tasks.value = normalizeColumnOrder(nextTasks);
        clearSort();
    }
});

Use a stable field and visible control label so users can connect the sort state with the card order. Clearing the sort should return to the stored board order.

Use :items only when the board is intentionally in external mode and the app handles @card-move and @card-reorder itself. For an interactive sorting demo, a writable v-model:tasks keeps drag, keyboard movement, and manual ordering visible.

#Column Order

TaskBoard renders each column or swimlane cell by the item order value. After an app sort, assign a fresh order per column so the displayed sequence matches the sort.

function normalizeColumnOrder(items) {
    const nextOrder = new Map();

    return items.map((task) => {
        const column = task.columnId;
        const order = nextOrder.get(column) ?? 0;

        nextOrder.set(column, order + 1);

        return { ...task, order };
    });
}

This keeps movement, keyboard focus, virtual scroll, and event payloads aligned with what the user sees.

#Sort Behavior

Value typeBehavior
priority fieldUses critical, high, medium, low.
Date-like valuesCompares parsed dates when both values parse.
NumbersCompares numeric value.
Other valuesCompares string values with localeCompare.
null or undefinedSorts after defined values.

The sample uses a semantic priority order rather than alphabetical priority sorting. Ascending means critical work appears before high, medium, and low work.

#Sort Controls

The sort sample lets users switch between priority, due date, points, and title ordering. Every change is handled in page state before TaskBoard receives the visible model. Dragging a card writes the new order back to the source list and clears the active sort, so manual order never looks stuck behind a stale sorted projection.

Loading Demo...