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:

<script setup>
  import { Kanban } from "@svar-ui/vue-kanban";

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

<template>
  <Kanban :cards="cards" :columns="columns" :filters="filters" />
</template>

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

<script setup>
  import { Kanban } from "@svar-ui/vue-kanban";

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

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