Expandable Row Table React component
An orders table whose rows open into a detail panel: line items with totals, a Placed → Paid → Shipped → Delivered progress track, the shipping address and notes, sliding open smoothly, with expand all and a compact layout on phones.
About the Expandable Row Table component
Expandable Row Table keeps a long list scannable and puts the detail one click away: each order row opens into a panel with its line items and total, a Placed → Paid → Shipped → Delivered progress track, the shipping address and any notes.
Rows slide open to their natural height, several can be open at once (or one at a time as an accordion), and Expand all opens everything. On phones the row shrinks to customer, total and status, and everything else lives in the panel.
When to use it
Use it for orders, invoices, support tickets, deployments, transactions or any list where each row has more detail than fits on one line.
When people need to compare the hidden details across rows, show them as columns instead.
Installation
Add the Expandable Row Table component to your project with the shadcn CLI. It lands in components/expandable-row-table.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/expandable-row-tableOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<ExpandableRowTable /> accepts 7 props, all optional. It also accepts the usual <div> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| title | string | "Recent orders" |
| subtitle | string | "Click a row for its items, delivery progress and address" |
| orders | OrderRow[] | DEFAULT_ORDERS |
| defaultExpanded Ids of orders open at first render. | string[] | ["NR-10482"] |
| multiple Allow several rows open at once; otherwise opening one closes the others. | boolean | true |
| currency | string | "$" |
- theme"dark" | "light"Default: "dark"
- titlestringDefault: "Recent orders"
- subtitlestringDefault: "Click a row for its items, delivery progress and address"
- ordersOrderRow[]Default: DEFAULT_ORDERS
- defaultExpanded
Ids of orders open at first render.
string[]Default: ["NR-10482"] - multiple
Allow several rows open at once; otherwise opening one closes the others.
booleanDefault: true - currencystringDefault: "$"
npm dependencies
Installed for you by the shadcn CLI.
Expandable Row Table FAQ
- What shape do orders take?
- { id, customer, email, date, status, lines, shipping?, address?, step?, note? }, where lines is { name, variant?, qty, price }[] and step is how far along Placed → Paid → Shipped → Delivered the order is (0–3).
- Can only one row be open at a time?
- Yes, set multiple={false} and it behaves like an accordion. defaultExpanded takes the ids to open at first.
- How does it look on phones?
- Below 640px wide each row shows the customer, order id, total and status; dates, emails and item counts move into the detail panel's content.
- Is it accessible?
- It uses table roles, every row has a real button with aria-expanded and aria-controls, and closed panels are inert so their content isn't tabbable. With reduced motion panels open instantly.
