JavaScript
React components for efficiently rendering large lists and tabular data

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

Getting started

Install react-virtualized using npm.

npm install react-virtualized --save

ES6, CommonJS, and UMD builds are available with each distribution. For example:

// Make sure to import default styles.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';

// Then you can import any react-virtualized components you need.
// Tree-shaking is supported with ES6 or CommonJS usage.
import { Grid } from 'react-virtualized'

Alternately you can load a global-friendly UMD build:

<link rel="stylesheet" href="path-to-react-virtualized/styles.css">
<script src="path-to-react-virtualized/dist/umd/react-virtualized.js"></script>

Documentation

API documentation available here.

There are also a couple of how-to guides:

• Customizing classes and styles
• Displaying items in reverse order
• Using AutoSizer
• Creating an infinite-loading list

Examples

Examples for each component can be seen in the documentation.

Here are some online demos of each component:

• ArrowKeyStepper
• AutoSizer
• ColumnSizer
• FlexTable
• Grid
• InfiniteLoader
• ScrollSync
• VirtualScroll

And here are some "recipe" type demos:

• Collapsable tree view
• Full-page grid (spreadsheet)

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.