I'm trying to used react-virtualized to render a table with 1000+ rows of data. The rows are very heavy containing multiple complex React components. input, combobox, date selector and popup menus all in one single row. I need the entire window to scroll these rows.
I also need to group the rows and nest them into a show/hide style accordion component.
[+] Row Header 1
row 1
row 2
...
row 1001
[+] Row Header 2
row 1
row 2
...
row 1001
I'm unsure how to handle this use case or if React-Virtualized can handle this type of thing.
What I've tried:
Use WindowScroller/AutoSizer/List components in conjunction and place this group of react-virtualized components into each of the accordions. This works but does not solve my perf. issues because it's still too much for the browser to handle (first load is around 25 seconds and scrolling isn't usable)
Do I also need to use WindowScroller/AutoSizer/List components to handle the first level of Row Headers as well?
Any ideas or examples would be much appreciated.