[DataGrid] Log error if rowCount is used with client-side pagination (#12448)

Co-authored-by: Bilal Shafi <bilalshafidev@gmail.com>
Co-authored-by: Andrew Cherniavskyi <andrew@mui.com>

Author: 3 people

docs/data/data-grid/pagination/pagination.md

@@ -120,6 +120,11 @@ React.useEffect(() => {
 <DataGrid rowCount={rowCountState} />;
 ```
 
+:::warning
+The `rowCount` prop is used in server-side pagination mode to inform the DataGrid about the total number of rows in your dataset.
+This prop is ignored when the `paginationMode` is set to `client`, i.e. when the pagination is handled on the client-side.
+:::
+
 {{"demo": "ServerPaginationGrid.js", "bg": "inline"}}
 
 ### Cursor implementation

packages/x-data-grid-pro/src/internals/propValidation.ts

@@ -1,4 +1,9 @@
-import { PropValidator, propValidatorsDataGrid } from '@mui/x-data-grid/internals';
+import {
+  GridSignature,
+  PropValidator,
+  isNumber,
+  propValidatorsDataGrid,
+} from '@mui/x-data-grid/internals';
 import { DataGridProProcessedProps } from '../models/dataGridProProps';
 
 export const propValidatorsDataGridPro: PropValidator<DataGridProProcessedProps>[] = [
@@ -18,4 +23,11 @@ export const propValidatorsDataGridPro: PropValidator<DataGridProProcessedProps>
       props.checkboxSelectionVisibleOnly &&
       'MUI X: The `checkboxSelectionVisibleOnly` prop has no effect when the pagination is not enabled.') ||
     undefined,
+  (props) =>
+    (props.signature !== GridSignature.DataGrid &&
+      props.paginationMode === 'client' &&
+      props.rowsLoadingMode !== 'server' &&
+      isNumber(props.rowCount) &&
+      '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"`.') ||
+    undefined,
 ];

packages/x-data-grid-pro/src/tests/events.DataGridPro.test.tsx

@@ -340,6 +340,7 @@ describe('<DataGridPro /> - Events params', () => {
         sortingMode="server"
         filterMode="server"
         rowsLoadingMode="server"
+        paginationMode="server"
         rowCount={50}
       />,
     );

packages/x-data-grid-pro/src/tests/lazyLoader.DataGridPro.test.tsx

@@ -51,6 +51,7 @@ describe('<DataGridPro /> - Lazy loader', () => {
           sortingMode="server"
           filterMode="server"
           rowsLoadingMode="server"
+          paginationMode="server"
         />
       </div>
     );

packages/x-data-grid-pro/src/tests/pagination.DataGridPro.test.tsx

@@ -102,4 +102,12 @@ describe('<DataGridPro /> - Pagination', () => {
       expect(getColumnValues(0)).to.deep.equal(['0', '1']);
     });
   });
+
+  it('should log an error if rowCount is used with client-side pagination', () => {
+    expect(() => {
+      render(<DataGridPro rows={[]} columns={[]} paginationMode="client" rowCount={100} />);
+    }).toErrorDev([
+      '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"`.',
+    ]);
+  });
 });

packages/x-data-grid-pro/src/tests/rows.DataGridPro.test.tsx

