Skip to main content

filters

Initial filter map keyed by tag. Each entry is a predicate that returns true to keep a card visible. Multiple tags let you stack independent filters that combine with logical AND.

Usage​

filters?: Map<string, (card: KanbanCard) => boolean>;
  • Default: new Map()

Each map key is a tag string that identifies the filter. The value is a function that receives a card and returns true to include it or false to hide it. When multiple tags are present, a card must pass every predicate to remain visible.

At runtime, add or remove filters by dispatching the filter-cards action or by updating this prop.

Example​

Set a filter on mount that shows only high-priority cards:

import { Kanban } from "@svar-ui/react-kanban";

const filters = new Map([
  ["priority", (card) => card.priority === 3],
]);

<Kanban cards={cards} columns={columns} filters={filters} />

Stack two independent filters - one by priority, one by assignment:

import { Kanban } from "@svar-ui/react-kanban";

const filters = new Map([
  ["priority", (card) => card.priority >= 2],
  ["assigned", (card) => card.users?.length > 0],
]);

<Kanban cards={cards} columns={columns} filters={filters} />
  • Filtering guide - stacking filters, runtime changes, and external filter widgets
  • filter-cards - add or remove filters at runtime
  • sort - sort criterion applied after filtering