{"_id":"@airbridge/react-virtualized","_rev":"1-73ef4aaf583cc9968e94cff2be0d1357","name":"@airbridge/react-virtualized","description":"React components for efficiently rendering large, scrollable lists and tabular data","dist-tags":{"latest":"9.22.4"},"versions":{"9.22.4":{"name":"@airbridge/react-virtualized","version":"9.22.4","keywords":["react","reactjs","react-component","virtual","list","scrolling","infinite","virtualized","table","fixed","header","flex","flexbox","grid","spreadsheet"],"author":{"name":"Brian Vaughn","email":"brian.david.vaughn@gmail.com"},"license":"MIT","_id":"@airbridge/react-virtualized@9.22.4","maintainers":[{"name":"seungyeon.yoo","email":"seungyeon@ab180.co"},{"name":"doum","email":"doum@ab180.co"},{"name":"hiddenest","email":"hiddenest12@gmail.com"},{"name":"soyeong","email":"soyeong@ab180.co"}],"homepage":"https://github.com/bvaughn/react-virtualized","bugs":{"url":"https://github.com/bvaughn/react-virtualized/issues"},"dist":{"shasum":"031d7693081e367f683e297b0aca35285bef2aef","tarball":"https://registry.npmjs.org/@airbridge/react-virtualized/-/react-virtualized-9.22.4.tgz","fileCount":253,"integrity":"sha512-ntbon31fWJ/MrSNnnZDyFt19gsv9MaqIb1F4uqx1QZk7ezBnJ8tCizDr9N6g8Fw978dVmPKP/FsgYV4neJcy2w==","signatures":[{"sig":"MEYCIQDjoEpwCI3lLQXOokCW3zq9sFTV1EyUVuDKcvAKHwUQkAIhAJMSVdK41qo/Pw1QO6BHK8Y3qfasO2iVLOUpill48kkz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":2194109,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiizBKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSiA//fZastm1hLNUL12ed3eXEXMNItXO/4hJ6O4nJYvSOVORRjYym\r\n0tFrmFB/Y7Le2LFjbDOB8Pss1DRoRAymyOhtMkRBe/TDbV/e9NCixrDe5ZXH\r\nHkB4JqWKsCQpexhaLEZRGOuO4rf0EHA1t+vBZDWeyUKwJT8BQt0MN7ONOsLa\r\nWDmifYHnUxIfCF7kuTNR6ZbzA51doEBPx/2nH7iG9VpWWBkNlpcp5yEL8Fyx\r\nhGElCZaFfEEhb9L/POyPu9WL6ve9x3HTfogMybm0MAOuJsdz645QQFLMWOVW\r\nGvMEHYeVJen0Rfz2HB+jHtFXVy6DF8izgbrqcsfl+1wqIfV5ivBmeNPCilEF\r\nxyctBeMQxCNWhfGU0o0AsDkjBDMFmycUonhinEyu1PRR6hpPeY7hCq6jZ0nB\r\n3keN9tDJDXTlRuNvXskT4uuG8JHD/vhARXf/KhmuRgZIxWmd0uIdAae/0dMa\r\nqmsikdnbpszd+DG4+810VSnOLAI2Rw58RJZszpVVcHmh3oDA6N8UgK58FrNe\r\nuZz9D2g7gKpPKSAlmDP0QZ4dgz67Q5Do2iirBi3IY6/9nXTTa53iPaM9GV5R\r\nlfEk0bUt+YMUHrJtW8jlUDhIZhqBKLbCQ8tZ9tp6DuceToJUiHSLXNxT486P\r\nqqfwvOlNv9EnZktC2Ht4VyhN4FbgL9pKmv8=\r\n=0a+d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/commonjs/index.js","user":"bvaughn","husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"module":"dist/es/index.js","gitHead":"36fb34248dd235e32f15e0041654b9ca1450d184","scripts":{"lint":"eslint 'source/**/*.js'","test":"yarn run test:jest","build":"yarn run build:commonjs && yarn run build:css && yarn run build:es && yarn run build:demo && yarn run build:umd","clean":"yarn run clean:commonjs && yarn run clean:demo && yarn run clean:es && yarn run clean:umd","start":"cross-env NODE_ENV=development webpack-dev-server --hot --config webpack.config.dev.js","watch":"watch 'clear && yarn run test -s' source","deploy":"gh-pages -d build","build:es":"yarn run clean:es && yarn run build:types && cross-env NODE_ENV=es babel source --out-dir dist/es","clean:es":"rimraf dist/es","prettier":"prettier --write '{playground,source,docs}/**/*.{js,md}'","build:css":"postcss source/styles.css -o styles.css --use autoprefixer","build:umd":"yarn run clean:umd && cross-env NODE_ENV=rollup rollup -c","clean:umd":"rimraf dist/umd","test:jest":"jest --no-watchman --runInBand","typecheck":"flow check","build:demo":"yarn run clean:demo && cross-env NODE_ENV=production webpack --config webpack.config.demo.js -p --bail","clean:demo":"rimraf build","watch:jest":"jest --no-watchman --watch","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","postpublish":"yarn run deploy","prettier:diff":"prettier --list-different '{playground,source,docs}/**/*.{js,md}'","test:coverage":"jest --no-watchman --maxWorkers 2 --coverage && codecov","build:commonjs":"yarn run clean:commonjs && cross-env NODE_ENV=commonjs babel source --out-dir dist/commonjs","clean:commonjs":"rimraf dist/commonjs","prepublishOnly":"yarn run build"},"_npmUser":{"name":"hiddenest","email":"hiddenest12@gmail.com"},"browserify":{"transform":["loose-envify"]},"repository":{"url":"git+https://github.com/bvaughn/react-virtualized.git","type":"git"},"_npmVersion":"8.5.5","description":"React components for efficiently rendering large, scrollable lists and tabular data","directories":{},"jsnext:main":"dist/es/index.js","_nodeVersion":"16.15.0","dependencies":{"clsx":"^1.0.4","prop-types":"^15.7.2","dom-helpers":"^5.1.3","loose-envify":"^1.4.0","@babel/runtime":"^7.7.2","react-lifecycles-compat":"^3.0.4"},"_hasShrinkwrap":false,"devDependencies":{"jest":"^24.9.0","husky":"^3.0.9","react":"^17.0.1","watch":"^1.0.2","eslint":"^6.6.0","rimraf":"^3.0.0","rollup":"^1.26.5","codecov":"^3.6.1","postcss":"^7.0.21","webpack":"^4.41.2","flow-bin":"^0.111.3","gh-pages":"^2.1.1","prettier":"1.19.1","cross-env":"^6.0.3","immutable":"^4.0.0-rc.12","puppeteer":"^2.0.0","react-dom":"^17.0.1","@babel/cli":"^7.7.0","babel-jest":"^24.9.0","codemirror":"^5.49.2","css-loader":"^3.2.0","@babel/core":"^7.7.2","file-loader":"^4.2.0","lint-staged":"^9.4.2","postcss-cli":"^6.1.3","webpack-cli":"^3.3.10","autoprefixer":"^9.7.1","babel-eslint":"^10.0.3","babel-loader":"8.0.6","pretty-quick":"^2.0.1","react-router":"^5.2.0","style-loader":"^1.0.0","postcss-loader":"^3.0.0","@babel/polyfill":"^7.7.0","flow-copy-source":"^2.0.8","react-codemirror":"^1.0.0","react-router-dom":"^5.2.0","@babel/preset-env":"^7.7.1","@babel/preset-flow":"^7.0.0","eslint-config-fbjs":"^3.1.1","webpack-dev-server":"^3.9.0","@babel/preset-react":"^7.7.0","eslint-config-react":"^1.1.7","eslint-plugin-babel":"^5.3.0","eslint-plugin-react":"^7.16.0","eslint-plugin-relay":"^1.3.12","html-webpack-plugin":"^3.2.0","react-test-renderer":"^17.0.1","rollup-plugin-babel":"^4.3.3","rollup-plugin-uglify":"^6.0.3","@babel/preset-stage-2":"^7.0.0","rollup-plugin-replace":"^2.2.0","eslint-config-prettier":"^6.5.0","eslint-plugin-flowtype":"^4.3.0","eslint-plugin-jsx-a11y":"^6.2.3","eslint-plugin-prettier":"^3.1.1","rollup-plugin-commonjs":"^10.1.0","jest-environment-puppeteer":"^4.3.0","rollup-plugin-node-resolve":"^5.2.0","extract-text-webpack-plugin":"^3.0.2","@babel/plugin-external-helpers":"^7.2.0","@babel/plugin-transform-runtime":"^7.6.2","babel-plugin-flow-react-proptypes":"^26.0.0","@babel/plugin-transform-flow-comments":"^7.12.13","@babel/plugin-proposal-class-properties":"^7.7.0","@babel/plugin-transform-modules-commonjs":"^7.7.0","babel-plugin-transform-react-remove-prop-types":"^0.4.24"},"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"},"_npmOperationalInternal":{"tmp":"tmp/react-virtualized_9.22.4_1653289034662_0.45928201762475096","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-05-23T06:57:14.594Z","modified":"2024-07-05T03:03:33.525Z","9.22.4":"2022-05-23T06:57:14.876Z"},"maintainers":[{"email":"product@ab180.co","name":"airbridge_dev"},{"email":"seungyeon@ab180.co","name":"seungyeon.yoo"},{"email":"doum@ab180.co","name":"doum"},{"email":"hiddenest12@gmail.com","name":"hiddenest"},{"email":"soyeong@ab180.co","name":"soyeong"}],"author":{"name":"Brian Vaughn","email":"brian.david.vaughn@gmail.com"},"repository":{"url":"git+https://github.com/bvaughn/react-virtualized.git","type":"git"},"keywords":["react","reactjs","react-component","virtual","list","scrolling","infinite","virtualized","table","fixed","header","flex","flexbox","grid","spreadsheet"],"license":"MIT","homepage":"https://github.com/bvaughn/react-virtualized","bugs":{"url":"https://github.com/bvaughn/react-virtualized/issues"},"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