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.

[cmacdonnacha]

@samuelcolburn Could you re-post that example? Seems to be a broken link. Also, since it's not actually a <table> wouldn't that be bad for accessibility?

[samuelcolburn]

@cmacdonnacha here's the link again, I think it was changed to private because I changed my default Code Sandbox profile settings. Apologies to anyone who ran into the same issue. Ping me again if it still doesn't work:

https://codesandbox.io/s/material-ui-react-window-virtualized-table-example-byv8n?file=/index.js

As for your question regarding <table> elements, yes it probably is. However, iirc there were issues with how <table> elements are rendered in the browser/defined in HTML5. I believe the primary reason was that react-window creates various wrapper/container elements in order to virtualize the list. This means you will violate the permitted content rules of a <table>. However, I don't remember exactly as it's been a while since I looked at this. You're welcome to try and use <table> elements if it works.

Note: I haven't looked at this example for a long time so I make no guarantees about its quality. I did make some updates just now: added some documentation and changed the file structure, but the logic remains the same. If I were to use this in production, I would probably do a deeper review to see if there's an easier/better/cleaner way to implement it.

[shamseerahammedm]

@samuelcolburn any idea on how to use it will FixedSizeGrid ?