@mui/x-data-grid 7.2.0 → 7.3.0

package/hooks/features/pagination/useGridPaginationMeta.js

@@ -0,0 +1,77 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridLogger, useGridSelector, useGridApiMethod } from '../../utils';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { gridPaginationMetaSelector } from './gridPaginationSelector';
+export const useGridPaginationMeta = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridPaginationMeta');
+  const paginationMeta = useGridSelector(apiRef, gridPaginationMetaSelector);
+  apiRef.current.registerControlState({
+    stateId: 'paginationMeta',
+    propModel: props.paginationMeta,
+    propOnChange: props.onPaginationMetaChange,
+    stateSelector: gridPaginationMetaSelector,
+    changeEvent: 'paginationMetaChange'
+  });
+
+  /**
+   * API METHODS
+   */
+  const setPaginationMeta = React.useCallback(newPaginationMeta => {
+    if (paginationMeta === newPaginationMeta) {
+      return;
+    }
+    logger.debug("Setting 'paginationMeta' to", newPaginationMeta);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        meta: newPaginationMeta
+      })
+    }));
+  }, [apiRef, logger, paginationMeta]);
+  const paginationMetaApi = {
+    setPaginationMeta
+  };
+  useGridApiMethod(apiRef, paginationMetaApi, 'public');
+
+  /**
+   * PRE-PROCESSING
+   */
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    const exportedPaginationMeta = gridPaginationMetaSelector(apiRef);
+    const shouldExportRowCount =
+    // Always export if the `exportOnlyDirtyModels` property is not activated
+    !context.exportOnlyDirtyModels ||
+    // Always export if the `paginationMeta` is controlled
+    props.paginationMeta != null ||
+    // Always export if the `paginationMeta` has been initialized
+    props.initialState?.pagination?.meta != null;
+    if (!shouldExportRowCount) {
+      return prevState;
+    }
+    return _extends({}, prevState, {
+      pagination: _extends({}, prevState.pagination, {
+        meta: exportedPaginationMeta
+      })
+    });
+  }, [apiRef, props.paginationMeta, props.initialState?.pagination?.meta]);
+  const stateRestorePreProcessing = React.useCallback((params, context) => {
+    const restoredPaginationMeta = context.stateToRestore.pagination?.meta ? context.stateToRestore.pagination.meta : gridPaginationMetaSelector(apiRef);
+    apiRef.current.setState(state => _extends({}, state, {
+      pagination: _extends({}, state.pagination, {
+        meta: restoredPaginationMeta
+      })
+    }));
+    return params;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'exportState', stateExportPreProcessing);
+  useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
+
+  /**
+   * EFFECTS
+   */
+  React.useEffect(() => {
+    if (props.paginationMeta) {
+      apiRef.current.setPaginationMeta(props.paginationMeta);
+    }
+  }, [apiRef, props.paginationMeta]);
+};

package/hooks/features/pagination/useGridPaginationModel.js

