x-datagrid with Next.js and dynamic data does not display data on pages >= 2

[samfweb]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

x-grid (and pro) only shows the last row on pages after the first when the rows prop changes on page change (such as with serverside pagination enabled).

This only occurs with Next.JS. I've tried to recreate this example with vanilla react and can't.

Edit: I've also found some rows flicker and swap... unsure if this is also relevant?

Expected behavior 🤔

The grid should show all rows on all pages.

Steps to reproduce 🕹

Code sandbox here: https://codesandbox.io/s/nextjs-mui-datagrid-not-displaying-rows-zznwxc?file=/pages/index.tsx

Steps:

1. Click next page
2. See that only 1 row is displayed despite rows having 5 entries
3. Click next page to see this behavior happens on all subsequent pages

Context 🔦

I need to use serverside pagination on our application as datasets sent to the client are becoming too large.

This bug is preventing me from releasing the next update.

Your environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.19044
  Binaries:
    Node: 16.13.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (101.0.1210.53)
  npmPackages:
    @emotion/react: ^11.9.0 => 11.9.0
    @emotion/styled: ^11.8.1 => 11.8.1
    @mui/icons-material: ^5.8.0 => 5.8.0
    @mui/lab: ^5.0.0-alpha.83 => 5.0.0-alpha.83
    @mui/material: ^5.8.1 => 5.8.1
    @mui/styles: ^5.8.0 => 5.8.0
    @mui/types:  7.1.3
    @mui/x-data-grid-pro: ^5.11.1 => 5.11.1
    @mui/x-date-pickers: ^5.0.0-alpha.4 => 5.0.0-alpha.4
    @types/react: 18.0.9 => 18.0.9
    react: 18.1.0 => 18.1.0
    react-dom: 18.1.0 => 18.1.0
    typescript: 4.7.2 => 4.7.2

Browsers used are Brave and Chrome

Order ID 💳 (optional)

30466

[m4theushw]

You seem to have missed setting paginationMode to "server". Without it, the grid will slice the rows received.

Updated CodeSandbox: https://codesandbox.io/s/nextjs-mui-datagrid-not-displaying-rows-forked-4lfb4b?file=/pages/index.tsx

Does it solve the problem ?

[samfweb]

Yep, that does 😅 Totally missed that in the docs. Thank you.

Could I recommend a guide/separate page on creating a serverside implementation of x-grid?

I don't think it would be common behavior to partially implement serverside logic for eg. pagination but not filters, however currently the steps are fragmented across each individual page and the grid requires a bunch of different *mode="server" props.

[m4theushw]

Could I recommend a guide/separate page on creating a serverside implementation of x-grid?

Yes, we want to improve that part. You can follow #7583