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.
Files · 6
Dependencies
npm packages
@dnd-kit/core
@dnd-kit/sortable
@tanstack/react-table
date-fns
sonner
Registry items
@reui/badge
@reui/data-grid
@reui/frame
@reui/icon-stack
avatar
@reui/badge
button
@reui/data-grid
@reui/data-grid-column-header
@reui/data-grid-scroll-area
@reui/data-grid-table
@reui/data-grid-table-dnd-rows
dropdown-menu
empty
@reui/frame
@reui/icon-stack
Registry Items
data-grid-drag-drop-4
Configuration
Name
data-grid-drag-drop-4
Type
Block
Description
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.