[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-2917":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":35,"readmeContent":36,"aiSummary":37,"trendingCount":16,"starSnapshotCount":16,"syncStatus":19,"lastSyncTime":38,"discoverSource":39},2917,"react-virtualized","bvaughn\u002Freact-virtualized","bvaughn","React components for efficiently rendering large lists and tabular data","http:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F",null,"JavaScript",27071,3028,219,1,0,9,20,2,45,"MIT License",false,"master",true,[26,27,28,29,30,31,32,33,34],"grid","list","listview","performance","react","react-components","tabular-data","virtualization","windowing","2026-06-12 02:00:44","[\u003Cimg src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F29597\u002F11737732\u002F0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png\" alt=\"React virtualized\" data-canonical-src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F29597\u002F11737732\u002F0ca1e55e-9f91-11e5-97f3-098f2f8ed866.png\" width=\"330\" height=\"100\" \u002F>](http:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F)\n\nReact components for efficiently rendering large lists and tabular data.\nCheck out [the demo](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F) for some examples.\n\n### If you like this project, 🎉 [become a sponsor](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fbvaughn\u002F) or ☕ [buy me a coffee](http:\u002F\u002Fgivebrian.coffee\u002F)\n\n### Sponsors\n\nThe following wonderful companies have sponsored react-virtualized:\n\n\u003Ca href=\"https:\u002F\u002Fwww.treasuredata.com\u002F\">\u003Cimg width=\"64\" height=\"64\" title=\"Treasure Data\" src=\"https:\u002F\u002Fcloud.githubusercontent.com\u002Fassets\u002F29597\u002F17391516\u002F962647f8-59cb-11e6-83be-aa1bac299dd0.png\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fdeveloper.hpe.com\u002F\">\u003Cimg width=\"64\" height=\"64\" title=\"HPE Dev\" src=\"https:\u002F\u002Fuser-images.githubusercontent.com\u002F5983843\u002F37311298-1c3a711a-261d-11e8-9129-ef1589d7063f.png\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F0\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F0\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F1\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F1\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F2\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F2\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F3\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F3\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F4\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F4\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F5\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F5\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F6\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F6\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F7\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F7\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F8\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F8\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F9\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F9\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F10\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F10\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F11\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F11\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F12\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F12\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F13\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F13\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F14\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F14\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F15\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F15\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F16\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F16\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F17\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F17\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F18\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F18\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F19\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F19\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F20\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F20\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F21\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F21\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F22\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F22\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F23\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F23\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F24\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F24\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F25\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F25\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F26\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F26\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F27\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F27\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F28\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F28\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F29\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fsponsor\u002F29\u002Favatar.svg\">\u003C\u002Fa>\n\n[Learn more about becoming a sponsor!](https:\u002F\u002Fopencollective.com\u002Freact-virtualized#sponsor)\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F0\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F0\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F1\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F1\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F2\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F2\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F3\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F3\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F4\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F4\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F5\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F5\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F6\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F6\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F7\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F7\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F8\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F8\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F9\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F9\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F10\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F10\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F11\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F11\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F12\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F12\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F13\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F13\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F14\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F14\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F15\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F15\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F16\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F16\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F17\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F17\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F18\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F18\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F19\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F19\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F20\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F20\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F21\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F21\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F22\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F22\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F23\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F23\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F24\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F24\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F25\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F25\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F26\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F26\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F27\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F27\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F28\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F28\u002Favatar.svg\">\u003C\u002Fa>\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F29\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-virtualized\u002Fbacker\u002F29\u002Favatar.svg\">\u003C\u002Fa>\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:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-window) as a possible lighter-weight alternative. [Learn more about how the two libraries compare here.](https:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-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\u002F\u002F Most of react-virtualized's styles are functional (eg position, size).\n\u002F\u002F Functional styles are applied directly to DOM elements.\n\u002F\u002F The Table component ships with a few presentational styles as well.\n\u002F\u002F They are optional, but if you want them you will need to also import the CSS file.\n\u002F\u002F This only needs to be done once; probably during your application's bootstrapping process.\nimport 'react-virtualized\u002Fstyles.css';\n\n\u002F\u002F You can import any component you want as a named export from 'react-virtualized', eg\nimport {Column, Table} from 'react-virtualized';\n\n\u002F\u002F But if you only use a few react-virtualized components,\n\u002F\u002F And you're concerned about increasing your application's bundle size,\n\u002F\u002F You can directly import only the components you need, like so:\nimport AutoSizer from 'react-virtualized\u002Fdist\u002Fcommonjs\u002FAutoSizer';\nimport List from 'react-virtualized\u002Fdist\u002Fcommonjs\u002FList';\n```\n\nNote webpack 4 makes this optimization itself, see the [documentation](https:\u002F\u002Fwebpack.js.org\u002Fguides\u002Ftree-shaking\u002F#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\u002F\u002F Partial webpack.config.js\n{\n  alias: {\n    'react-virtualized\u002FList': 'react-virtualized\u002Fdist\u002Fes\u002FList',\n  },\n  ...rest\n}\n```\n\nThen you can just import like so:\n\n```js\nimport List from 'react-virtualized\u002FList';\n\n\u002F\u002F Now you can use \u003CList {...props} \u002F>\n```\n\nYou can also use a global-friendly UMD build:\n\n```html\n\u003Clink rel=\"stylesheet\" href=\"path-to-react-virtualized\u002Fstyles.css\" \u002F>\n\u003Cscript src=\"path-to-react-virtualized\u002Fdist\u002Fumd\u002Freact-virtualized.js\">\u003C\u002Fscript>\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:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact),\n[`react-dom`](https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-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:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fshallow-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\u003CList {...listProps} sortBy={sortBy} \u002F>\n```\n\n###### Public methods\n\n`Grid` and `Collection` components can be forcefully re-rendered using [`forceUpdate`](https:\u002F\u002Ffacebook.github.io\u002Freact\u002Fdocs\u002Fcomponent-api.html#forceupdate).\nFor `Table` and `List`, you'll need to call [`forceUpdateGrid`](https:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-virtualized\u002Fblob\u002Fmaster\u002Fdocs\u002FTable.md#forceupdategrid) to ensure that the inner `Grid` is also updated. For `MultiGrid`, you'll need to call [`forceUpdateGrids`](https:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-virtualized\u002Fblob\u002Fmaster\u002Fdocs\u002FMultiGrid.md#forceupdategrids) to ensure that the inner `Grid`s are updated.\n\n## Documentation\n\nAPI documentation available [here](docs\u002FREADME.md).\n\nThere are also a couple of how-to guides:\n\n- [Customizing classes and styles](docs\u002FcustomizingStyles.md)\n- [Displaying items in reverse order](docs\u002FreverseList.md)\n- [Using AutoSizer](docs\u002FusingAutoSizer.md)\n- [Creating an infinite-loading list](docs\u002FcreatingAnInfiniteLoadingList.md)\n- [Natural sort Table](docs\u002FtableWithNaturalSort.md)\n- [Sorting a Table by multiple columns](docs\u002FmultiColumnSortTable.md)\n\n## Examples\n\nExamples for each component can be seen in [the documentation](docs\u002FREADME.md).\n\nHere are some online demos of each component:\n\n- [ArrowKeyStepper](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FArrowKeyStepper)\n- [AutoSizer](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FAutoSizer)\n- [CellMeasurer](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FCellMeasurer)\n- [Collection](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FCollection)\n- [ColumnSizer](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FColumnSizer)\n- [Grid](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FGrid)\n- [InfiniteLoader](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FInfiniteLoader)\n- [List](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FList)\n- [Masonry](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FMasonry)\n- [MultiGrid](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FMultiGrid)\n- [ScrollSync](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FScrollSync)\n- [Table](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FTable)\n- [WindowScroller](https:\u002F\u002Fbvaughn.github.io\u002Freact-virtualized\u002F#\u002Fcomponents\u002FWindowScroller)\n\nAnd here are some \"recipe\" type demos:\n\n- [Table with resizable (drag and drop) columns](https:\u002F\u002Fcodesandbox.io\u002Fs\u002Fj30k46l7xw)\n- [Collapsable tree view](https:\u002F\u002Frawgit.com\u002Fbvaughn\u002Freact-virtualized\u002Fmaster\u002Fplayground\u002Ftree.html)\n- [Full-page grid (spreadsheet)](https:\u002F\u002Frawgit.com\u002Fbvaughn\u002Freact-virtualized\u002Fmaster\u002Fplayground\u002Fgrid.html)\n- [Dynamic cell measuring](https:\u002F\u002Frawgit.com\u002Fbvaughn\u002Freact-virtualized\u002Fmaster\u002Fplayground\u002Fchat.html)\n- [Cell hover effects](https:\u002F\u002Frawgit.com\u002Fbvaughn\u002Freact-virtualized\u002Fmaster\u002Fplayground\u002Fhover.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:\u002F\u002Fplnkr.co\u002Fedit\u002F6syKo8cx3RfoO96hXFT1).\n\n## Friends\n\nHere are some great components built on top of react-virtualized:\n\n- [react-infinite-calendar](https:\u002F\u002Fgithub.com\u002Fclauderic\u002Freact-infinite-calendar): Infinite scrolling date-picker with localization, themes, keyboard support, and more\n- [react-sortable-hoc](https:\u002F\u002Fgithub.com\u002Fclauderic\u002Freact-sortable-hoc): Higher-order components to turn any list into an animated, touch-friendly, sortable list\n- [react-sortable-tree](https:\u002F\u002Fgithub.com\u002Ffritz-c\u002Freact-sortable-tree): Drag-and-drop sortable representation of hierarchical data\n- [react-virtualized-checkbox](https:\u002F\u002Fgithub.com\u002Femilebres\u002Freact-virtualized-checkbox): Checkbox group component with virtualization for large number of options\n- [react-virtualized-select](https:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-virtualized-select): Drop-down menu for React with windowing to support large numbers of options.\n- [react-virtualized-tree](https:\u002F\u002Fgithub.com\u002Fdiogofcunha\u002Freact-virtualized-tree\u002F): 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:\u002F\u002Fgithub.com\u002FBHP-DevHub\u002Freact-timeline-9000\u002F): 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:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-virtualized\u002Fissues) for requests.\n\nI actively welcome pull requests; learn how to [contribute](https:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-virtualized\u002Fblob\u002Fmaster\u002FCONTRIBUTING.md).\n\n## Changelog\n\nChanges are tracked in the [changelog](https:\u002F\u002Fgithub.com\u002Fbvaughn\u002Freact-virtualized\u002Fblob\u002Fmaster\u002FCHANGELOG.md).\n\n## License\n\n_react-virtualized_ is available under the MIT License.\n","react-virtualized 是一个用于高效渲染大型列表和表格数据的React组件库。其核心功能在于通过虚拟化技术仅渲染用户可见区域的数据，从而显著提高性能，减少内存消耗。该库支持多种布局方式，包括列表、表格等，并且提供了丰富的自定义选项以满足不同需求。适用于需要处理大量数据展示的应用场景，如电商商品列表、社交平台动态流等，能够有效提升用户体验。","2026-06-11 02:51:41","top_language"]