Search blocks by description or jump to a page.
Orders with one row expanded to its line items in a muted inset, statically.
The source for every Application block is included with Pro and Team. Start a plan to copy the code.
Already on a plan? 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.