VirtualListView
Variable heights with a stable visible window.
Virtualization
Many rows should still feel light
Only the visible range is mounted while measured row heights keep the complete scroll surface accurate.
1,000
records in the local showcase
44–120 px
measured variable row heights
Header
custom content in the same scroll flow
Scrolling header with a long list
Short, medium and tall rows update the prefix-height model as they enter the viewport.
1,000 records with a scrolling list header
Measured heights replace their estimates without mounting the complete list.
0 — Record #1
1 — Record #2
2 — Record #3
3 — Record #4
4 — Record #5
5 — Record #6
6 — Record #7
7 — Record #8
8 — Record #9
9 — Record #10
10 — Record #11
11 — Record #12
12 — Record #13
13 — Record #14
14 — Record #15
15 — Record #16
16 — Record #17
17 — Record #18
18 — Record #19
19 — Record #20
20 — Record #21
21 — Record #22
22 — Record #23
23 — Record #24
24 — Record #25
25 — Record #26
26 — Record #27
27 — Record #28
28 — Record #29
29 — Record #30
30 — Record #31
31 — Record #32
32 — Record #33
33 — Record #34
34 — Record #35
35 — Record #36
36 — Record #37
37 — Record #38
38 — Record #39
39 — Record #40
40 — Record #41
41 — Record #42
42 — Record #43
43 — Record #44
44 — Record #45
45 — Record #46
46 — Record #47
47 — Record #48
48 — Record #49
49 — Record #50
Range
Only visible children count
Foreach owns stable insertion points for the current viewport and overscan window.
Heights
Measurement corrects estimation
A prefix sum maps scroll offsets to indices even when every row has a different height.
Lifecycle
Observers leave with their cells
Resize, scroll and remote listeners are disposed by their owning components.
VirtualList DSL
The row renderer and optional header remain inside the contextual component tree.
scala
virtualList[ShowcaseItem](showcaseItems) {
estimateHeightPx = 64
overscanPx = 240
crawlable = true
crawlId = "showcase-records"
cellRenderer = (item: ShowcaseItem | Null, index: Int) =>
div { text(item.title) {} }
header {
div { text("Scrolling list header") {} }
}
}
Crawl state
VirtualListView uses the same component-local cookie contract as TableView and DataGrid.
text
crawlable = true
crawlId = "showcase-records"
Cookie: ui-crawl-showcase-records
State: offset, limit and optional remote sorting
URL: remains unchanged