gridcn

Performance

100,000 rows, instant rendering, zero blank cells while scrolling.

The demo below renders 100,000 rows × 5 columns instantly — scroll it, fling the scrollbar, or hold Shift+ArrowDown.

Scroll through the 100,000 rows and watch the FPS counter (top-left) — only the visible rows are ever mounted.

Name
Email
Age
Active
Role
Joined
Score
1
Silent Tiger
user0@example.com
63
Viewer
2023-07-05
4
2
Quick Lion
user1@example.com
67
Viewer
2021-04-03
89
3
Swift Wolf
user2@example.com
40
Manager
2020-10-27
80
4
Eager Lion
user3@example.com
50
User
2022-10-08
51
5
Eager Tiger
user4@example.com
45
Viewer
2024-10-07
83
6
Silent Wolf
user5@example.com
24
User
2020-06-01
15
7
Swift Lion
user6@example.com
34
Viewer
2022-10-18
62
8
Eager Lion
user7@example.com
21
Manager
2021-10-07
42
9
Eager Eagle
user8@example.com
25
Editor
2024-06-11
35
10
Bold Tiger
user9@example.com
19
Editor
2024-03-20
52
11
Bold Bear
user10@example.com
42
User
2020-04-16
28
12
Swift Wolf
user11@example.com
47
Manager
2022-08-04
9
13
Swift Bear
user12@example.com
41
Viewer
2024-05-04
45
14
Eager Wolf
user13@example.com
35
Editor
2020-02-16
44
15
Swift Eagle
user14@example.com
65
Viewer
2023-07-13
51
16
Quick Lion
user15@example.com
22
Manager
2023-03-20
28
17
Bold Wolf
user16@example.com
30
Editor
2023-08-07
76
18
Swift Eagle
user17@example.com
19
Admin
2022-03-22
26
19
Eager Eagle
user18@example.com
35
Manager
2020-11-03
70
20
Eager Bear
user19@example.com
33
Editor
2022-09-21
67
21
Silent Lion
user20@example.com
48
Manager
2021-01-03
89
22
Silent Tiger
user21@example.com
62
Manager
2024-01-12
40
23
Eager Tiger
user22@example.com
51
Manager
2023-08-01
82
24
Silent Lion
user23@example.com
26
Admin
2020-09-03
16
25
Bold Eagle
user24@example.com
26
Admin
2024-09-10
38
26
Bold Lion
user25@example.com
49
Viewer
2022-01-02
3
27
Quick Tiger
user26@example.com
26
Viewer
2021-02-08
41
28
Bold Eagle
user27@example.com
50
Editor
2024-02-20
10
29
Swift Tiger
user28@example.com
55
Editor
2023-12-02
6
30
Silent Lion
user29@example.com
35
Viewer
2020-04-17
42

Limits

Comfort target vs. hard ceiling

The comfort target is 100k rows. The hard ceiling is ~1M, a Chromium CSS Grid track limit, not a gridcn limit.

Keeping it fast

gridcn windows rows by scroll velocity. The scroll surface uses CSS transforms, so the browser never reveals an unrendered area. A one-row scroll step re-renders only the cells of the entering row. See Virtualization for the row and column windowing model.

Keep data/columns references stable

A dev-mode guardrail shows a warning when a reference is not stable. Also keep scroll-visible custom cells simple. Editors mount only for the single editing cell, so complex edit-mode logic has no cost while you scroll.

Keep getRowClassName/getCellClassName identity stable too

A new function literal on every render breaks row and cell memoization for the whole grid. A dev build shows this warning:

[data-grid] getRowClassName identity changed since the last render; pass a stable reference (e.g. useCallback) or every row re-renders
[data-grid] getCellClassName identity changed since the last render; pass a stable reference (e.g. useCallback) or every cell re-renders

To fix this, move the function to module scope, or wrap it in useCallback with a stable dependency list.

Verified by a regression suite

A real-Chromium regression suite enforces every guarantee above. The suite checks for blank areas under randomized scrollbar-drag deltas, an FPS regression gate, and a wasted-render probe.

Run the benchmarks yourself

See the Benchmarking section in the repository's DEVELOPMENT.md.

Is your dataset too large to load, not just too large to render?

Virtualization solves rendering. Everything above is about scroll performance once the data exists on the client. If you cannot fetch the whole dataset up front, see Lazy loading to fetch row windows on demand instead.

On this page