@mui/x-data-grid 5.15.2 → 5.17.0

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

@@ -15,6 +15,8 @@ var ReactDOM = _interopRequireWildcard(require("react-dom"));
 
 var _utils = require("@mui/material/utils");
 
+var _styles = require("@mui/material/styles");
+
 var _reselect = require("reselect");
 
 var _useGridApiContext = require("../../utils/useGridApiContext");
@@ -45,12 +47,26 @@ var _useGridVisibleRows = require("../../utils/useGridVisibleRows");
 
 var _useGridVirtualScroller = require("../virtualization/useGridVirtualScroller");
 
+var _GridColumnGroupHeader = require("../../../components/columnHeaders/GridColumnGroupHeader");
+
+var _utils2 = require("../../../utils/utils");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+// TODO: add the possibility to switch this value if needed for customization
+const MERGE_EMPTY_CELLS = true;
+const GridColumnHeaderRow = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderRow',
+  overridesResolver: (props, styles) => styles.columnHeaderRow
+})(() => ({
+  display: 'flex'
+}));
+
 function isUIEvent(event) {
   return !!event.target;
 }
@@ -69,6 +85,8 @@ const useGridColumnHeaders = props => {
   const cellTabIndexState = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridTabIndexCellSelector);
   const columnHeaderFocus = (0, _useGridSelector.useGridSelector)(apiRef, _gridFocusStateSelector.gridFocusColumnHeaderSelector);
   const headerHeight = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityHeaderHeightSelector);
+  const headerGroupingMaxDepth = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityHeaderGroupingMaxDepthSelector);
+  const totalHeaderHeight = (0, _useGridSelector.useGridSelector)(apiRef, _densitySelector.gridDensityTotalHeaderHeightSelector);
   const filterColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridFilterSelector.gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = (0, _useGridSelector.useGridSelector)(apiRef, _gridSortingSelector.gridSortColumnLookupSelector);
   const columnMenuState = (0, _useGridSelector.useGridSelector)(apiRef, _columnMenuSelector.gridColumnMenuSelector);
