Sorting

Sorting reorders cards within each column - by priority, deadline, name, or any criterion you choose - so the most relevant items float to the top.

Sort criterion

The board accepts a sort criterion in one of three forms:

• Declarative object - { field, dir } where field is the card property name and dir is "asc" (default) or "desc". The board compares values using standard < / > operators, so strings sort alphabetically and numbers sort numerically.
• Custom comparator - a function (a, b) => number, same contract as Array.prototype.sort. Reach for this when you need multi-field logic or non-trivial ordering (e.g., status enums mapped to a custom rank).
• Null - clears the sort and restores the original card order.

Sorting is per-column. Cards within each column get reordered, but a sort never moves cards across columns.

// declarative
const sort = { field: "priority", dir: "desc" };

// comparator
const sort = (a, b) => {
	const rank = { High: 3, Medium: 2, Low: 1 };
	return (rank[b.status] || 0) - (rank[a.status] || 0);
};

Initial sort

Pass the sort prop to sort cards on first render.

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

  const columns = [
    { id: "backlog", label: "Backlog" },
    { id: "doing", label: "In Progress" },
    { id: "done", label: "Done" },
  ];
  const cards = [
    { id: 1, label: "Design landing page", priority: 3, column: "backlog" },
    { id: 2, label: "Fix login bug", priority: 1, column: "doing" },
    { id: 3, label: "Write tests", priority: 2, column: "backlog" },
  ];
</script>

<template>
  <Kanban :cards="cards" :columns="columns" :sort="{ field: 'priority', dir: 'desc' }" />
</template>

Cards in each column appear ordered from highest to lowest priority. To reverse the order, change dir to "asc".

Runtime sort changes

Dispatch sort-cards through the API to change the criterion at any time. Pass sort: null to clear it and restore the original order.

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

  const api = ref(null);
  const columns = [
    { id: "backlog", label: "Backlog" },
    { id: "doing", label: "In Progress" },
  ];
  const cards = [
    { id: 1, label: "Alpha task", priority: 2, column: "backlog" },
    { id: 2, label: "Beta task", priority: 1, column: "doing" },
  ];

  function sortByLabel() {
    api.value.exec("sort-cards", { sort: { field: "label", dir: "asc" } });
  }

  function clearSort() {
    api.value.exec("sort-cards", { sort: null });
  }
</script>

<template>
  <button @click="sortByLabel">Sort A-Z</button>
  <button @click="clearSort">Clear sort</button>
  <Kanban ref="api" :cards="cards" :columns="columns" />
</template>

Each call replaces the previous criterion - there's no built-in multi-level sort. If you need composite ordering, pass a comparator function that handles tie-breaking across fields yourself.

Built-in sort button

Toolbar ships a ready-made sort menu. Enable it with the sort prop - no extra wiring needed.

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

  const api = ref(null);
  const columns = [
    { id: "backlog", label: "Backlog" },
    { id: "doing", label: "In Progress" },
    { id: "done", label: "Done" },
  ];
  const cards = [
    { id: 1, label: "Design mockups", priority: 3, column: "backlog" },
    { id: 2, label: "API integration", priority: 1, column: "doing" },
    { id: 3, label: "Release notes", priority: 2, column: "done" },
  ];
</script>

<template>
  <Toolbar :api="api" :sort="true" />
  <Kanban ref="api" :cards="cards" :columns="columns" />
  <Editor v-if="api" :api="api" />
</template>

The menu offers four options - label ascending/descending and priority ascending/descending - plus a "Clear" entry that resets to the original order. Each dispatches sort-cards internally.

If you need sort entries beyond label and priority, build a toolbar item array with getToolbarItems, replace or extend the sort section, and pass it to Toolbar via the items prop.