Big Data — 10,000 Rows
Load 10,000 rows instantly and sort by any column. Sort time is displayed in real-time — typically under 1 second.
How it works
This demo loads 10,000 rows of generated company data and measures how long each operation takes. The result is typically under 1 second for both initial render and sort — demonstrating ReoGrid's Canvas-based architecture at scale.
- Click "Sort" on any column header to sort all 10,000 rows — the elapsed time in milliseconds is shown above the grid
- Initial load uses suspendRender / resumeRender to batch all cell writes into a single Canvas repaint
- The data generator uses a seeded pseudo-random function so results are deterministic and reproducible
- Column headers have auto-filter enabled — click the ▼ dropdown to filter rows by industry, region, or status
- Compare against the 300-row and 1,000-row modes to see how render time scales (or doesn't) with row count
Key APIs used
ws.setGridSize(rows, cols) Pre-allocate the full 10,000 × N grid before writing any data to avoid incremental reallocation
ws.setCellInput(row, col, value) Write each cell value by row/col index during the bulk data load loop
ws.createAutoFilter(options) Enable filter dropdowns on the header row for column-level filtering and sorting
ws.suspendRender() / ws.resumeRender() Defer all Canvas repaints until after all 10,000 rows are written — critical for sub-second load times
Source Code
Related Documentation
Related Articles
Rendering 10,000 rows in the browser — how ReoGrid Web stays at 60fps
Deep-dive into the Canvas rendering pipeline that makes large datasets fast.
One million rows in a browser spreadsheet — without loading one million rows
For datasets beyond bulk loading: the delay-load data source.
ReoGrid Web vs AG Grid vs Handsontable — picking the right grid
Performance benchmarks and feature comparison across popular grid libraries.