@@ -164,9 +182,9 @@ const useGridColumnHeaders = props => {
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnResizeStop', handleColumnResizeStop);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
   (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
-  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsScroll', handleScroll);
+  (0, _useGridApiEventHandler.useGridApiEventHandler)(apiRef, 'rowsScroll', handleScroll); // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
 
-  const getColumns = (params, other = {}) => {
+  const getColumnsToRender = params => {
     const {
       renderContext: nextRenderContext = renderContext,
       minFirstColumn = minColumnIndex,
@@ -177,7 +195,6 @@ const useGridColumnHeaders = props => {
       return null;
     }
 
-    const columns = [];
     const [firstRowToRender, lastRowToRender] = (0, _useGridVirtualScroller.getRenderableIndexes)({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
@@ -196,6 +213,27 @@ const useGridColumnHeaders = props => {
     });
     const lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     const renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+    return {
+      renderedColumns,
+      firstColumnToRender,
+      lastColumnToRender,
+      minFirstColumn,
+      maxLastColumn
+    };
+  };
+
+  const getColumnHeaders = (params, other = {}) => {
+    const columnsToRender = getColumnsToRender(params);
+
+    if (columnsToRender == null) {
+      return null;
+    }
+
+    const {
+      renderedColumns,
+      firstColumnToRender
+    } = columnsToRender;
+    const columns = [];
 
     for (let i = 0; i < renderedColumns.length; i += 1) {
       const column = renderedColumns[i];
@@ -220,25 +258,186 @@ const useGridColumnHeaders = props => {
       }, other), column.field));
     }
 
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderRow, {
+      role: "row",
+      "aria-rowindex": headerGroupingMaxDepth + 1,
+      children: columns
+    });
+  };
+
+  const getParents = (path = [], depth) => path.slice(0, depth + 1);
+
+  const getColumnGroupHeaders = params => {
+    if (headerGroupingMaxDepth === 0) {
+      return null;
+    }
+
+    const columnsToRender = getColumnsToRender(params);
+
+    if (columnsToRender == null) {
+      return null;
+    }
+
+    const {
+      renderedColumns,
+      firstColumnToRender,
+      lastColumnToRender,
+      maxLastColumn
+    } = columnsToRender;
+    const columns = [];
+    const headerToRender = [];
+
+    for (let depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
+      var _visibleColumns$first, _visibleColumns$first2, _visibleColumns$first3;
+
+      // Initialize the header line with a grouping item containing all the columns on the left of the virtualization which are in the same group as the first group to render
+      const initialHeader = [];
+      let leftOverflow = 0;
+      let columnIndex = firstColumnToRender - 1;
+      const firstColumnToRenderGroup = (_visibleColumns$first = visibleColumns[firstColumnToRender]) == null ? void 0 : (_visibleColumns$first2 = _visibleColumns$first.groupPath) == null ? void 0 : _visibleColumns$first2[depth]; // The array of parent is used to manage empty grouping cell
+      // When two empty grouping cell are next to each other, we merge them if the belong to the same group.
+
+      const firstColumnToRenderGroupParents = getParents((_visibleColumns$first3 = visibleColumns[firstColumnToRender]) == null ? void 0 : _visibleColumns$first3.groupPath, depth);
+
+      while (firstColumnToRenderGroup !== null && columnIndex >= minColumnIndex && (_visibleColumns$colum = visibleColumns[columnIndex]) != null && _visibleColumns$colum.groupPath && (0, _utils2.isDeepEqual)(getParents((_visibleColumns$colum2 = visibleColumns[columnIndex]) == null ? void 0 : _visibleColumns$colum2.groupPath, depth), firstColumnToRenderGroupParents)) {
+        var _visibleColumns$colum, _visibleColumns$colum2, _column$computedWidth;
+
+        const column = visibleColumns[columnIndex];
+        leftOverflow += (_column$computedWidth = column.computedWidth) != null ? _column$computedWidth : 0;
+
+        if (initialHeader.length === 0) {
+          var _column$computedWidth2;
+
+          initialHeader.push({
+            width: (_column$computedWidth2 = column.computedWidth) != null ? _column$computedWidth2 : 0,
+            fields: [column.field],
+            groupId: firstColumnToRenderGroup,
+            groupParents: firstColumnToRenderGroupParents,
+            colIndex: columnIndex
+          });
+        } else {
+          var _column$computedWidth3;
+
+          initialHeader[0].width += (_column$computedWidth3 = column.computedWidth) != null ? _column$computedWidth3 : 0;
+          initialHeader[0].fields.push(column.field);
+          initialHeader[0].colIndex = columnIndex;
+        }
+
+        columnIndex -= 1;
+      }
+
+      const depthInfo = renderedColumns.reduce((aggregated, column, i) => {
+        var _column$computedWidth7;
+
+        const lastItem = aggregated[aggregated.length - 1];
+
+        if (column.groupPath && column.groupPath.length > depth) {
+          var _column$computedWidth5;
+
+          if (lastItem && lastItem.groupId === column.groupPath[depth]) {
+            var _column$computedWidth4;
+
+            // Merge with the previous columns
+            return [...aggregated.slice(0, aggregated.length - 1), (0, _extends2.default)({}, lastItem, {
+              width: lastItem.width + ((_column$computedWidth4 = column.computedWidth) != null ? _column$computedWidth4 : 0),
+              fields: [...lastItem.fields, column.field]
+            })];
+          } // Create a new grouping
+
+
+          return [...aggregated, {
+            groupId: column.groupPath[depth],
+            groupParents: getParents(column.groupPath, depth),
+            width: (_column$computedWidth5 = column.computedWidth) != null ? _column$computedWidth5 : 0,
+            fields: [column.field],
+            colIndex: firstColumnToRender + i
+          }];
+        }
+
+        if (MERGE_EMPTY_CELLS && lastItem && lastItem.groupId === null && (0, _utils2.isDeepEqual)(getParents(column.groupPath, depth), lastItem.groupParents)) {
+          var _column$computedWidth6;
+
+          // We merge with previous column
+          return [...aggregated.slice(0, aggregated.length - 1), (0, _extends2.default)({}, lastItem, {
+            width: lastItem.width + ((_column$computedWidth6 = column.computedWidth) != null ? _column$computedWidth6 : 0),
+            fields: [...lastItem.fields, column.field]
+          })];
+        } // We create new empty cell
+
+
+        return [...aggregated, {
+          groupId: null,
+          groupParents: getParents(column.groupPath, depth),
+          width: (_column$computedWidth7 = column.computedWidth) != null ? _column$computedWidth7 : 0,
+          fields: [column.field],
+          colIndex: firstColumnToRender + i
+        }];
+      }, initialHeader);
+      columnIndex = lastColumnToRender;
+      const lastColumnToRenderGroup = depthInfo[depthInfo.length - 1].groupId;
+
+      while (lastColumnToRenderGroup !== null && columnIndex < maxLastColumn && (_visibleColumns$colum3 = visibleColumns[columnIndex]) != null && _visibleColumns$colum3.groupPath && ((_visibleColumns$colum4 = visibleColumns[columnIndex]) == null ? void 0 : (_visibleColumns$colum5 = _visibleColumns$colum4.groupPath) == null ? void 0 : _visibleColumns$colum5[depth]) === lastColumnToRenderGroup) {
+        var _visibleColumns$colum3, _visibleColumns$colum4, _visibleColumns$colum5, _column$computedWidth8;
+
+        const column = visibleColumns[columnIndex];
+        depthInfo[depthInfo.length - 1].width += (_column$computedWidth8 = column.computedWidth) != null ? _column$computedWidth8 : 0;
+        depthInfo[depthInfo.length - 1].fields.push(column.field);
+        columnIndex += 1;
+      }
+
+      headerToRender.push({
+        leftOverflow,
+        elements: [...depthInfo]
+      });
+    }
+
+    headerToRender.forEach((depthInfo, depthIndex) => {
+      columns.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(GridColumnHeaderRow, {
+        style: {
+          height: `${headerHeight}px`,
+          transform: `translateX(-${depthInfo.leftOverflow}px)`
+        },
+        role: "row",
+        "aria-rowindex": depthIndex + 1,
+        children: depthInfo.elements.map(({
+          groupId,
+          width,
+          fields,
+          colIndex
+        }, groupIndex) => {
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridColumnGroupHeader.GridColumnGroupHeader, {
+            groupId: groupId,
+            width: width,
+            fields: fields,
+            colIndex: colIndex,
+            depth: depthIndex,
+            isLastColumn: colIndex === visibleColumns.length - fields.length,
+            extendRowFullWidth: !rootProps.disableExtendRowFullWidth,
+            maxDepth: headerToRender.length,
+            height: headerHeight
+          }, groupIndex);
+        })
+      }, depthIndex));
+    });
     return columns;
   };
 
   const rootStyle = {
-    minHeight: headerHeight,
-    maxHeight: headerHeight,
+    minHeight: totalHeaderHeight,
+    maxHeight: totalHeaderHeight,
     lineHeight: `${headerHeight}px`
   };
   return {
     renderContext,
-    getColumns,
+    getColumnHeaders,
+    getColumnGroupHeaders,
     isDragging: !!dragCol,
     getRootProps: (other = {}) => (0, _extends2.default)({
       style: rootStyle
     }, other),
     getInnerProps: () => ({
       ref: handleInnerRef,
-      'aria-rowindex': 1,
-      role: 'row'
+      role: 'rowgroup'
     })
   };
 };

