React-window: How to implement MuiVirtualizedTable in React Window?

[janhesters]

I'm using Material UI for my styling and have a large table that starts to get laggy.

So I found this tutorial on using React Virtualized Table in the docs. But in it MuiVirtualizedTable uses React Virtualized Table and not React Window. In the former's docs it says:

If you're considering adding react-virtualized to a project, take a look at react-window as a possible lighter-weight alternative.

So my question is: Is there a way to use React Window instead of RVT? If yes, how? The demo for RVT uses a component called Table which is not exposed by the React Window API.

[janhesters]

I just learned, that Table and MuiVirtualizedTable are not using <table />, <tr /> etc. under the hood, so you can just use React Window.

[stefanoTron]

@janhesters could you please share how you managed to use React Window with material-ui's table? that would be awesome! thanks

[samuelcolburn]

@littletower here's an example I made that roughly follows the original material-ui example:

https://codesandbox.io/s/material-ui-react-window-virtualized-table-example-byv8n

The actual implementation itself is fairly simple you basically just wrap your table rows in a <FixedSizeList/>. The bigger headache is getting to actually look like a table since you can't actually use any <table/> elements.