@mui/x-data-grid 7.1.1 → 7.3.0

package/modern/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/modern/index.js

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

package/modern/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/modern/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/modern/locales/deDE.js

@@ -30,10 +30,9 @@ const deDEGrid = {
   toolbarExportPrint: 'Drucken',
   toolbarExportExcel: 'Download als Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Suche',
+  columnsManagementNoColumns: 'Keine Spalten',
+  columnsManagementShowHideAllText: 'Alle anzeigen/verbergen',
   // Filter panel text
   filterPanelAddFilter: 'Filter hinzufügen',
   filterPanelRemoveAll: 'Alle entfernen',

package/modern/locales/frFR.js

@@ -16,7 +16,7 @@ const frFRGrid = {
   // Filters toolbar button text
   toolbarFilters: 'Filtres',
   toolbarFiltersLabel: 'Afficher les filtres',
-  toolbarFiltersTooltipHide: 'Cacher les filtres',
+  toolbarFiltersTooltipHide: 'Masquer les filtres',
   toolbarFiltersTooltipShow: 'Afficher les filtres',
   toolbarFiltersTooltipActive: count => count > 1 ? `${count} filtres actifs` : `${count} filtre actif`,
   // Quick filter toolbar field
@@ -30,10 +30,9 @@ const frFRGrid = {
   toolbarExportPrint: 'Imprimer',
   toolbarExportExcel: 'Télécharger pour Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Rechercher',
+  columnsManagementNoColumns: 'Pas de colonnes',
+  columnsManagementShowHideAllText: 'Afficher/masquer toutes',
   // Filter panel text
   filterPanelAddFilter: 'Ajouter un filtre',
   filterPanelRemoveAll: 'Tout supprimer',
@@ -94,7 +93,7 @@ const frFRGrid = {
   columnMenuShowColumns: 'Afficher les colonnes',
   columnMenuManageColumns: 'Gérer les colonnes',
   columnMenuFilter: 'Filtrer',
-  columnMenuHideColumn: 'Cacher',
+  columnMenuHideColumn: 'Masquer',
   columnMenuUnsort: 'Annuler le tri',
   columnMenuSortAsc: 'Tri ascendant',
   columnMenuSortDesc: 'Tri descendant',

package/modern/locales/svSE.js

@@ -30,10 +30,9 @@ const svSEGrid = {
   toolbarExportPrint: 'Skriv ut',
   toolbarExportExcel: 'Ladda ner som Excel',
   // Columns management text
-  // columnsManagementSearchTitle: 'Search',
-  // columnsManagementNoColumns: 'No columns',
-  // columnsManagementShowHideAllText: 'Show/Hide All',
-
+  columnsManagementSearchTitle: 'Sök',
+  columnsManagementNoColumns: 'Inga kolumner',
+  columnsManagementShowHideAllText: 'Visa/Dölj alla',
   // Filter panel text
   filterPanelAddFilter: 'Lägg till filter',
   filterPanelRemoveAll: 'Ta bort alla',

package/modern/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/modern/utils/cellBorderUtils.js

@@ -1,7 +1,20 @@
 import { GridPinnedColumnPosition } from '../hooks/features/columns/gridColumnsInterfaces';
-export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp) => {
+export const shouldCellShowRightBorder = (pinnedPosition, indexInSection, sectionLength, showCellVerticalBorderRootProp, gridHasFiller) => {
   const isSectionLastCell = indexInSection === sectionLength - 1;
-  return showCellVerticalBorderRootProp && (pinnedPosition !== GridPinnedColumnPosition.LEFT ? !isSectionLastCell : true) || pinnedPosition === GridPinnedColumnPosition.LEFT && isSectionLastCell;
+  if (pinnedPosition === GridPinnedColumnPosition.LEFT && isSectionLastCell) {
+    return true;
+  }
+  if (showCellVerticalBorderRootProp) {
+    if (pinnedPosition === GridPinnedColumnPosition.LEFT) {
+      return true;
+    }
+    if (pinnedPosition === GridPinnedColumnPosition.RIGHT) {
+      return !isSectionLastCell;
+    }
+    // pinnedPosition === undefined, middle section
+    return !isSectionLastCell || gridHasFiller;
+  }
+  return false;
 };
 export const shouldCellShowLeftBorder = (pinnedPosition, indexInSection) => {
   return pinnedPosition === GridPinnedColumnPosition.RIGHT && indexInSection === 0;

package/node/DataGrid/DataGrid.js

@@ -193,6 +193,12 @@ DataGridRaw.propTypes = {
    * @default "cell"
    */
   editMode: _propTypes.default.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.default.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.
@@ -494,6 +500,11 @@ DataGridRaw.propTypes = {
    * @param {GridCallbackDetails} details Additional details for this callback.
    */
   onMenuOpen: _propTypes.default.func,
+  /**
+   * Callback fired when the pagination meta has changed.
+   * @param {GridPaginationMeta} paginationMeta Updated pagination meta.
+   */
+  onPaginationMetaChange: _propTypes.default.func,
   /**
    * Callback fired when the pagination model has changed.
    * @param {GridPaginationModel} model Updated pagination model.
@@ -593,6 +604,13 @@ DataGridRaw.propTypes = {
     value: _propTypes.default.number.isRequired
   })]).isRequired),
   pagination: _propTypes.default.oneOf([true]),
+  /**
+   * The extra information about the pagination state of the Data Grid.
+   * Only applicable with `paginationMode="server"`.
+   */
+  paginationMeta: _propTypes.default.shape({
+    hasNextPage: _propTypes.default.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.
@@ -628,6 +646,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.default.number,
   /**

package/node/components/GridPagination.js

@@ -7,9 +7,9 @@ Object.defineProperty(exports, "__esModule", {
 exports.GridPagination = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _styles = require("@mui/material/styles");
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _TablePagination = _interopRequireWildcard(require("@mui/material/TablePagination"));
-var _styles = require("@mui/material/styles");
 var _useGridSelector = require("../hooks/utils/useGridSelector");
 var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 var _useGridRootProps = require("../hooks/utils/useGridRootProps");
@@ -33,6 +33,31 @@ const GridPaginationRoot = (0, _styles.styled)(_TablePagination.default)(({
     }
   }
 }));
+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.
 
@@ -41,10 +66,32 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const paginationModel = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationModelSelector);
   const rowCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.gridPaginationRowCountSelector);
-  const lastPage = React.useMemo(() => {
-    const calculatedValue = Math.ceil(rowCount / (paginationModel.pageSize || 1)) - 1;
-    return Math.max(0, calculatedValue);
-  }, [rowCount, paginationModel.pageSize]);
+  const pageCount = (0, _useGridSelector.useGridSelector)(apiRef, _gridPaginationSelector.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);
@@ -70,16 +117,18 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
     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__*/(0, _jsxRuntime.jsx)(GridPaginationRoot, (0, _extends2.default)({
     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.
@@ -88,7 +137,9 @@ const GridPagination = exports.GridPagination = /*#__PURE__*/React.forwardRef(fu
     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/node/components/GridRow.js

@@ -101,6 +101,7 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
   const handleRef = (0, _utils.unstable_useForkRef)(ref, refProp);
   const rowNode = apiRef.current.getRowNode(rowId);
   const scrollbarWidth = dimensions.hasScrollY ? dimensions.scrollbarSize : 0;
+  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   const hasFocusCell = focusedColumnIndex !== undefined;
   const hasVirtualFocusCellLeft = hasFocusCell && focusedColumnIndex >= pinnedColumns.left.length && focusedColumnIndex < renderContext.firstColumnIndex;
   const hasVirtualFocusCellRight = hasFocusCell && focusedColumnIndex < visibleColumns.length - pinnedColumns.right.length && focusedColumnIndex >= renderContext.lastColumnIndex;
@@ -292,7 +293,8 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
       pinnedOffset: pinnedOffset,
       pinnedPosition: pinnedPosition,
       sectionIndex: indexInSection,
-      sectionLength: sectionLength
+      sectionLength: sectionLength,
+      gridHasFiller: gridHasFiller
     }, slotProps?.cell), column.field);
   };
 
@@ -372,6 +374,7 @@ process.env.NODE_ENV !== "production" ? GridRow.propTypes = {
     }).isRequired,
     hasScrollX: _propTypes.default.bool.isRequired,
     hasScrollY: _propTypes.default.bool.isRequired,
+    headerFilterHeight: _propTypes.default.number.isRequired,
     headerHeight: _propTypes.default.number.isRequired,
     headersTotalHeight: _propTypes.default.number.isRequired,
     isReady: _propTypes.default.bool.isRequired,

package/node/components/GridScrollArea.js

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

package/node/components/cell/GridCell.js

@@ -23,7 +23,7 @@ var _useGridParamsApi = require("../../hooks/features/rows/useGridParamsApi");
 var _cellBorderUtils = require("../../utils/cellBorderUtils");
 var _gridColumnsInterfaces = require("../../hooks/features/columns/gridColumnsInterfaces");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
+const _excluded = ["column", "rowId", "editCellState", "align", "children", "colIndex", "width", "className", "style", "gridHasScrollX", "colSpan", "disableDragEvents", "isNotVisible", "pinnedOffset", "pinnedPosition", "sectionIndex", "sectionLength", "gridHasFiller", "onClick", "onDoubleClick", "onMouseDown", "onMouseUp", "onMouseOver", "onKeyDown", "onKeyUp", "onDragEnter", "onDragOver"],
   _excluded2 = ["changeReason", "unstable_updateValueOnRender"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -101,6 +101,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
       pinnedPosition,
       sectionIndex,
       sectionLength,
+      gridHasFiller,
       onClick,
       onDoubleClick,
       onMouseDown,
@@ -171,7 +172,7 @@ const GridCell = /*#__PURE__*/React.forwardRef((props, ref) => {
   const isSelectionMode = rootProps.cellSelection ?? false;
   const position = gridPinnedColumnPositionLookup[pinnedPosition];
   const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(position, sectionIndex);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(position, sectionIndex, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = {
     align,
     showLeftBorder,
@@ -337,6 +338,7 @@ process.env.NODE_ENV !== "production" ? GridCell.propTypes = {
     isValidating: _propTypes.default.bool,
     value: _propTypes.default.any
   }),
+  gridHasFiller: _propTypes.default.bool.isRequired,
   isNotVisible: _propTypes.default.bool.isRequired,
   onClick: _propTypes.default.func,
   onDoubleClick: _propTypes.default.func,

package/node/components/columnHeaders/GridColumnGroupHeader.js

@@ -52,7 +52,8 @@ function GridColumnGroupHeader(props) {
     pinnedPosition,
     style,
     indexInSection,
-    sectionLength
+    sectionLength,
+    gridHasFiller
   } = props;
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
   const headerCellRef = React.useRef(null);
@@ -80,7 +81,7 @@ function GridColumnGroupHeader(props) {
     headerComponent = render(renderParams);
   }
   const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
     showLeftBorder,

package/node/components/columnHeaders/GridColumnHeaderItem.js

@@ -8,6 +8,7 @@ exports.GridColumnHeaderItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _utils = require("@mui/utils");
 var _fastMemo = require("../../utils/fastMemo");
 var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
@@ -52,6 +53,7 @@ function GridColumnHeaderItem(props) {
     colIndex,
     headerHeight,
     isResizing,
+    isLast,
     sortDirection,
     sortIndex,
     filterItemsCounter,
@@ -62,7 +64,8 @@ function GridColumnHeaderItem(props) {
     style,
     pinnedPosition,
     indexInSection,
-    sectionLength
+    sectionLength,
+    gridHasFiller
   } = props;
   const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
   const rootProps = (0, _useGridRootProps.useGridRootProps)();
@@ -77,7 +80,7 @@ function GridColumnHeaderItem(props) {
     headerComponent = colDef.renderHeader(apiRef.current.getColumnHeaderParams(colDef.field));
   }
   const showLeftBorder = (0, _cellBorderUtils.shouldCellShowLeftBorder)(pinnedPosition, indexInSection);
-  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder);
+  const showRightBorder = (0, _cellBorderUtils.shouldCellShowRightBorder)(pinnedPosition, indexInSection, sectionLength, rootProps.showCellVerticalBorder, gridHasFiller);
   const ownerState = (0, _extends2.default)({}, props, {
     classes: rootProps.classes,
     showRightBorder,
@@ -189,7 +192,7 @@ function GridColumnHeaderItem(props) {
     width: colDef.computedWidth,
     columnMenuIconButton: columnMenuIconButton,
     columnTitleIconButtons: columnTitleIconButtons,
-    headerClassName: headerClassName,
+    headerClassName: (0, _clsx.default)(headerClassName, isLast && _gridClasses.gridClasses['columnHeader--last']),
     label: label,
     resizable: !rootProps.disableColumnResize && !!colDef.resizable,
     "data-field": colDef.field,
@@ -209,10 +212,12 @@ process.env.NODE_ENV !== "production" ? GridColumnHeaderItem.propTypes = {
   columnMenuOpen: _propTypes.default.bool.isRequired,
   disableReorder: _propTypes.default.bool,
   filterItemsCounter: _propTypes.default.number,
+  gridHasFiller: _propTypes.default.bool.isRequired,
   hasFocus: _propTypes.default.bool,
   headerHeight: _propTypes.default.number.isRequired,
   indexInSection: _propTypes.default.number.isRequired,
   isDragging: _propTypes.default.bool.isRequired,
+  isLast: _propTypes.default.bool.isRequired,
   isResizing: _propTypes.default.bool.isRequired,
   pinnedPosition: _propTypes.default.oneOf(['left', 'right']),
   sectionLength: _propTypes.default.number.isRequired,

package/node/components/containers/GridRootStyles.js

@@ -158,8 +158,8 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
 }) => {
   const borderColor = getBorderColor(t);
   const radius = t.shape.borderRadius;
-  const containerBackground = t.vars ? t.vars.palette.background.default : t.palette.background.default;
-  const pinnedBackground = containerBackground;
+  const containerBackground = t.vars ? t.vars.palette.background.default : t.mixins.MuiDataGrid?.containerBackground ?? t.palette.background.default;
+  const pinnedBackground = t.mixins.MuiDataGrid?.pinnedBackground ?? containerBackground;
   const overlayBackground = t.vars ? `rgba(${t.vars.palette.background.defaultChannel} / ${t.vars.palette.action.disabledOpacity})` : (0, _styles.alpha)(t.palette.background.default, t.palette.action.disabledOpacity);
   const hoverOpacity = (t.vars || t).palette.action.hoverOpacity;
   const hoverColor = (t.vars || t).palette.action.hover;
@@ -281,7 +281,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     [`& .${_gridClasses.gridClasses.columnHeader}`]: {
       position: 'relative',
       display: 'flex',
-      alignItems: 'center',
+      alignItems: 'center'
+    },
+    [`& .${_gridClasses.gridClasses['columnHeader--last']}`]: {
       overflow: 'hidden'
     },
     [`& .${_gridClasses.gridClasses['columnHeader--sorted']} .${_gridClasses.gridClasses.iconButtonContainer}, & .${_gridClasses.gridClasses['columnHeader--filtered']} .${_gridClasses.gridClasses.iconButtonContainer}`]: {
@@ -457,7 +459,6 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
       userSelect: 'none'
     },
     [`& .${_gridClasses.gridClasses['row--dynamicHeight']} > .${_gridClasses.gridClasses.cell}`]: {
-      overflow: 'initial',
       whiteSpace: 'initial',
       lineHeight: 'inherit'
     },
@@ -639,6 +640,9 @@ const GridRootStyles = exports.GridRootStyles = (0, _styles.styled)('div', {
     },
     [`& .${_gridClasses.gridClasses.filler}`]: {
       flex: 1
+    },
+    [`& .${_gridClasses.gridClasses['filler--borderTop']}`]: {
+      borderTop: '1px solid var(--DataGrid-rowBorderColor)'
     }
   });
   return gridStyle;