@@ -9,7 +9,8 @@ export const getDerivedPaginationModel = (paginationState, signature, pagination
   let paginationModel = paginationState.paginationModel;
   const rowCount = paginationState.rowCount;
   const pageSize = paginationModelProp?.pageSize ?? paginationModel.pageSize;
-  const pageCount = getPageCount(rowCount, pageSize);
+  const page = paginationModelProp?.page ?? paginationModel.page;
+  const pageCount = getPageCount(rowCount, pageSize, page);
   if (paginationModelProp && (paginationModelProp?.page !== paginationModel.page || paginationModelProp?.pageSize !== paginationModel.pageSize)) {
     paginationModel = paginationModelProp;
   }

package/hooks/features/pagination/useGridRowCount.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-/**
- * @requires useGridFilter (state)
- * @requires useGridDimensions (event) - can be after
- */
 export declare const useGridRowCount: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rowCount' | 'initialState' | 'paginationMode' | 'onRowCountChange'>) => void;

package/hooks/features/pagination/useGridRowCount.js

@@ -1,19 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import useLazyRef from '@mui/utils/useLazyRef';
 import { gridFilteredTopLevelRowCountSelector } from '../filter';
-import { useGridLogger, useGridSelector, useGridApiMethod } from '../../utils';
+import { useGridLogger, useGridSelector, useGridApiMethod, useGridApiEventHandler } from '../../utils';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
-import { gridPaginationRowCountSelector } from './gridPaginationSelector';
-import { noRowCountInServerMode } from './gridPaginationUtils';
-
-/**
- * @requires useGridFilter (state)
- * @requires useGridDimensions (event) - can be after
- */
+import { gridPaginationRowCountSelector, gridPaginationMetaSelector, gridPaginationModelSelector } from './gridPaginationSelector';
 export const useGridRowCount = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridRowCount');
   const visibleTopLevelRowCount = useGridSelector(apiRef, gridFilteredTopLevelRowCountSelector);
-  const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
+  const rowCountState = useGridSelector(apiRef, gridPaginationRowCountSelector);
+  const paginationMeta = useGridSelector(apiRef, gridPaginationMetaSelector);
+  const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
+  const previousPageSize = useLazyRef(() => gridPaginationModelSelector(apiRef).pageSize);
   apiRef.current.registerControlState({
     stateId: 'paginationRowCount',
     propModel: props.rowCount,
@@ -26,7 +24,7 @@ export const useGridRowCount = (apiRef, props) => {
    * API METHODS
    */
   const setRowCount = React.useCallback(newRowCount => {
-    if (rowCount === newRowCount) {
+    if (rowCountState === newRowCount) {
       return;
     }
     logger.debug("Setting 'rowCount' to", newRowCount);
@@ -35,7 +33,7 @@ export const useGridRowCount = (apiRef, props) => {
         rowCount: newRowCount
       })
     }));
-  }, [apiRef, logger, rowCount]);
+  }, [apiRef, logger, rowCountState]);
   const paginationRowCountApi = {
     setRowCount
   };
@@ -75,20 +73,36 @@ export const useGridRowCount = (apiRef, props) => {
   useGridRegisterPipeProcessor(apiRef, 'restoreState', stateRestorePreProcessing);
 
   /**
-   * EFFECTS
+   * EVENTS
    */
-  React.useEffect(() => {
-    if (process.env.NODE_ENV !== 'production') {
-      if (props.paginationMode === 'server' && props.rowCount == null) {
-        noRowCountInServerMode();
+  const handlePaginationModelChange = React.useCallback(model => {
+    if (props.paginationMode === 'client' || !previousPageSize.current) {
+      return;
+    }
+    if (model.pageSize !== previousPageSize.current) {
+      previousPageSize.current = model.pageSize;
+      if (rowCountState === -1) {
+        // Row count unknown and page size changed, reset the page
+        apiRef.current.setPage(0);
       }
     }
-  }, [props.rowCount, props.paginationMode]);
+  }, [props.paginationMode, previousPageSize, rowCountState, apiRef]);
+  useGridApiEventHandler(apiRef, 'paginationModelChange', handlePaginationModelChange);
+
+  /**
+   * EFFECTS
+   */
   React.useEffect(() => {
     if (props.paginationMode === 'client') {
       apiRef.current.setRowCount(visibleTopLevelRowCount);
     } else if (props.rowCount != null) {
       apiRef.current.setRowCount(props.rowCount);
     }
-  }, [apiRef, visibleTopLevelRowCount, props.paginationMode, props.rowCount]);
+  }, [apiRef, props.paginationMode, visibleTopLevelRowCount, props.rowCount]);
+  const isLastPage = paginationMeta.hasNextPage === false;
+  React.useEffect(() => {
+    if (isLastPage && rowCountState === -1) {
+      apiRef.current.setRowCount(paginationModel.pageSize * paginationModel.page + visibleTopLevelRowCount);
+    }
+  }, [apiRef, visibleTopLevelRowCount, isLastPage, rowCountState, paginationModel]);
 };