package/node/hooks/features/density/densitySelector.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.gridDensityValueSelector = exports.gridDensitySelector = exports.gridDensityRowHeightSelector = exports.gridDensityHeaderHeightSelector = exports.gridDensityFactorSelector = void 0;
+exports.gridDensityValueSelector = exports.gridDensityTotalHeaderHeightSelector = exports.gridDensitySelector = exports.gridDensityRowHeightSelector = exports.gridDensityHeaderHeightSelector = exports.gridDensityHeaderGroupingMaxDepthSelector = exports.gridDensityFactorSelector = void 0;
 
 var _createSelector = require("../../../utils/createSelector");
 
@@ -16,5 +16,9 @@ const gridDensityRowHeightSelector = (0, _createSelector.createSelector)(gridDen
 exports.gridDensityRowHeightSelector = gridDensityRowHeightSelector;
 const gridDensityHeaderHeightSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.headerHeight);
 exports.gridDensityHeaderHeightSelector = gridDensityHeaderHeightSelector;
+const gridDensityHeaderGroupingMaxDepthSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.headerGroupingMaxDepth);
+exports.gridDensityHeaderGroupingMaxDepthSelector = gridDensityHeaderGroupingMaxDepthSelector;
 const gridDensityFactorSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.factor);
-exports.gridDensityFactorSelector = gridDensityFactorSelector;
+exports.gridDensityFactorSelector = gridDensityFactorSelector;
+const gridDensityTotalHeaderHeightSelector = (0, _createSelector.createSelector)(gridDensitySelector, density => density.headerHeight * (1 + density.headerGroupingMaxDepth));
+exports.gridDensityTotalHeaderHeightSelector = gridDensityTotalHeaderHeightSelector;

