react-table-dnd: drag-and-drop rows and columns for React tables
Reorder rows and columns by dragging, drag a multi-row selection as one group, and
virtualize 100,000+ rows. Works on touch screens. No dependencies besides React.
Install
npm install react-table-dnd, then
import "react-table-dnd/styles" once.
Features
- Row and column reordering
- Multi-select with click, Ctrl/Cmd, Shift, checkboxes or tap, dragged as one group
- Virtual tables with @tanstack/react-virtual
- Long-press to drag on touch screens
- Drag handles, locked rows and columns
- Drag events: onDragStart, onDragOver, onDragEnd, onDragCancel
- Works with TanStack Table
- TypeScript types, ESM and CommonJS, server rendering
Components
- TableContainer: the root, with the drag events and selection props
- TableHeader and ColumnCell: the header row and its draggable cells
- TableBody, BodyRow and RowCell: the body, its draggable rows and their cells
- DragHandle and SelectHandle: limit dragging or selecting to one element
GitHub |
npm