shadcn.io is not affiliated with official shadcn/ui
File Explorer Table Block for React
A file explorer window with a rail of places, a path bar with an Up button, and a table that lists one folder at a time, folders first, with sortable heads and a New folder button.
Installation
Overview
Browse a folder tree one level at a time, with this file explorer table for React with Base UI. A framed window of fixed height holds the catalog Sidebar with the places (Home, Projects, Shared, Archive) and two pinned folders, each with its item count, and a page with a path bar over one native table. The path bar is a breadcrumb from Home plus an Up button; the table lists a single folder with its folders first, and pressing a folder replaces the rows with its contents, moves focus to the table and says "Opened Q3 reports, 10 items". A step in the path or Up goes back and lands focus on the folder you came out of. The Name, Size and Modified heads sort inside the group of folders and the group of files, and a folder's size and date are added up from the files below it. New folder, the one Shine Button, adds an untitled folder that opens onto an empty state. It's built from Sidebar, Button, Empty and Guides. For file managers, asset libraries and document explorers. It is a drill-down, not an expanding tree: see the nested rows table for that.
FAQ
How is the tree stored?
As a flat list of ENTRIES, each with an id, a parent, a kind (folder or file), a name, a type, bytes and an ISO modified date. The rows of a folder are the entries whose parent it is. A folder has no size or date of its own in the data: its size is the sum of the files below it at any depth and its date is the newest of them, so neither can drift from what the folder holds.
Where does focus go when I open or leave a folder?
Opening a folder moves focus to the table's region (named "Files in" and the folder), because the button you pressed has just been replaced, and the status line announces the folder and how many items it holds. Going Up or choosing a step in the path puts focus back on the folder you came out of, so you can carry on from where you were. A link in the rail leaves focus where it was.
How does sorting work, and what stays first?
Pressing a head sorts by it in the order that column starts with (names A to Z, size and date the largest and newest first), pressing it again reverses it and a third press goes back to the typed order. Folders always stay ahead of files; the order applies inside each group, and the line under the window reads out the result. On a phone, where the Kind and Modified columns fold under the name, a Sort by select does the same.
What does New folder do?
It adds an untitled folder to the folder you are in and puts focus on it, so Enter opens it. The new folder is empty, so it opens onto an empty state with a way back. It exists only in this page: reload and it is gone.
How does it look on a phone?
The rail becomes a sheet opened by the button at the top, and choosing a place closes it. The table keeps Name and Size, with the file type and date under the name, and nothing scrolls sideways at 320 pixels.
What stays local, and how do I wire it for real?
The files are typed in the file, so nothing is uploaded, opened or saved, and the file names are not links. To use real files, load your listing into ENTRIES (or fetch one folder at a time and swap the rows when openId changes), and make a file's name a link or a button that opens it.
Related
- Pro
Email Client Sidebar
App contentA mail client in a fixed-height window: mailboxes and labels whose counts follow the mail you file, a searchable message list beside the open message, and Compose for a local draft.
- Pro
No Folders Empty State
Files and docsA file organiser's empty folder view: a breadcrumb with an Up button, a shelf of four slots that fill with folders you name, each one opening onto its own empty folder, and a drawn stack of three folders with the top one dashed.
- 123Pro
Nested Rows Table
Rows that openA headcount plan as a roll-up hierarchy of company, departments and teams, where every parent adds up its teams and a Depth toggle opens the plan to a level.
- Pro
Sortable Members Table
Sort and searchA members table whose column heads are buttons: press one to sort, again to reverse, a third time for the original order, with aria-sort on the active head, ties settled by name and a spoken line for each result.
- Pro
Link Cell Table
Rich cellsA reading list whose titles are real links: an arrow and a name that says opens in a new tab on links to other sites, plain links inside the app, truncated hosts with the whole address in a title, and a preview card on hover or focus.
- Pro
Expandable Rows Table
Rows that openA table of expense reports where a chevron button in each row opens its line items in a row beneath it, several at once, with one button that opens or folds them all.