Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Data Table examples · Advanced

Expandable Sub-Rows Data Table for React

A table of projects where each row expands to list the project's tasks.

Framework
UI library

Three projects, each with a chevron button that opens a panel of its tasks under the row: the task, who has it and its status. TanStack Table's row expanding keeps which rows are open. Use it for orders and their items, projects and their tasks, invoices and their lines: details that belong to a row but would crowd the table.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does a row expand?

getRowCanExpand is true when a project has tasks. The button calls row.getToggleExpandedHandler() and shows a down chevron while row.getIsExpanded() is true, a forward one otherwise. The forward chevron turns around in right-to-left layouts.

What is rendered under an open row?

A second TableRow whose single TableCell spans every column with colSpan. It holds a bg-muted/50 panel listing each task's name, assignee and status. The panel renders only while that row is expanded.

Which table features make expanding work?

tableFeatures includes rowExpandingFeature and expandedRowModel: createExpandedRowModel(). The tasks are a field on each project, not sub-rows, so the file passes no getSubRows.

Can a task expand again?

No. Tasks aren't table rows, so they have no expander. To nest rows, return the children from getSubRows and render the rows the expanded model returns.

Can I expand every row at once?

Call table.toggleAllRowsExpanded(), for example from a button in the expander column's header. This demo opens rows one at a time, and they all start closed.

Does the expander button have an accessible name?

Yes. It's labeled Show tasks or Hide tasks and sets aria-expanded, so a screen reader says whether the panel is open.

All 8 data table examples