1,000,000 Rows — Delay Load
A scrollbar that represents one million rows while only visible rows are fetched on demand. Jump anywhere — the grid keeps a few hundred rows in memory.
How it works
This demo attaches a delay-load data source to a 1,000,001-row grid (one million data rows plus a header). Nothing is pre-loaded: only the rows that scroll into view, plus a 100-row buffer, are fetched from a simulated server — watch the fetch log coalesce requests as you move.
- Drag the scrollbar or use "Jump to row" — the viewport paints blank for one network round-trip, then fills in with a single repaint
- The fetch log shows each load() call as a contiguous row range — one fetch per scroll stop, never one per cell
- "Cached rows" stays in the hundreds while the scrollbar represents one million rows — that is the entire memory footprint of the data
- Change the simulated server latency (0 / 100 / 500 ms) to see how the grid degrades gracefully on slow backends
- "Invalidate All" drops the cache and bumps an internal epoch, so even in-flight responses are discarded — then the visible range reloads automatically
- Each row is generated deterministically from its index, like a real backend keyed by row id — scroll away and back, the data is identical
Key APIs used
ws.setDataSource(config) Attach an on-demand data source: totalRows resizes the grid, load(rows) is called with batched, deduplicated row indices
config.bufferRows Rows prefetched beyond the visible range on scroll (default 50) — hides network latency during slow scrolling
handle.invalidateAll() / invalidateRows(rows) Drop cached rows and reload the visible range — use for server-side data changes or live refresh
handle.detach() Disconnect the data source keeping loaded data — the sheet becomes a normal spreadsheet over what was fetched
Source Code
Related Articles
One million rows in a browser spreadsheet — without loading one million rows
How the delay-load data source works: interception, microtask batching, and debounced prefetch.
Rendering 10,000 rows in the browser — how ReoGrid Web stays at 60fps
The canvas rendering architecture that makes viewport-only drawing possible.