{"_id":"@akirsanov/react-virtualized","name":"@akirsanov/react-virtualized","dist-tags":{"latest":"9.22.3"},"versions":{"9.22.3":{"name":"@akirsanov/react-virtualized","description":"React components for efficiently rendering large, scrollable lists and tabular data","author":{"name":"Brian Vaughn","email":"brian.david.vaughn@gmail.com"},"user":"bvaughn","version":"9.22.3","homepage":"https://github.com/bvaughn/react-virtualized","main":"dist/commonjs/index.js","module":"dist/es/index.js","jsnext:main":"dist/es/index.js","license":"MIT","scripts":{"build:types":"flow-copy-source --ignore \"**/*.{jest,e2e,ssr,example}.js\" source/WindowScroller dist/es/WindowScroller && flow-copy-source --ignore \"**/*.{jest,e2e,ssr,example}.js\" source/AutoSizer dist/es/AutoSizer","build":"yarn run build:commonjs && yarn run build:css && yarn run build:es && yarn run build:demo && yarn run build:umd","build:commonjs":"yarn run clean:commonjs && cross-env NODE_ENV=commonjs babel source --out-dir dist/commonjs","build:css":"postcss source/styles.css -o styles.css --use autoprefixer","build:demo":"yarn run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js -p --bail","build:es":"yarn run clean:es && yarn run build:types && cross-env NODE_ENV=es babel source --out-dir dist/es","build:umd":"yarn run clean:umd && cross-env NODE_ENV=rollup rollup -c","clean":"yarn run clean:commonjs && yarn run clean:demo && yarn run clean:es && yarn run clean:umd","clean:commonjs":"rimraf dist/commonjs","clean:demo":"rimraf build","clean:es":"rimraf dist/es","clean:umd":"rimraf dist/umd","deploy":"gh-pages -d build","lint":"eslint 'source/**/*.js'","typecheck":"flow check","prettier":"prettier --write '{playground,source,docs}/**/*.{js,md}'","prettier:diff":"prettier --list-different '{playground,source,docs}/**/*.{js,md}'","postpublish":"yarn run deploy","prepublishOnly":"yarn run build","start":"cross-env NODE_ENV=development webpack-dev-server --hot --config webpack.config.dev.js","test":"yarn run test:jest","test:jest":"jest --no-watchman --runInBand","test:coverage":"jest --no-watchman --maxWorkers 2 --coverage && codecov","watch":"watch 'clear && yarn run test -s' source","watch:jest":"jest --no-watchman --watch"},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"repository":{"type":"git","url":"git+https://github.com/bvaughn/react-virtualized.git"},"keywords":["react","reactjs","react-component","virtual","list","scrolling","infinite","virtualized","table","fixed","header","flex","flexbox","grid","spreadsheet"],"bugs":{"url":"https://github.com/bvaughn/react-virtualized/issues"},"devDependencies":{"@babel/cli":"^7.7.0","@babel/core":"^7.7.2","@babel/plugin-external-helpers":"^7.2.0","@babel/plugin-proposal-class-properties":"^7.7.0","@babel/plugin-transform-modules-commonjs":"^7.7.0","@babel/plugin-transform-runtime":"^7.6.2","@babel/plugin-transform-flow-comments":"^7.12.13","@babel/polyfill":"^7.7.0","@babel/preset-env":"^7.7.1","@babel/preset-flow":"^7.0.0","@babel/preset-react":"^7.7.0","@babel/preset-stage-2":"^7.0.0","autoprefixer":"^9.7.1","babel-eslint":"^10.0.3","babel-jest":"^24.9.0","babel-loader":"8.0.6","babel-plugin-flow-react-proptypes":"^26.0.0","babel-plugin-transform-react-remove-prop-types":"^0.4.24","codecov":"^3.6.1","codemirror":"^5.49.2","cross-env":"^6.0.3","css-loader":"^3.2.0","eslint":"^6.6.0","eslint-config-fbjs":"^3.1.1","eslint-config-prettier":"^6.5.0","eslint-config-react":"^1.1.7","eslint-plugin-babel":"^5.3.0","eslint-plugin-flowtype":"^4.3.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.1","eslint-plugin-react":"^7.16.0","eslint-plugin-relay":"^1.3.12","extract-text-webpack-plugin":"^3.0.2","file-loader":"^4.2.0","flow-bin":"^0.111.3","flow-copy-source":"^2.0.8","gh-pages":"^2.1.1","html-webpack-plugin":"^3.2.0","husky":"^3.0.9","immutable":"^4.0.0-rc.12","jest":"^24.9.0","jest-environment-puppeteer":"^4.3.0","lint-staged":"^9.4.2","postcss":"^7.0.21","postcss-cli":"^6.1.3","postcss-loader":"^3.0.0","prettier":"1.19.1","pretty-quick":"^2.0.1","puppeteer":"^2.0.0","react":"^17.0.1","react-codemirror":"^1.0.0","react-dom":"^17.0.1","react-router":"^5.2.0","react-router-dom":"^5.2.0","react-test-renderer":"^17.0.1","rimraf":"^3.0.0","rollup":"^1.26.5","rollup-plugin-babel":"^4.3.3","rollup-plugin-commonjs":"^10.1.0","rollup-plugin-node-resolve":"^5.2.0","rollup-plugin-replace":"^2.2.0","rollup-plugin-uglify":"^6.0.3","style-loader":"^1.0.0","watch":"^1.0.2","webpack":"^4.41.2","webpack-cli":"^3.3.10","webpack-dev-server":"^3.9.0"},"dependencies":{"@babel/runtime":"^7.7.2","clsx":"^1.0.4","dom-helpers":"^5.1.3","loose-envify":"^1.4.0","prop-types":"^15.7.2","react-lifecycles-compat":"^3.0.4"},"peerDependencies":{"react":"^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0","react-dom":"^15.3.0 || ^16.0.0-alpha || ^17.0.0 || ^18.0.0"},"browserify":{"transform":["loose-envify"]},"gitHead":"005be24a608add0344284053dae7633be86053b2","_id":"@akirsanov/react-virtualized@9.22.3","_nodeVersion":"14.9.0","_npmVersion":"6.14.8","dist":{"integrity":"sha512-MenSUPMjlF8KOToIDz9flEJB60OQ109nTJxD4otjpYc0NrhyvAHLHhCNanomJfwEw79C/FSYznKY0sVf05Ge+Q==","shasum":"3aea9c48a3658818e985623c6bfb92272e60fdbd","tarball":"https://registry.npmjs.org/@akirsanov/react-virtualized/-/react-virtualized-9.22.3.tgz","fileCount":254,"unpackedSize":2413690,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCID0ZNXsA+wsEgZuAAv38Nxv771yO780S0DNdh4cQxVgYAiEAuEunmIyDnINknNmw0HtHfxcugvkj3GoKZ8+6cblbbIY="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2XbDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqaLw//RKqSaJeZmvCXxY7rARga2ZCoNyK5BcUi2/CwKzsliMEawmHL\r\n0knyLltOqRqU0cjTzKvE8i30HkYTbasFItQ7q79+9pwjGxg4E8FvWzr/WCHt\r\ncBR1vhWYVZITgJp/Qpb5XYFpqb8UDngm4cxZQOeBJv+aW+Gb1vsf0i6uceyG\r\nVh0voYwSyU0Qlp0hLUAJ5chpAawHfVRmTRkX0t3uxX4qRkxm9CRTkikb/9qJ\r\nWeQZJSIp5XAaOjMNzH7arsJhMnc34wQAc99N7H4jg1RUZ9fh714zuXqHiOU/\r\ncBrUa8XmTYIds3HWfK/9VvQspYWicsSr0LaiXWF3EwPdIfWg3eZcQCzpvyio\r\n4ydwee4zqOostcSJoMohiye8DsM/yQrc3cvEn3xos+hqVIewXGxqarHHsHir\r\nE+u7famdYEu9MuNO0mq1Ppwz/pEwFUgU+woLdnVwYOTUtdWCxL1l3eX3Dlov\r\nB2JWa0KL+FzS10VPSY6R6/0dPQ7IwPPIXmM1yoItdBoS7fUAdYzd2f+Qmf63\r\nEYKsqaviAGZQEu9IOSjWsKFH5fkmEo7IbPzYOgThPeZlwuLoUvPVSPKmU0y1\r\nkB1fquEMDLlUMw2vSb5MricdTkKJoS9kT1T5H2KXB+7uOKV0PCab/52xZLtu\r\nhAuImM/SQz2eI0W0Ia4f+MQ7XE2Yp70vr4o=\r\n=q7Ty\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"alexander.kirsanov","email":"alexander.kirsanov@reltio.com"},"directories":{},"maintainers":[{"name":"alexander.kirsanov","email":"alexander.kirsanov@reltio.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-virtualized_9.22.3_1658418883501_0.9002180016495711"},"_hasShrinkwrap":false}},"time":{"created":"2022-07-21T15:54:43.447Z","9.22.3":"2022-07-21T15:54:43.851Z","modified":"2022-07-21T15:54:43.996Z"},"maintainers":[{"name":"alexander.kirsanov","email":"alexander.kirsanov@reltio.com"}],"description":"React components for efficiently rendering large, scrollable lists and tabular data","homepage":"https://github.com/bvaughn/react-virtualized","keywords":["react","reactjs","react-component","virtual","list","scrolling","infinite","virtualized","table","fixed","header","flex","flexbox","grid","spreadsheet"],"repository":{"type":"git","url":"git+https://github.com/bvaughn/react-virtualized.git"},"author":{"name":"Brian Vaughn","email":"brian.david.vaughn@gmail.com"},"bugs":{"url":"https://github.com/bvaughn/react-virtualized/issues"},"license":"MIT","readme":"[](http://bvaughn.github.io/react-virtualized/)\n\n[](https://www.npmjs.com/package/react-virtualized)\n\n[](https://npmcharts.com/compare/react-virtualized?minimal=true)\n[](https://npmcharts.com/compare/react-virtualized?minimal=true)\n[](https://circleci.com/gh/bvaughn/react-virtualized/tree/master)\n[](https://codecov.io/github/bvaughn/react-virtualized)\n[](#backers)\n[](#sponsors)\n\nReact components for efficiently rendering large lists and tabular data.\nCheck out [the demo](https://bvaughn.github.io/react-virtualized/) for some examples.\n\n### Sponsors\n\nThe following wonderful companies have sponsored react-virtualized:\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n[Learn more about becoming a sponsor!](https://opencollective.com/react-virtualized#sponsor)\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n## A word about `react-window`\n\nIf you're considering adding `react-virtualized` to a project, take a look at [`react-window`](https://github.com/bvaughn/react-window) as a possible lighter-weight alternative. [Learn more about how the two libraries compare here.](https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized)\n\n## Getting started\n\nInstall `react-virtualized` using npm.\n\n```shell\nnpm install react-virtualized --save\n```\n\nES6, CommonJS, and UMD builds are available with each distribution.\nFor example:\n\n```js\n// Most of react-virtualized's styles are functional (eg position, size).\n// Functional styles are applied directly to DOM elements.\n// The Table component ships with a few presentational styles as well.\n// They are optional, but if you want them you will need to also import the CSS file.\n// This only needs to be done once; probably during your application's bootstrapping process.\nimport 'react-virtualized/styles.css';\n\n// You can import any component you want as a named export from 'react-virtualized', eg\nimport {Column, Table} from 'react-virtualized';\n\n// But if you only use a few react-virtualized components,\n// And you're concerned about increasing your application's bundle size,\n// You can directly import only the components you need, like so:\nimport AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';\nimport List from 'react-virtualized/dist/commonjs/List';\n```\n\nNote webpack 4 makes this optimization itself, see the [documentation](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free).\n\nIf 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:\n\n```js\n// Partial webpack.config.js\n{\n alias: {\n 'react-virtualized/List': 'react-virtualized/dist/es/List',\n },\n ...rest\n}\n```\n\nThen you can just import like so:\n\n```js\nimport List from 'react-virtualized/List';\n\n// Now you can use \n```\n\nYou can also use a global-friendly UMD build:\n\n```html\n\n\n```\n\nNow you're ready to start using the components.\nYou can learn more about which components react-virtualized has to offer [below](#documentation).\n\n## Dependencies\n\nReact Virtualized has very few dependencies and most are managed by NPM automatically.\nHowever the following peer dependencies must be specified by your project in order to avoid version conflicts:\n[`react`](https://www.npmjs.com/package/react),\n[`react-dom`](https://www.npmjs.com/package/react-dom).\nNPM will not automatically install these for you but it will show you a warning message with instructions on how to install them.\n\n## Pure Components\n\nBy default all react-virtualized components use [`shallowCompare`](https://facebook.github.io/react/docs/shallow-compare.html) to avoid re-rendering unless props or state has changed.\nThis occasionally confuses users when a collection's data changes (eg `['a','b','c']` => `['d','e','f']`) but props do not (eg `array.length`).\n\nThe solution to this is to let react-virtualized know that something external has changed.\nThis can be done a couple of different ways.\n\n###### Pass-thru props\n\nThe `shallowCompare` method will detect changes to any props, even if they aren't declared as `propTypes`.\nThis means you can also pass through additional properties that affect cell rendering to ensure changes are detected.\nFor example, if you're using `List` to render a list of items that may be re-sorted after initial render- react-virtualized would not normally detect the sort operation because none of the properties it deals with change.\nHowever you can pass through the additional sort property to trigger a re-render.\nFor example:\n\n```js\n\n```\n\n###### Public methods\n\n`Grid` and `Collection` components can be forcefully re-rendered using [`forceUpdate`](https://facebook.github.io/react/docs/component-api.html#forceupdate).\nFor `Table` and `List`, you'll need to call [`forceUpdateGrid`](https://github.com/bvaughn/react-virtualized/blob/master/docs/Table.md#forceupdategrid) to ensure that the inner `Grid` is also updated. For `MultiGrid`, you'll need to call [`forceUpdateGrids`](https://github.com/bvaughn/react-virtualized/blob/master/docs/MultiGrid.md#forceupdategrids) to ensure that the inner `Grid`s are updated.\n\n## Documentation\n\nAPI documentation available [here](docs/README.md).\n\nThere are also a couple of how-to guides:\n\n- [Customizing classes and styles](docs/customizingStyles.md)\n- [Displaying items in reverse order](docs/reverseList.md)\n- [Using AutoSizer](docs/usingAutoSizer.md)\n- [Creating an infinite-loading list](docs/creatingAnInfiniteLoadingList.md)\n- [Natural sort Table](docs/tableWithNaturalSort.md)\n- [Sorting a Table by multiple columns](docs/multiColumnSortTable.md)\n\n## Examples\n\nExamples for each component can be seen in [the documentation](docs/README.md).\n\nHere are some online demos of each component:\n\n- [ArrowKeyStepper](https://bvaughn.github.io/react-virtualized/#/components/ArrowKeyStepper)\n- [AutoSizer](https://bvaughn.github.io/react-virtualized/#/components/AutoSizer)\n- [CellMeasurer](https://bvaughn.github.io/react-virtualized/#/components/CellMeasurer)\n- [Collection](https://bvaughn.github.io/react-virtualized/#/components/Collection)\n- [ColumnSizer](https://bvaughn.github.io/react-virtualized/#/components/ColumnSizer)\n- [Grid](https://bvaughn.github.io/react-virtualized/#/components/Grid)\n- [InfiniteLoader](https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader)\n- [List](https://bvaughn.github.io/react-virtualized/#/components/List)\n- [Masonry](https://bvaughn.github.io/react-virtualized/#/components/Masonry)\n- [MultiGrid](https://bvaughn.github.io/react-virtualized/#/components/MultiGrid)\n- [ScrollSync](https://bvaughn.github.io/react-virtualized/#/components/ScrollSync)\n- [Table](https://bvaughn.github.io/react-virtualized/#/components/Table)\n- [WindowScroller](https://bvaughn.github.io/react-virtualized/#/components/WindowScroller)\n\nAnd here are some \"recipe\" type demos:\n\n- [Table with resizable (drag and drop) columns](https://codesandbox.io/s/j30k46l7xw)\n- [Collapsable tree view](https://rawgit.com/bvaughn/react-virtualized/master/playground/tree.html)\n- [Full-page grid (spreadsheet)](https://rawgit.com/bvaughn/react-virtualized/master/playground/grid.html)\n- [Dynamic cell measuring](https://rawgit.com/bvaughn/react-virtualized/master/playground/chat.html)\n- [Cell hover effects](https://rawgit.com/bvaughn/react-virtualized/master/playground/hover.html)\n\n## Supported Browsers\n\nreact-virtualized aims to support all evergreen browsers and recent mobile browsers for iOS and Android. IE 9+ is also supported (although IE 9 will require some user-defined, custom CSS since flexbox layout is not supported).\n\nIf you find a browser-specific problem, please report it along with a repro case. The easiest way to do this is probably by forking [this Plunker](https://plnkr.co/edit/6syKo8cx3RfoO96hXFT1).\n\n## Friends\n\nHere are some great components built on top of react-virtualized:\n\n- [react-infinite-calendar](https://github.com/clauderic/react-infinite-calendar): Infinite scrolling date-picker with localization, themes, keyboard support, and more\n- [react-sortable-hoc](https://github.com/clauderic/react-sortable-hoc): Higher-order components to turn any list into an animated, touch-friendly, sortable list\n- [react-sortable-tree](https://github.com/fritz-c/react-sortable-tree): Drag-and-drop sortable representation of hierarchical data\n- [react-virtualized-checkbox](https://github.com/emilebres/react-virtualized-checkbox): Checkbox group component with virtualization for large number of options\n- [react-virtualized-select](https://github.com/bvaughn/react-virtualized-select): Drop-down menu for React with windowing to support large numbers of options.\n- [react-virtualized-tree](https://github.com/diogofcunha/react-virtualized-tree/): A reactive tree component that aims to render large sets of tree structured data in an elegant and performant way\n- [react-timeline-9000](https://github.com/BHP-DevHub/react-timeline-9000/): A calendar timeline component that is capable of displaying and interacting with a large number of items\n\n## Contributions\n\nUse [GitHub issues](https://github.com/bvaughn/react-virtualized/issues) for requests.\n\nI actively welcome pull requests; learn how to [contribute](https://github.com/bvaughn/react-virtualized/blob/master/CONTRIBUTING.md).\n\n## Changelog\n\nChanges are tracked in the [changelog](https://github.com/bvaughn/react-virtualized/blob/master/CHANGELOG.md).\n\n## License\n\n_react-virtualized_ is available under the MIT License.\n","readmeFilename":"README.md"}
![](\"https://cloud.githubusercontent.com/assets/29597/17391516/962647f8-59cb-11e6-83be-aa1bac299dd0.png\" "\\"Treasure")
![\"React](\"https://cloud.githubusercontent.com/assets/29597/11737732/0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png\")
](http://bvaughn.github.io/react-virtualized/)\n\n[](https://www.npmjs.com/package/react-virtualized)\n\n[](https://npmcharts.com/compare/react-virtualized?minimal=true)\n[](https://npmcharts.com/compare/react-virtualized?minimal=true)\n[](https://circleci.com/gh/bvaughn/react-virtualized/tree/master)\n[](https://codecov.io/github/bvaughn/react-virtualized)\n[](#backers)\n[](#sponsors)\n\nReact components for efficiently rendering large lists and tabular data.\nCheck out [the demo](https://bvaughn.github.io/react-virtualized/) for some examples.\n\n### Sponsors\n\nThe following wonderful companies have sponsored react-virtualized:\n\n![](\"https://user-images.githubusercontent.com/5983843/37311298-1c3a711a-261d-11e8-9129-ef1589d7063f.png\" "\\"HPE")
\n![](\"https://opencollective.com/react-virtualized/sponsor/0/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/1/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/2/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/3/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/4/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/5/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/6/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/7/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/8/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/9/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/10/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/11/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/12/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/13/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/14/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/15/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/16/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/17/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/18/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/19/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/20/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/21/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/22/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/23/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/24/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/25/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/26/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/27/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/28/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/sponsor/29/avatar.svg\"){kind=avatar}
\n\n[Learn more about becoming a sponsor!](https://opencollective.com/react-virtualized#sponsor)\n\n![](\"https://opencollective.com/react-virtualized/backer/0/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/1/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/2/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/3/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/4/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/5/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/6/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/7/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/8/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/9/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/10/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/11/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/12/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/13/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/14/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/15/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/16/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/17/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/18/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/19/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/20/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/21/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/22/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/23/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/24/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/25/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/26/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/27/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/28/avatar.svg\"){kind=avatar}
\n![](\"https://opencollective.com/react-virtualized/backer/29/avatar.svg\"){kind=avatar}
\n\n## A word about `react-window`\n\nIf you're considering adding `react-virtualized` to a project, take a look at [`react-window`](https://github.com/bvaughn/react-window) as a possible lighter-weight alternative. [Learn more about how the two libraries compare here.](https://github.com/bvaughn/react-window#how-is-react-window-different-from-react-virtualized)\n\n## Getting started\n\nInstall `react-virtualized` using npm.\n\n```shell\nnpm install react-virtualized --save\n```\n\nES6, CommonJS, and UMD builds are available with each distribution.\nFor example:\n\n```js\n// Most of react-virtualized's styles are functional (eg position, size).\n// Functional styles are applied directly to DOM elements.\n// The Table component ships with a few presentational styles as well.\n// They are optional, but if you want them you will need to also import the CSS file.\n// This only needs to be done once; probably during your application's bootstrapping process.\nimport 'react-virtualized/styles.css';\n\n// You can import any component you want as a named export from 'react-virtualized', eg\nimport {Column, Table} from 'react-virtualized';\n\n// But if you only use a few react-virtualized components,\n// And you're concerned about increasing your application's bundle size,\n// You can directly import only the components you need, like so:\nimport AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer';\nimport List from 'react-virtualized/dist/commonjs/List';\n```\n\nNote webpack 4 makes this optimization itself, see the [documentation](https://webpack.js.org/guides/tree-shaking/#mark-the-file-as-side-effect-free).\n\nIf 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:\n\n```js\n// Partial webpack.config.js\n{\n alias: {\n 'react-virtualized/List': 'react-virtualized/dist/es/List',\n },\n ...rest\n}\n```\n\nThen you can just import like so:\n\n```js\nimport List from 'react-virtualized/List';\n\n// Now you can use