package/node/hooks/features/density/useGridDensity.js

@@ -21,6 +21,12 @@ var _densitySelector = require("./densitySelector");
 
 var _utils = require("../../../utils/utils");
 
+var _useGridSelector = require("../../utils/useGridSelector");
+
+var _columns = require("../columns");
+
+var _useGridColumnGrouping = require("../columnGrouping/useGridColumnGrouping");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -31,13 +37,14 @@ const COMFORTABLE_DENSITY_FACTOR = 1.3; // TODO v6: revise keeping headerHeight
 
 exports.COMFORTABLE_DENSITY_FACTOR = COMFORTABLE_DENSITY_FACTOR;
 
-const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight) => {
+const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight, newMaxDepth) => {
   switch (newDensity) {
     case _gridDensity.GridDensityTypes.Compact:
       return {
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMPACT_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMPACT_DENSITY_FACTOR),
+        headerGroupingMaxDepth: newMaxDepth,
         factor: COMPACT_DENSITY_FACTOR
       };
 
@@ -46,6 +53,7 @@ const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight) => {
         value: newDensity,
         headerHeight: Math.floor(newHeaderHeight * COMFORTABLE_DENSITY_FACTOR),
         rowHeight: Math.floor(newRowHeight * COMFORTABLE_DENSITY_FACTOR),
+        headerGroupingMaxDepth: newMaxDepth,
         factor: COMFORTABLE_DENSITY_FACTOR
       };
 
@@ -54,24 +62,55 @@ const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight) => {
         value: newDensity,
         headerHeight: newHeaderHeight,
         rowHeight: newRowHeight,
+        headerGroupingMaxDepth: newMaxDepth,
         factor: 1
       };
   }
 };
 
