Row ordering
Set enableRowOrdering: true to add a drag-handle column for drag-and-drop row reordering.
You own the data: the table reports the move via onRowOrderChange: (activeRowId, overRowId) => void, and it is up to you to reorder your array. Provide getRowId so the ids passed to the callback are stable, and typically set enablePagination: false so dragging spans the full list.
const [data, setData] = useState(initialData)
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
enableRowOrdering: true,
enablePagination: false,
onRowOrderChange: (activeRowId, overRowId) => {
setData((prev) => {
const next = [...prev]
const from = next.findIndex((row) => row.id === activeRowId)
const to = next.findIndex((row) => row.id === overRowId)
const [moved] = next.splice(from, 1)
next.splice(to, 0, moved)
return next
})
},
})
return <DataTable table={table} />
With virtualization
Row ordering works with enableRowVirtualization. Drag a row toward the top or bottom edge of the table and it scrolls; the dragged row stays rendered while it moves past the rendered window, so you can drop it anywhere in a long list.
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
enableRowOrdering: true,
enableRowVirtualization: true,
enablePagination: false,
onRowOrderChange, // as above
})
Custom range extractor
A rangeExtractor passed in rowVirtualizerOptions still picks the rendered rows; the table adds the dragged row to its result.