Top React Sortable Component Examples

1. React sortablejs

A React component built on top of the mature drag and drop library, Sortable. http://sortablejs.github.io/react-sortablejs/

React component wrapping SortableJS!

We’re now on version 2.0! A major API overhaul with typescript types.

Consider trying it out if you had any troubles earlier.

View on GitHub

2.React grid component

Datagrid is a component that can be used to present data in table. It supports inline edit, action bar and lot more. Component is highly customizable to meet different use cases.

Underneath it uses originally Facebook’s, but later continued by Schrodinger fixed-data-table-2 react component, which is designed to handle large amounts amounts of data without sacraficing performance.

Demo
View the DEMO

View on GitHub

3.React Sortable (HOC)

A set of higher-order components to turn any list into an animated, touch-friendly, sortable list.

Features

• Higher Order Components – Integrates with your existing components
• Drag handle, auto-scrolling, locked axis, events, and more!
• Suuuper smooth animations – Chasing the 60FPS dream 🌈
• Works with virtualization libraries: react-virtualized, react-tiny-virtual-list, react-infinite, etc.
• Horizontal lists, vertical lists, or a grid ↔ ↕ ⤡
• Touch support 👌
• Accessible: supports keyboard sorting

Examples available here: http://clauderic.github.io/react-sortable-hoc/

View on GitHub

4.React Sortly

React nested sortable component https://lytc.github.io/react-sortly
Simple, lightweight and highly customizable dnd nested sortable React component.

Supported to sort the tree, vertical list, horizontal list, table row and maybe more!

Demo: https://lytc.github.io/react-sortly

API Documentation: https://lytc.github.io/react-sortly/api

View on GitHub

#reactjs #javascript