Benchmarks
How the data grid performs on 100,000 rows, in Angular and in React: the first render, filtering, sorting and the frame rate while scrolling. The numbers are the committed output of a script you can run on your own machine — the method is below.
100,000 rows production build median of 5
Results
| Measurement | Angular | React |
|---|---|---|
| First render (100,000 rows) | 197 ms | 168.1 ms |
| Filter: department equals | 124.1 ms | 130.5 ms |
| Filter: name contains (folded) | 162.4 ms | 133.3 ms |
| Clear the filter | 73.2 ms | 51 ms |
| Sort: number column | 260.6 ms | 222.9 ms |
| Sort: text column | 486.4 ms | 329.5 ms |
| Scroll: frames per second | 47.1 fps | 60 fps |
| Scroll: 95th percentile frame | 33.4 ms | 16.8 ms |
| Scroll: frames over 50 ms | 0 | 0 |
Machine: 11th Gen Intel(R) Core(TM) i7-11800H @ 2.30GHz (16 logical cores, 24 GB), Windows_NT 10.0.26300, Chromium 153.0.8010.12, Node v24.19.0.
What is measured
- The grid only. The page generates the rows (seven columns: number, text, date and boolean) before the clock starts, then mounts one grid with virtual scrolling in a 600 px viewport.
- First render runs from mounting the grid until its first rows are in the DOM and a frame has painted.
- Filter and sort run from the change — a
filterValue, a click on a column header — until the grid updated the DOM and the next frame painted. Text filters fold case and accents, as the filter contract requires. - Scrolling moves the viewport 120 px per animation frame for 180 frames and reports the frame rate, the 95th-percentile frame time and the frames over 50 ms (the ones a person notices).
- Each run uses a fresh browser context on a production build, so caches and the JIT start cold; the table shows the median.
Run it yourself
npx nx run dev-app:build # the production docs build
node tools/benchmarks/grid-bench.mjs # writes tools/benchmarks/grid-results.json
node tools/benchmarks/grid-bench.mjs --runs 9 --rows 250000 The script serves the build itself (or takes --url), drives /benchmarks/run with Playwright's Chromium and rewrites the results file this page renders. Numbers depend on the machine; compare runs on the same one. What each package adds to your bundle is on the bundle size page, and the settings that matter for large data are in the performance guide.