virtual
js/ui/components/virtual.ts
Reusable sparse virtual-window state and its host-neutral viewport. @internal
Interfaces
interface VirtualWindow {
Visible slice computed by {@link VirtualScroll}.
Properties
start: number
end: number
topPad: number
bottomPad: number
interface VirtualListProps extends StyleProps, FlexChildProps, Props {
Props accepted by {@link VirtualList}.
Properties
height: number
window: VirtualWindow
offset: number
onMouse?: (event: UiMouseEvent) => boolean | void
onScroll?: (offset: number) => void
children?: Child
Classes
class VirtualScroll {
Sparse scroll model for lists too large to render whole.
Memory is proportional to explicitly measured rows, not total item count. Callers own the model outside component bodies and render only the returned window.
Constructors
constructor(options: { estimate?: number; follow?: boolean } = {})
Getters
get count(): number
get offset(): number
Current scroll offset in rows.
get follow(): boolean
Whether the viewport follows the end as content grows.
get totalRows(): number
Total estimated row height without iterating over every item.
Methods
setCount(count: number): void
Replace item count and discard measurements beyond the new boundary.
setHeight(index: number, rows: number): void
Record a measured row height for one item.
scrollBy(rows: number, viewportRows: number): void
Scroll by a row delta and clamp to the current viewport boundary.
scrollTo(offset: number, viewportRows: number): void
Scroll to a row offset and update end-following state.
scrollToEnd(viewportRows: number): void
Pin the viewport to the current end.
handleWheel(event: UiMouseEvent, viewportRows: number): boolean
Route a terminal wheel event using three rows per notch.
window(viewportRows: number, overscan = 2): VirtualWindow
Compute the bounded item slice worth rendering for one viewport.
Functions
function VirtualList(props: VirtualListProps): VNode
Viewport that renders only a caller-provided virtual window.