[question] rowCount with paginationMode=client and infinite loading with onRowsScrollEnd

[yoshegg]

The problem in depth

I want to have infinite loading with DataGridPremium as described here: https://mui.com/x/react-data-grid/row-updates/#infinite-loading

I'm using TanStack Query with useInfiniteQuery which means I can trigger the loading of additional rows with a separate function (fetchNextPage), which I hand over to the onRowsScrollEnd prop. My backend provides me the total amount of data immediately on the first call. I set the rowCount prop to be this number. Unfortunately, I get an error in the DevTools console:

MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect. 
`rowCount` is only meant to be used with `paginationMode="server"`. 

Still, the DataGrid behaves as expected: As long as I haven't loaded all the rows, it shows Total Rows: 15 of 22 in the footer. When I scroll and therefore trigger fetchNextpage, it shows Total Rows: 22. Perfect!

So is there actually a need to log this error at all?

I have prepared a MWE here: https://codesandbox.io/p/sandbox/relaxed-monad-3h5wgm

Your environment

`npx @mui/envinfo`

``` System: OS: macOS 14.6.1 Binaries: Node: 22.8.0 - ~/.nvm/versions/node/v22.8.0/bin/node npm: 10.8.2 - ~/.nvm/versions/node/v22.8.0/bin/npm pnpm: Not Found Browsers: Chrome: 129.0.6668.70 Edge: Not Found Safari: 17.6 npmPackages: @emotion/react: 11.13.3 => 11.13.3 @emotion/styled: 11.13.0 => 11.13.0 @mui/core-downloads-tracker: 6.1.1 @mui/icons-material: 6.1.1 => 6.1.1 @mui/material: 6.1.1 => 6.1.1 @mui/private-theming: 6.1.1 @mui/styled-engine: 6.1.1 @mui/system: 6.1.1 @mui/types: 7.2.17 @mui/utils: 6.1.1 @mui/x-data-grid: 7.18.0 @mui/x-data-grid-premium: 7.18.0 => 7.18.0 @mui/x-data-grid-pro: 7.18.0 @mui/x-internals: 7.18.0 @mui/x-license: 7.18.0 @types/react: 18.3.9 react: 18.3.1 => 18.3.1 react-dom: 18.3.1 => 18.3.1 typescript: 5.6.2 ```

Search keywords: DataGrid paginationMode rowCount onRowsScrollEnd infinite-loading Order ID: 95669

[MBilalShafi]

@yoshegg If you have a known row count, it is recommended to use lazy-loading rather than infinite loading which gives some added benefits like prerendering the viewport so that the user can go to any page down the tree and fetch that one instead of going through pages (or chunks) one by one.

I tried to update your example with lazy loading and it doesn't show the error anymore: https://codesandbox.io/p/sandbox/keen-lucy-vvlnh3

Let me know if it makes sense.

Sidenote: I moved some static variables like columns and rows outside the component scope as it's a recommended practice to stabilize the reference for performance reasons. Check this frequently asked question for details.

[yoshegg]

@MBilalShafi thank you. We want to use infinite loading because it works easily with TanStack Query's useInfiniteQuery and our existing backend that uses pagination. So my question remains:

So is there actually a need to log this error at all?

Thanks for pointing out the change to columns and rows. For the sake of the MWE, I did not bother to memoize.