react-virtualized

React components for efficiently rendering large lists and tabular data http://www.reactvirtualized.com

NPM version NPM license NPM total downloads NPM monthly downloads CircleCI Codecov badge Slack chat OpenCollective OpenCollective

React components for efficiently rendering large lists and tabular data. Check out the demo for some examples. Join the official Slack chat at react-virtualized.now.sh.

Sponsors

The following wonderful companies have sponsored react-virtualized:

                              

Learn more about becoming a sponsor!

                             

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 web pack 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 

You can also use a global-friendly UMD build:


<script src="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.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.