-const densityStateInitializer = (state, props) => (0, _extends2.default)({}, state, {
-  density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
-});
+const densityStateInitializer = (state, props) => {
+  // TODO: think about improving this initialization. Could it be done in the useColumn initializer?
+  // TODO: manage to remove ts-ignore
+  let maxDepth;
+
+  if (props.columnGroupingModel == null || Object.keys(props.columnGroupingModel).length === 0) {
+    maxDepth = 0;
+  } else {
+    const unwrappedGroupingColumnModel = (0, _useGridColumnGrouping.unwrapGroupingColumnModel)(props.columnGroupingModel);
+    const columnsState = state.columns;
+    const visibleColumns = columnsState.all.filter(field => columnsState.columnVisibilityModel[field] !== false);
+
+    if (visibleColumns.length === 0) {
+      maxDepth = 0;
+    } else {
+      maxDepth = Math.max(...visibleColumns.map(field => {
+        var _unwrappedGroupingCol, _unwrappedGroupingCol2;
+
+        return (_unwrappedGroupingCol = (_unwrappedGroupingCol2 = unwrappedGroupingColumnModel[field]) == null ? void 0 : _unwrappedGroupingCol2.length) != null ? _unwrappedGroupingCol : 0;
+      }));
+    }
+  }
+
+  return (0, _extends2.default)({}, state, {
+    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight, maxDepth)
+  });
+};
 
 exports.densityStateInitializer = densityStateInitializer;
 
 const useGridDensity = (apiRef, props) => {
+  const visibleColumns = (0, _useGridSelector.useGridSelector)(apiRef, _columns.gridVisibleColumnDefinitionsSelector);
+  const maxDepth = visibleColumns.length > 0 ? Math.max(...visibleColumns.map(column => {
+    var _column$groupPath$len, _column$groupPath;
+
+    return (_column$groupPath$len = (_column$groupPath = column.groupPath) == null ? void 0 : _column$groupPath.length) != null ? _column$groupPath$len : 0;
+  })) : 0;
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useDensity');
-  const setDensity = React.useCallback((newDensity, newHeaderHeight = props.headerHeight, newRowHeight = props.rowHeight) => {
+  const setDensity = React.useCallback((newDensity, newHeaderHeight = props.headerHeight, newRowHeight = props.rowHeight, newMaxDepth = maxDepth) => {
     logger.debug(`Set grid density to ${newDensity}`);
     apiRef.current.setState(state => {
       const currentDensityState = (0, _densitySelector.gridDensitySelector)(state);
-      const newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight);
+      const newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth);
 
       if ((0, _utils.isDeepEqual)(currentDensityState, newDensityState)) {
         return state;
@@ -82,10 +121,10 @@ const useGridDensity = (apiRef, props) => {
       });
     });
     apiRef.current.forceUpdate();
-  }, [logger, apiRef, props.headerHeight, props.rowHeight]);
+  }, [logger, apiRef, props.headerHeight, props.rowHeight, maxDepth]);
   React.useEffect(() => {
-    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight);
-  }, [apiRef, props.density, props.rowHeight, props.headerHeight]);
+    apiRef.current.setDensity(props.density, props.headerHeight, props.rowHeight, maxDepth);
+  }, [apiRef, props.density, props.rowHeight, props.headerHeight, maxDepth]);
   const densityApi = {
     setDensity
   };

package/node/hooks/features/dimensions/useGridDimensions.js

