TaskBoard - Custom Predicates | PrimeUI Pro

#Usage

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

<TaskBoard.Root :items="visibleTasks" data-key="id" column-field="columnId">
    <!-- TaskBoard parts -->
</TaskBoard.Root>

Custom operators are application functions. Use them when search and field filters need product rules such as overdue, blocked, capacity risk, team ownership, or forecast confidence. TaskBoard receives the result array and stays focused on layout, movement, selection, and keyboard behavior.

#Predicate Functions

function isOverdue(task) {
    return Boolean(task.dueDate && new Date(task.dueDate) < new Date());
}

function belongsToTeam(task, teamMembers) {
    return teamMembers.includes(task.assignee);
}

Predicates receive the full item record, so they can read nested metadata, computed risk, permission state, remote flags, or any product field your cards render.

#Predicate Contract

Return true when the item should remain visible. Return false for empty, missing, or invalid values unless the product rule intentionally treats them as matches.

#Combining Rules

const visibleTasks = computed(() => {
    return tasks.value.filter((task) => {
        if (selectedTeam.value && !belongsToTeam(task, teams[selectedTeam.value])) return false;
        if (selectedDueDate.value === 'overdue' && !isOverdue(task)) return false;
        if (selectedPoints.value && task.storyPoints < selectedPoints.value) return false;

        return true;
    });
});

Keep predicates small and named. They are easier to test, reuse in API requests, and share with saved-view logic than a board-owned registry.

#Example Predicates

Predicate	Reads	Meaning
`isOverdue`	`dueDate`	Due date is before today.
`isDueWithin`	`dueDate`	Due date is within N days.
`hasPointFloor`	`storyPoints`	Meets a point threshold.
`belongsToTeam`	`assignee`	Owner is in the team list.

These are ordinary functions. They can run locally, feed a server query, or power a saved view without coupling the filter model to TaskBoard.

#Custom Predicates

The sample uses product predicates for deadlines, point thresholds, and team ownership. The cards expose each predicate field directly so the result set is easy to inspect.

Loading Demo...