search

gregnb / mui-datatables

Datatables for React using Material-UI
MIT License
2.71k stars 932 forks source link

Is it possible to use react-vitualized with mui-datable to render more than 1000 custom rows? #1857

Open MrRainesE opened 2 years ago

MrRainesE commented 2 years ago

I have a slow rendering problem, I am trying to render more than 1000 rows with more than 12 columns. Using customBodyRenderLite doesnt help with this issue. So is there a way to improve rendering performance with react-virtualized?

this is a look-a-like example of what mine looks like. image source: https://dribbble.com/shots/6938860-Orders-List/attachments/11349975?mode=media

Expected Behavior

I am want my table to render within 2 seconds

Current Behavior

now it's rendering more than 15 seconds

Your Environment

Tech Version
Material-UI 4.12.3
MUI-datatables 3.8.2
React 17.0.2
browser Chrome
LifeisFuckingMovie commented 2 years ago

I have the same problem, have you solved this problem?

MrRainesE commented 2 years ago

@LifeisFuckingMovie not yet,

kevinntruo commented 2 years ago

Have you try pagination? Instead of rendering all 1000 rows, render 5/10/25 rows per page and re-render every time they click next or previous page. I did this and solved slow rendering time issue

KianoJ commented 2 years ago

I was waiting for this and I finally gave up and made my own board with MaterialUI and react-virtuoso. Virtuoso even has an example to implement MUI table and list and is very easy to set up compared to react-window. It also supports horizontal scroll and can be responsive