Improve initial load / rendering time

[githorse]

I'm evaluating MRT along with several other options including AG Grid. I've noticed that, when I initially load a large dataset, MRT takes several seconds to just draw the grid on the screen, but AG Grid does it instantly. (In my highly informal benchmark with 200k records, MRT comes in between 2-5 seconds to draw the screen, and AG Grid consistently comes in at pretty close to zero seconds. Obviously that will vary per browser/CPU.) AG Grid wins on this one as the page feels much faster to load.

(Yes, I realize with that many records I should be looking into server-side options -- this is a somewhat exaggerated case, though it's not impossible I would want a dataset that size. But even at, say, 50k records, the difference is noticeable.)

I don't know how either product works under the hood, so it's hard to say why that might be. (Maybe AG Grid uses web workers? Maybe it breaks the event loop with useTimeout, renders the first page / viewport, and then does the rest later? Maybe it just doesn't do any real computation on initial load?)

Would it be possible for MRT to prioritize rendering the initial screen's worth of data as quickly as possible?

[mcdougald]

Hi, one interesting thing is that ag-grid is a framework across VueJS, Angular, ReactJS, etc.

I currently have two heavy enterprise dashboards in ag-grid & MRT. I see exactly what you're mentioning with the ag-grid table's rendering vs MRT.

The key difference is ag-grid's GridRef & tracking the table state through useRef. So the outer table component re-renders less. Meanwhile react-table has a lot of use-state and such?

This might not be the answer you're looking for but you'll see similar concepts in Charts & D3.js. They help break components out of react's render-paradigm/V-DOM for performance.

For MRT & @tanstack/react-table to implement this more, I think they'd need to hack away from react.