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?

0

2 Answers 2

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
4
  • 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, 2016 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, 2018 at 10:04
  • Please read the documentation. Grid defines a similar method named cellRangeRenderer. github.com/bvaughn/react-virtualized/blob/master/docs/Grid.md
    – bvaughn
    Jan 22, 2018 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 ? Nov 27, 2019 at 6: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

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.