Live demo
Why virtualization matters
On DDMind, one table held 17,000+ rows. The original version fetched and rendered everything up front, and froze after users loaded several files. This demo recreates the problem and the fix with synthetic data, using the same technique: fetch one page at a time, cache what you've fetched, and keep only the visible rows in the DOM.
Choose a strategy above. Try the first one, then the second, and compare.
Load all rows
Not run yet.
Paged + virtualized
Not run yet.
Synthetic data, measured live in your browser. Both strategies use the same simulated 200 ms API latency per request. After running strategy 2, scroll the grid: pages load on demand (100 rows each) and scrolling back reads from the cache.
Demo numbers vs production result
The numbers above are measured on your device with synthetic data, so they vary by machine. The production result on DDMind, with real data and a real network, was a load-time reduction of about 8–10 seconds and no more freezes.
How the demo is built
React with TanStack Virtual for row virtualization, a simulated paged API with a client-side page cache, and requestAnimationFrame to measure paint time and frozen frames. DDMind itself used AG-Grid's infinite row model in Angular. Read the study note for the full explanation.