TaskBoard - Search and Filter

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

#Usage

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

TaskBoard does not own search or filter state. Keep the query, selected facets, and predicate logic in the application, derive the visible item array, then pass that array to TaskBoard.Root.

#App-Owned Query

const visibleTasks = computed(() => {
    return tasks.value
        .filter((task) => matchesSearch(task, searchQuery.value))
        .filter((task) => matchesFacets(task, selectedFilters.value))
        .map((task, order) => ({ ...task, order }));
});

This keeps TaskBoard data-agnostic. Your records can use product fields such as customer, severity, owner, labels, dueDate, or anything else. TaskBoard only needs the configured data-key, column-field, and optional swimlane-field.

#Counts and Empty States

const resultCount = computed(() => visibleTasks.value.length);
const totalCount = computed(() => tasks.value.length);

Result counts, clear buttons, empty states, saved views, and URL query parameters should all live next to the app-owned controls. TaskBoard receives the accepted visible array and renders the board.

#Filter Logic

function matchesFacets(task, filters) {
    const checks = [filters.priority ? task.priority === filters.priority : true, filters.owner ? task.owner === filters.owner : true, filters.label ? task.labels?.includes(filters.label) : true];

    return filters.logic === 'or' ? checks.some(Boolean) : checks.every(Boolean);
}

Use and when every selected field should match. Use or when any selected field is enough. Because the logic is app code, it can match nested records, remote facets, permissions, or product-specific scoring without a TaskBoard operator registry.

#Ordering

TaskBoard uses the item order value when rendering cards inside a column or swimlane cell. If filtering or sorting changes the visible set, normalize order in the derived array so the board displays the exact sequence your query produced.

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 };
    });
}

#Search and Filters

The sample combines a header search field, priority, assignee, tag filters, and and / or logic. The controls are ordinary app state; TaskBoard renders the derived visible array.

Loading Demo...