15

I have a requirement to open/close additional row details.

Has anyone implemented or have ideas on how to go about implementing expand/collapse feature for each row?

Q-Ball
  • 312
  • 1
  • 3
  • 9

2 Answers2

25

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
bvaughn
  • 13,300
  • 45
  • 46
  • Thank You, i was able to get this working by customizing the RowRenderer file and your demo and suggestions. Much appreciated! – Q-Ball Dec 16 '16 at 17:47
  • @brianvaughn Thank you for answer but I can't implement this solution on Virtualized Grid, Grid don't have *recomputeRowHeights* method – Robert Key Jan 22 '18 at 10:04
  • Please read the documentation. `Grid` defines a similar method named `cellRangeRenderer`. https://github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md – bvaughn Jan 22 '18 at 16:28
  • 2
    resurrecting this old thread. @bvaughn if I understand correctly the example you provided doesn't support virtualization for nested items, correct? I mean if there are a lot of sub-items then they all will be added to the DOM if parent item is visible. Is there a better approach to support virtualization in sub items too ? – Mike Yermolayev Nov 27 '19 at 06:52
5

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

Naeem Baghi
  • 811
  • 2
  • 14
  • 29