@@ -64,7 +64,7 @@ function useGridDimensions(apiRef, props) {
   const rootDimensionsRef = React.useRef(null);
   const fullDimensionsRef = React.useRef(null);
   const rowsMeta = (0, _utils2.useGridSelector)(apiRef, _gridRowsMetaSelector.gridRowsMetaSelector);
-  const headerHeight = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityHeaderHeightSelector);
+  const totalHeaderHeight = (0, _utils2.useGridSelector)(apiRef, _density.gridDensityTotalHeaderHeightSelector);
   const updateGridDimensionsRef = React.useCallback(() => {
     var _apiRef$current$rootE;
 
@@ -109,7 +109,7 @@ function useGridDimensions(apiRef, props) {
     } else {
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height - headerHeight
+        height: rootDimensionsRef.current.height - totalHeaderHeight
       };
       const scrollInformation = hasScroll({
         content: {
@@ -143,7 +143,7 @@ function useGridDimensions(apiRef, props) {
     if (newFullDimensions.viewportInnerSize.width !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.width) || newFullDimensions.viewportInnerSize.height !== (prevDimensions == null ? void 0 : prevDimensions.viewportInnerSize.height)) {
       apiRef.current.publishEvent('viewportInnerSizeChange', newFullDimensions.viewportInnerSize);
     }
-  }, [apiRef, props.scrollbarSize, props.autoHeight, headerHeight, rowsMeta.currentPageTotalHeight]);
+  }, [apiRef, props.scrollbarSize, props.autoHeight, totalHeaderHeight, rowsMeta.currentPageTotalHeight]);
   const resize = React.useCallback(() => {
     updateGridDimensionsRef();
     apiRef.current.publishEvent('debouncedResize', rootDimensionsRef.current);

package/node/hooks/features/export/useGridPrintExport.js

@@ -104,7 +104,7 @@ const useGridPrintExport = (apiRef, props) => {
       return;
     }
 
-    const headerHeight = (0, _densitySelector.gridDensityHeaderHeightSelector)(apiRef);
+    const totalHeaderHeight = (0, _densitySelector.gridDensityTotalHeaderHeightSelector)(apiRef);
     const rowsMeta = (0, _gridRowsMetaSelector.gridRowsMetaSelector)(apiRef.current.state);
     const gridRootElement = apiRef.current.rootElementRef.current;
     const gridClone = gridRootElement.cloneNode(true);
@@ -138,7 +138,7 @@ const useGridPrintExport = (apiRef, props) => {
     } // Expand container height to accommodate all rows
 
 
-    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + headerHeight + gridToolbarElementHeight + gridFooterElementHeight}px`; // Remove all loaded elements from the current host
+    gridClone.style.height = `${rowsMeta.currentPageTotalHeight + totalHeaderHeight + gridToolbarElementHeight + gridFooterElementHeight}px`; // Remove all loaded elements from the current host
 
     printDoc.body.innerHTML = '';
     printDoc.body.appendChild(gridClone);

package/node/hooks/features/filter/gridFilterUtils.js

@@ -88,76 +88,75 @@ exports.sanitizeFilterModel = sanitizeFilterModel;
 const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFiltering, apiRef) => filteringState => (0, _extends2.default)({}, filteringState, {
   filterModel: sanitizeFilterModel(filterModel, disableMultipleColumnsFiltering, apiRef)
 });
-/**
- * Generates a method to easily check if a row is matching the current filter model.
- * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
- * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
- * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
- */
-
 
 exports.mergeStateWithFilterModel = mergeStateWithFilterModel;
 
-const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
-  const {
-    items
-  } = filterModel;
-
-  const getFilterCallbackFromItem = filterItem => {
-    if (!filterItem.columnField || !filterItem.operatorValue) {
-      return null;
-    }
+const getFilterCallbackFromItem = (filterItem, apiRef) => {
+  if (!filterItem.columnField || !filterItem.operatorValue) {
+    return null;
+  }
 
-    const column = apiRef.current.getColumn(filterItem.columnField);
+  const column = apiRef.current.getColumn(filterItem.columnField);
 
-    if (!column) {
-      return null;
-    }
+  if (!column) {
+    return null;
+  }
 
-    let parsedValue;
+  let parsedValue;
 
-    if (column.valueParser) {
-      var _filterItem$value;
+  if (column.valueParser) {
+    var _filterItem$value;
 
-      const parser = column.valueParser;
-      parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x)) : parser(filterItem.value);
-    } else {
-      parsedValue = filterItem.value;
-    }
+    const parser = column.valueParser;
+    parsedValue = Array.isArray(filterItem.value) ? (_filterItem$value = filterItem.value) == null ? void 0 : _filterItem$value.map(x => parser(x)) : parser(filterItem.value);
+  } else {
+    parsedValue = filterItem.value;
+  }
 
-    const newFilterItem = (0, _extends2.default)({}, filterItem, {
-      value: parsedValue
-    });
-    const filterOperators = column.filterOperators;
+  const newFilterItem = (0, _extends2.default)({}, filterItem, {
+    value: parsedValue
+  });
+  const filterOperators = column.filterOperators;
 
-    if (!(filterOperators != null && filterOperators.length)) {
-      throw new Error(`MUI: No filter operators found for column '${column.field}'.`);
-    }
+  if (!(filterOperators != null && filterOperators.length)) {
+    throw new Error(`MUI: No filter operators found for column '${column.field}'.`);
+  }
 
-    const filterOperator = filterOperators.find(operator => operator.value === newFilterItem.operatorValue);
+  const filterOperator = filterOperators.find(operator => operator.value === newFilterItem.operatorValue);
 
-    if (!filterOperator) {
-      throw new Error(`MUI: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operatorValue}'.`);
-    }
+  if (!filterOperator) {
+    throw new Error(`MUI: No filter operator found for column '${column.field}' and operator value '${newFilterItem.operatorValue}'.`);
+  }
 
