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