React Virtualized - onclick, expand Rows for additional details

There's a template of sorts for this sort of thing (demo, source) The important bit is that you'll need to tell your List/Grid/whatever when an open/close has changed (aka when size might have changed), eg:

this._listRef.recomputeRowHeights(indexOfChangedRow) // Clear cached size
this._listRef.forceUpdateGrid() // Rerender list with new size

I was looking for the same feature, but I did not find some useful results as I searched, maybe this sandbox helps others looking for a similar feature in their apps:

The example is using Table from react-virtualized beside react hooks.

Example


For what it's worth ... :-)

CodeSandbox sample