Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Sticky headers in react-virtualized

I am using a List component in react-virtualized to render a large number of items. In my implementation, the items are sectioned, and I want the section headers to be sticky so that the current section remains visible as users scroll down. Essentially, I need react-virtualized NOT to destroy the section headers as the scroll position changes (but continue to destroy other items). Is there any way to do this right now? I'm open to hacks as long as they aren't too crazy.

like image 931
Chris Avatar asked Nov 09 '16 15:11

Chris


1 Answers

We had similar requirements to you - we need a list that was sectioned with support for sticky headers. We could not achieve this with react-virtualized Lists/Grids, so I created https://github.com/marchaos/react-virtualized-sticky-tree which supports sticky headers.

See example here.

like image 71
marchaos Avatar answered Sep 18 '22 21:09

marchaos