PRO performance big-data sort 10000-rows
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
TypeScript