@progress/kendo-react-sortable
Version:
React Sortable provides a sortable drag-and-drop functionality to elements within a list. KendoReact Sortable package
71 lines (52 loc) • 12 kB
Markdown
[](https://www.telerik.com/kendo-react-ui/components/free?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable&utm_content=banner)
# KendoReact Sortable Component for React
> **Important**
>
> - This package is а part of [KendoReact](https://www.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)—an enterprise-grade UI library with 120+ free and premium components.
> - To use this package, you must install a license key file, whether you are on a paid license or a 30-day free trial. To receive a license key, either [purchase a license](https://www.telerik.com/kendo-react-ui/pricing) or start a [free trial](https://www.telerik.com/download-login-v2-kendo-react-ui).
> - It provides a premium KendoReact component. You will need to install a license key when adding the package to your project. For more information, please refer to the [KendoReact My License page](https://www.telerik.com/kendo-react-ui/components/my-license/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable).
> - To receive a license key, you need to either [purchase a license](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable) or register for a [free trial](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable). Doing so indicates that you [accept the KendoReact License Agreement](https://www.telerik.com/purchase/license-agreement/progress-kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable).
> - The 30-day free trial gives you access to all KendoReact components and their full functionality. Additionally, for the period of your trial, you can use our legendary technical support provided directly by the KendoReact dev team!
>
> [Start using KendoReact](https://www.telerik.com/try/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable) and speed up your development process!
>
> If you're looking for free React components, check out [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free).
The [React Sortable Component](https://www.telerik.com/kendo-react-ui/sortable), part of KendoReact, provides a sortable drag-and-drop functionality to elements within a list.
## React Sortable
Among the many features which the KendoReact Sortable delivers are:
- [Items](https://www.telerik.com/kendo-react-ui/components/sortable/items/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)—You can disable and provide an item or an empty item component when you render the items of the Sortable component.
- [Nested item elements](https://www.telerik.com/kendo-react-ui/components/sortable/nesting/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)—The Sortable provides options for nesting additional Sortable components and focusable elements inside its items.
- [Keyboard navigation](https://www.telerik.com/kendo-react-ui/components/sortable/keyboard-navigation/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)—TThe keyboard navigation of the Sortable is always available allowing the user to use the component with the keyboard.
- [Theme support](https://www.telerik.com/kendo-react-ui/components/styling/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)—The KendoReact Sortable, as well as all 100+ components in the KendoReact suite, are styled in three polished themes (Bootstrap, Material, and Default) and can be further customized to match your specific design guidelines.
## Using for Free vs Commercial License
The following table outlines the key resources available with KendoReact and KendoReact Free.
| | [KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free) | [KendoReact](https://www.telerik.com/kendo-react-ui) |
| -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| React components | 50+ | 120+ |
| Four professional themes | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
| Four Figma UI Kits | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
| Page Templates & Building Blocks | 1 template | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
| ThemeBuilder | Free\* | Ultimate |
| Source code | No | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
| Visual Studio Code extension | 1 starter template | Full functionality |
| Legendary customer support | No | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
| AI coding assistant | No | <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" stroke="white" stroke-width="2"/></svg> |
## Support Options
For any issues you might encounter while working with the KendoReact Sortable, use any of the available support channels:
- Industry-leading technical support—KendoReact paid license holders and users with an active (free) trial license can take advantage of our outstanding customer support. To submit a ticket, use [the dedicated KendoReact support system](https://www.telerik.com/account/support-center/contact-us/technical-support?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable).
- Product forums—The [KendoReact forums](https://www.telerik.com/forums/kendo-ui-react?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable) are part of the free support you can get from the community and from the KendoReact team.
- Feedback portal—The [KendoReact feedback portal](https://feedback.telerik.com/kendo-react-ui?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable) is where you can request and vote for new features to be added.
## Resources
- [Getting Started with KendoReact](https://www.telerik.com/kendo-react-ui/components/getting-started/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)
- [Get Started with KendoReact Free](https://www.telerik.com/kendo-react-ui/components/free)
- [Getting Started with the KendoReact Sortable](https://www.telerik.com/kendo-react-ui/components/sortable/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)
- [API Reference of the KendoReact Sortable](https://www.telerik.com/kendo-react-ui/components/sortable/api/SortableProps/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)
- [KendoReact Roadmap](https://www.telerik.com/support/whats-new/kendo-react-ui/roadmap?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)
- [Blogs](https://www.telerik.com/blogs/tag/kendoreact?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)
- [Demos, documentation, and component reference](https://www.telerik.com/kendo-react-ui/components/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)
- [KendoReact pricing and licensing](https://www.telerik.com/kendo-react-ui/pricing?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)
- [Changelog](https://www.telerik.com/kendo-react-ui/components/changelogs/ui-for-react/?utm_medium=referral&utm_source=npm&utm_campaign=kendo-ui-react-trial-npm-sortable)
High-level component overview pages
- [React Sortable Component](https://www.telerik.com/kendo-react-ui/sortable)
_Copyright © 2024 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved._
_Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries._