Virtualized / Windowed Table

This table has 10,000 generated rows, but only the rows currently within (or near) the visible scroll viewport are actually present in the DOM. Windowing is hand-rolled: startIndex/endIndex are computed from scrollTop in an onScroll handler, and spacer divs above/below preserve correct scrollbar size.

Total rows: 10,000

Rendered DOM rows: 19

Rendered range: 1–19

ID

Name

Value

Category

1

Row-00001

921.69

Bravo

2

Row-00002

57.22

Charlie

3

Row-00003

558.22

Delta

4

Row-00004

373.73

Echo

5

Row-00005

453.48

Alpha

6

Row-00006

626.09

Bravo

7

Row-00007

165.58

Charlie

8

Row-00008

329.11

Delta

9

Row-00009

539.62

Echo

10

Row-00010

971.51

Alpha

11

Row-00011

821.19

Bravo

12

Row-00012

179.04

Charlie

13

Row-00013

995.17

Delta

14

Row-00014

816.03

Echo

15

Row-00015

441.82

Alpha

16

Row-00016

926.88

Bravo

17

Row-00017

434.20

Charlie

18

Row-00018

644.19

Delta

19

Row-00019

322.64

Echo

Try it: document.querySelectorAll('[data-testid^="row-"]').length will always be far smaller than 10,000 — querying for a row by id that is currently scrolled out of view will find nothing until you scroll it into the rendered window.