Skip to content

zealotchen0/virtualized-list

Repository files navigation

virtualized-list

A tiny vanilla, dependency free, virtualization library

npm package

Installation

Using npm:

$ npm install virtualized-list --save

Usage

Basic example

const virtualizedList = new VirtualizedList(element, {
  data: ['a', 'b', 'c', 'd'],
  renderRow: (row, index) => {
  	const element = document.createElement('div');
  	element.innerHTML = row;
  	
  	return element;
  },
  rowHeight: 150
)}

Advanced example

const virtualizedList = new VirtualizedList(element, {
  data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
  renderRow: (row, index) => {
  	const element = document.createElement('div');
  	element.innerHTML = row;
  	
  	return element;
  },
  rowHeight: [150, 120, 100, 80, 50, 35, 200, 500, 50, 300],
  estimatedRowHeight: 155,
  overscanCount: 5, // Number of rows to render above/below the visible rows.
  onMount: () => {
  	// Once the component has mounted, we set an initial index to scrollTo
  	virtualizedList.scrollToIndex(10);
  }
)}

About

A tiny, Vanilla JS, virtualization library

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 100.0%