react-virtualized

What is react-virtualized?

The react-virtualized npm package provides efficient rendering of large lists and tabular data by only rendering the items that are currently visible within the viewport. This can significantly improve the performance of applications that need to display large amounts of data.

What are react-virtualized's main functionalities?

List

The List component allows you to render large lists of items efficiently. It only renders the rows that are currently visible to the user, based on the scroll position.

{"import { List } from 'react-virtualized';

function MyList({ list }) {
  return (
    <List
      width={300}
      height={300}
      rowCount={list.length}
      rowHeight={20}
      rowRenderer={({ index, key, style }) => (
        <div key={key} style={style}>
          {list[index]}
        </div>
      )}
    />
  );
}"}

Table

The Table component is used for rendering large data sets in a tabular format. Similar to List, it only renders the rows that are visible in the viewport.

{"import { Column, Table } from 'react-virtualized';

function MyTable({ list }) {
  return (
    <Table
      width={1000}
      height={300}
      headerHeight={20}
      rowHeight={30}
      rowCount={list.length}
      rowGetter={({ index }) => list[index]}
    >
      <Column label='Name' dataKey='name' width={100} />
      <Column label='Age' dataKey='age' width={200} />
    </Table>
  );
}"}

Grid

The Grid component can render a virtualized grid of cells, which is useful for displaying data in a spreadsheet-like format. It renders only the cells that are currently in the viewport.

{"import { Grid } from 'react-virtualized';

function MyGrid({ columnCount, rowCount }) {
  return (
    <Grid
      columnCount={columnCount}
      columnWidth={100}
      height={300}
      rowCount={rowCount}
      rowHeight={30}
      width={300}
      cellRenderer={({ columnIndex, key, rowIndex, style }) => (
        <div key={key} style={style}>
          {`R${rowIndex}, C${columnIndex}`}
        </div>
      )}
    />
  );
}"}

InfiniteLoader

The InfiniteLoader component works with List, Table, or Grid to load more items as the user scrolls. It's useful for implementing 'infinite scroll' features where more data is fetched as needed.

{"import { InfiniteLoader, List } from 'react-virtualized';

function MyInfiniteList({ list, loadMoreRows }) {
  const isRowLoaded = ({ index }) => !!list[index];

  return (
    <InfiniteLoader
      isRowLoaded={isRowLoaded}
      loadMoreRows={loadMoreRows}
      rowCount={list.length}
    >
      {({ onRowsRendered, registerChild }) => (
        <List
          ref={registerChild}
          onRowsRendered={onRowsRendered}
          width={300}
          height={300}
          rowCount={list.length}
          rowHeight={20}
          rowRenderer={({ index, key, style }) => (
            <div key={key} style={style}>
              {list[index]}
            </div>
          )}
        />
      )}
    </InfiniteLoader>
  );
}"}

Other packages similar to react-virtualized

react-window

React-window is a complete rewrite of react-virtualized by the same author. It offers similar functionality but with a smaller and faster core. It's designed to be more approachable and easier to use than react-virtualized.

react-infinite

React-infinite is another package for rendering large lists of elements within a scrolling container. It differs from react-virtualized in its API and the way it handles infinite loading, but it also aims to provide efficient rendering for large lists.

react-virtuoso

React-virtuoso is a virtual list component with a simple API that supports variable-sized items and sticky headers. It provides a different approach to virtualization compared to react-virtualized, focusing on simplicity and automatic handling of item heights.

react-list

React-list is a versatile infinite scroll React component. It offers several modes for rendering lists, including simple, variable, and uniform heights. It's a simpler alternative to react-virtualized with fewer features but can be easier to integrate in some cases.

README

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.

There are also a couple of how-to guides:

• Customizing classes and styles.
• Displaying items in reverse order.

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.

Note that it is very important that rows do not have vertical overflow. This will make scrolling the list difficult (as individual items will intercept the scroll events). For this reason it is recommended that your rows use a style like overflow-y: hidden.)

import React from 'react';
import ReactDOM from 'react-dom';
import { VirtualScroll } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// 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 => list[index] // Could also be a DOM element
    }
  />,
  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';
import 'react-virtualized/styles.css'; // only needs to be imported once

// 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')
);

Grid Example

Below is a very basic Grid example. The grid displays an array of objects with fixed row and column sizes. (Dynamic sizes are also supported but this example is intended to be basic.) See here for a more full-featured example with dynamic cell sizes and more.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

// Grid data as an array of arrays
const list = [
  ['Brian Vaughn', 'Software Engineer', 'Sunnyvale', 'CA', 94086 /* ... */ ]
  // And so on...
];

// Render your grid
ReactDOM.render(
  <Grid
    width={300}
    height={300}
    columnWidth={100}
    rowHeight={30}
    columnsCount={list.length}
    rowsCount={list.length}
    renderCell={({ columnIndex, rowIndex }) => list[rowIndex][columnIndex]}
  />,
  document.getElementById('example')
);

AutoSizer Example

VirtualScroll and FlexTable require explicit dimensions but sometimes you just want a component to just grow to fill all of the available space. In that case you should use the AutoSizer component. Building on the VirtualScroll example above...

import React from 'react';
import ReactDOM from 'react-dom';
import { AutoSizer, VirtualScroll } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

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

// Render your list
ReactDOM.render(
  <AutoSizer>
    <VirtualScroll
      height={0}
      rowsCount={list.length}
      rowHeight={20}
      rowRenderer={
        index => list[index] // Could also be a DOM element
      }
    />
  </AutoSizer>,
  document.getElementById('example')
);

Note that in this example we initialize height to 0. (We do this because it is a required property and React will warn in dev mode if we leave it off.) However the AutoSizer wrapper component will inject a valid height for us.

InfiniteLoader Example

High-order component that manages just-in-time fetching of data as a user scrolls up or down in a list.

import React from 'react';
import ReactDOM from 'react-dom';
import { InfiniteLoader, VirtualScroll } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

const list = {};

function isRowLoaded (index) {
  return !!list[index];
}

function loadMoreRows ({ startIndex, stopIndex }) {
  return fetch(`path/to/api?startIndex=${startIndex}&stopIndex=${stopIndex}`)
    .then(response => {
      // Store response data in list...
    })
}

// Render your list
ReactDOM.render(
  <InfiniteLoader
    isRowLoaded={isRowLoaded}
    loadMoreRows={loadMoreRows}
    rowsCount={remoteRowsCount}
  >
    <VirtualScroll
      height={300}
      rowsCount={list.length}
      rowHeight={20}
      rowRenderer={
        index => list[index] // Could also be a DOM element
      }
    />
  </InfiniteLoader>,
  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.