shadcn.io is not affiliated with official shadcn/ui
Expandable Rows Table Block for React
A 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.
Installation
Overview
Let people read the detail behind a row without leaving the table, with this expandable rows table for React with Base UI. A framed panel holds a native table of six expense reports (report, date filed, number of items and total), each one in its own tbody. A chevron button in the first cell is a real disclosure with aria-expanded and aria-controls, and pressing it unfolds a second row that spans the table and holds the report's line items in a list, with a status Badge and who filed it. Any number of reports can be open at once, and one Button in the header opens them all, then reads Collapse all. The item counts and totals are added up from the line items in cents, the table sits in a fixed-height frame so opening a report scrolls inside it instead of moving the page, and all four columns stay on a phone because the detail row spans them. It's built from Button, Badge and Guides, with a CSS transition only. For expense reports, orders, invoices and anything with a few lines behind a row.
FAQ
How do I fill it with my own reports?
Edit REPORTS. Each report has an id, a title, who it was filed by, an ISO filed date, a status (submitted, approved or paid) and its lines, each with a description, a category and an amount in cents. The number of items and the total in the row are worked out from the lines, so they can never disagree with what the opened row shows.
Is it a real disclosure for a keyboard and a screen reader?
Yes. The chevron is a native button in the row header, so Tab reaches it and Enter or Space opens and folds it. It reports aria-expanded, points at the detail row with aria-controls and is named with the report's title and how many line items it has. A folded detail row is inert and invisible, so nothing inside it takes focus or is read while it is closed.
What do Expand all and Collapse all do?
They are one button in the header whose words follow the state: Expand all while any report is folded, Collapse all once every report is open. Pressing it opens or folds every report together, the line under the heading counts how many are open, and focus stays on the button.
Why is the table in a fixed-height frame?
Opening a report makes its row taller. The frame keeps the block the same height, so the page below never jumps: the table scrolls inside it, and its column heads stay at the top while it does. The region can be reached with Tab so a keyboard can scroll it.
How does it look on a phone?
All four columns stay. The detail row spans them, so no column is dropped, and the person who filed the report is read in the opened row instead of under the title. Nothing scrolls sideways at 320 pixels.
What stays local, and how do I wire it for real?
The reports are typed in the file and which ones are open is plain state, a list of ids, so nothing is saved or sent. To use real reports, load them into REPORTS; to remember what was open, keep that list of ids in the URL or in your own storage and pass it back as the starting state.
Related
- 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
Grouped Rows Table
Rows that openA pantry stock table regrouped by a Group by toggle (supplier, category or none), with group rows that fold, count their items, add up their value and stick under the column heads.
- Pro
Row Comments Table
Rows that openA contract review table where each clause has a comment count button that opens its thread in a pane beside the table, with a composer that posts to the thread.
- 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
Row Selection Table
Select and actA stock list with a checkbox on every row, a head checkbox that shows a dash when only some are ticked, Shift-click range select and a live line that adds up the price of the ticked rows.
- Pro
File Explorer Table
Rows that openA 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.