@mui/x-data-grid 5.15.3 → 5.16.0

package/hooks/features/columnHeaders/useGridColumnHeaders.js

@@ -2,12 +2,13 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import { useForkRef } from '@mui/material/utils';
+import { styled } from '@mui/material/styles';
 import { defaultMemoize } from 'reselect';
 import { useGridApiContext } from '../../utils/useGridApiContext';
 import { useGridSelector } from '../../utils/useGridSelector';
 import { gridVisibleColumnDefinitionsSelector, gridColumnPositionsSelector } from '../columns/gridColumnsSelector';
 import { gridTabIndexColumnHeaderSelector, gridTabIndexCellSelector, gridFocusColumnHeaderSelector } from '../focus/gridFocusStateSelector';
-import { gridDensityHeaderHeightSelector } from '../density/densitySelector';
+import { gridDensityHeaderHeightSelector, gridDensityHeaderGroupingMaxDepthSelector, gridDensityTotalHeaderHeightSelector } from '../density/densitySelector';
 import { gridFilterActiveItemsLookupSelector } from '../filter/gridFilterSelector';
 import { gridSortColumnLookupSelector } from '../sorting/gridSortingSelector';
 import { gridColumnMenuSelector } from '../columnMenu/columnMenuSelector';
@@ -17,7 +18,18 @@ import { GridColumnHeaderItem } from '../../../components/columnHeaders/GridColu
 import { getFirstColumnIndexToRender } from '../columns/gridColumnsUtils';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { getRenderableIndexes } from '../virtualization/useGridVirtualScroller';
+import { GridColumnGroupHeader } from '../../../components/columnHeaders/GridColumnGroupHeader';
+import { isDeepEqual } from '../../../utils/utils'; // TODO: add the possibility to switch this value if needed for customization
+
 import { jsx as _jsx } from "react/jsx-runtime";
+const MERGE_EMPTY_CELLS = true;
+const GridColumnHeaderRow = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderRow',
+  overridesResolver: (props, styles) => styles.columnHeaderRow
+})(() => ({
+  display: 'flex'
+}));
 
 function isUIEvent(event) {
   return !!event.target;
@@ -37,6 +49,8 @@ export const useGridColumnHeaders = props => {
   const cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
   const columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
   const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   const sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
   const columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
@@ -132,9 +146,9 @@ export const useGridColumnHeaders = props => {
   useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
   useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
-  useGridApiEventHandler(apiRef, 'rowsScroll', handleScroll);
+  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,
@@ -145,7 +159,6 @@ export const useGridColumnHeaders = props => {
       return null;
     }
 
-    const columns = [];
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
@@ -164,6 +177,27 @@ export 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];
@@ -188,25 +222,186 @@ export const useGridColumnHeaders = props => {
       }, other), column.field));
     }
 
+    return /*#__PURE__*/_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 && 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), _extends({}, 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 && isDeepEqual(getParents(column.groupPath, depth), lastItem.groupParents)) {
+          var _column$computedWidth6;
+
+          // We merge with previous column
+          return [...aggregated.slice(0, aggregated.length - 1), _extends({}, 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__*/_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__*/_jsx(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 = {}) => _extends({
       style: rootStyle
     }, other),
     getInnerProps: () => ({
       ref: handleInnerRef,
-      'aria-rowindex': 1,
-      role: 'row'
+      role: 'rowgroup'
     })
   };
 };

package/hooks/features/density/densitySelector.d.ts

@@ -3,4 +3,6 @@ export declare const gridDensitySelector: (state: GridStateCommunity) => import(
 export declare const gridDensityValueSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridDensity>;
 export declare const gridDensityRowHeightSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 export declare const gridDensityHeaderHeightSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridDensityHeaderGroupingMaxDepthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 export declare const gridDensityFactorSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
+export declare const gridDensityTotalHeaderHeightSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;

package/hooks/features/density/densitySelector.js

@@ -3,4 +3,6 @@ export const gridDensitySelector = state => state.density;
 export const gridDensityValueSelector = createSelector(gridDensitySelector, density => density.value);
 export const gridDensityRowHeightSelector = createSelector(gridDensitySelector, density => density.rowHeight);
 export const gridDensityHeaderHeightSelector = createSelector(gridDensitySelector, density => density.headerHeight);
-export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => density.factor);
+export const gridDensityHeaderGroupingMaxDepthSelector = createSelector(gridDensitySelector, density => density.headerGroupingMaxDepth);
+export const gridDensityFactorSelector = createSelector(gridDensitySelector, density => density.factor);
+export const gridDensityTotalHeaderHeightSelector = createSelector(gridDensitySelector, density => density.headerHeight * (1 + density.headerGroupingMaxDepth));

package/hooks/features/density/densityState.d.ts

@@ -3,5 +3,6 @@ export interface GridDensityState {
     value: GridDensity;
     rowHeight: number;
     headerHeight: number;
+    headerGroupingMaxDepth: number;
     factor: number;
 }

package/hooks/features/density/useGridDensity.d.ts

@@ -4,5 +4,5 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const COMPACT_DENSITY_FACTOR = 0.7;
 export declare const COMFORTABLE_DENSITY_FACTOR = 1.3;
-export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'density' | 'headerHeight' | 'rowHeight'>>;
+export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'density' | 'headerHeight' | 'rowHeight' | 'columnGroupingModel'>>;
 export declare const useGridDensity: (apiRef: React.MutableRefObject<GridApiCommunity>, props: Pick<DataGridProcessedProps, 'headerHeight' | 'rowHeight' | 'density'>) => void;

package/hooks/features/density/useGridDensity.js

@@ -5,16 +5,20 @@ import { useGridLogger } from '../../utils/useGridLogger';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridDensitySelector } from './densitySelector';
 import { isDeepEqual } from '../../../utils/utils';
