question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to implement MuiVirtualizedTable in React Window?

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:3
  • Comments:6

github_iconTop GitHub Comments

17reactions
samuelcolburncommented, Jul 11, 2019

@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.

3reactions
stefanoTroncommented, Jun 19, 2019

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found