Nested Detail Table
Projects table where one row expands inline to a key value metadata panel and a recent activity list.
Projects table where one row expands inline to a key value metadata panel and a recent activity list.
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
Nested Detail Table is the projects list where API Gateway Migration (prj_4m9n, owned by Priya Nair) is statically expanded to an inline detail panel. The panel shows six key-values in a responsive grid: Project ID, Created, Team (Platform engineering), Budget ($42,000), Deadline, and Priority. Below the grid a timestamped activity list covers the four most recent events, from Priya Nair merging PR 184 down to Jordan Lee closing 3 stale issues. Collapsed rows show a right-pointing chevron; the open row shows a rotated one.
Projects and detail data are separate typed const arrays. The expanded row inserts a second TableRow via Fragment with colSpan equal to the full column count, so the inset panel stretches edge to edge inside the border.
Reach for this block on any list page where a secondary panel replaces a detail side-sheet, keeping the user in context. Wire isExpanded to local state and replace the static expandedId with your row toggle handler.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the project details expand panel. Other nested-detail reads:
Tip: the footer note that only one row expands at a time is worth keeping; accordion semantics are not obvious from chevrons alone.