Skip to main content

columnAccessor

Controls how the store reads and writes a card's column membership. Pass a string to use a plain property name, or an object with get/set callbacks for derived membership (e.g., grouping cards by priority or user instead of a literal column field).

Usage​

columnAccessor?: string | {
  get: (card: KanbanCard) => ColumnID;
  set: (card: KanbanCard, value: ColumnID) => KanbanCard;
};

Default: "column"

When a string is provided, the store reads card[columnAccessor] to determine which column a card belongs to and writes the same key on move. When an object is provided:

  • get(card) - returns the column ID for a given card
  • set(card, value) - returns a new card object with the column membership updated to value

Example​

String shorthand (default behavior):

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

  const cards = [
    { id: 1, label: "Task A", status: "todo" },
    { id: 2, label: "Task B", status: "doing" },
  ];

  const columns = [
    { id: "todo", label: "To Do" },
    { id: "doing", label: "In Progress" },
  ];
</script>

<template>
  <Kanban :cards="cards" :columns="columns" columnAccessor="status" />
</template>

Object form for derived membership:

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

  const cards = [
    { id: 1, label: "Task A", priority: 1 },
    { id: 2, label: "Task B", priority: 3 },
  ];

  const columns = [
    { id: 1, label: "Low" },
    { id: 2, label: "Medium" },
    { id: 3, label: "High" },
  ];

  const columnAccessor = {
    get: (card) => card.priority,
    set: (card, value) => ({ ...card, priority: value }),
  };
</script>

<template>
  <Kanban :cards="cards" :columns="columns" :columnAccessor="columnAccessor" />
</template>
  • Columns guide - grouping cards by different fields
  • columns - column definitions the accessor resolves against
  • cards - card objects whose membership the accessor reads