position sticky headers

[souporserious]

Curious if there is a way to hook into react-window to allow use of position sticky? Similar to https://github.com/marchaos/react-virtualized-sticky-tree. As a quick test I tried rendering a larger row with sticky headers, but it doesn't seem to be working. Seems like we would need some hooks or a way to tell the header to stay in view for so many pixels 🤔. Still working on things and will report back with whatever I find, just wanted to see if this has been thought about or explored yet.

[souporserious]

Ah it was overflow: hidden. Is there a reason that is set on the inner wrapper here? When it is removed everything seems to be working as expected. Example: https://codesandbox.io/s/6wr8y429jn. Overriding it with CSS is fine, just want to make sure I'm not messing other things up by overriding it 😅.

[bvaughn]

I honestly don't know. I stepped back through the history of react-window and react-virtualized looking for a commit when I added this, to see if I could jog my memory and I couldn't find one. I think it has been around since the beginning.

At least for Chrome, Safari, and Firefox it does not look to be necessary.

Would you be willing to test this a bit on IE and mobile? If it seems okay, I would accept a PR to remove that style.

[souporserious]

Yup! Definitely. It sounds safe to remove since the overflow: auto above should hide everything. I'm in the middle of shipping it at work with the CSS fix so I'll get it tested properly and PR when I can confirm it's good. Thanks!

[bvaughn]

Thanks! I look forward to the PR 😄

[bvaughn]

FYI here's an idea I had that you might find interesting https://codesandbox.io/s/0mk3qwpl4l

[souporserious]

Nice!! We ended up grouping our lists so we didn't run into any issues with sticky positioning, but this is a great little snippet to have on hand. Thanks for sharing! 🙏

[TrySound]

@bvaughn This is awesome! Could you add this to recipes?

[TrySound]

It does not solve sticky column problem though.

[bvaughn]

Not trying to solve every problem with this example. Just illustrating how the current API could be used to approach this. Should work the same for columns as rows.

[nihgwu]

I created a table component BaseTable with frozen rows and columns support, but based on react-virtualized, I planed to migrate to use react-window in the next version, I'm just waiting for #6 to be supported

[Bnaya]

I've created this project:
https://sticky-eurovision.netlify.com/with-react-window-and-sticky-shlif
To show how it's possible, in a very lightweight way (single instance of react-window + css sticky)
but that requires small patch to react-window.

You can read more about the project here:
https://github.com/Bnaya/sticky-eurovision.

I also have async effort to maybe bring this change in some way into react-window #98.