React-window: Grid with sticky header possible?

[piotrblasiak]

Is it possible to somehow create a sticky header using Grid? If not easily using current API, is there any workaround? I can create a header above the grid, but then it doesn´t follow the horizontal scroll of the grid and the other way around.

[bvaughn]

It's not supported, nor something I've needed to figure out. Sorry but I don't have any recommendation here.

[xaun]

@bvaughn is there a solid example/recipe somewhere you could point me to? 🙏 Went down a rabbit-hole last night trying to find a working example, and that I could vaguely figure out what was going on (wasn't happy about seeing people doing forks to try figure this one out).

We're currently looking at reworking out design to not use sticky based on this difficulty, if we need it, will be switching to the react-virtualized ScrollSync solution 😢

[nihgwu]

@xaun what about this kind of behavior https://autodesk.github.io/react-base-table/examples/sticky-rows?
BaseTable is based on ReactWindow, so you can use the same to achieve that

[nihgwu]

OK, you are asking for sticky header, not sticky rows, then it's quick easy to achieve with an extra header to sync the horizontal scroll https://github.com/Autodesk/react-base-table/blob/master/src/GridTable.js#L28-L30

[xaun]

Cool thanks @nihgwu, I'll give it a go

[cncolder]

Surprise. Autodesk change file name.

https://github.com/Autodesk/react-base-table/blob/master/src/GridTable.tsx scrollToPosition

[lroling8350]

For anyone who comes across this issue while Autodesk BaseTable does use react-window under the hood I've discovered that it locks it's column count in react-window to 1 here. It takes over the rendering of rows losing the windowed performance for columns. If you need to render a lot of columns it might not be the best option.

[nihgwu]

@lroling8350 but you can optimise from your side, check my demo here https://github.com/Autodesk/react-base-table/issues/36#issuecomment-670474299

[lroling8350]

Thank you for the link! I have played around with the demo and it works nicely. Is there a reason though to reimplement the virtualization at the row level when react-window already has support for it? I will say that the scrolling feels smoother with sticky columns and headers than anything i've been able to achieve using only react-window which is somewhat confusing to me, I have not dug too deeply into each packages internals to see why.

[nihgwu]

@lroling8350 generally there won't be many columns for a table, more like a list, in a table cells are grouped by row, but in a grid they are not, BaseTable uses FixedSizeGrid for historical reason, will be replaced with FixedSizeList in the future

[mctep]

I created a "hacky"-example with sticked single row and single column both. Looks like it can be generalised to use any count of rows and columns.

~I use the dirty hack to know indices for the certain cell (getCellIndicies). Maybe @bvaughn could help and suggest more elegant way to do it.~

UPD: Hm... Looks like it is not so "hacky" :)

https://codesandbox.io/s/strange-feistel-kwsed?file=/grid-with-sticky-cells.jsx:94-109