Tables are everywhere in React apps — admin panels, dashboards, analytics tools, and data grids.
One thing that’s surprisingly tricky to implement well is drag-and-drop reordering, especially when you want:
- row reordering
- column reordering
- smooth animations
- good performance with large datasets
Most existing solutions rely heavily on React re-renders during drag operations, which can become slow when working with large tables.
So I built a small library called flexitablesort.
What it does
flexitablesort enables drag-and-drop row and column reordering for React tables with a focus on performance and minimal dependencies.
Key features:
- Row and column drag support
- Smooth animations using direct DOM transforms
- Auto-scroll when dragging near container edges
- Works with virtual scrolling (tested with "@tanstack/react-virtual")
- No external UI framework required
- Fully styleable components
- Event delegation for performance
Demo
Live demo and documentation:
https://samiodeh1337.github.io/sortable-table/
Install
npm install flexitablesort
Why I built it
I wanted a lightweight solution for sortable tables that:
- doesn’t require a large drag-and-drop framework
- works smoothly with large datasets
- stays flexible enough to integrate into custom table layouts
Feedback welcome
I built this pretty quickly and haven’t fully battle-tested it yet, so I’d really appreciate feedback from other React developers.
GitHub:
https://github.com/samiodeh1337/sortable-table
npm:
https://www.npmjs.com/package/flexitablesort
If you try it out, let me know what works well and what could be improved!
Top comments (0)