Detail panel
Provide renderDetailPanel to render an expandable panel beneath each row. An expand chevron column is added automatically, and row expansion is enabled for you.
Detail panel
ID | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Ava | Thompson | Owner | Engineering | active | 22 | $45,000 | Jan 2, 2023 | 0% | |||
| Liam | Nguyen | Admin | Marketing | inactive | 25 | $47,137 | Jan 13, 2023 | 9% | |||
| Noah | Silva | Editor | Design | pending | 28 | $49,274 | Jan 24, 2023 | 18% | |||
| Emma | Carter | Viewer | Sales | active | 31 | $51,411 | Feb 4, 2023 | 27% | |||
| Olivia | Rossi | Owner | Support | inactive | 34 | $53,548 | Feb 15, 2023 | 36% | |||
| William | Walker | Admin | Engineering | pending | 37 | $55,685 | Feb 26, 2023 | 45% | |||
| Sophia | Patel | Editor | Marketing | active | 40 | $57,822 | Mar 9, 2023 | 54% | |||
| James | Muller | Viewer | Design | inactive | 43 | $59,959 | Mar 20, 2023 | 63% | |||
| Isabella | Park | Owner | Sales | pending | 46 | $62,096 | Mar 31, 2023 | 72% | |||
| Lucas | Reyes | Admin | Support | active | 49 | $64,233 | Apr 11, 2023 | 81% | |||
| $4,120,536 |
Rows per page
1–10 of 48
Usage
renderDetailPanel receives { row, table }. Return any React node — here a small definition list built from row.original.
const table = useDataTable({
data,
columns,
getRowId: (row) => row.id,
renderDetailPanel: ({ row }) => (
<dl className="grid grid-cols-2 gap-2 p-4">
<dt className="text-muted-foreground">Email</dt>
<dd>{row.original.email}</dd>
<dt className="text-muted-foreground">Phone</dt>
<dd>{row.original.phone}</dd>
<dt className="text-muted-foreground">Address</dt>
<dd>{row.original.address}</dd>
</dl>
),
})
return <DataTable table={table} />
Expansion is automatic
You don't need to configure getExpandedRowModel or add a chevron column
yourself — defining renderDetailPanel turns on row expansion and inserts the
expander column.
Positioning the expander
The expander column leads the data columns by default. Set positionExpandColumn: "last" to move it to the trailing edge.
useDataTable({
renderDetailPanel: ({ row }) => <Detail row={row} />,
positionExpandColumn: "last", // "first" | "last"
})