shadcn.io is not affiliated with official shadcn/ui
Table View File Upload Block for Radix UI
A sortable file table with a row checkbox and a mixed select-all, a bar to move, download or delete the ticked files, five rows a page, and dropped files that join the top marked New.
Installation
Overview
Give a folder of files the density of a table, with this file table for React with Radix UI. It is the client file desk of Sortlane, an accounting firm: a native table of 24 files with Name, Type, Size, Modified and Owner, five to a page, sortable by name, size and date. Every row has a checkbox, and the select-all in the head goes mixed when only part of the page is ticked. A bar above the table is always there: with rows ticked it counts them and offers a Native Select to move them to a folder, Download (not in this demo) and Delete; without a selection its controls rest. Moving or deleting takes the rows out of the table and "Undo" brings them back. Files dropped on the table, or added with the header's File Upload button, join at the top of the first page marked New. The table is a held region of five rows, so a page, a sort or a short last page never moves the panel. On a phone the table keeps Name and Size and folds the rest under the name. The panel is ruled by Guides. For file desks, document stores and admin screens.
FAQ
How does sorting work?
Name, Size and Modified are buttons in the head; each sets aria-sort on its column and says how it sorted in the status line ("Sorted by size, largest first."). Name starts A to Z, Size and Modified start with the biggest and newest. New files stay on top whatever the order, and a sort returns you to the first page.
How does the select-all behave?
It ticks or clears the rows on the current page and shows a bar instead of a tick when only some are ticked. Selections on other pages are kept, and the count above the table is the total. It is a native checkbox, so Space toggles it and a screen reader announces "mixed".
What do Move to, Download and Delete do?
Move to and Delete take the ticked rows out of this folder in the tab and offer Undo; Download answers that downloads are not part of this demo. With nothing ticked, Move to is disabled and the two buttons answer "Select files first." without changing the layout.
What happens to files I drop on the table?
Each becomes a row at the top of the first page, marked New, with its name, a type taken from its extension and its size. The block never reads the file. Files over 200 MB are refused with a message.
What changes on a phone?
Type, Modified and Owner fold under the name as one line, and Name and Size stay as columns. The page numbers become "Page 2 of 5" between Previous and Next, and every control is at least 44 px tall.
What stays local, and how do I wire it?
The 24 files are typed at the top of the file; sorting, paging, selection, moves and deletes change state in the tab. To use real data, sort and page on the server, send the ticked ids to your move and delete endpoints, and send dropped files to your upload route.