github.com/bvaughn/react-virtualized @9.22.6

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples.

If you like this project, 🎉 become a sponsor or ☕ buy me a coffee

Sponsors

The following wonderful companies have sponsored react-virtualized:

Learn more about becoming a sponsor!

A word about react-window

If you're considering adding react-virtualized to a project, take a look at react-window as a possible lighter-weight alternative. Learn more about how the two libraries compare here.

Getting started

Install react-virtualized using npm.

npm install react-virtualized --save

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

// Most of react-virtualized's styles are functional (eg position, size).
// Functional styles are applied directly to DOM elements.
// The Table component ships with a few presentational styles as well.
// They are optional, but if you want them you will need to also import the CSS file.
// This only needs to be done once; probably during your application's bootstrapping process.
import 'react-virtualized/styles.css';

// You can import any component you want as a named export from 'react-virtualized', eg
import {Column, Table} from 'react-virtualized';

// But if you only use a few react-virtualized components,
// And you're concerned about increasing your application's bundle size,
// You can directly import only the components you need, like so:
import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';
import List from 'react-virtualized/dist/commonjs/List';

Note webpack 4 makes this optimization itself, see the documentation.

If the above syntax looks too cumbersome, or you import react-virtualized components from a lot of places, you can also configure a Webpack alias. For example:

// Partial webpack.config.js
{
  alias: {
    'react-virtualized/List': 'react-virtualized/dist/es/List',
  },
  ...rest
}

Then you can just import like so:

import List from 'react-virtualized/List';

// Now you can use <List {...props} />

You can also use a global-friendly UMD build:

<link rel="stylesheet" href="https://github.com/bvaughn/react-virtualized/raw/9.22.6/path-to-react-virtualized/styles.css" />
<script src="https://github.com/bvaughn/react-virtualized/raw/9.22.6/path-to-react-virtualized/dist/umd/react-virtualized.js"></script>

Now you're ready to start using the components. You can learn more about which components react-virtualized has to offer below.

Dependencies

React Virtualized has very few dependencies and most are managed by NPM automatically. However the following peer dependen