# Shadcn Drag & Drop blocks

> Drag-and-drop row and column reordering with sortable handles.

- Type: Pro blocks (Data Grid)
- Page: https://web.dev.reui.io/blocks/data-grid/drag-drop
- Docs (Base UI): https://web.dev.reui.io/docs/components/base/data-grid.md
- Docs (Radix UI): https://web.dev.reui.io/docs/components/radix/data-grid.md
- Blocks: 4
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## When to use

- Ranked lists where a dragged row sets priority or precedence, such as a sprint backlog or routing rules
- Column layouts users rearrange by dragging headers, or swap among named presets
- File and folder hierarchies whose rows drag into another folder or between siblings to reorder

## When not to use

- A reorderable list or stack of cards with no table columns: use [Sortable](https://web.dev.reui.io/components/sortable.md) (`get_component("sortable")`)
- A bare reorderable table assembled from parts in a layout you already have: use [Data Grid](https://web.dev.reui.io/components/data-grid.md) (`get_component("data-grid")`)
- Choosing which fields show and how dense rows sit, with order left as it is: use the [Columns blocks](https://web.dev.reui.io/blocks/data-grid/columns.md)

## Agent notes

- `handleDragEnd` writes the new order to local `useState` only; save the rows, rules, columns or tree to your API from there
- `handleReset` restores the seeded demo order, so point it at the order your API last saved or remove it
- Each page.tsx centers the grid in a `min-h-svh` main with `max-w-7xl` and padding; drop that wrapper inside an app shell

## Third-party libraries

- TanStack Table v9: [API reference](https://tanstack.com/table/v9/docs/framework/react/reference/index), [docs](https://tanstack.com/table/v9/docs/framework/react/quick-start), used by 4 of 4 blocks
- dnd kit v6: [API reference](https://dndkit.com/legacy/api-documentation/context-provider/dnd-context/), [docs](https://dndkit.com/legacy/introduction/getting-started/), used by 4 of 4 blocks (these are the Legacy docs; dndkit.com's default docs cover the newer @dnd-kit/react, a different API)
- date-fns v4: [docs](https://date-fns.org/v4.1.0/docs/Getting-Started), used by 1 of 4 blocks
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started), used by 1 of 4 blocks

## Blocks

- [Sprint Backlog](https://web.dev.reui.io/blocks/data-grid/drag-drop/data-grid-drag-drop-1.md): Sprint backlog data grid with drag handle row reordering and live priority rank. Best for work items ranked by dragging, the top one flagged, each with a type icon, owner avatar, cycle, due date and effort points.
- [Routing Rules](https://web.dev.reui.io/blocks/data-grid/drag-drop/data-grid-drag-drop-2.md): Routing rules data grid with drag-to-reorder priority and per-row enable switches. Best for top down rules with When and Then conditions, a 7 day match count and an Enabled switch that dims a rule without moving it.
- [Dispatch Layout Presets](https://web.dev.reui.io/blocks/data-grid/drag-drop/data-grid-drag-drop-3.md): Fulfillment dispatch data grid with drag-to-reorder columns and saved layout presets. Best for column headers dragged sideways over fixed rows, with 3 one click layout presets, capacity mini bars and an exceptions footer.
- [Shared Drive Folders](https://web.dev.reui.io/blocks/data-grid/drag-drop/data-grid-drag-drop-4.md): Shared drive tree grid with reparenting drag and drop and tri-state folder checkboxes. Best for a folder hierarchy whose rows drop inside other folders or between siblings, with cascading checkboxes, sortable headers and a bulk bar.

Every ReUI item has a twin like this one; the index is https://web.dev.reui.io/llms.txt. Agents with the ReUI MCP (https://web.dev.reui.io/docs/mcp) get the same guidance from the getters named above.