react-table with react-virtual (and material ui)

[RedFish]

I am tring to use react-virtual but I don't know how to use it with react-table:
Here is my code (I'm also using material-ui) https://codesandbox.io/s/react-table-virtual-g8j3v
Any advice to make it work?

I tried other lib like react-window and react-virtualized but material-ui table structure make it hard to implement.

[sumitkr003]

useFlexLayout for the table. that'll help you.
I did minor changes to your code.
https://codesandbox.io/s/react-table-virtual-wg3ki

[vladifel]

useFlexLayout for the table. that'll help you.
I did minor changes to your code.
https://codesandbox.io/s/react-table-virtual-wg3ki

@sumitkr003 , thanks for sharing this. It gave me a nudge in the right direction.

Is there a similar way to virtualize the table in both axes and retaining the 'sticky header' property of the Table?
I tried to implement it using both columnVirtiualizer & rowVirtualizer but i'm ending up with a TableBody completely independent from the TableHead (two independent scroll bars, one for the table head and one for the body).

[stvhanna]

@vladifel Can you post a codesandbox of your try?

[vladifel]

Here's a simple codesandbox that illustrates the use case.

[ikiw]

@vladifel were you able to get that working ? Even i'm trying out something similar.

[asibilia]

Not sure what you ended up doing here, but I had a similar problem and ended up adding a scroll listener to the body and used the scrollLeft of the table body to set the scrollLeft of the header section and just hid the scrollbar