Tables with Expandable Rows: How to Design and Build Them

What is an expandable row? An expandable row is a table row that opens to reveal more detail underneath it, such as an order's line items or a policy's claims, without leaving the table. People click a toggle, the extra content appears in place, and they can close it again. It keeps the table scannable while detail stays one click away.

When to use expandable rows

• Each row has a small set of children or details people check often.
• People need to compare parents while peeking at one child set.
• Opening a separate page would break their flow.

When not to: if people need to see all children at once, or the detail is long enough to need its own page, use a detail view or a nested table instead.

Designing the toggle

• Put the chevron in the first column, on the left, where the eye starts each row.
• Point it right when closed and down when open. It is the convention people already know.
• Decide what is clickable. Making the whole row toggle is fast, but it conflicts with links or buttons in the row. If the row has other actions, make only the chevron the toggle.
• Show an "expand all" control when people regularly open many rows.

Designing the expanded content

• Indent child rows or give them a subtle background so the hierarchy is obvious.
• Keep child columns aligned with the parent columns when the data matches; use a free-form panel when it doesn't.
• Keep the parent row visible. If the expanded content is long, people should not lose which row they opened.

How to build an expandable table in HTML

Keep a real table, so screen readers understand the structure:

1. Put a button in the parent row's first cell. Give it aria-expanded="false" and point aria-controls at the child rows.
2. Add the child rows directly after the parent row, hidden by default.
3. On click, show the child rows and switch aria-expanded to "true".

Avoid rebuilding the table from divs just to make rows expand. You lose the header relationships that make tables accessible. More in Accessible tables.

Designing expandable rows without rebuilding them

In most design tools, adding an expandable row means duplicating and repositioning a stack of cells, then doing it again when the structure changes. In GridForge, nested and expandable rows are part of the table itself, and you can export the finished table as semantic HTML, JSON or React with the HTML table generator.

This guide is part of Data table design: a practical guide.