Flux

Virtual scroller ​

The Virtual scroller renders only the items currently in view, making it possible to display very long lists — thousands of rows — without the performance cost of rendering every item. It is a fixed-row-height windowing primitive.

Not server pagination

The virtual scroller is for rendering a large list that is already in memory on the client. For server-backed data sets, use the Data table's server-side pagination instead.

The scroller fills the height of its parent, so place it inside a container with a constrained height.

#1Item number 1
#2Item number 2
#3Item number 3
#4Item number 4

Props

estimated-item-height?: number
The fixed height of each item in pixels, used to position the window.
Default: 40

items: T[]
The full list of items to virtualize.

overscan?: number
The number of extra items rendered above and below the visible window, to reduce flicker while scrolling.
Default: 4

Slots

default ({
    readonly item: T;
    readonly index: number;
})
Renders a single item. Receives the item and its index.

Examples ​

Basic

A virtualized list of 10,000 items.

#1Item number 1
#2Item number 2
#3Item number 3
#4Item number 4

<template>
    <div style="width: 100%; height: 320px; background: var(--surface); border: 1px solid var(--surface-stroke); border-radius: var(--radius)">
        <FluxVirtualScroller
            :estimated-item-height="44"
            :items="items">
            <template #default="{item, index}">
                <div style="display: flex; align-items: center; gap: 12px; height: 100%; padding: 0 15px; border-bottom: 1px solid var(--surface-stroke)">
                    <strong style="width: 56px; color: var(--foreground-secondary)">#{{ index + 1 }}</strong>
                    <span>{{ item }}</span>
                </div>
            </template>
        </FluxVirtualScroller>
    </div>
</template>

<script
    setup
    lang="ts">
    import { FluxVirtualScroller } from '@flux-ui/components';

    const items = Array.from({length: 10000}, (_, index) => `Item number ${index + 1}`);
</script>

Used components ​