GitHub user dosubot[bot] added a comment to the discussion: react window in superset
<!-- Answer --> Yes, **react-window can be implemented** in the pivot table! Superset already has `react-window` as a dependency in [package.json](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/package.json#L190-L191), so you won't need to add any new libraries. The file you're looking for is actually **[TableRenderers.jsx](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx)** (not `.tsx`) located at: ``` superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx ``` **Reference implementation:** Check out [VirtualTable.tsx](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/Table/VirtualTable.tsx) which uses `VariableSizeGrid` from react-window. This would be the best pattern to follow for pivot tables since you'll need variable row heights for collapsible sections. **Key considerations for your implementation:** - Use `VariableSizeGrid` (not `FixedSizeList`) to handle the 2D nature of pivot tables and dynamic row heights from collapsible sections - The multi-level column headers will need special handling—you may need to keep those rendered normally outside the virtualized area - Since you've already implemented pagination, you could combine both approaches: paginate to limit total data, then virtualize the visible page for smooth scrolling Would you like more details on how VirtualTable.tsx handles dynamic sizing, or how to adapt the header rendering for virtualization? <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/bec8d63c-ecf9-46d9-9b17-5233d36493d3?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/bec8d63c-ecf9-46d9-9b17-5233d36493d3?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/bec8d63c-ecf9-46d9-9b17-5233d36493d3?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/bec8d63c-ecf9-46d9-9b17-5233d36493d3?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/bec8d63c-ecf9-46d9-9b17-5233d36493d3?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/bec8d63c-ecf9-46d9-9b17-5233d36493d3?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/bec8d63c-ecf9-46d9-9b17-5233d36493d3?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Yes%2C%20%2A%2Areact-window%20can%20be%20implemented%2A%2A%20in%20the%20pivot%20table%21%20Superset%20already%20has%20%60react-window%60%20as%20a%20dependency%20in%20%5Bpackage.json%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/package.json%23L190-L191%29%2C%20so%20you%20won%27t%20need%20to%20add%20any%20new%20libraries.%0A%0AThe%20file%20you%27re%20looking%20for%20is%20actually%20%2A%2A%5BTableRenderers.jsx%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/plugins/plugin-chart-pivot-table/src/react-pivottable/TableRenderers.jsx%29%2A%2A%20%28not%20%60.tsx%60%29%20located%20at%3A%0A%60%60%60%0Asuperset-frontend/plugins/plugin-chart-pivot -table/src/react-pivottable/TableRenderers.jsx%0A%60%60%60%0A%0A%2A%2AReference%20implementation%3A%2A%2A%20Check%20out%20%5BVirtualTable.tsx%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/Table/VirtualTable.tsx%29%20which%20uses%20%60VariableSizeGrid%60%20from%20react-window.%20This%20would%20be%20the%20best%20pattern%20to%20follow%20for%20pivot%20tables%20since%20you%27ll%20need%20variable%20row%20heights%20for%20collapsible%20sections.%0A%0A%2A%2AKey%20considerations%20for%20your%20implementation%3A%2A%2A%0A-%20Use%20%60VariableSizeGrid%60%20%28not%20%60FixedSizeList%60%29%20to%20handle%20the%202D%20nature%20of%20pivot%20tables%20and%20dynamic%20row%20heights%20from%20collapsible%20sections%0A-%20The%20multi-level%20column%20headers%20will%20need%20special%20handling%E2%80%94you%20may%20need%20to%20keep%20those%20rendered%20normally%20outside%20the%20virtualized%20area%0A-%20Since% 20you%27ve%20already%20implemented%20pagination%2C%20you%20could%20combine%20both%20approaches%3A%20paginate%20to%20limit%20total%20data%2C%20then%20virtualize%20the%20visible%20page%20for%20smooth%20scrolling%0A%0AWould%20you%20like%20more%20details%20on%20how%20VirtualTable.tsx%20handles%20dynamic%20sizing%2C%20or%20how%20to%20adapt%20the%20header%20rendering%20for%20virtualization%3F) [](https://go.dosu.dev/discord-bot) [](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/apache/superset/discussions/38285) GitHub link: https://github.com/apache/superset/discussions/38285#discussioncomment-15942503 ---- This is an automatically sent email for [email protected]. To unsubscribe, please send an email to: [email protected] --------------------------------------------------------------------- To unsubscribe, e-mail: [email protected] For additional commands, e-mail: [email protected]
