Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Table Block File Tree
Table component with expandable file tree structure showing folders and files for React file browser interfaces
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Browse files on your Next.js file manager with this file tree table component. Features expandable folder rows, nested indentation levels, file type icons, folder expand and collapse toggles, file size and date columns, and selection checkboxes. Built with shadcn/ui Table, Checkbox, and Button components using Tailwind CSS and Lucide icons. The hierarchical display enables intuitive navigation perfect for file managers, code browsers, document explorers, asset libraries, or any React app displaying nested file structures.
Project Files
6 folders, 15 files
| Name | Size | Modified | |
|---|---|---|---|
src | -- | Today | |
components | -- | Today | |
Button.tsx | 2.4 KB | 2 hours ago | |
Card.tsx | 1.8 KB | Yesterday | |
Input.tsx | 3.1 KB | 3 days ago | |
pages | -- | Yesterday | |
App.tsx | 2.1 KB | Today | |
index.css | 4.5 KB | 3 days ago | |
public | -- | 1 week ago | |
docs | -- | 3 days ago | |
package.json | 1.4 KB | Today | |
tsconfig.json | 682 B | 1 month ago | |
.gitignore | 312 B | 2 months ago |
Installation
Related blocks you will also like
Table with Nested Rows
Nested hierarchy
Table with Expandable Rows
Expand rows
Table with Row Selection
Select files
Table with Thumbnails
File previews
Table with Quick Actions
File actions
Searchable Filterable Data Table
Search files