Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block Nested Rows
Table component with hierarchical nested rows for displaying parent-child data in React admin interfaces
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Display hierarchical data on your Next.js dashboard with this nested rows table component. Features expandable parent rows revealing child records, indentation levels showing hierarchy depth, expand and collapse all controls, row count badges for parents, and smooth expand animations. Built with shadcn/ui Table and Button components using Tailwind CSS. The tree structure visualization clarifies relationships—perfect for file systems, organizational charts, category trees, project breakdowns, or any React app with parent-child data relationships.
Project Files
17 items in project
| Name | Size | Modified |
|---|---|---|
src(3 items) | — | 2 hours ago |
components(3 items) | — | 1 hour ago |
hooks(2 items) | — | 5 days ago |
index.ts | 0.5 KB | 2 hours ago |
public(2 items) | — | 1 week ago |
config(2 items) | — | 3 days ago |
package.json | 1.9 KB | 1 day ago |
README.md | 3.4 KB | 4 days ago |
Click arrows to expand folders. Use Expand All to see full tree.
Installation
Related blocks you will also like
Table with Expandable Rows
Expand for details
Table with Grouped Rows
Group by category
Table with Drag and Drop
Reorder hierarchy
Table with Row Selection
Select nested items
Table with Quick Filters
Filter tree data
Searchable Filterable Data Table
Search hierarchy