Row Expansion

Expand rows to show additional detail content inline.

Name

Department

Salary

50 rows · Click arrow to expand

Rows can expand to reveal additional content:

const { expanded } = useVirtualTable({
  data,
  columns,
  enableRowExpansion: true,
  estimatedExpandedRowHeight: 100,
  getRowCanExpand: (row) => true,
});

// Toggle in render:
<button onClick={() => row.toggleExpanded()}>
  {row.getIsExpanded() ? '−' : '+'}
</button>

// Expanded content:
{row.getIsExpanded() && <ExpandedContent />}

Option	Type	Default
`enableRowExpansion`	`boolean`	false
`estimatedExpandedRowHeight`	`number`	200
`expanded`	`ExpandedState`	—
`onExpandedChange`	`(state) => void`	—