Skip to main content

Data Display

Virtual List

Windowed list — the server renders only the first slice; initVirtualList re-slices it on scroll.

Element
<div>
Module
@basenative/components
Function
renderVirtualList

Quick start

Import the render function and call it from your server template.

import { renderVirtualList } from '@basenative/components';

renderVirtualList({ items, itemHeight: 40, containerHeight: 240 });

Examples

Each block is a real server render — no mockups, no virtual DOM.

Windowed 1,000 rows

Only the visible slice is in the DOM. Scroll to see new rows materialize.

Live render
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
Item 13
Item 14
Item 15
Item 16
Source
renderVirtualList({ items, itemHeight: 40, containerHeight: 240 })

Options

Arguments accepted by renderVirtualList().

renderVirtualList option reference
Option Type Default Description
items string[] — Items to render.
itemHeight number 40 Row height in px.
containerHeight number 320 Viewport height in px.