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 (1)
While working with react js to build an application using nodejs+ express js, the main tsx file located in the src folder when I open it in Visual Studio Code, it says main tsx4 or main tsx1.