Large Data Grid

A proof of concept that renders 20,000+ rows without pagination — Excel-like scrolling with search, filters, sorting and export.

2026Code ↗

problem

Regular UI tables render every row into the DOM. Load 10k–50k rows and the browser slows to a crawl or crashes — a real problem for dashboards, admin panels and BI tools.

solution

Virtualized rendering: all rows load in one API call, but only the ~40 visible rows exist in the DOM at any time. TanStack Table models the data; TanStack Virtual handles scrolling.

stack

Next.js · React · TanStack Table · TanStack Virtual · MUI · Node.js

challenges

Keeping scroll smooth while filtering and sorting 20k+ rows
Global search and per-column filters on a virtualized list
Exporting the visible data to Excel

learnings

How virtualization keeps DOM size constant regardless of data size
Separating the data model from rendering