react-table-dnd — Drag-and-Drop Sortable Table for React
A React component library for drag-and-drop sortable tables with row and column
reordering. 60fps animations, auto-scroll, virtual scrolling for 100k+ rows, mobile
support, and full style control.
Features
- Drag-and-drop row and column reordering
- Smooth 60fps animations using direct DOM transforms
- Auto-scroll when dragging near container edges
- Mobile support with long-press to drag
- Drag range constraints for locking rows and columns
- DragHandle component for grip-based dragging
- Virtual scrolling support for 100,000+ rows
- Full className and style prop support on every component
- Works with Tailwind CSS, styled-components, CSS modules
- TypeScript support with full type definitions
- Zero external UI dependencies
Install
npm install react-table-dnd
Components
- TableContainer — Root wrapper providing drag-and-drop context
- TableHeader — Header row container
- ColumnCell — Draggable column header cell
-
TableBody — Body container with ref support for virtual scrolling
- BodyRow — Draggable table row
- RowCell — Cell within a body row
- DragHandle — Restricts drag to a specific grip element
Quick Start
Wrap your table with TableContainer and pass an onDragEnd callback to handle reordering.
Each ColumnCell and BodyRow is independently draggable. Supports both row and column
reordering simultaneously.
Styling
Every component accepts className and style props. The library applies no opinionated
styles — use plain CSS, Tailwind, styled-components, or any approach you prefer.
View on GitHub |
View on npm