Multi-level DataGrid tree mode for an HR org chart: recursive subRows at arbitrary depth, DataGridTableRowExpand indentation, org size and open roles rolled up each reporting line, tree-cascading row selection with a corrected tri-state checkbox, sticky header, depth control and a bulk selection bar.
Files · 5
Dependencies
npm packages
@tanstack/react-table
sonner
Registry items
@reui/badge
@reui/data-grid
@reui/frame
avatar
@reui/badge
button
checkbox
@reui/data-grid
@reui/data-grid-column-header
@reui/data-grid-scroll-area
@reui/data-grid-table
dropdown-menu
field
@reui/frame
input-group
popover
select
switch
toggle-group
Registry Items
data-grid-grouping-5
Configuration
Name
data-grid-grouping-5
Type
Block
Description
Multi-level DataGrid tree mode for an HR org chart: recursive subRows at arbitrary depth, DataGridTableRowExpand indentation, org size and open roles rolled up each reporting line, tree-cascading row selection with a corrected tri-state checkbox, sticky header, depth control and a bulk selection bar.