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.

This demo may be temporarily unavailable due to an issue with the UNPKG service we use for resource loading. You can vote on it in the

UNPKG repository

We're working on a fix — sorry for the inconvenience.

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.