# Shared Drive Folders block

> Shared drive tree grid with reparenting drag and drop and tri-state folder checkboxes

Nested file storage browser on the ReUI DataGrid: a recursive folder tree with getSubRows and DataGridTableRowExpand depth indentation, file manager style tree drag and drop that reparents, dropping on a folder to go inside it and between rows to reorder, with an insertion line and a folder tint as the only feedback so no row moves for the length of a drag, the drop depth read off the pointer's horizontal travel, a closed folder reachable by a plain vertical drag and opened once it receives a row, and a carried folder taking its whole subtree, tri-state folder checkboxes that cascade to every descendant, rolled up folder size and item count, expand all and collapse all controls, a bulk selection bar, and an honest empty state.

- Type: Pro block
- Category: [Drag & Drop](https://web.dev.reui.io/blocks/data-grid/drag-drop.md)
- Page: https://web.dev.reui.io/blocks/data-grid/drag-drop/data-grid-drag-drop-4
- 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
- MCP: `get_block("data-grid-drag-drop-4")`
- Built with: Avatar, Badge, Button, Data Grid, Dropdown Menu, Empty, Frame, Icon Stack
- Installs with a ReUI Pro or Ultimate license; setup: https://web.dev.reui.io/docs/license-setup

## Best for

A folder hierarchy whose rows drop inside other folders or between siblings, with cascading checkboxes, sortable headers and a bulk bar

## Agent notes

- `STORAGE_TREE` is the demo drive; ids must stay unique across every level because `getRowId` reads them flat
- `handleRowAction` only toasts for open, download and share, and the bulk bar's `onDownload` and `onShare` toast too
- Delete and `handleBulkDelete` call `removeNodes` on local `tree` state only; send the delete to your API before it

## When not to use

- A file browser with a folder tree rail beside switchable list and grid views: use [Drive Explorer](https://web.dev.reui.io/blocks/solutions/files/solution-files-1.md) (`get_block("solution-files-1")`)
- A people hierarchy with span of control rather than files and folders: use [Reporting Hierarchy](https://web.dev.reui.io/blocks/data-grid/grouping/data-grid-grouping-5.md) (`get_block("data-grid-grouping-5")`)

## 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)
- dnd kit v6: [API reference](https://dndkit.com/legacy/api-documentation/context-provider/dnd-context/), [docs](https://dndkit.com/legacy/introduction/getting-started/) (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)
- Sonner v2: [API reference](https://sonner.emilkowal.ski/toast), [docs](https://sonner.emilkowal.ski/getting-started)

## Install

```bash
npx shadcn@latest add @reui/data-grid-drag-drop-4
```

## About Drag & Drop blocks

### 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

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.