Example of Sorting Cards in React Kanban Component

/
/
Sorting

This sample demonstrates the usage of sorting cards in the Kanban board. You can change the sort options in the dropdown list to reflect the card ordering on the board.

More Details...

Loading....
Description

The sample is designed to showcase the sorting behavior of the Kanban board. It contains the sortBy, field and direction properties. The sortBy property provides the following options:

  • DataSourceOrder: Cards are aligned in the ascending or descending order based on the data source order and act accordingly when the user drag-and-drop the cards. Since the feature considers the default data source order, field mapping is not required to sort the cards.
  • Index: The cards are aligned based on the index value. The index binds to the card based on the mapping field that must be an integer value. Cards will be dropped at the particular position where the user drag-and-drop the cards. The index of the cards will dynamically update its field value based on the dropped position.
  • Custom: Users can map any field to sort the cards using this option, which accepts both string and integer field value. It maintains the initial mapping key-value to drag and drop the cards and does not change their mapping value after dropping the cards.

The direction property is used to align the cards either in the ascending or descending order on the Kanban board.