Skip to main content

sort

Initial sort criterion for cards within each column. Update at runtime by changing the prop or dispatching sort-cards.

Usage​

sort?: SortCriterion;
type SortCriterion =
	| ((a: KanbanCard, b: KanbanCard) => number)
	| { field: string; dir?: "asc" | "desc" }
	| null;
  • null - (default) no sorting; cards render in source order
  • { field, dir } - sort by a card field; dir defaults to "asc"
  • (a, b) => number - custom comparator, same contract as Array.prototype.sort

Example​

Sort by field name and direction:

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

Custom comparator:

<Kanban
    :cards="cards"
    :columns="columns"
    :sort="(a, b) => new Date(a.deadline) - new Date(b.deadline)"
/>
  • Sorting guide - sort criteria, runtime changes, and the toolbar sort menu
  • sort-cards - change the sort criterion at runtime
  • filters - filter predicates applied before sorting