React Sortable

  • Easily enable users to sort elements within a list using a drag-and-drop functionality.
  • Part of the KendoReact library along with 100+ professional UI components built with React for React, from the ground up.
  • Get started quickly with our award-winning support, detailed documentation, interactive demos and instructor-led training.
  • Overview

    The React Sortable component provides a drag and drop functionality to help reorder any elements within a generic list. This reordering can be applied to anything from simple HTML elements to more advanced React components like the rest of the KendoReact UI library.

    See React Sortable Overview demo

    React Sortable - Overview, KendoReact UI Library
  • Nested Items

    With the KendoReact Sortable, the drag and drop functionality can be applied to parent and child elements alike. This allows for nested elements to be rearranged while also allowing parent elements to be rearranged amongst themselves.

    See React Sortable Nested Items demo

    React Sortable - Nested Items, KendoReact UI Library
  • Globalization

    When no data items are available, the React Sortable component displays a default message. This string can be overridden to ensure that the displayed message fits user or language requirements.

    See React Sortable Globalization demo

    React Sortable - Globalization, KendoReact UI Library
  • Keyboard Navigation

    Even with complex scenarios like selecting elements and rearranging them, the KendoReact Sortable can be interacted with using just a keyboard, thanks to the built-in keyboard navigation.

    See React Sortable Keyboard Navigation demo

All KendoReact Components

waves bg

Next Steps

Visit Our Demos

See KendoReact in action and check out how much it can do out-of-the-box.

See Pricing

Buy an individual license for KendoReact, or treat yourself to Kendo UI, our complete JavaScript bundle.

Start Free Trial

Try KendoReact with dedicated technical support.