For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

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 the Sortable component
A bare reorderable table assembled from parts in a layout you already have: use the Data Grid component
Choosing which fields show and how dense rows sit, with order left as it is: use the Columns blocks

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 API docs

TanStack Table v9: API reference, docs, used by 4 of 4 blocks
dnd kit v6: API reference, docs, 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, used by 1 of 4 blocks
Sonner v2: API reference, docs, used by 1 of 4 blocks

Markdownhttps://web.dev.reui.io/blocks/data-grid/drag-drop.md

MCPsearch({ query: "drag & drop", type: "block", category: "drag-drop" })

Full index for agents:llms.txtReUI MCP setup

Shadcn Data Grid Blocks with Drag and Drop Row and Column Reordering

Drag and drop in a grid is easy to demo and hard to finish: the handle has to be discoverable, the drop target has to be obvious, and a keyboard user has to be able to do the same thing. These blocks ship all three on the ReUI Data Grid with DnD Kit underneath.

Row reordering and column reordering are separate blocks, because they solve different jobs: one is priority, the other is layout.

All Drag & Drop Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Sprint Backlog Sprint backlog data grid with drag handle row reordering and live priority rank
Routing Rules Routing rules data grid with drag-to-reorder priority and per-row enable switches
Dispatch Layout Presets Fulfillment dispatch data grid with drag-to-reorder columns and saved layout presets
Shared Drive Folders Shared drive tree grid with reparenting drag and drop and tri-state folder checkboxes

What the Drag & Drop blocks cover

Data Grid screens, each a full block with fixture data:

Sprint backlog data grid with drag handle row reordering and live priority rank
Routing rules data grid with drag-to-reorder priority and per-row enable switches
Fulfillment dispatch data grid with drag-to-reorder columns and saved layout presets
Shared drive tree grid with reparenting drag and drop and tri-state folder checkboxes

Built from

shadcn/ui components Button, Dropdown Menu, Empty, Item, Avatar, Card, the same components your project already owns.
Both twins, every style Each block ships on Base UI and on Radix, in 8 design styles, and names every part it composes on its page.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Is drag and drop accessible?

Yes. The handles are focusable buttons with keyboard reordering, and the drop indicator is announced, following the DnD Kit accessibility pattern the ReUI Sortable primitive uses.

Does reordering persist?

The new order is delivered through a callback; the blocks keep it in state and the Data Grid docs show how to save it.

How do I install a Drag & Drop block?

Open the block on its page, copy the install command (the shadcn CLI with the @reui registry and your license key) or the AI prompt, and run it in your project. The block, its fixtures and every ReUI and shadcn dependency land in one command.

Is a license needed?

Drag & Drop blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.

Docs Markdown

Shadcn Data Grid Blocks with Drag and Drop Row and Column Reordering

These 4 blocks reorder rows and columns by dragging, with a visible handle, a drop indicator and a keyboard path, so the interaction is finished.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Installs with a ReUI Pro or Ultimate license.

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 the Sortable component
A bare reorderable table assembled from parts in a layout you already have: use the Data Grid component
Choosing which fields show and how dense rows sit, with order left as it is: use the Columns blocks

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 API docs

TanStack Table v9: API reference, docs, used by 4 of 4 blocks
dnd kit v6: API reference, docs, 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, used by 1 of 4 blocks
Sonner v2: API reference, docs, used by 1 of 4 blocks

Markdownhttps://web.dev.reui.io/blocks/data-grid/drag-drop.md

MCPsearch({ query: "drag & drop", type: "block", category: "drag-drop" })

Full index for agents:llms.txtReUI MCP setup

Shadcn Data Grid Blocks with Drag and Drop Row and Column Reordering

Row reordering and column reordering are separate blocks, because they solve different jobs: one is priority, the other is layout.

All Drag & Drop Blocks

Open any block on its own page for a live preview, the components it is built from, and the install command.

Sprint Backlog Sprint backlog data grid with drag handle row reordering and live priority rank
Routing Rules Routing rules data grid with drag-to-reorder priority and per-row enable switches
Dispatch Layout Presets Fulfillment dispatch data grid with drag-to-reorder columns and saved layout presets
Shared Drive Folders Shared drive tree grid with reparenting drag and drop and tri-state folder checkboxes

What the Drag & Drop blocks cover

Data Grid screens, each a full block with fixture data:

Sprint backlog data grid with drag handle row reordering and live priority rank
Routing rules data grid with drag-to-reorder priority and per-row enable switches
Fulfillment dispatch data grid with drag-to-reorder columns and saved layout presets
Shared drive tree grid with reparenting drag and drop and tri-state folder checkboxes

Built from

shadcn/ui components Button, Dropdown Menu, Empty, Item, Avatar, Card, the same components your project already owns.
Both twins, every style Each block ships on Base UI and on Radix, in 8 design styles, and names every part it composes on its page.

All Shadcn Block Groups

Browse the full ReUI Shadcn blocks library by product surface. Each group bundles category-level blocks you can mix and match across your project.

Shadcn Application Blocks (303) Browse 303 Shadcn Application blocks across 23 categories.
Shadcn Data Grid Blocks (47) Browse 47 Shadcn Data Grid blocks across 9 categories.
Shadcn Charts Blocks (52) Browse 52 Shadcn Charts blocks across 10 categories.
Shadcn Solutions Blocks (76) Browse 76 Shadcn Solutions blocks across 11 categories.
Shadcn AI & Agents Blocks (22) Browse 22 Shadcn AI & Agents blocks across 3 categories.
Shadcn eCommerce Blocks (87) Browse 87 Shadcn eCommerce blocks across 13 categories.
Shadcn Marketing Blocks (67) Browse 67 Shadcn Marketing blocks across 8 categories.

Frequently Asked Questions

Is drag and drop accessible?

Yes. The handles are focusable buttons with keyboard reordering, and the drop indicator is announced, following the DnD Kit accessibility pattern the ReUI Sortable primitive uses.

Does reordering persist?

The new order is delivered through a callback; the blocks keep it in state and the Data Grid docs show how to save it.

How do I install a Drag & Drop block?

Is a license needed?

Drag & Drop blocks are part of ReUI Pro: one payment, lifetime updates, every block in every style. The ReUI primitives and the free examples they build on install with no license.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.