DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Sortable - Kanban

The Sortable component allows users to reorder elements using drag and drop.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

In this demo, two different Sortables (identified by the class attribute) are used:

  • sortable-lists
    This Sortable allows users to reorder card lists. It nests <div> elements that represent the lists. The handle property specifies that lists can be dragged by their titles. To correctly animate items being reordered, Sortable requires the item orientation. The itemOrientation property is set to "horizontal" because card lists are orientated horizontally.

  • sortable-cards
    This Sortable allows users to reorder cards. It nests <div> elements that represent all cards in a specific list. All Sortables are added to the same group to allow users to move cards between lists.

When a user moves an element in the UI, you need to move the corresponding data object in code. Handle events to implement this functionality. These events depend on your use-case. In this demo, we handle the onDragStart and onAdd events for Sortable with the sortable-lists class and the onReorder event for both Sortables.

In addition to Sortable, this kanban board implementation uses the ScrollView component. The component's instance with the scrollable-board class allows you to scroll the board left to right. The component's instance with the scrollable-list class makes lists scrollable.