Table With Expandable Rows
Orders with one row expanded to its line items in a muted inset, statically.
Orders with one row expanded to its line items in a muted inset, statically.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Table With Expandable Rows is an orders list where every row has a chevron affordance and one row, ORD-2026-1039 for Harbor Supply Co., is rendered statically open. The expanded panel is a muted inset spanning all six columns: it lists three line items (Trail running pack x 2 at $89.00, Insulated bottle 32oz x 4 at $24.50, Merino crew sock x 6 at $14.00) and a summary strip of Subtotal, Shipping, Tax, and Total adding to $400.80. Chevrons on the closed rows are flat; the open row chevron is rotated 90 degrees. No JavaScript, this is the static blueprint.
Orders and their line arrays are separate consts. The blueprint pattern shows the open state fully rendered so the layout math is visible before any interaction state is wired.
Reach for this block when a list needs per row detail without navigating to a detail page, wired to your orders endpoint and a toggle handler that sets the expanded row id in local state or a URL param. The footer rule applies in production: if line totals ever disagree with the order total, hold the order.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the order management list. Other expandable row tables:
Tip: ship the static blueprint first to confirm the inset layout; add the useState toggle in one pass after.