Large data 100k rows fully loaded. Virtualization keeps only the virtualized rows mounted.
The opposite of lazy loading: the whole dataset is in memory from the start, and
virtualization does the work. Only the rows around the viewport ever mount, no matter the
row count.
Silent Tiger
user0@example.com
63
Viewer
2023-07-05
4
Quick Lion
user1@example.com
67
Viewer
2021-04-03
89
Swift Wolf
user2@example.com
40
Manager
2020-10-27
80
Eager Lion
user3@example.com
50
User
2022-10-08
51
Eager Tiger
user4@example.com
45
Viewer
2024-10-07
83
Silent Wolf
user5@example.com
24
User
2020-06-01
15
Swift Lion
user6@example.com
34
Viewer
2022-10-18
62
Eager Lion
user7@example.com
21
Manager
2021-10-07
42
Eager Eagle
user8@example.com
25
Editor
2024-06-11
35
Bold Tiger
user9@example.com
19
Editor
2024-03-20
52
Bold Bear
user10@example.com
42
User
2020-04-16
28
Swift Wolf
user11@example.com
47
Manager
2022-08-04
9
Swift Bear
user12@example.com
41
Viewer
2024-05-04
45
Eager Wolf
user13@example.com
35
Editor
2020-02-16
44
Swift Eagle
user14@example.com
65
Viewer
2023-07-13
51
Quick Lion
user15@example.com
22
Manager
2023-03-20
28
Bold Wolf
user16@example.com
30
Editor
2023-08-07
76
Swift Eagle
user17@example.com
19
Admin
2022-03-22
26
Eager Eagle
user18@example.com
35
Manager
2020-11-03
70
Eager Bear
user19@example.com
33
Editor
2022-09-21
67
Silent Lion
user20@example.com
48
Manager
2021-01-03
89
Silent Tiger
user21@example.com
62
Manager
2024-01-12
40
Eager Tiger
user22@example.com
51
Manager
2023-08-01
82
Silent Lion
user23@example.com
26
Admin
2020-09-03
16
Bold Eagle
user24@example.com
26
Admin
2024-09-10
38
Bold Lion
user25@example.com
49
Viewer
2022-01-02
3
Quick Tiger
user26@example.com
26
Viewer
2021-02-08
41
Bold Eagle
user27@example.com
50
Editor
2024-02-20
10
Swift Tiger
user28@example.com
55
Editor
2023-12-02
6
Silent Lion
user29@example.com
35
Viewer
2020-04-17
42
pnpm dlx shadcn@latest add @gridcn/data-grid-large-data-demo 100k generated rows. The DOM holds only the rows around the viewport at all times.
Scrolling is a flat line regardless of size.
Scroll through the 100,000 rows and watch the FPS counter (top-left) — only the visible rows are ever mounted.
FPS: 0
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
pnpm dlx shadcn@latest add @gridcn/data-grid-performance-demo The same 100k rows with a top-left FPS overlay. The scroll-performance claim is checkable
live.
The grid renders rows through a virtualized viewport: it measures row height, computes
which rows intersect the scroll window, and mounts only those plus overscan. Sorting,
filtering, and editing all run against the in-memory array. The DOM is a window onto it.
When to lazy-load instead
If the dataset is bigger than a browser can hold, stop loading it all:
lazy loading fetches only the scrolled-into windows, and
server pagination only the current page.