React Virtualized - onclick, expand Rows for additional details

reactjs react-virtualized
Q-Ball picture Q-Ball · Dec 12, 2016 · Viewed 10.7k times · Source

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?

Answer

bvaughn picture bvaughn · Dec 12, 2016

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

Related questions

Dynamic row heights with react-virtualized and new CellMeasurer

I'm using react-virualized 9 with Autosizer, List, and CellMeasurer components. I need to update the row heights when the list data has changed. It appears that since the changes to support React Fiber in version 9 the only public method for CellMeasurer …

Read More
How to set up dynamic row height in react-virtualized List?

I have gone through many answers on StackOverflow. I have also gone through List document here, react-virtualized/List. But, still I am not able to understand how to dynamically set row height in react-virtualized List. How to calculate the height …

Read More
Add padding-top in react-virtualized <List />

I have a <List /> component where I want to add an initial padding-top to the wrapper. Since all the elements are absolute positioned I found this solution but I wonder if it's right or is there another solution …

Read More