@mui/x-data-grid 7.1.1 → 7.3.0

package/node/components/index.js

@@ -3,9 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  GridPagination: true
+};
+Object.defineProperty(exports, "GridPagination", {
+  enumerable: true,
+  get: function () {
+    return _GridPagination.GridPagination;
+  }
+});
 var _base = require("./base");
 Object.keys(_base).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _base[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -17,6 +27,7 @@ Object.keys(_base).forEach(function (key) {
 var _cell = require("./cell");
 Object.keys(_cell).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _cell[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -28,6 +39,7 @@ Object.keys(_cell).forEach(function (key) {
 var _containers = require("./containers");
 Object.keys(_containers).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _containers[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -39,6 +51,7 @@ Object.keys(_containers).forEach(function (key) {
 var _columnHeaders = require("./columnHeaders");
 Object.keys(_columnHeaders).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _columnHeaders[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -50,6 +63,7 @@ Object.keys(_columnHeaders).forEach(function (key) {
 var _columnSelection = require("./columnSelection");
 Object.keys(_columnSelection).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _columnSelection[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -61,6 +75,7 @@ Object.keys(_columnSelection).forEach(function (key) {
 var _icons = require("../material/icons");
 Object.keys(_icons).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _icons[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -72,6 +87,7 @@ Object.keys(_icons).forEach(function (key) {
 var _menu = require("./menu");
 Object.keys(_menu).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _menu[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -83,6 +99,7 @@ Object.keys(_menu).forEach(function (key) {
 var _panel = require("./panel");
 Object.keys(_panel).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _panel[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -94,6 +111,7 @@ Object.keys(_panel).forEach(function (key) {
 var _columnsManagement = require("./columnsManagement");
 Object.keys(_columnsManagement).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _columnsManagement[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -105,6 +123,7 @@ Object.keys(_columnsManagement).forEach(function (key) {
 var _toolbar = require("./toolbar");
 Object.keys(_toolbar).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _toolbar[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -116,6 +135,7 @@ Object.keys(_toolbar).forEach(function (key) {
 var _GridApiContext = require("./GridApiContext");
 Object.keys(_GridApiContext).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridApiContext[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -127,6 +147,7 @@ Object.keys(_GridApiContext).forEach(function (key) {
 var _GridFooter = require("./GridFooter");
 Object.keys(_GridFooter).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridFooter[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -138,6 +159,7 @@ Object.keys(_GridFooter).forEach(function (key) {
 var _GridHeader = require("./GridHeader");
 Object.keys(_GridHeader).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridHeader[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -149,6 +171,7 @@ Object.keys(_GridHeader).forEach(function (key) {
 var _GridLoadingOverlay = require("./GridLoadingOverlay");
 Object.keys(_GridLoadingOverlay).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridLoadingOverlay[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -160,6 +183,7 @@ Object.keys(_GridLoadingOverlay).forEach(function (key) {
 var _GridNoRowsOverlay = require("./GridNoRowsOverlay");
 Object.keys(_GridNoRowsOverlay).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridNoRowsOverlay[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -169,19 +193,10 @@ Object.keys(_GridNoRowsOverlay).forEach(function (key) {
   });
 });
 var _GridPagination = require("./GridPagination");
-Object.keys(_GridPagination).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _GridPagination[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function () {
-      return _GridPagination[key];
-    }
-  });
-});
 var _GridRowCount = require("./GridRowCount");
 Object.keys(_GridRowCount).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridRowCount[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -193,6 +208,7 @@ Object.keys(_GridRowCount).forEach(function (key) {
 var _GridRow = require("./GridRow");
 Object.keys(_GridRow).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridRow[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
@@ -204,6 +220,7 @@ Object.keys(_GridRow).forEach(function (key) {
 var _GridSelectedRowCount = require("./GridSelectedRowCount");
 Object.keys(_GridSelectedRowCount).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
   if (key in exports && exports[key] === _GridSelectedRowCount[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,

package/node/components/panel/GridPanel.js

@@ -42,7 +42,9 @@ const GridPaperRoot = (0, _styles.styled)(_Paper.default, {
   backgroundColor: (theme.vars || theme).palette.background.paper,
   minWidth: 300,
   maxHeight: 450,
-  display: 'flex'
+  display: 'flex',
+  maxWidth: `calc(100vw - ${theme.spacing(0.5)})`,
+  overflow: 'auto'
 }));
 const GridPanel = exports.GridPanel = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {

package/node/components/panel/filterPanel/GridFilterInputDate.js

@@ -21,6 +21,9 @@ function convertFilterItemValueToInputValue(itemValue, inputType) {
     return '';
   }
   const dateCopy = new Date(itemValue);
+  if (Number.isNaN(dateCopy.getTime())) {
+    return '';
+  }
   // The date picker expects the date to be in the local timezone.
   // But .toISOString() converts it to UTC with zero offset.
   // So we need to subtract the timezone offset.
@@ -57,8 +60,9 @@ function GridFilterInputDate(props) {
     setFilterValueState(value);
     setIsApplying(true);
     filterTimeout.start(rootProps.filterDebounceMs, () => {
+      const date = new Date(value);
       applyValue((0, _extends2.default)({}, item, {
-        value: new Date(value)
+        value: Number.isNaN(date.getTime()) ? undefined : date
       }));
       setIsApplying(false);
     });

package/node/constants/gridClasses.js

@@ -9,4 +9,4 @@ var _utils = require("@mui/utils");
 function getDataGridUtilityClass(slot) {
   return (0, _utils.unstable_generateUtilityClass)('MuiDataGrid', slot);
 }
-const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+const gridClasses = exports.gridClasses = (0, _utils.unstable_generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'aggregationColumnHeaderLabel', 'autoHeight', 'autosizing', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--flex', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--rangeTop', 'cell--rangeBottom', 'cell--rangeLeft', 'cell--rangeRight', 'cell--pinnedLeft', 'cell--pinnedRight', 'cell--selectionMode', 'cell', 'cellCheckbox', 'cellEmpty', 'cellSkeleton', 'cellOffsetLeft', 'checkboxInput', 'columnHeader', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader--pinnedLeft', 'columnHeader--pinnedRight', 'columnHeader--last', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeaders', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsManagement', 'columnsManagementRow', 'columnsManagementHeader', 'columnsManagementFooter', 'container--top', 'container--bottom', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filler', 'filler--borderTop', 'filler--pinnedLeft', 'filler--pinnedRight', 'filterForm', 'filterFormDeleteIcon', 'filterFormLogicOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'headerFilterRow', 'iconButtonContainer', 'iconSeparator', 'main', 'main--hasPinnedRight', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'overlayWrapper', 'overlayWrapperInner', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'root--disableUserSelection', 'row', 'row--editable', 'row--editing', 'row--firstVisible', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'scrollbar', 'scrollbar--vertical', 'scrollbar--horizontal', 'scrollbarFiller', 'scrollbarFiller--header', 'scrollbarFiller--borderTop', 'scrollbarFiller--pinnedRight', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'withVerticalBorder', 'withBorderColor', 'cell--withRightBorder', 'cell--withLeftBorder', 'columnHeader--withRightBorder', 'columnHeader--withLeftBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/node/hooks/core/useGridInitialization.js

@@ -20,7 +20,7 @@ const useGridInitialization = (inputApiRef, props) => {
   (0, _useGridRefs.useGridRefs)(privateApiRef);
   (0, _useGridTheme.useGridTheme)(privateApiRef);
   (0, _useGridLoggerFactory.useGridLoggerFactory)(privateApiRef, props);
-  (0, _useGridStateInitialization.useGridStateInitialization)(privateApiRef, props);
+  (0, _useGridStateInitialization.useGridStateInitialization)(privateApiRef);
   (0, _pipeProcessing.useGridPipeProcessing)(privateApiRef);
   (0, _strategyProcessing.useGridStrategyProcessing)(privateApiRef);
   (0, _useGridLocaleText.useGridLocaleText)(privateApiRef, props);

package/node/hooks/core/useGridStateInitialization.js

@@ -7,12 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridStateInitialization = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
-var _useGridApiEventHandler = require("../utils/useGridApiEventHandler");
 var _utils = require("../utils");
 var _utils2 = require("../../utils/utils");
 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; }
-const useGridStateInitialization = (apiRef, props) => {
+const useGridStateInitialization = apiRef => {
   const controlStateMapRef = React.useRef({});
   const [, rawForceUpdate] = React.useState();
   const registerControlState = React.useCallback(controlStateItem => {
@@ -71,13 +70,10 @@ const useGridStateInitialization = (apiRef, props) => {
       const controlState = controlStateMapRef.current[stateId];
       const model = controlState.stateSelector(newState, apiRef.current.instanceId);
       if (controlState.propOnChange && hasPropChanged) {
-        const details = props.signature === _useGridApiEventHandler.GridSignature.DataGridPro ? {
-          api: apiRef.current,
-          reason
-        } : {
-          reason
-        };
-        controlState.propOnChange(model, details);
+        controlState.propOnChange(model, {
+          reason,
+          api: apiRef.current
+        });
       }
       if (!ignoreSetState) {
         apiRef.current.publishEvent(controlState.changeEvent, model, {
@@ -86,7 +82,7 @@ const useGridStateInitialization = (apiRef, props) => {
       }
     }
     return !ignoreSetState;
-  }, [apiRef, props.signature]);
+  }, [apiRef]);
   const updateControlState = React.useCallback((key, state, reason) => {
     return apiRef.current.setState(previousState => {
       return (0, _extends2.default)({}, previousState, {

package/node/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.useGridColumnHeaders = exports.GridColumnHeaderRow = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
 var _styles = require("@mui/material/styles");
 var _utils = require("../../utils");
 var _useGridRootProps = require("../../utils/useGridRootProps");
@@ -30,8 +31,7 @@ const GridColumnHeaderRow = exports.GridColumnHeaderRow = (0, _styles.styled)('d
   slot: 'ColumnHeaderRow',
   overridesResolver: (_, styles) => styles.columnHeaderRow
 })({
-  display: 'flex',
-  height: 'var(--DataGrid-headerHeight)'
+  display: 'flex'
 });
 const useGridColumnHeaders = props => {
   const {
@@ -59,6 +59,7 @@ const useGridColumnHeaders = props => {
   const renderContext = (0, _utils.useGridSelector)(apiRef, _virtualization.gridRenderContextColumnsSelector);
   const pinnedColumns = (0, _utils.useGridSelector)(apiRef, _columns.gridVisiblePinnedColumnDefinitionsSelector);
   const offsetLeft = (0, _useGridVirtualScroller.computeOffsetLeft)(columnPositions, renderContext, theme.direction, pinnedColumns.left.length);
+  const gridHasFiller = dimensions.columnsTotalWidth < dimensions.viewportOuterSize.width;
   React.useEffect(() => {
     apiRef.current.columnHeadersContainerRef.current.scrollLeft = 0;
   }, [apiRef]);
@@ -112,7 +113,7 @@ const useGridColumnHeaders = props => {
         }
       }), children, isNotPinned && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         role: "presentation",
-        className: _gridClasses.gridClasses.filler
+        className: (0, _clsx.default)(_gridClasses.gridClasses.filler, borderTop && _gridClasses.gridClasses['filler--borderTop'])
       }), hasScrollbarFiller && /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridScrollbarFillerCell.GridScrollbarFillerCell, {
         header: true,
         borderTop: borderTop,
@@ -168,12 +169,14 @@ const useGridColumnHeaders = props => {
         colDef: colDef,
         colIndex: columnIndex,
         isResizing: resizeCol === colDef.field,
+        isLast: columnIndex === columnPositions.length - 1,
         hasFocus: hasFocus,
         tabIndex: tabIndex,
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: i,
-        sectionLength: renderedColumns.length
+        sectionLength: renderedColumns.length,
+        gridHasFiller: gridHasFiller
       }, other), colDef.field));
     }
     return getFillers(params, columns, 0);
@@ -283,7 +286,8 @@ const useGridColumnHeaders = props => {
         pinnedPosition: pinnedPosition,
         style: style,
         indexInSection: indexInSection,
-        sectionLength: renderedColumns.length
+        sectionLength: renderedColumns.length,
+        gridHasFiller: gridHasFiller
       }, index);
     });
     return getFillers(params, children, leftOverflow);

package/node/hooks/features/columnResize/useGridColumnResize.js

@@ -8,6 +8,7 @@ exports.useGridColumnResize = exports.columnResizeStateInitializer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _utils = require("@mui/utils");
+var _useLazyRef = _interopRequireDefault(require("@mui/utils/useLazyRef"));
 var _styles = require("@mui/material/styles");
 var _domUtils = require("../../../utils/domUtils");
 var _gridColumnResizeApi = require("./gridColumnResizeApi");
@@ -182,26 +183,34 @@ const columnResizeStateInitializer = state => (0, _extends2.default)({}, state,
     resizingColumnField: ''
   }
 });
+exports.columnResizeStateInitializer = columnResizeStateInitializer;
+function createResizeRefs() {
+  return {
+    colDef: undefined,
+    initialColWidth: 0,
+    initialTotalWidth: 0,
+    previousMouseClickEvent: undefined,
+    columnHeaderElement: undefined,
+    headerFilterElement: undefined,
+    groupHeaderElements: [],
+    cellElements: [],
+    leftPinnedCellsAfter: [],
+    rightPinnedCellsBefore: [],
+    fillerLeft: undefined,
+    fillerRight: undefined,
+    leftPinnedHeadersAfter: [],
+    rightPinnedHeadersBefore: []
+  };
+}
+
 /**
  * @requires useGridColumns (method, event)
  * TODO: improve experience for last column
  */
-exports.columnResizeStateInitializer = columnResizeStateInitializer;
 const useGridColumnResize = (apiRef, props) => {
   const theme = (0, _styles.useTheme)();
   const logger = (0, _utils2.useGridLogger)(apiRef, 'useGridColumnResize');
-  const colDefRef = React.useRef();
-  const previousMouseClickEvent = React.useRef();
-  const columnHeaderElementRef = React.useRef();
-  const headerFilterElementRef = React.useRef();
-  const groupHeaderElementsRef = React.useRef([]);
-  const cellElementsRef = React.useRef([]);
-  const leftPinnedCellsAfterRef = React.useRef([]);
-  const rightPinnedCellsBeforeRef = React.useRef([]);
-  const fillerLeftRef = React.useRef();
-  const fillerRightRef = React.useRef();
-  const leftPinnedHeadersAfterRef = React.useRef([]);
-  const rightPinnedHeadersBeforeRef = React.useRef([]);
+  const refs = (0, _useLazyRef.default)(createResizeRefs).current;
 
   // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
@@ -211,22 +220,25 @@ const useGridColumnResize = (apiRef, props) => {
   const stopResizeEventTimeout = (0, _useTimeout.useTimeout)();
   const touchId = React.useRef();
   const updateWidth = newWidth => {
-    logger.debug(`Updating width to ${newWidth} for col ${colDefRef.current.field}`);
-    const prevWidth = columnHeaderElementRef.current.offsetWidth;
+    logger.debug(`Updating width to ${newWidth} for col ${refs.colDef.field}`);
+    const prevWidth = refs.columnHeaderElement.offsetWidth;
     const widthDiff = newWidth - prevWidth;
-    colDefRef.current.computedWidth = newWidth;
-    colDefRef.current.width = newWidth;
-    colDefRef.current.flex = 0;
-    columnHeaderElementRef.current.style.width = `${newWidth}px`;
-    columnHeaderElementRef.current.style.minWidth = `${newWidth}px`;
-    columnHeaderElementRef.current.style.maxWidth = `${newWidth}px`;
-    const headerFilterElement = headerFilterElementRef.current;
+    const columnWidthDiff = newWidth - refs.initialColWidth;
+    const newTotalWidth = refs.initialTotalWidth + columnWidthDiff;
+    apiRef.current.rootElementRef?.current?.style.setProperty('--DataGrid-rowWidth', `${newTotalWidth}px`);
+    refs.colDef.computedWidth = newWidth;
+    refs.colDef.width = newWidth;
+    refs.colDef.flex = 0;
+    refs.columnHeaderElement.style.width = `${newWidth}px`;
+    refs.columnHeaderElement.style.minWidth = `${newWidth}px`;
+    refs.columnHeaderElement.style.maxWidth = `${newWidth}px`;
+    const headerFilterElement = refs.headerFilterElement;
     if (headerFilterElement) {
       headerFilterElement.style.width = `${newWidth}px`;
       headerFilterElement.style.minWidth = `${newWidth}px`;
       headerFilterElement.style.maxWidth = `${newWidth}px`;
     }
-    groupHeaderElementsRef.current.forEach(element => {
+    refs.groupHeaderElements.forEach(element => {
       const div = element;
       let finalWidth;
       if (div.getAttribute('aria-colspan') === '1') {
@@ -240,7 +252,7 @@ const useGridColumnResize = (apiRef, props) => {
       div.style.minWidth = finalWidth;
       div.style.maxWidth = finalWidth;
     });
-    cellElementsRef.current.forEach(element => {
+    refs.cellElements.forEach(element => {
       const div = element;
       let finalWidth;
       if (div.getAttribute('aria-colspan') === '1') {
@@ -252,22 +264,22 @@ const useGridColumnResize = (apiRef, props) => {
       }
       div.style.setProperty('--width', finalWidth);
     });
-    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, colDefRef.current.field);
+    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
     if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT) {
-      updateProperty(fillerLeftRef.current, 'width', widthDiff);
-      leftPinnedCellsAfterRef.current.forEach(cell => {
+      updateProperty(refs.fillerLeft, 'width', widthDiff);
+      refs.leftPinnedCellsAfter.forEach(cell => {
         updateProperty(cell, 'left', widthDiff);
       });
-      leftPinnedHeadersAfterRef.current.forEach(header => {
+      refs.leftPinnedHeadersAfter.forEach(header => {
         updateProperty(header, 'left', widthDiff);
       });
     }
     if (pinnedPosition === _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT) {
-      updateProperty(fillerRightRef.current, 'width', widthDiff);
-      rightPinnedCellsBeforeRef.current.forEach(cell => {
+      updateProperty(refs.fillerRight, 'width', widthDiff);
+      refs.rightPinnedCellsBefore.forEach(cell => {
         updateProperty(cell, 'right', widthDiff);
       });
-      rightPinnedHeadersBeforeRef.current.forEach(header => {
+      refs.rightPinnedHeadersBefore.forEach(header => {
         updateProperty(header, 'right', widthDiff);
       });
     }
@@ -277,21 +289,21 @@ const useGridColumnResize = (apiRef, props) => {
     stopListening();
 
     // Prevent double-clicks from being interpreted as two separate clicks
-    if (previousMouseClickEvent.current) {
-      const prevEvent = previousMouseClickEvent.current;
+    if (refs.previousMouseClickEvent) {
+      const prevEvent = refs.previousMouseClickEvent;
       const prevTimeStamp = prevEvent.timeStamp;
       const prevClientX = prevEvent.clientX;
       const prevClientY = prevEvent.clientY;
 
       // Check if the current event is part of a double-click
       if (nativeEvent.timeStamp - prevTimeStamp < 300 && nativeEvent.clientX === prevClientX && nativeEvent.clientY === prevClientY) {
-        previousMouseClickEvent.current = undefined;
+        refs.previousMouseClickEvent = undefined;
         return;
       }
     }
-    if (colDefRef.current) {
-      apiRef.current.setColumnWidth(colDefRef.current.field, colDefRef.current.width);
-      logger.debug(`Updating col ${colDefRef.current.field} with new width: ${colDefRef.current.width}`);
+    if (refs.colDef) {
+      apiRef.current.setColumnWidth(refs.colDef.field, refs.colDef.width);
+      logger.debug(`Updating col ${refs.colDef.field} with new width: ${refs.colDef.width}`);
     }
     stopResizeEventTimeout.start(0, () => {
       apiRef.current.publishEvent('columnResizeStop', null, nativeEvent);
@@ -299,23 +311,25 @@ const useGridColumnResize = (apiRef, props) => {
   };
   const storeReferences = (colDef, separator, xStart) => {
     const root = apiRef.current.rootElementRef.current;
-    colDefRef.current = colDef;
-    columnHeaderElementRef.current = (0, _domUtils.findHeaderElementFromField)(apiRef.current.columnHeadersContainerRef.current, colDef.field);
+    refs.initialColWidth = colDef.computedWidth;
+    refs.initialTotalWidth = apiRef.current.getRootDimensions().rowWidth;
+    refs.colDef = colDef;
+    refs.columnHeaderElement = (0, _domUtils.findHeaderElementFromField)(apiRef.current.columnHeadersContainerRef.current, colDef.field);
     const headerFilterElement = root.querySelector(`.${_gridClasses.gridClasses.headerFilterRow} [data-field="${colDef.field}"]`);
     if (headerFilterElement) {
-      headerFilterElementRef.current = headerFilterElement;
+      refs.headerFilterElement = headerFilterElement;
     }
-    groupHeaderElementsRef.current = (0, _domUtils.findGroupHeaderElementsFromField)(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
-    cellElementsRef.current = (0, _domUtils.findGridCellElementsFromCol)(columnHeaderElementRef.current, apiRef.current);
-    fillerLeftRef.current = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedLeft');
-    fillerRightRef.current = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedRight');
-    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, colDefRef.current.field);
-    leftPinnedCellsAfterRef.current = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedCellsAfterCol)(apiRef.current, columnHeaderElementRef.current);
-    rightPinnedCellsBeforeRef.current = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedCellsBeforeCol)(apiRef.current, columnHeaderElementRef.current);
-    leftPinnedHeadersAfterRef.current = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedHeadersAfterCol)(apiRef.current, columnHeaderElementRef.current);
-    rightPinnedHeadersBeforeRef.current = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedHeadersBeforeCol)(apiRef.current, columnHeaderElementRef.current);
+    refs.groupHeaderElements = (0, _domUtils.findGroupHeaderElementsFromField)(apiRef.current.columnHeadersContainerRef?.current, colDef.field);
+    refs.cellElements = (0, _domUtils.findGridCellElementsFromCol)(refs.columnHeaderElement, apiRef.current);
+    refs.fillerLeft = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedLeft');
+    refs.fillerRight = (0, _domUtils.findGridElement)(apiRef.current, 'filler--pinnedRight');
+    const pinnedPosition = apiRef.current.unstable_applyPipeProcessors('isColumnPinned', false, refs.colDef.field);
+    refs.leftPinnedCellsAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedCellsAfterCol)(apiRef.current, refs.columnHeaderElement);
+    refs.rightPinnedCellsBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedCellsBeforeCol)(apiRef.current, refs.columnHeaderElement);
+    refs.leftPinnedHeadersAfter = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.LEFT ? [] : (0, _domUtils.findLeftPinnedHeadersAfterCol)(apiRef.current, refs.columnHeaderElement);
+    refs.rightPinnedHeadersBefore = pinnedPosition !== _gridColumnsInterfaces.GridPinnedColumnPosition.RIGHT ? [] : (0, _domUtils.findRightPinnedHeadersBeforeCol)(apiRef.current, refs.columnHeaderElement);
     resizeDirection.current = getResizeDirection(separator, theme.direction);
-    initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
+    initialOffsetToSeparator.current = computeOffsetToSeparator(xStart, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
   };
   const handleResizeMouseUp = (0, _utils.unstable_useEventCallback)(finishResize);
   const handleResizeMouseMove = (0, _utils.unstable_useEventCallback)(nativeEvent => {
@@ -324,12 +338,12 @@ const useGridColumnResize = (apiRef, props) => {
       handleResizeMouseUp(nativeEvent);
       return;
     }
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
-    newWidth = (0, _utils3.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, nativeEvent.clientX, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
+    newWidth = (0, _utils3.clamp)(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
     updateWidth(newWidth);
     const params = {
-      element: columnHeaderElementRef.current,
-      colDef: colDefRef.current,
+      element: refs.columnHeaderElement,
+      colDef: refs.colDef,
       width: newWidth
     };
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
@@ -352,12 +366,12 @@ const useGridColumnResize = (apiRef, props) => {
       handleTouchEnd(nativeEvent);
       return;
     }
-    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, columnHeaderElementRef.current.getBoundingClientRect(), resizeDirection.current);
-    newWidth = (0, _utils3.clamp)(newWidth, colDefRef.current.minWidth, colDefRef.current.maxWidth);
+    let newWidth = computeNewWidth(initialOffsetToSeparator.current, finger.x, refs.columnHeaderElement.getBoundingClientRect(), resizeDirection.current);
+    newWidth = (0, _utils3.clamp)(newWidth, refs.colDef.minWidth, refs.colDef.maxWidth);
     updateWidth(newWidth);
     const params = {
-      element: columnHeaderElementRef.current,
-      colDef: colDefRef.current,
+      element: refs.columnHeaderElement,
+      colDef: refs.colDef,
       width: newWidth
     };
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
@@ -401,10 +415,10 @@ const useGridColumnResize = (apiRef, props) => {
     setTimeout(() => {
       doc.removeEventListener('click', preventClick, true);
     }, 100);
-    if (columnHeaderElementRef.current) {
-      columnHeaderElementRef.current.style.pointerEvents = 'unset';
+    if (refs.columnHeaderElement) {
+      refs.columnHeaderElement.style.pointerEvents = 'unset';
     }
-  }, [apiRef, columnHeaderElementRef, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
+  }, [apiRef, refs, handleResizeMouseMove, handleResizeMouseUp, handleTouchMove, handleTouchEnd]);
   const handleResizeStart = React.useCallback(({
     field
   }) => {
@@ -445,7 +459,7 @@ const useGridColumnResize = (apiRef, props) => {
     storeReferences(colDef, event.currentTarget, event.clientX);
     const doc = (0, _utils.unstable_ownerDocument)(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
-    previousMouseClickEvent.current = event.nativeEvent;
+    refs.previousMouseClickEvent = event.nativeEvent;
     doc.addEventListener('mousemove', handleResizeMouseMove);
     doc.addEventListener('mouseup', handleResizeMouseUp);
 

package/node/hooks/features/columns/gridColumnsUtils.js

@@ -319,10 +319,11 @@ function getFirstNonSpannedColumnToRender({
   }
   return firstNonSpannedColumnToRender;
 }
-function getTotalHeaderHeight(apiRef, headerHeight) {
+function getTotalHeaderHeight(apiRef, props) {
   const densityFactor = (0, _densitySelector.gridDensityFactorSelector)(apiRef);
   const maxDepth = (0, _gridColumnGroupsSelector.gridColumnGroupsHeaderMaxDepthSelector)(apiRef);
   const isHeaderFilteringEnabled = (0, _gridHeaderFilteringSelectors.gridHeaderFilteringEnabledSelector)(apiRef);
-  const multiplicationFactor = isHeaderFilteringEnabled ? 2 : 1;
-  return Math.floor(headerHeight * densityFactor) * ((maxDepth ?? 0) + multiplicationFactor);
+  const columnHeadersHeight = Math.floor(props.columnHeaderHeight * densityFactor);
+  const filterHeadersHeight = isHeaderFilteringEnabled ? Math.floor((props.headerFilterHeight ?? props.columnHeaderHeight) * densityFactor) : 0;
+  return columnHeadersHeight * (1 + (maxDepth ?? 0)) + filterHeadersHeight;
 }