VirtualList
Layout
Takes a block
A scrolling box that draws only the rows in view of the one keyed for inside it — for a tree, search results or a diff of thousands of rows.
VirtualList(rowHeight: …, estimate: …, reveal: …) { … }
Example
state rows = (0..10000).map((i) => "row {i}")
state picked = "row 0"
VirtualList(rowHeight: 32, reveal: picked, label: "Rows") {
style { height: 320px }
for r in rows by r { Text(r) { style { height: 32px; margin: 0 } } }
}
Renders with the class wf-virtual-list, stable across releases, so a stylesheet may target it.
| Prop | Type | Meaning |
|---|---|---|
| rowHeight: | Number |
Every row's height, in px: the fast path. Unset, each row is measured |
| estimate: | Number |
The height a row not yet drawn stands for, in px. Unset, 32 |
| reveal: | Any |
A row's key: when it changes, that row is scrolled into view — the selection, the current match |
| label: | String |
What the list is, for a screen reader |
Attribute families: global, aria, data. Plus the universal props on every element: animate:, exit:, speed:, class:, ref:.