CODEWITHSUNDEEP
javascriptreactjsreact-virtualized
wisew
wisew

Reputation: 2882

How to render a List / Grid row as if it were sticky?

I've got a component making use of react-virtualized's List for its virtualized scrolling, where each row is either a category header, or actual content belonging to that category. So something like:

Fruits
- Strawberry
- Blueberry
- Mango
- ...etc
Grains
- Oats
- Wheat
- Rice
- ...etc

(Where Fruits and Grains are category headers)

As the user scrolls, if they scroll past a category header, I want to be able to take the data from that row and render it in a "sticky" (in quotes because position: sticky isn't really a viable option yet) container, stuck to the top of the scroll container, until they scroll past the next category header, and so on. (Basically, the same way that scrolling through Artists works in the iOS Music app.)

The tricky thing is, I want this sticky header to still be inside the scroll container, rather than overlaying it or sitting above it, and it needs to fill the width of its parent container, which rules out rendering a sticky container outside of the List component and just overlaying it on top with position: absolute.

As far as I can tell, it seems like doing something like this isn't really possible with react-virtualized at the moment - since all the rows are positioned absolutely, there's no way to create a "sticky" row inside the scroll container. Absolutely positioning the sticky header would work, but only if all of the other rows were statically positioned in the normal document flow.

Is it possible to achieve something like sticky headers with react-virtualized right now? If not, what would it take to make react-virtualized support them?

Thanks!

Upvotes: 3

Views: 2102

Answers (1)

marchaos
marchaos

Reputation: 3444

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.

It only renders what is required to show a visible list plus any parent nodes so that they can remain 'sticky'. Any parent that then becomes unstuck is removed from the DOM. Note that it supports nested sticky levels as well.

See example here.

(Disclaimer: I am the author)

Upvotes: 1

Related Questions