[data grid] No buttons on DataGridPro server-side pagination demo

[SomervilleTom]

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

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { StyledEngineProvider } from '@mui/material/styles';
import Demo from './Demo';

ReactDOM.createRoot(document.querySelector("#root")).render(
  <React.StrictMode>
    <StyledEngineProvider injectFirst>
      <Demo />
    </StyledEngineProvider>
  </React.StrictMode>
);

• Demo.jsx using DataGrid

import * as React from 'react';
import { DataGrid } from '@mui/x-data-grid';
import { createFakeServer } from '@mui/x-data-grid-generator';

const SERVER_OPTIONS = {
  useCursorPagination: false,
};

const { useQuery, ...data } = createFakeServer({}, SERVER_OPTIONS);

export default function ServerPaginationGrid() {
  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 5,
  });

  const { isLoading, rows, pageInfo } = useQuery(paginationModel);

  // Some API clients return undefined while loading
  // Following lines are here to prevent `rowCount` from being undefined during the loading
  const rowCountRef = React.useRef(pageInfo?.totalRowCount || 0);

  const rowCount = React.useMemo(() => {
    if (pageInfo?.totalRowCount !== undefined) {
      rowCountRef.current = pageInfo.totalRowCount;
    }
    return rowCountRef.current;
  }, [pageInfo?.totalRowCount]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGrid
        rows={rows}
        {...data}
        rowCount={rowCount}
        loading={isLoading}
        pageSizeOptions={[5]}
        paginationModel={paginationModel}
        paginationMode="server"
        onPaginationModelChange={setPaginationModel}
      />
    </div>
  );
}

• Demo.jsx using DataGridPro

import * as React from 'react';

// Begin DataGridPro authentication
import { LicenseInfo } from '@mui/x-license';
import { DataGridPro } from '@mui/x-data-grid-pro';
import { createFakeServer } from '@mui/x-data-grid-generator';

const muiXProKey = process.env.MUI_X_PRO_KEY;
LicenseInfo.setLicenseKey(muiXProKey);
// End DataGridPro authentication

const SERVER_OPTIONS = {
  useCursorPagination: false,
};

const { useQuery, ...data } = createFakeServer({}, SERVER_OPTIONS);

export default function ServerPaginationGrid() {
  const [paginationModel, setPaginationModel] = React.useState({
    page: 0,
    pageSize: 5,
  });

  const { isLoading, rows, pageInfo } = useQuery(paginationModel);

  // Some API clients return undefined while loading
  // Following lines are here to prevent `rowCount` from being undefined during the loading
  const rowCountRef = React.useRef(pageInfo?.totalRowCount || 0);

  const rowCount = React.useMemo(() => {
    if (pageInfo?.totalRowCount !== undefined) {
      rowCountRef.current = pageInfo.totalRowCount;
    }
    return rowCountRef.current;
  }, [pageInfo?.totalRowCount]);

  return (
    <div style={{ height: 400, width: '100%' }}>
      <DataGridPro
        rows={rows}
        {...data}
        rowCount={rowCount}
        loading={isLoading}
        pageSizeOptions={[5]}
        paginationModel={paginationModel}
        paginationMode="server"
        onPaginationModelChange={setPaginationModel}
      />
    </div>
  );
}

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.1

Search keywords: paginationMode
Order ID: 95055

[k-rajat19]

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}
     />

[michelengelen]

Thanks @k-rajat19 for pointing that out.
It is indeed deactivated by default on Pro and Premium, so you have to intentionally enable it.

[SomervilleTom]

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.

[michelengelen]

It's ok... happens to all of us from time to time! 🤣