[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3808":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":15,"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":22,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":26,"readmeContent":27,"aiSummary":28,"trendingCount":16,"starSnapshotCount":16,"syncStatus":29,"lastSyncTime":30,"discoverSource":31},3808,"react-window","bvaughn\u002Freact-window","bvaughn","React components for efficiently rendering large lists and tabular data","https:\u002F\u002Freact-window.vercel.app\u002F",null,"TypeScript",17187,816,60,1,0,3,18,4,74.04,"MIT License",false,"main",true,[],"2026-06-12 04:00:19","\u003Cimg src=\"https:\u002F\u002Freact-window.vercel.app\u002Fog.png\" alt=\"react-window logo\" width=\"400\" height=\"210\" \u002F>\n\n`react-window` is a component library that helps render large lists of data quickly and without the performance problems that often go along with rendering a lot of data. It's used in a lot of places, from React DevTools to the Replay browser.\n\n## Support\n\nIf you like this project there are several ways to support it:\n\n- [Become a GitHub sponsor](https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fbvaughn\u002F)\n- [Become an Open Collective sponsor](https:\u002F\u002Fopencollective.com\u002Freact-window#sponsor)\n- or [buy me a coffee](http:\u002F\u002Fgivebrian.coffee\u002F)\n\nThe following wonderful companies and individuals have sponsored react-window:\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F0\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F0\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F1\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F1\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F2\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F2\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F3\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F3\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F4\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F4\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F5\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F5\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F6\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F6\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F7\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F7\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F8\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F8\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F9\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F9\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F10\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F10\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F11\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F11\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F12\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F12\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F13\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F13\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F14\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F14\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F15\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F15\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F16\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F16\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F17\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F17\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F18\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F18\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F19\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F19\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F20\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F20\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F21\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F21\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F22\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F22\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F23\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F23\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F24\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F24\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F25\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F25\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F26\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F26\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F27\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F27\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F28\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F28\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F29\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fsponsor\u002F29\u002Favatar.svg\">\u003C\u002Fa>\n\n\u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F0\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F0\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F1\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F1\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F2\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F2\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F3\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F3\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F4\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F4\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F5\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F5\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F6\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F6\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F7\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F7\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F8\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F8\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F9\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F9\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F10\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F10\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F11\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F11\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F12\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F12\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F13\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F13\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F14\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F14\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F15\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F15\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F16\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F16\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F17\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F17\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F18\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F18\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F19\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F19\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F20\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F20\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F21\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F21\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F22\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F22\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F23\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F23\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F24\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F24\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F25\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F25\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F26\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F26\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F27\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F27\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F28\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F28\u002Favatar.svg\">\u003C\u002Fa> \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F29\u002Fwebsite\" target=\"_blank\">\u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Freact-window\u002Fbacker\u002F29\u002Favatar.svg\">\u003C\u002Fa>\n\n## Installation\n\nBegin by installing the library from NPM:\n\n```sh\nnpm install react-window\n```\n\n## TypeScript types\n\nTypeScript definitions are included within the published `dist` folder\n\n## FAQs\n\nFrequently asked questions can be found [here](https:\u002F\u002Freact-window.vercel.app\u002Fcommon-questions).\n\n## Documentation\n\nDocumentation for this project is available at [react-window.vercel.app](https:\u002F\u002Freact-window.vercel.app\u002F); version 1.x documentation can be found at [react-window-v1.vercel.app](https:\u002F\u002Freact-window-v1.vercel.app\u002F).\n\n### List\n\n\u003C!-- List:description:begin -->\nRenders data with many rows.\n\u003C!-- List:description:end -->\n\n#### Required props\n\n\u003C!-- List:required-props:begin -->\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Name\u003C\u002Fth>\n      \u003Cth>Description\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>rowComponent\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>React component responsible for rendering a row.\u003C\u002Fp>\n\u003Cp>This component will receive an \u003Ccode>index\u003C\u002Fcode> and \u003Ccode>style\u003C\u002Fcode> prop by default.\nAdditionally it will receive prop values passed to \u003Ccode>rowProps\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>ℹ️ The prop types for this component are exported as \u003Ccode>RowComponentProps\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>rowCount\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Number of items to be rendered in the list.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>rowHeight\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Row height; the following formats are supported:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>number of pixels (number)\u003C\u002Fli>\n\u003Cli>percentage of the grid's current height (string)\u003C\u002Fli>\n\u003Cli>function that returns the row height (in pixels) given an index and \u003Ccode>cellProps\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>dynamic row height cache returned by the \u003Ccode>useDynamicRowHeight\u003C\u002Fcode> hook\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>⚠️ Dynamic row heights are not as efficient as predetermined sizes.\nIt's recommended to provide your own height values if they can be determined ahead of time.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>rowProps\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Additional props to be passed to the row-rendering component.\nList will automatically re-render rows when values in this object change.\u003C\u002Fp>\n\u003Cp>⚠️ This object must not contain \u003Ccode>ariaAttributes\u003C\u002Fcode>, \u003Ccode>index\u003C\u002Fcode>, or \u003Ccode>style\u003C\u002Fcode> props.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003C!-- List:required-props:end -->\n\n#### Optional props\n\n\u003C!-- List:optional-props:begin -->\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Name\u003C\u002Fth>\n      \u003Cth>Description\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>className\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>CSS class name.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>style\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Optional CSS properties.\nThe list of rows will fill the height defined by this style.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>children\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Additional content to be rendered within the list (above cells).\nThis property can be used to render things like overlays or tooltips.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>defaultHeight\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Default height of list for initial render.\nThis value is important for server rendering.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>listRef\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Ref used to interact with this component's imperative API.\u003C\u002Fp>\n\u003Cp>This API has imperative methods for scrolling and a getter for the outermost DOM element.\u003C\u002Fp>\n\u003Cp>ℹ️ The \u003Ccode>useListRef\u003C\u002Fcode> and \u003Ccode>useListCallbackRef\u003C\u002Fcode> hooks are exported for convenience use in TypeScript projects.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>onResize\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Callback notified when the List's outermost HTMLElement resizes.\nThis may be used to (re)scroll a row into view.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>onRowsRendered\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Callback notified when the range of visible rows changes.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>overscanCount\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>How many additional rows to render outside of the visible area.\nThis can reduce visual flickering near the edges of a list when scrolling.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>tagName\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Can be used to override the root HTML element rendered by the List component.\nThe default value is "div", meaning that List renders an HTMLDivElement as its root.\u003C\u002Fp>\n\u003Cp>⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003C!-- List:optional-props:end -->\n\n### Grid\n\n\u003C!-- Grid:description:begin -->\nRenders data with many rows and columns.\n\nℹ️ Unlike `List` rows, `Grid` cell sizes must be known ahead of time.\nEither static sizes or something that can be derived (from the data in `CellProps`) without rendering.\n\u003C!-- Grid:description:end -->\n\n#### Required props\n\n\u003C!-- Grid:required-props:begin -->\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Name\u003C\u002Fth>\n      \u003Cth>Description\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>cellComponent\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>React component responsible for rendering a cell.\u003C\u002Fp>\n\u003Cp>This component will receive an \u003Ccode>index\u003C\u002Fcode> and \u003Ccode>style\u003C\u002Fcode> prop by default.\nAdditionally it will receive prop values passed to \u003Ccode>cellProps\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Cp>ℹ️ The prop types for this component are exported as \u003Ccode>CellComponentProps\u003C\u002Fcode>\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>cellProps\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Additional props to be passed to the cell-rendering component.\nGrid will automatically re-render cells when values in this object change.\u003C\u002Fp>\n\u003Cp>⚠️ This object must not contain \u003Ccode>ariaAttributes\u003C\u002Fcode>, \u003Ccode>columnIndex\u003C\u002Fcode>, \u003Ccode>rowIndex\u003C\u002Fcode>, or \u003Ccode>style\u003C\u002Fcode> props.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>columnCount\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Number of columns to be rendered in the grid.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>columnWidth\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Column width; the following formats are supported:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>number of pixels (number)\u003C\u002Fli>\n\u003Cli>percentage of the grid's current width (string)\u003C\u002Fli>\n\u003Cli>function that returns the column width (in pixels) given an index and \u003Ccode>cellProps\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>rowCount\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Number of rows to be rendered in the grid.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>rowHeight\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Row height; the following formats are supported:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>number of pixels (number)\u003C\u002Fli>\n\u003Cli>percentage of the grid's current height (string)\u003C\u002Fli>\n\u003Cli>function that returns the row height (in pixels) given an index and \u003Ccode>cellProps\u003C\u002Fcode>\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003C!-- Grid:required-props:end -->\n\n#### Optional props\n\n\u003C!-- Grid:optional-props:begin -->\n\n\u003Ctable>\n  \u003Cthead>\n    \u003Ctr>\n      \u003Cth>Name\u003C\u002Fth>\n      \u003Cth>Description\u003C\u002Fth>\n    \u003C\u002Ftr>\n  \u003C\u002Fthead>\n  \u003Ctbody>\n    \u003Ctr>\n      \u003Ctd>className\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>CSS class name.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>dir\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Indicates the directionality of grid cells.\u003C\u002Fp>\n\u003Cp>ℹ️ See HTML \u003Ccode>dir\u003C\u002Fcode> \u003Ca href=\"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FReference\u002FGlobal_attributes\u002Fdir\">global attribute\u003C\u002Fa> for more information.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>style\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Optional CSS properties.\nThe grid of cells will fill the height and width defined by this style.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>children\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Additional content to be rendered within the grid (above cells).\nThis property can be used to render things like overlays or tooltips.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>defaultHeight\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Default height of grid for initial render.\nThis value is important for server rendering.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>defaultWidth\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Default width of grid for initial render.\nThis value is important for server rendering.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>gridRef\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Imperative Grid API.\u003C\u002Fp>\n\u003Cp>ℹ️ The \u003Ccode>useGridRef\u003C\u002Fcode> and \u003Ccode>useGridCallbackRef\u003C\u002Fcode> hooks are exported for convenience use in TypeScript projects.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>onCellsRendered\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Callback notified when the range of rendered cells changes.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>onResize\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Callback notified when the Grid's outermost HTMLElement resizes.\nThis may be used to (re)scroll a cell into view.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>overscanCount\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>How many additional rows\u002Fcolumns to render outside of the visible area.\nThis can reduce visual flickering near the edges of a grid when scrolling.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n    \u003Ctr>\n      \u003Ctd>tagName\u003C\u002Ftd>\n      \u003Ctd>\u003Cp>Can be used to override the root HTML element rendered by the List component.\nThe default value is "div", meaning that List renders an HTMLDivElement as its root.\u003C\u002Fp>\n\u003Cp>⚠️ In most use cases the default ARIA roles are sufficient and this prop is not needed.\u003C\u002Fp>\n\u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftbody>\n\u003C\u002Ftable>\n\n\u003C!-- Grid:optional-props:end -->\n","`react-window` 是一个用于高效渲染大量列表和表格数据的React组件库。其核心功能包括虚拟化技术，通过仅渲染可见区域的数据来显著提高性能，特别适用于需要展示大量数据但又希望保持流畅用户体验的应用场景。项目采用TypeScript编写，确保了代码质量和类型安全。无论是构建复杂的管理后台、数据分析工具还是任何涉及大规模数据展示的界面，`react-window` 都能提供出色的解决方案。",2,"2026-06-11 02:56:24","top_language"]