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} />

Related

• useDataTable options
• Table instance
• Row selection