Demos available here: http://bvaughn.github.io/react-virtualized/

Getting started

Install react-virtualized using npm.

npm install react-virtualized --save

Documentation

API documentation available here.

Examples

VirtualScroll Example

Below is a simple VirtualScroll example. Each row in the virtualized list is rendered through the use of a rowRenderer function for performance reasons. This function must return an element with a unique key and must fit within the specified rowHeight.

import React from 'react';
import ReactDOM from 'react-dom';
import { VirtualScroll } from 'react-virtualized';

// List data as an array of strings
const list = [
  'Brian Vaughn'
  // And so on...
];

// Render your list
ReactDOM.render(
  <VirtualScroll
    width={300}
    height={300}
    rowsCount={list.length}
    rowHeight={20}
    rowRenderer={
      index => (
        <div key={index}>
          {list[index]}
        </div>
      )
    }
  />,
  document.getElementById('example')
);

FlexTable Example

Below is a very basic FlexTable example. This table has only 2 columns, each containing a simple string. Both have a fixed width and neither is sortable. See here for a more full-featured example including custom cell renderers, sortable headers, and more.

import React from 'react';
import ReactDOM from 'react-dom';
import { FlexTable, FlexColumn } from 'react-virtualized';

// Table data as a array of objects
const list = [
  { name: 'Brian Vaughn', description: 'Software engineer' }
  // And so on...
];

// Render your table
ReactDOM.render(
  <FlexTable
    width={300}
    height={300}
    headerHeight={20}
    rowHeight={30}
    rowsCount={list.length}
    rowGetter={index => list[index]}
  >
    <FlexColumn
      label='Name'
      dataKey='name'
      width={100}
    />
    <FlexColumn
      width={200}
      label='Description'
      dataKey='description'
    />
  </FlexTable>,
  document.getElementById('example')
);

Contributions

Use GitHub issues for requests.

I actively welcome pull requests; learn how to contribute.

Changelog

Changes are tracked in the changelog.

License

react-virtualized is available under the MIT License.