virtualized-list v2.2.0

virtualized-list

A tiny vanilla virtualization library, with DOM diffing

Installation

Using npm:

npm install virtualized-list --save

Usage

Basic example

const rows = ['a', 'b', 'c', 'd'];

const virtualizedList = new VirtualizedList(container, {
  height: 500, // The height of the container
  rowCount: rows.length,
  renderRow: index => {
  	const element = document.createElement('div');
  	element.innerHTML = rows[index];

  	return element;
  },
  rowHeight: 150,
)};

Advanced example

const rows = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const rowHeights = [150, 120, 100, 80, 50, 35, 200, 500, 50, 300];

const virtualizedList = new VirtualizedList(container, {
  height: 400,
  rowCount: rows.length,
  renderRow: (row, index) => {
  	const element = document.createElement('div');
  	element.innerHTML = row;

  	return element;
  },
  rowHeight: index => rowHeights[index],
  estimatedRowHeight: 155,
  overscanCount: 5, // Number of rows to render above/below the visible rows.
  initialScrollIndex: 8,
  onMount: () => {
    // Programatically scroll to item index #3 after 2 seconds
    setTimeout(() =>
      virtualizedList.scrollToIndex(3)
    , 2000);
  }
)}

Options