-    const applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
+  const applyFilterOnRow = filterOperator.getApplyFilterFn(newFilterItem, column);
 
-    if (typeof applyFilterOnRow !== 'function') {
-      return null;
-    }
+  if (typeof applyFilterOnRow !== 'function') {
+    return null;
+  }
 
-    const fn = rowId => {
-      const cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
-      return applyFilterOnRow(cellParams);
-    };
+  const fn = rowId => {
+    const cellParams = apiRef.current.getCellParams(rowId, newFilterItem.columnField);
+    return applyFilterOnRow(cellParams);
+  };
 
-    return {
-      fn,
-      item: newFilterItem
-    };
+  return {
+    fn,
+    item: newFilterItem
   };
+};
+/**
+ * Generates a method to easily check if a row is matching the current filter model.
+ * @param {GridFilterModel} filterModel The model with which we want to filter the rows.
+ * @param {React.MutableRefObject<GridApiCommunity>} apiRef The API of the grid.
+ * @returns {GridAggregatedFilterItemApplier | null} A method that checks if a row is matching the current filter model. If `null`, we consider that all the rows are matching the filters.
+ */
 
-  const appliers = items.map(getFilterCallbackFromItem).filter(callback => !!callback);
+
+const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
+  const {
+    items
+  } = filterModel;
+  const appliers = items.map(item => getFilterCallbackFromItem(item, apiRef)).filter(callback => !!callback);
 
   if (appliers.length === 0) {
     return null;
@@ -249,9 +248,10 @@ const buildAggregatedFilterApplier = (filterModel, apiRef) => {
 
 exports.buildAggregatedFilterApplier = buildAggregatedFilterApplier;
 
-const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel) => {
+const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel, apiRef) => {
   var _filterModel$quickFil, _filterModel$linkOper;
 
+  const cleanedFilterItems = filterModel.items.filter(item => getFilterCallbackFromItem(item, apiRef) !== null);
   const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
   const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null); // Defaultize operators
 
@@ -265,13 +265,13 @@ const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterMode
     };
 
     if (linkOperator === _models.GridLinkOperator.And) {
-      const passesAllFilters = filterModel.items.every(filterItemPredicate);
+      const passesAllFilters = cleanedFilterItems.every(filterItemPredicate);
 
       if (!passesAllFilters) {
         return false;
       }
     } else {
-      const passesSomeFilters = filterModel.items.some(filterItemPredicate);
+      const passesSomeFilters = cleanedFilterItems.some(filterItemPredicate);
 
       if (!passesSomeFilters) {
         return false;

package/node/hooks/features/filter/useGridFilter.js

@@ -304,7 +304,7 @@ const useGridFilter = (apiRef, props) => {
             passingFilterItems,
             passingQuickFilterValues
           } = params.isRowMatchingFilters(rowId);
-          isRowPassing = (0, _gridFilterUtils.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+          isRowPassing = (0, _gridFilterUtils.passFilterLogic)([passingFilterItems], [passingQuickFilterValues], params.filterModel, apiRef);
         }
 
         filteredRowsLookup[rowId] = isRowPassing;

package/node/hooks/features/index.js

@@ -30,6 +30,19 @@ Object.keys(_columns).forEach(function (key) {
   });
 });
 
+var _columnGrouping = require("./columnGrouping");
+
+Object.keys(_columnGrouping).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _columnGrouping[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _columnGrouping[key];
+    }
+  });
+});
+
 var _density = require("./density");
 
 Object.keys(_density).forEach(function (key) {

package/node/hooks/features/rows/useGridParamsApi.js

@@ -121,7 +121,7 @@ function useGridParamsApi(apiRef) {
       formattedValue: value
     };
 
-    if (colDef.valueFormatter) {
+    if (colDef && colDef.valueFormatter) {
       params.formattedValue = colDef.valueFormatter({
         id,
         field: params.field,