Contributing an example of a grouped list with sticky headers

[maerzhase]

Hello!

First of all: This library is great and comes very hand to use! I am using this already in several production setups and its very easy to implement complex list and tables with this lib.

I would like to contribute and example that I build and I believe can be very useful for many other people that are using this library: A grouped list with sticky headers.

I looked at the sticky list example in the README first, but I was a little bit surprised by its complexity. To be fair it can be that I don't understand the use-case for that example yet, but after a little bit of trying out I figured that you basically can use css position: sticky inside the list rows with a little bit of user-code.

So i've build a codesandbox that display a list of countries of the world (headers) and their cities (items):

https://codesandbox.io/s/grouped-list-with-sticky-headers-shgok?fontsize=14

If you would like me to integrate this into the README and/or change some things in the example just point me in the right directions on contributing to this lib.

Cheers!

[nihgwu]

position: sticky is not supported on IE, also there is a performance issue with your current group implementation, the items in a group won't be benefited from virtualization, as all the items with the group would be treated as a single node for react-window

[maerzhase]

Ha! good points! Now i see the idea behind the sticky example! so feel free to close this issue. I might come up with a different sticky example then that actually benefits from virtualization.

[Rendez]

@maerzhase Hi there! Very neat example. I will have to create one too soon, am I lucky enough to be able to benefit from something you've created already?

[maerzhase]

@Rendez indeed, i will do my best to create a codesandbox with the working grouped list in the next days. cheers

[Rendez]

@maerzhase I already have something very close to this working: https://virtuoso.dev/grouped-by-first-letter/ This is a nice and simple enough "flat" implemetation, however the headers hide behind each other.

What I am looking for is rather something like this: https://marchaos.github.io/react-virtualized-sticky-tree/ Because it truly leverages position sticky, just like you see on many Mobile devices (address book, etc) apps.

... And I'm not sure it's easy with react-window because the nesting would have to be done within the innerElement afterwards, reorganizing the children a bit. My issue is time, but I'll try to get around this some time :)

[maerzhase]

its a little bit hard to play around with your code because its all done with inline styles. but i think you can achieve the sticky effect somehow. first thing that feels suspicious to me is that you render the sticky header below and as a sibling. i am pretty sure you can solve it with a flat tree (my grouped list actually uses flat tree) which should allow you to leverage the full advantage of position: sticky.

[Rendez]

Oh no, virtuoso is not mine.