Documentation
Webframe UI
Components
Virtuallist

Virtual List

A View container to display large list of items (thousands) without performance penalty.

VirtualList is a perfect component for implementing Infinite Scroll experience because its rendering speed does not depend on the number of items in the list.

Props

PropTypeDefaultDescription
items
Array
Required

List of items to render (can be an array of any value)

initialItems
Unsigned Integer
10

Number of items to render initially, or when items prop changes

grid
Boolean

Whether to render as grid (equivalent to scrollClass='row top wrap' for col container)

row
Boolean

Whether to render in horizontal layout direction

renderItem
Function

Function(item, index, items, self) to render each item in the list, default is renderProp()

renderRadius
Boolean
|
Number
true

Percentage of the visible list container size to pre-render items around.

  • Set to true to use automatic calculation based on scroll speed (this is default).
  • Set to 0 to only render items when they scroll into view.
  • Set to 1 (ie. 100%) to render items within an area that is 3x the size of the view.
┌─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┐
│            ↑            │
│    renderRadius: 100%   │
│            ↓            │
┌─────────────────────────┐
│          start          │
│  visible items in view  │
│           end           │
└─────────────────────────┘
│            ↑            │
│    renderRadius: 100%   │
│            ↓            │
└─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─┘

Examples

100,000 items list
12345678910
Grid distribution with dynamic item sizes
123456789101112131415161718192021222324252627282930
10,000 items scrollable in horizontal direction
12345678910
Column distribution with horizontal scrollbar
123456789101112131415161718192021222324252627282930

Unique Features

  1. List items can vary in sizes (both width and height)
  2. No need to specify or calculate item dimensions
  3. Grid layout support.

Virtual List works by only rendering the visible items in the list. As user scrolls, it pre-renders the incoming items within renderRadius, and stops rendering those that scroll out of view.

This dynamic rendering is great for Infinite Scroll experience. It can support millions of rows and columns without UI lags or freezes.

ViewInputs