zaferkadi / react-virtualized

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>

Dependencies

React Virtualized has very few dependencies and most are managed by NPM automatically. However the following peer dependencies must be specified by your project in order to avoid version conflicts: react, react-addons-shallow-compare, and react-dom. NPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.

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
• Displaying a reverse list

Examples

Examples for each component can be seen in the documentation.

Here are some online demos of each component:

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

And here are some "recipe" type demos:

• Collapsable tree view
• Full-page grid (spreadsheet)
• Dynamic cell measuring
• Cell hover effects

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.