GitHub user dosubot[bot] added a comment to the discussion: pagination in pivot table
<!-- Answer --> Superset’s pivot table plugin doesn’t have built-in pagination or search, and it doesn’t natively support external datatable libraries like DataTables.js due to its React rendering model. The most practical way to add pagination and search is to use a React table library—Superset already provides a reusable Table component (based on Ant Design and react-table) that supports pagination, sorting, and filtering out of the box. You can integrate this Table component or the TableCollection wrapper into your plugin by transforming your pivot data into a flat row/column structure and passing it as props to the table component. This approach gives you client-side or server-side pagination and search features, depending on how you configure the data and handlers ([Table implementation](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/Table/index.tsx), [TableCollection implementation](https://git hub.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx), [mapping utilities](https://github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx)). If you want column-level filtering or advanced search, use the Table’s built-in filter features via column definitions. For large datasets, consider enabling virtualization with the `virtualize` prop. If you need server-side pagination, make sure your backend supports the requested page sizes and updates the table data accordingly ([pagination details](https://github.com/apache/superset/discussions/31603)). Customizing the TableRenderer or swapping in react-table is the recommended approach for adding these features to your pivot table plugin ([discussion](https://github.com/apache/superset/discussions/34819)). Integrating jQuery-based datatable libraries is not recommended. Let me know if you want code examples or more details on mapping your pivot data for use with these components. <!-- 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/d121acf3-cc3d-407d-a6e3-bb0838799aa5?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/d121acf3-cc3d-407d-a6e3-bb0838799aa5?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/d121acf3-cc3d-407d-a6e3-bb0838799aa5?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/d121acf3-cc3d-407d-a6e3-bb0838799aa5?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/d121acf3-cc3d-407d-a6e3-bb0838799aa5?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/d121acf3-cc3d-407d-a6e3-bb0838799aa5?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/d121acf3-cc3d-407d-a6e3-bb0838799aa5?feedback_type=other)</sup> [](https://app.dosu.dev/a28d3c7e-a9d3-459e-9fb6-3a6f9ff4f357/ask?utm_source=github) [](https://cursor.com/link/prompt?text=Superset%E2%80%99s%20pivot%20table%20plugin%20doesn%E2%80%99t%20have%20built-in%20pagination%20or%20search%2C%20and%20it%20doesn%E2%80%99t%20natively%20support%20external%20datatable%20libraries%20like%20DataTables.js%20due%20to%20its%20React%20rendering%20model.%20The%20most%20practical%20way%20to%20add%20pagination%20and%20search%20is%20to%20use%20a%20React%20table%20library%E2%80%94Superset%20already%20provides%20a%20reusable%20Table%20component%20%28based%20on%20Ant%20Design%20and%20react-table%29%20that%20supports%20pagination%2C%20sorting%2C%20and%20filtering%20out%20of%20the%20box.%20You%20can%20integrate%20this%20Table%20component%20or%20the%20TableCollection%20wrapper%20into%20your%20plugin%20by%20transforming%20your%20pivot%20data%20into%20a %20flat%20row/column%20structure%20and%20passing%20it%20as%20props%20to%20the%20table%20component.%20This%20approach%20gives%20you%20client-side%20or%20server-side%20pagination%20and%20search%20features%2C%20depending%20on%20how%20you%20configure%20the%20data%20and%20handlers%20%28%5BTable%20implementation%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/Table/index.tsx%29%2C%20%5BTableCollection%20implementation%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/TableCollection/index.tsx%29%2C%20%5Bmapping%20utilities%5D%28https%3A//github.com/apache/superset/blob/829e4d92d91ceae4b43b1ed3b063ffe45377799c/superset-frontend/packages/superset-ui-core/src/components/TableCollection/utils.tsx%29%29.%0A%0AIf%20you%20want%20column-level%20filtering%20or%20advanced%20search%2C%20use%20the%20Table%E2 %80%99s%20built-in%20filter%20features%20via%20column%20definitions.%20For%20large%20datasets%2C%20consider%20enabling%20virtualization%20with%20the%20%60virtualize%60%20prop.%20If%20you%20need%20server-side%20pagination%2C%20make%20sure%20your%20backend%20supports%20the%20requested%20page%20sizes%20and%20updates%20the%20table%20data%20accordingly%20%28%5Bpagination%20details%5D%28https%3A//github.com/apache/superset/discussions/31603%29%29.%20%0A%0ACustomizing%20the%20TableRenderer%20or%20swapping%20in%20react-table%20is%20the%20recommended%20approach%20for%20adding%20these%20features%20to%20your%20pivot%20table%20plugin%20%28%5Bdiscussion%5D%28https%3A//github.com/apache/superset/discussions/34819%29%29.%20Integrating%20jQuery-based%20datatable%20libraries%20is%20not%20recommended.%20%0A%0ALet%20me%20know%20if%20you%20want%20code%20examples%20or%20more%20details%20on%20mapping%20your%20pivot%20data%20for%20use%20with%20these%20components.) [](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/37147) GitHub link: https://github.com/apache/superset/discussions/37147#discussioncomment-15502915 ---- 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]
