Components / Data display / Expandable row
D2 · Data display
Expandable row
A row opens a panel with a sparkline, a key-value grid, and holders.
<tr>
<td><button type="button" class="btn sm ghost" aria-expanded="false" aria-controls="panel-DOC-1042">Details</button></td>
<td class="num">DOC-1042</td><td>Access policy</td>
</tr>
<tr id="panel-DOC-1042" hidden><td colspan="3">Owner A. Rahim · Age 6 days</td></tr>
The single-file button copies a document with the stylesheet and script inlined.
When to use
- A table row has a second layer of fields.
- Readers compare rows before opening one.
When not to use
- Every field belongs in the row.
- The detail is a separate destination with its own URL.
Usage
<tr>
<td><button type="button" class="btn sm ghost" aria-expanded="false" aria-controls="panel-DOC-1042">Details</button></td>
<td class="num">DOC-1042</td><td>Access policy</td>
</tr>
<tr id="panel-DOC-1042" hidden><td colspan="3">Owner A. Rahim · Age 6 days</td></tr>
Variants
The preview shows the form used in the gallery.
Props
| Name | Type | Default | Description |
|---|---|---|---|
| aria-expanded | true or false | false | Whether the panel is open. |
| aria-controls | id | — | Id of the detail row. |
| sparkline | svg | — | Touches across seven example points. |
Keyboard
| Key | Action |
|---|---|
| Enter or Space | On Details, opens or closes the panel. |
| Tab | Moves to the next Details button. |
Accessibility
- The control is a button named Details or Hide.
- The panel is the next row, linked with aria-controls.
- Holders are a list.
Motion
- The panel opens without a height animation.
Pattern origin
Pattern type: a row that expands into a detail panel.