package/hooks/utils/useGridSelector.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { GridApiCommon } from '../../models/api/gridApiCommon';
+import type { GridApiCommon } from '../../models/api/gridApiCommon';
 import { OutputSelector } from '../../utils/createSelector';
 import { fastObjectShallowCompare } from '../../utils/fastObjectShallowCompare';
 export declare const objectShallowCompare: typeof fastObjectShallowCompare;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.2.0
+ * @mui/x-data-grid v7.3.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -65,7 +65,7 @@ export { useTimeout } from '../hooks/utils/useTimeout';
 export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibleRows';
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';
-export type { DataGridProSharedPropsWithDefaultValue, DataGridPremiumSharedPropsWithDefaultValue, GridExperimentalFeatures, DataGridPropsWithoutDefaultValue, DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithComplexDefaultValueBeforeProcessing, } from '../models/props/DataGridProps';
+export type * from '../models/props/DataGridProps';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized } from '../utils/createSelector';

package/internals/utils/propValidation.js

@@ -1,6 +1,6 @@
 import { isNumber } from '../../utils/utils';
 import { GridSignature } from '../../hooks/utils/useGridApiEventHandler';
-export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', '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];
+export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].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"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 const warnedOnceCache = new Set();
 const warnOnce = message => {
   if (!warnedOnceCache.has(message)) {

package/locales/daDK.js

@@ -30,10 +30,9 @@ const daDKGrid = {
   toolbarExportPrint: 'Print',
   toolbarExportExcel: 'Download som Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Søg',
+  columnsManagementNoColumns: 'Ingen søjler',
+  columnsManagementShowHideAllText: 'Vis/Shjul Alle',
   // Filter panel text
   filterPanelAddFilter: 'Tilføj filter',
   filterPanelRemoveAll: 'Fjern alle',

package/models/api/gridApiCommon.d.ts

@@ -6,7 +6,7 @@ import { GridDensityApi } from './gridDensityApi';
 import { GridEditingApi, GridEditingPrivateApi } from './gridEditingApi';
 import type { GridFilterApi } from './gridFilterApi';
 import { GridFocusApi, GridFocusPrivateApi } from './gridFocusApi';
-import { GridLocaleTextApi } from './gridLocaleTextApi';
+import type { GridLocaleTextApi } from './gridLocaleTextApi';
 import type { GridParamsApi } from './gridParamsApi';
 import { GridPreferencesPanelApi } from './gridPreferencesPanelApi';
 import { GridPrintExportApi } from './gridPrintExportApi';

package/models/api/gridLocaleTextApi.d.ts

@@ -1,6 +1,10 @@
 import * as React from 'react';
-import { ComponentsPropsList } from '@mui/material/styles';
-import { GridColDef } from '../colDef';
+import type { ComponentsPropsList } from '@mui/material/styles';
+import type { WrappedLabelDisplayedRows } from '../../components/GridPagination';
+import type { GridColDef } from '../colDef';
+export type MuiTablePaginationLocalizedProps = Omit<ComponentsPropsList['MuiTablePagination'], 'page' | 'count' | 'onChangePage' | 'rowsPerPage' | 'onPageChange' | 'labelDisplayedRows'> & {
+    labelDisplayedRows?: WrappedLabelDisplayedRows;
+};
 /**
  * Set the types of the texts in the grid.
  */
@@ -122,7 +126,7 @@ export interface GridLocaleText {
     aggregationFunctionLabelMin: string;
     aggregationFunctionLabelMax: string;
     aggregationFunctionLabelSize: string;
-    MuiTablePagination: Omit<ComponentsPropsList['MuiTablePagination'], 'page' | 'count' | 'onChangePage' | 'rowsPerPage' | 'onPageChange'>;
+    MuiTablePagination: MuiTablePaginationLocalizedProps;
 }
 export type GridTranslationKeys = keyof GridLocaleText;
 /**

package/models/api/index.d.ts

@@ -8,7 +8,7 @@ export type { GridRowsMetaApi } from './gridRowsMetaApi';
 export * from './gridRowSelectionApi';
 export * from './gridSortApi';
 export type { GridStateApi } from './gridStateApi';
-export * from './gridLocaleTextApi';
+export type { GridLocaleText, GridLocaleTextApi, GridTranslationKeys } from './gridLocaleTextApi';
 export * from './gridCsvExportApi';
 export type { GridFocusApi } from './gridFocusApi';
 export * from './gridFilterApi';

package/models/api/index.js

@@ -4,7 +4,6 @@ export * from './gridDensityApi';
 export * from './gridRowApi';
 export * from './gridRowSelectionApi';
 export * from './gridSortApi';
-export * from './gridLocaleTextApi';
 export * from './gridCsvExportApi';
 export * from './gridFilterApi';
 export * from './gridColumnMenuApi';

package/models/events/gridEventLookup.d.ts

@@ -12,7 +12,7 @@ import type { GridColumnVisibilityModel } from '../../hooks/features/columns';
 import type { GridStrategyProcessorName } from '../../hooks/core/strategyProcessing';
 import { GridRowEditStartParams, GridRowEditStopParams } from '../params/gridRowParams';
 import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
-import { GridPaginationModel } from '../gridPaginationProps';
+import { GridPaginationMeta, GridPaginationModel } from '../gridPaginationProps';
 import { GridDensity } from '../gridDensity';
 export interface GridRowEventLookup {
     /**
@@ -382,6 +382,12 @@ export interface GridControlledStateEventLookup {
     densityChange: {
         params: GridDensity;
     };
+    /**
+     * Fired when the pagination meta change.
+     */
+    paginationMetaChange: {
+        params: GridPaginationMeta;
+    };
 }
 export interface GridControlledStateReasonLookup {
     filter: 'upsertFilterItem' | 'upsertFilterItems' | 'deleteFilterItem' | 'changeLogicOperator' | 'restoreState' | 'removeAllFilterItems';

package/models/gridPaginationProps.d.ts

@@ -11,3 +11,6 @@ export interface GridPaginationModel {
      */
     page: number;
 }
+export interface GridPaginationMeta {
+    hasNextPage?: boolean;
+}

package/models/props/DataGridProps.d.ts

@@ -23,7 +23,7 @@ import { GridSlotsComponentsProps } from '../gridSlotsComponentsProps';
 import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColumnsInterfaces';
 import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridColumnGroupingModel } from '../gridColumnGrouping';
-import { GridPaginationModel } from '../gridPaginationProps';
+import { GridPaginationMeta, GridPaginationModel } from '../gridPaginationProps';
 import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
 export interface GridExperimentalFeatures {
     /**
@@ -38,11 +38,6 @@ export interface GridExperimentalFeatures {
 export type DataGridProps<R extends GridValidRowModel = any> = Omit<Partial<DataGridPropsWithDefaultValues<R>> & DataGridPropsWithComplexDefaultValueBeforeProcessing & DataGridPropsWithoutDefaultValue<R>, DataGridForcedPropsKey> & {
     pagination?: true;
 };
-/**
- * The props of the `DataGrid` component after the pre-processing phase.
- */
-export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R> {
-}
 /**
  * The props of the `DataGrid` component after the pre-processing phase that the user should not be able to override.
  * Those are usually used in feature-hook for which the pro-plan has more advanced features (eg: multi-sorting, multi-filtering, ...).
@@ -380,8 +375,15 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
     /**
      * Set the total number of rows, if it is different from the length of the value `rows` prop.
      * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
+     * Only works with `paginationMode="server"`, ignored when `paginationMode="client"`.
      */
     rowCount?: number;
+    /**
+     * Use if the actual rowCount is not known upfront, but an estimation is available.
+     * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
+     * Applicable only with `paginationMode="server"` and when `rowCount="-1"`
+     */
+    estimatedRowCount?: number;
     /**
      * Override the height/width of the Data Grid inner scrollbar.
      */
@@ -569,6 +571,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * The pagination model of type [[GridPaginationModel]] which refers to current `page` and `pageSize`.
      */
     paginationModel?: GridPaginationModel;
+    /**
+     * The extra information about the pagination state of the Data Grid.
+     * Only applicable with `paginationMode="server"`.
+     */
+    paginationMeta?: GridPaginationMeta;
     /**
      * Callback fired when the pagination model has changed.
      * @param {GridPaginationModel} model Updated pagination model.
@@ -580,6 +587,11 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {number} count Updated row count.
      */
     onRowCountChange?: (count: number) => void;
+    /**
+     * Callback fired when the pagination meta has changed.
+     * @param {GridPaginationMeta} paginationMeta Updated pagination meta.
+     */
+    onPaginationMetaChange?: (paginationMeta: GridPaginationMeta) => void;
     /**
      * Callback fired when the preferences panel is closed.
      * @param {GridPreferencePanelParams} params With all properties from [[GridPreferencePanelParams]].
@@ -757,6 +769,12 @@ export interface DataGridProSharedPropsWithDefaultValue {
      */
     headerFilters: boolean;
 }
+export interface DataGridProSharedPropsWithoutDefaultValue {
+    /**
+     * Override the height of the header filters.
+     */
+    headerFilterHeight?: number;
+}
 export interface DataGridPremiumSharedPropsWithDefaultValue {
     /**
      * If `true`, the cell selection mode is enabled.
@@ -765,7 +783,7 @@ export interface DataGridPremiumSharedPropsWithDefaultValue {
     cellSelection: boolean;
 }
 /**
- * Contains the commercial packages' props shared in the MIT version.
+ * The props of the `DataGrid` component after the pre-processing phase.
  */
-export interface DataGridProcessedPropsWithShared extends DataGridProcessedProps, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {
+export interface DataGridProcessedProps<R extends GridValidRowModel = any> extends DataGridPropsWithDefaultValues, DataGridPropsWithComplexDefaultValueAfterProcessing, DataGridPropsWithoutDefaultValue<R>, DataGridProSharedPropsWithoutDefaultValue, Partial<DataGridProSharedPropsWithDefaultValue>, Partial<DataGridPremiumSharedPropsWithDefaultValue> {
 }

package/modern/DataGrid/DataGrid.js

@@ -186,6 +186,12 @@ DataGridRaw.propTypes = {
    * @default "cell"
    */
   editMode: PropTypes.oneOf(['cell', 'row']),
+  /**
+   * Use if the actual rowCount is not known upfront, but an estimation is available.
+   * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
+   * Applicable only with `paginationMode="server"` and when `rowCount="-1"`
+   */
+  estimatedRowCount: PropTypes.number,
   /**
    * Unstable features, breaking changes might be introduced.
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
@@ -487,6 +493,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onMenuOpen: PropTypes.func,
+  /**
+   * Callback fired when the pagination meta has changed.
+   * @param {GridPaginationMeta} paginationMeta Updated pagination meta.
+   */
+  onPaginationMetaChange: PropTypes.func,
   /**
    * Callback fired when the pagination model has changed.
    * @param {GridPaginationModel} model Updated pagination model.
@@ -586,6 +597,13 @@ DataGridRaw.propTypes = {
     value: PropTypes.number.isRequired
   })]).isRequired),
   pagination: PropTypes.oneOf([true]),
+  /**
+   * The extra information about the pagination state of the Data Grid.
+   * Only applicable with `paginationMode="server"`.
+   */
+  paginationMeta: PropTypes.shape({
+    hasNextPage: PropTypes.bool
+  }),
   /**
    * Pagination can be processed on the server or client-side.
    * Set it to 'client' if you would like to handle the pagination on the client-side.
@@ -621,6 +639,7 @@ DataGridRaw.propTypes = {
   /**
    * Set the total number of rows, if it is different from the length of the value `rows` prop.
    * If some rows have children (for instance in the tree data), this number represents the amount of top level rows.
+   * Only works with `paginationMode="server"`, ignored when `paginationMode="client"`.
    */
   rowCount: PropTypes.number,
   /**

package/modern/components/GridPagination.js

@@ -1,12 +1,12 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
 import TablePagination, { tablePaginationClasses } from '@mui/material/TablePagination';
-import { styled } from '@mui/material/styles';
 import { useGridSelector } from '../hooks/utils/useGridSelector';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
-import { gridPaginationModelSelector, gridPaginationRowCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
+import { gridPaginationModelSelector, gridPaginationRowCountSelector, gridPageCountSelector } from '../hooks/features/pagination/gridPaginationSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 const GridPaginationRoot = styled(TablePagination)(({
   theme
@@ -24,6 +24,31 @@ const GridPaginationRoot = styled(TablePagination)(({
     }
   }
 }));
+const wrapLabelDisplayedRows = (labelDisplayedRows, estimated) => {
+  return ({
+    from,
+    to,
+    count,
+    page
+  }) => labelDisplayedRows({
+    from,
+    to,
+    count,
+    page,
+    estimated
+  });
+};
+const defaultLabelDisplayedRows = ({
+  from,
+  to,
+  count,
+  estimated
+}) => {
+  if (!estimated) {
+    return `${from}–${to} of ${count !== -1 ? count : `more than ${to}`}`;
+  }
+  return `${from}–${to} of ${count !== -1 ? count : `more than ${estimated > to ? estimated : to}`}`;
+};
 
 // A mutable version of a readonly array.
 
@@ -32,10 +57,32 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
   const rootProps = useGridRootProps();
   const paginationModel = useGridSelector(apiRef, gridPaginationModelSelector);
   const rowCount = useGridSelector(apiRef, gridPaginationRowCountSelector);
-  const lastPage = React.useMemo(() => {
-    const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
-    return Math.max(0, calculatedValue);
-  }, [rowCount, paginationModel.pageSize]);
+  const pageCount = useGridSelector(apiRef, gridPageCountSelector);
+  const {
+    paginationMode,
+    loading,
+    estimatedRowCount
+  } = rootProps;
+  const computedProps = React.useMemo(() => {
+    if (rowCount === -1 && paginationMode === 'server' && loading) {
+      return {
+        backIconButtonProps: {
+          disabled: true
+        },
+        nextIconButtonProps: {
+          disabled: true
+        }
+      };
+    }
+    return {};
+  }, [loading, paginationMode, rowCount]);
+  const lastPage = React.useMemo(() => Math.max(0, pageCount - 1), [pageCount]);
+  const computedPage = React.useMemo(() => {
+    if (rowCount === -1) {
+      return paginationModel.page;
+    }
+    return paginationModel.page <= lastPage ? paginationModel.page : lastPage;
+  }, [lastPage, paginationModel.page, rowCount]);
   const handlePageSizeChange = React.useCallback(event => {
     const pageSize = Number(event.target.value);
     apiRef.current.setPageSize(pageSize);
@@ -61,16 +108,18 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
     const warnedOnceMissingInPageSizeOptions = React.useRef(false);
     const pageSize = rootProps.paginationModel?.pageSize ?? paginationModel.pageSize;
     if (!warnedOnceMissingInPageSizeOptions.current && !rootProps.autoPageSize && !isPageSizeIncludedInPageSizeOptions(pageSize)) {
-      console.warn([`MUI X: The page size \`${paginationModel.pageSize}\` is not preset in the \`pageSizeOptions\`.`, `Add it to show the pagination select.`].join('\n'));
+      console.warn([`MUI X: The page size \`${paginationModel.pageSize}\` is not present in the \`pageSizeOptions\`.`, `Add it to show the pagination select.`].join('\n'));
       warnedOnceMissingInPageSizeOptions.current = true;
     }
   }
   const pageSizeOptions = isPageSizeIncludedInPageSizeOptions(paginationModel.pageSize) ? rootProps.pageSizeOptions : [];
+  const locales = apiRef.current.getLocaleText('MuiTablePagination');
+  const wrappedLabelDisplayedRows = wrapLabelDisplayedRows(locales.labelDisplayedRows || defaultLabelDisplayedRows, estimatedRowCount);
   return /*#__PURE__*/_jsx(GridPaginationRoot, _extends({
     ref: ref,
     component: "div",
     count: rowCount,
-    page: paginationModel.page <= lastPage ? paginationModel.page : lastPage
+    page: computedPage
     // TODO: Remove the cast once the type is fixed in Material UI and that the min Material UI version
     // for x-data-grid is past the fix.
     // Note that Material UI will not mutate the array, so this is safe.
@@ -79,7 +128,9 @@ const GridPagination = /*#__PURE__*/React.forwardRef(function GridPagination(pro
     rowsPerPage: paginationModel.pageSize,
     onPageChange: handlePageChange,
     onRowsPerPageChange: handlePageSizeChange
-  }, apiRef.current.getLocaleText('MuiTablePagination'), props));
+  }, computedProps, locales, {
+    labelDisplayedRows: wrappedLabelDisplayedRows
+  }, props));
 });
 process.env.NODE_ENV !== "production" ? GridPagination.propTypes = {
   // ----------------------------- Warning --------------------------------

package/modern/components/GridRow.js

@@ -366,6 +366,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
     }).isRequired,
     hasScrollX: PropTypes.bool.isRequired,
     hasScrollY: PropTypes.bool.isRequired,
+    headerFilterHeight: PropTypes.number.isRequired,
     headerHeight: PropTypes.number.isRequired,
     headersTotalHeight: PropTypes.number.isRequired,
     isReady: PropTypes.bool.isRequired,

package/modern/components/GridScrollArea.js

@@ -82,7 +82,7 @@ function GridScrollAreaRaw(props) {
     scrollDirection
   });
   const classes = useUtilityClasses(ownerState);
