Support for React-window

[engPabloMartinez]

This library is awesome, was searching for react-table 7 with sticky columns and found this one! 👏 👏 . I need to ask if there is support for react-window with sticky columns or maybe an example? I'm trying to combine react-table + this library + react-window but apparently the react-window styles mess with the styles from this library as far as I can see.

Any recommendation? advice? Maybe it's in the roadmap?

Thanks.

[GuillaumeJasmin]

Hi @engPabloMartinez
Thanks for your feedback ! :)
I will take time to check how the sticky hook could work with react-window.
Does react-window works well alone with react-table v7 ?

[engPabloMartinez]

Thanks for your answer, Yes it does.
https://react-table.js.org/examples/ui#virtualized-rows-react-window

I didn't have time this past weekend to do more test and research. Will try to make time this week as well.

[iquitwow]

@GuillaumeJasmin This library is awesome! Support for React-Window would be fantastic!

[GuillaumeJasmin]

react-window and react-table-sticky seems incompatible because react-window add 2 new levels of <div> that break the native scroll on the root element <div className="table">.
That's why the table is broken, because sticky css property can't be apply. I haven't any clean way to fix it now.

I started an IE 11 support few weeks ago (not ready yet) because sticky css property doesn't work on IE 11, and I think this fallback is the only way to make it work with react-window, but it's a fallback and the user experience is bad because the scroll is not smooth.

[egertaia]

Do you have any more information regarding what workaround I could try to use when using virtualized tables? Such as what styles to apply and whatnot?
I don't really care about jankiness of the scroll currently.

[linxu]

I also encountered the same problem, can you provide a temporary solution? Thanks.

[linxu]

@GuillaumeJasmin

[jerrywithaz]

@linxu here is a temporary solution: https://codesandbox.io/s/dazzling-field-48x39?file=/src/App.tsx

If you're using the FixedSizedList from react-window you can use the innerElementType prop to render the header, body and footer. I have it working with the header but not the footer. The problem with react window as you all have mentioned is that it adds 2 wrapping div elements. So, you can use the innerElementType to overcome that and render your own custom ui

[elaine0304]

@jerrywithaz I tried the temporary solution and it works perfectly.
But, the first two rows of the table body are hidden behind the header. It's the same in the sandbox link as well.
Is there a way to fix this?

[jerrywithaz]

@elaine0304 ah yes, so when you're rendering your row, I think there's a row method called row.getBodyRowProps() that is responsible for setting the table row styles i.e. the row position. You need to extract the css top position for each row and add the height of your table header. So let's say the height of your table header is 50px, then you'll want to add 50px to every table row. So, the first table row won't start at 0px it will start at 50px instead to account for the header height.

[CuriousMark]

@linxu here is a temporary solution: https://codesandbox.io/s/dazzling-field-48x39?file=/src/App.tsx

If you're using the FixedSizedList from react-window you can use the innerElementType prop to render the header, body and footer. I have it working with the header but not the footer. The problem with react window as you all have mentioned is that it adds 2 wrapping div elements. So, you can use the innerElementType to overcome that and render your own custom ui

Awesome solution! If you mainly just want a header or footer for your table, this seems like a more straightforward approach that react-window's sticky row solution.

Only addition I would suggest is using useCallback for better performance.

E.g.

<FixedSizeList
    ...
    innerElementType={TableWrapper}
>

Where TableWrapper is:

const TableWrapper = React.useCallback({ children, style, ...rest }: any) => { yourComponent }

[linxu]

@jerrywithaz @CuriousMark Cool, thank you for your response.

[scmfz]

@linxu here is a temporary solution: https://codesandbox.io/s/dazzling-field-48x39?file=/src/App.tsx

If you're using the FixedSizedList from react-window you can use the innerElementType prop to render the header, body and footer. I have it working with the header but not the footer. The problem with react window as you all have mentioned is that it adds 2 wrapping div elements. So, you can use the innerElementType to overcome that and render your own custom ui

Is there a way to make this work without using infinite-scroller, and instead with virtualized rows?

[whiletrueee]

I wanted to make my first column of my table sticky , my table scroll is vertical and horizontal , can anyone help me with this , i am using react-window