Closed SomervilleTom closed 1 month ago
Pagination is disabled by default for pro and premium versions. You have to enable it by passing pagination
prop as mentioned here.
<DataGridPro
rows={rows}
{...data}
+ pagination
rowCount={rowCount}
loading={isLoading}
pageSizeOptions={[5]}
paginationModel={paginationModel}
paginationMode="server"
onPaginationModelChange={setPaginationModel}
/>
Thanks @k-rajat19 for pointing that out. It is indeed deactivated by default on Pro and Premium, so you have to intentionally enable it.
Oh, JEESH (administrating enthusiastic face-palm to myself)! Of course it works perfectly with the missing prop.
Not only did I read the fine manual that clearly says this, but I even noted this in my journal -- and then promptly ignored it
I apologize for the jerk-around and appreciate the patient response.
It's ok... happens to all of us from time to time! 🤣
The problem in depth
When I edit the pagination demo of the community version of
DataGrid
to instead use my licensed "pro" version, the result has no buttons for paginating the grid.The backend of my project provides thousands of rows, and I've already coded the backend pagination behavior. The frontend of my project needs the buttons in order to trigger the
onPaginationModelChange
. Since the buttons are absent, I have no way to exercise or debug the frontend.My configuration is too complex to replicate, and I've made only very lightweight changes to the published MUI example code. My code follows follows the screenshots (below)
I've highlighted the affected region in each screenshot.
I assume/hope this is a configuration/API issue in my code rather than a bug in
DataGridPro
-- that's why I'm posting this here.I appreciate your attention and invite whatever guidance you are able to offer,
The pagination demo of the community version appears to work as expected:
The same code lightly edited to use my licensed version of
DataGridPro
replaces the pagination buttons with a non-interactive footer:Index.jsx
Demo.jsx
usingDataGrid
Demo.jsx
usingDataGridPro
Your environment
`npx @mui/envinfo`
System: OS: Linux 4.18 Rocky Linux 8.8 (Green Obsidian) Binaries: Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node npm: 10.7.0 - ~/.nvm/versions/node/v20.11.1/bin/npm pnpm: Not Found Browsers: Chrome: Not Found (uses Chrome via VSC remote debuger) npmPackages: @emotion/react: latest => 11.13.3 @emotion/styled: latest => 11.13.0 @mui/core-downloads-tracker: 6.0.2 @mui/icons-material: latest => 6.0.2 @mui/material: latest => 6.0.2 @mui/private-theming: 6.0.2 @mui/styled-engine: 6.0.2 @mui/system: 6.0.2 @mui/types: 7.2.16 @mui/utils: 5.16.6 @mui/x-data-grid: 7.16.0 @mui/x-data-grid-generator: latest => 7.16.0 @mui/x-data-grid-premium: 7.16.0 @mui/x-data-grid-pro: latest => 7.16.0 @mui/x-internals: 7.16.0 @mui/x-license: 7.16.0 @types/react: 18.3.5 react: ^18.2.0 => 18.3.1 react-dom: ^18.2.0 => 18.3.1Search keywords: paginationMode Order ID: 95055