-  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps.columnHeaderHeight);
+  const totalHeaderHeight = getTotalHeaderHeight(apiRef, rootProps);
   const headerHeight = Math.floor(rootProps.columnHeaderHeight * densityFactor);
   const style = {
     height: headerHeight,

package/modern/components/columnHeaders/GridColumnHeaderItem.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import clsx from 'clsx';
 import { unstable_composeClasses as composeClasses, unstable_useId as useId } from '@mui/utils';
 import { fastMemo } from '../../utils/fastMemo';
 import { useGridPrivateApiContext } from '../../hooks/utils/useGridPrivateApiContext';
 import { GridColumnHeaderSortIcon } from './GridColumnHeaderSortIcon';
 import { ColumnHeaderMenuIcon } from './ColumnHeaderMenuIcon';
 import { GridColumnHeaderMenu } from '../menu/columnMenu/GridColumnHeaderMenu';
-import { getDataGridUtilityClass } from '../../constants/gridClasses';
+import { gridClasses, getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { GridGenericColumnHeaderItem } from './GridGenericColumnHeaderItem';
 import { isEventTargetInPortal } from '../../utils/domUtils';
@@ -44,6 +45,7 @@ function GridColumnHeaderItem(props) {
     colIndex,
     headerHeight,
     isResizing,
+    isLast,
     sortDirection,
     sortIndex,
     filterItemsCounter,
@@ -182,7 +184,7 @@ function GridColumnHeaderItem(props) {
     width: colDef.computedWidth,
     columnMenuIconButton: columnMenuIconButton,
     columnTitleIconButtons: columnTitleIconButtons,
-    headerClassName: headerClassName,
+    headerClassName: clsx(headerClassName, isLast && gridClasses['columnHeader--last']),
     label: label,
     resizable: !rootProps.disableColumnResize && !!colDef.resizable,
     "data-field": colDef.field,
@@ -207,6 +209,7 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   headerHeight: PropTypes.number.isRequired,
   indexInSection: PropTypes.number.isRequired,
   isDragging: PropTypes.bool.isRequired,
+  isLast: PropTypes.bool.isRequired,
   isResizing: PropTypes.bool.isRequired,
   pinnedPosition: PropTypes.oneOf(['left', 'right']),
   sectionLength: PropTypes.number.isRequired,

package/modern/components/columnHeaders/GridColumnHeaderSeparator.js

@@ -48,7 +48,7 @@ function GridColumnHeaderSeparatorRaw(props) {
       className: classes.root,
       style: {
         minHeight: height,
-        opacity: rootProps.showColumnVerticalBorder ? 1 : 0
+        opacity: rootProps.showColumnVerticalBorder ? 0 : 1
       }
     }, other, {
       onClick: stopClick,