How to implement MuiVirtualizedTable in React Window?
See original GitHub issueI’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.
Issue Analytics
- State:
- Created 4 years ago
- Reactions:3
- Comments:6
Top Results From Across the Web
Material-UI react-window virtualized table Example
Material-UI react-window virtualized table Example. 3. Embed Fork Create Sandbox Sign in. Sandbox Info. Material-UI react-window virtualized table Example.
Read more >Virtualizing Large Data Lists with react-window
Rendering large dataset in the DOM without the right tools can be expensive, learn how to use react-window to simply this task.
Read more >Adding React-Window to Material-UI Enhanced Table: type is ...
A couple of things are going on here. First, the react-window components only accept a function/functional components as a child.
Read more >An editable table with React, Material UI and React Virtualized
DataGrid came with edit mode, but now with React Virtualized this is something we need to implement ourselves. Let's add an onClick handler...
Read more >Virtualize large lists with react-window - web.dev
react -window is a small, third-party library that makes it easier to create virtualized lists in your application. It provides a number of...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@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.@janhesters could you please share how you managed to use React Window with material-ui’s table? that would be awesome! thanks