+import { useGridSelector } from '../../utils/useGridSelector';
+import { gridVisibleColumnDefinitionsSelector } from '../columns';
+import { unwrapGroupingColumnModel } from '../columnGrouping/useGridColumnGrouping';
 export const COMPACT_DENSITY_FACTOR = 0.7;
 export const COMFORTABLE_DENSITY_FACTOR = 1.3; // TODO v6: revise keeping headerHeight and rowHeight in state
 
-const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight) => {
+const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight, newMaxDepth) => {
   switch (newDensity) {
     case 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
       };
 
@@ -23,6 +27,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
       };
 
@@ -31,21 +36,52 @@ const getUpdatedDensityState = (newDensity, newHeaderHeight, newRowHeight) => {
         value: newDensity,
         headerHeight: newHeaderHeight,
         rowHeight: newRowHeight,
+        headerGroupingMaxDepth: newMaxDepth,
         factor: 1
       };
   }
 };
 
-export const densityStateInitializer = (state, props) => _extends({}, state, {
-  density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight)
-});
+export 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 = 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 _extends({}, state, {
+    density: getUpdatedDensityState(props.density, props.headerHeight, props.rowHeight, maxDepth)
+  });
+};
 export const useGridDensity = (apiRef, props) => {
+  const visibleColumns = useGridSelector(apiRef, 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 = 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 = gridDensitySelector(state);
-      const newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight);
+      const newDensityState = getUpdatedDensityState(newDensity, newHeaderHeight, newRowHeight, newMaxDepth);
 
       if (isDeepEqual(currentDensityState, newDensityState)) {
         return state;
@@ -56,10 +92,10 @@ export 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/hooks/features/dimensions/useGridDimensions.js

@@ -4,7 +4,7 @@ import { useGridApiEventHandler, useGridApiOptionHandler } from '../../utils/use
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridColumnsTotalWidthSelector } from '../columns';
-import { gridDensityHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
+import { gridDensityTotalHeaderHeightSelector, gridDensityRowHeightSelector } from '../density';
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -42,7 +42,7 @@ export function useGridDimensions(apiRef, props) {
   const rootDimensionsRef = React.useRef(null);
   const fullDimensionsRef = React.useRef(null);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
-  const headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  const totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   const updateGridDimensionsRef = React.useCallback(() => {
     var _apiRef$current$rootE;
 
@@ -87,7 +87,7 @@ export function useGridDimensions(apiRef, props) {
     } else {
       viewportOuterSize = {
         width: rootDimensionsRef.current.width,
-        height: rootDimensionsRef.current.height - headerHeight
+        height: rootDimensionsRef.current.height - totalHeaderHeight
       };
       const scrollInformation = hasScroll({
         content: {
@@ -121,7 +121,7 @@ export 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/hooks/features/export/useGridPrintExport.js

@@ -4,7 +4,7 @@ import { ownerDocument } from '@mui/material/utils';
 import { useGridLogger } from '../../utils/useGridLogger';
 import { gridVisibleRowCountSelector } from '../filter/gridFilterSelector';
 import { gridColumnDefinitionsSelector, gridColumnVisibilityModelSelector } from '../columns/gridColumnsSelector';
-import { gridDensityHeaderHeightSelector } from '../density/densitySelector';
+import { gridDensityTotalHeaderHeightSelector } from '../density/densitySelector';
 import { gridClasses } from '../../../constants/gridClasses';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
@@ -79,7 +79,7 @@ export const useGridPrintExport = (apiRef, props) => {
       return;
     }
 
-    const headerHeight = gridDensityHeaderHeightSelector(apiRef);
+    const totalHeaderHeight = gridDensityTotalHeaderHeightSelector(apiRef);
     const rowsMeta = gridRowsMetaSelector(apiRef.current.state);
     const gridRootElement = apiRef.current.rootElementRef.current;
     const gridClone = gridRootElement.cloneNode(true);
@@ -113,7 +113,7 @@ export 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/hooks/features/filter/gridFilterSelector.d.ts

@@ -36,7 +36,7 @@ export declare const gridFilteredDescendantCountLookupSelector: import("../../..
  */
 export declare const gridVisibleSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: any;
+    model: import("../../..").GridValidRowModel;
 }[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
@@ -51,7 +51,7 @@ export declare const gridVisibleSortedRowIdsSelector: import("../../../utils/cre
  */
 export declare const gridFilteredSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: any;
+    model: import("../../..").GridValidRowModel;
 }[]>;
 /**
  * Get the id of the rows accessible after the filtering process.
@@ -72,7 +72,7 @@ export declare const gridVisibleRowsSelector: import("../../../utils/createSelec
  */
 export declare const gridVisibleSortedTopLevelRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: any;
+    model: import("../../..").GridValidRowModel;
 }[]>;
 /**
  * Get the amount of rows accessible after the filtering process.

package/hooks/features/index.d.ts

@@ -1,5 +1,6 @@
 export * from './columnMenu';
 export * from './columns';
+export * from './columnGrouping';
 export * from './density';
 export * from './editRows';
 export * from './filter';

package/hooks/features/index.js

@@ -1,6 +1,7 @@
 // Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
 export * from './columnMenu';
 export * from './columns';
+export * from './columnGrouping';
 export * from './density';
 export * from './editRows';
 export * from './filter';

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

@@ -33,7 +33,7 @@ export declare const gridPaginationRowRangeSelector: import("../../../utils/crea
  */
 export declare const gridPaginatedVisibleSortedGridRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: any;
+    model: import("../../..").GridValidRowModel;
 }[]>;
 /**
  * Get the id of each row to include in the current page if the pagination is enabled.

package/hooks/features/rows/gridRowsSelector.d.ts

@@ -3,7 +3,7 @@ export declare const gridRowsStateSelector: (state: GridStateCommunity) => impor
 export declare const gridRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
 export declare const gridRowsLoadingSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, boolean | undefined>;
 export declare const gridTopLevelRowCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
-export declare const gridRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowsLookup<any>>;
+export declare const gridRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowsLookup<import("../../..").GridValidRowModel>>;
 export declare const gridRowsIdToIdLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<string, import("../../..").GridRowId>>;
 export declare const gridRowTreeSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
 export declare const gridRowGroupingNameSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;

package/hooks/features/selection/gridSelectionSelector.d.ts

@@ -2,5 +2,5 @@ import { GridStateCommunity } from '../../../models/gridStateCommunity';
 import { GridRowId } from '../../../models/gridRows';
 export declare const gridSelectionStateSelector: (state: GridStateCommunity) => import("../../..").GridSelectionModel;
 export declare const selectedGridRowsCountSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
-export declare const selectedGridRowsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Map<GridRowId, any>>;
+export declare const selectedGridRowsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Map<GridRowId, import("../../../models/gridRows").GridValidRowModel>>;
 export declare const selectedIdsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, Record<GridRowId, GridRowId>>;

package/hooks/features/sorting/gridSortingSelector.d.ts

@@ -16,7 +16,7 @@ export declare const gridSortedRowIdsSelector: import("../../../utils/createSele
  */
 export declare const gridSortedRowEntriesSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
     id: import("../../..").GridRowId;
-    model: any;
+    model: import("../../..").GridValidRowModel;
 }[]>;
 /**
  * Get the current sorting model.

package/hooks/features/virtualization/useGridVirtualScroller.d.ts

@@ -29,7 +29,7 @@ export declare const useGridVirtualScroller: (props: UseGridVirtualScrollerProps
         maxLastColumn?: number | undefined;
         availableSpace?: number | null | undefined;
         ignoreAutoHeight?: boolean | undefined;
-        rows?: GridRowEntry<any>[] | undefined;
+        rows?: GridRowEntry<import("../../../models").GridValidRowModel>[] | undefined;
         rowIndexOffset?: number | undefined;
     }) => JSX.Element[] | null;
     getRootProps: ({ style, ...other }?: {

package/hooks/utils/useGridVisibleRows.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridApiCommon, GridRowEntry } from '../../models';
 export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
-    rows: GridRowEntry<any>[];
+    rows: GridRowEntry<import("../../models").GridValidRowModel>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;
@@ -16,7 +16,7 @@ export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.M
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
 export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
-    rows: GridRowEntry<any>[];
+    rows: GridRowEntry<import("../../models").GridValidRowModel>[];
     range: {
         firstRowIndex: number;
         lastRowIndex: number;

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.3
+/** @license MUI v5.16.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/internals/index.d.ts

@@ -13,6 +13,8 @@ export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridCol
 export { useGridColumnMenu, columnMenuStateInitializer, } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+export { useGridColumnGrouping, columnGroupsStateInitializer, } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+export { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export type { GridColumnRawLookup, GridColumnsRawState, GridHydrateColumnsValue, } from '../hooks/features/columns/gridColumnsInterfaces';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';

package/internals/index.js

@@ -11,6 +11,8 @@ export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridCol
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+export { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+export { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';

package/legacy/DataGrid/DataGrid.js

@@ -79,6 +79,7 @@ DataGridRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -196,6 +197,7 @@ DataGridRaw.propTypes = {
    * 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.
    */
   experimentalFeatures: PropTypes.shape({
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool