3

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!

wisew
  • 2,672
  • 3
  • 23
  • 30
  • Hi @wisew. What you're describing isn't really possible w/ react-virtualized to my knowledge. My limited experiments with `position: sticky` has left me believing that it's a performance killer. :( – bvaughn Oct 24 '16 at 03:16
  • Would `ScrollSync` be useful in this case? https://bvaughn.github.io/react-virtualized/?component=ScrollSync#/components/ScrollSync – Mbrevda Nov 30 '16 at 06:08

1 Answers1

1

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)

marchaos
  • 3,316
  • 4
  • 26
  • 35
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/low-quality-posts/16663324) – Bojan Petkovski Jul 10 '17 at 09:56
  • Added extra information about this as to provide a non-link only answer. – marchaos Jul 10 '17 at 12:03