@@ -959,7 +959,9 @@ describe('<DataGridPro /> - Rows', () => {
     it('should not show total row count in footer if `rowCount === rows.length`', () => {
       const { rows, columns } = getBasicGridData(10, 2);
       const rowCount = rows.length;
-      render(<TestCase rows={rows} columns={columns} rowCount={rowCount} />);
+      render(
+        <TestCase rows={rows} columns={columns} rowCount={rowCount} paginationMode="server" />,
+      );
 
       const rowCountElement = document.querySelector<HTMLElement>(`.${gridClasses.rowCount}`);
       expect(rowCountElement!.textContent).to.equal(`Total Rows: ${rows.length}`);
@@ -968,7 +970,9 @@ describe('<DataGridPro /> - Rows', () => {
     it('should show total row count in footer if `rowCount !== rows.length`', () => {
       const { rows, columns } = getBasicGridData(10, 2);
       const rowCount = rows.length + 10;
-      render(<TestCase rows={rows} columns={columns} rowCount={rowCount} />);
+      render(
+        <TestCase rows={rows} columns={columns} rowCount={rowCount} paginationMode="server" />,
+      );
 
       const rowCountElement = document.querySelector<HTMLElement>(`.${gridClasses.rowCount}`);
       expect(rowCountElement!.textContent).to.equal(`Total Rows: ${rows.length} of ${rowCount}`);
@@ -977,7 +981,9 @@ describe('<DataGridPro /> - Rows', () => {
     it('should update total row count in footer on `rowCount` prop change', () => {
       const { rows, columns } = getBasicGridData(10, 2);
       let rowCount = rows.length;
-      const { setProps } = render(<TestCase rows={rows} columns={columns} rowCount={rowCount} />);
+      const { setProps } = render(
+        <TestCase rows={rows} columns={columns} rowCount={rowCount} paginationMode="server" />,
+      );
       rowCount += 1;
       setProps({ rowCount });
 

packages/x-data-grid-pro/src/tests/statePersistence.DataGridPro.test.tsx

@@ -162,6 +162,7 @@ describe('<DataGridPro /> - State persistence', () => {
             page: FULL_INITIAL_STATE.pagination?.paginationModel?.page!,
             pageSize: FULL_INITIAL_STATE.pagination?.paginationModel?.pageSize!,
           }}
+          paginationMode="server"
           rowCount={FULL_INITIAL_STATE.pagination?.rowCount}
           pinnedColumns={FULL_INITIAL_STATE.pinnedColumns}
           // Some portable states don't have a controllable model
@@ -187,6 +188,7 @@ describe('<DataGridPro /> - State persistence', () => {
             page: FULL_INITIAL_STATE.pagination?.paginationModel?.page!,
             pageSize: FULL_INITIAL_STATE.pagination?.paginationModel?.pageSize!,
           }}
+          paginationMode="server"
           rowCount={FULL_INITIAL_STATE.pagination?.rowCount}
           pinnedColumns={FULL_INITIAL_STATE.pinnedColumns}
           // Some portable states don't have a controllable model

packages/x-data-grid/src/internals/utils/propValidation.ts

@@ -1,4 +1,6 @@
+import { isNumber } from '../../utils/utils';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
+import { GridSignature } from '../../hooks/utils/useGridApiEventHandler';
 
 export type PropValidator<TProps> = (props: TProps) => string | undefined;
 
@@ -13,13 +15,19 @@ export const propValidatorsDataGrid: PropValidator<DataGridProcessedProps>[] = [
         'Please remove one of these two props.',
       ].join('\n')) ||
     undefined,
+  (props) =>
+    (props.signature === GridSignature.DataGrid &&
+      props.paginationMode === 'client' &&
+      isNumber(props.rowCount) &&
+      '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"`.') ||
+    undefined,
 ];
 
-const warnedOnceMap = new Set();
+const warnedOnceCache = new Set();
 const warnOnce = (message: string) => {
-  if (!warnedOnceMap.has(message)) {
+  if (!warnedOnceCache.has(message)) {
     console.error(message);
-    warnedOnceMap.add(message);
+    warnedOnceCache.add(message);
   }
 };
 
@@ -34,3 +42,7 @@ export const validateProps = <TProps>(props: TProps, validators: PropValidator<T
     }
   });
 };
+
+export const clearWarningsCache = () => {
+  warnedOnceCache.clear();
+};

packages/x-data-grid/src/tests/pagination.DataGrid.test.tsx

@@ -708,4 +708,12 @@ describe('<DataGrid /> - Pagination', () => {
       setProps({ rows: rows.slice(0, 2) });
     }).not.to.throw();
   });
+
+  it('should log an error if rowCount is used with client-side pagination', () => {
+    expect(() => {
+      render(<BaselineTestCase paginationMode="client" rowCount={100} />);
+    }).toErrorDev([
+      '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"`.',
+    ]);
+  });
 });

test/utils/mochaHooks.js

@@ -3,6 +3,7 @@ import { LicenseInfo } from '@mui/x-license';
 import { unstable_resetCleanupTracking as unstable_resetCleanupTrackingDataGrid } from '@mui/x-data-grid';
 import { unstable_resetCleanupTracking as unstable_resetCleanupTrackingDataGridPro } from '@mui/x-data-grid-pro';
 import { unstable_resetCleanupTracking as unstable_resetCleanupTrackingTreeView } from '@mui/x-tree-view';
+import { clearWarningsCache } from '@mui/x-data-grid/internals';
 
 export function createXMochaHooks(coreMochaHooks = {}) {
   const mochaHooks = {
@@ -30,5 +31,7 @@ export function createXMochaHooks(coreMochaHooks = {}) {
     sinon.restore();
   });
 
+  mochaHooks.afterEach.push(clearWarningsCache);
+
   return mochaHooks;
 }