@mui/x-data-grid 5.15.2 → 5.17.0

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'cellSkeleton', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnGroupHeader', 'columnHeader--filledGroup', 'columnHeader--emptyGroup', 'columnHeader--showColumnBorder', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'row--detailPanelExpanded', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle', 'pinnedRows', 'pinnedRows--top', 'pinnedRows--bottom', 'pinnedRowsRenderZone']);

package/modern/hooks/features/columnGrouping/gridColumnGroupsInterfaces.js

@@ -0,0 +1 @@
+export {};

package/modern/hooks/features/columnGrouping/gridColumnGroupsSelector.js

@@ -0,0 +1,8 @@
+import { createSelector } from '../../../utils/createSelector';
+
+/**
+ * @category ColumnGrouping
+ * @ignore - do not document.
+ */
+export const gridColumnGroupingSelector = state => state.columnGrouping;
+export const gridColumnGroupsLookupSelector = createSelector(gridColumnGroupingSelector, columnGrouping => columnGrouping.lookup);

package/modern/hooks/features/columnGrouping/index.js

@@ -0,0 +1,2 @@
+export * from './gridColumnGroupsSelector';
+export {};

package/modern/hooks/features/columnGrouping/useGridColumnGrouping.js

@@ -0,0 +1,145 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["groupId", "children"];
+import * as React from 'react';
+import { isLeaf } from '../../../models/gridColumnGrouping';
+import { gridColumnGroupsLookupSelector } from './gridColumnGroupsSelector';
+import { gridColumnLookupSelector } from '../columns/gridColumnsSelector';
+import { useGridApiMethod } from '../../utils/useGridApiMethod';
+export function hasGroupPath(lookupElement) {
+  return lookupElement.groupPath !== undefined;
+}
+
+// This is the recurrence function that help writing `unwrapGroupingColumnModel()`
+const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplet) => {
+  if (isLeaf(columnGroupNode)) {
+    if (unwrappedGroupingModelToComplet[columnGroupNode.field] !== undefined) {
+      throw new Error([`MUI: columnGroupingModel contains duplicated field`, `column field ${columnGroupNode.field} occurrs two times in the grouping model:`, `- ${unwrappedGroupingModelToComplet[columnGroupNode.field].join(' > ')}`, `- ${parents.join(' > ')}`].join('\n'));
+    }
+
+    unwrappedGroupingModelToComplet[columnGroupNode.field] = parents;
+    return;
+  }
+
+  const {
+    groupId,
+    children
+  } = columnGroupNode;
+  children.forEach(child => {
+    recurrentUnwrapGroupingColumnModel(child, [...parents, groupId], unwrappedGroupingModelToComplet);
+  });
+};
+/**
+ * This is a function that provide for each column the array of its parents.
+ * Parents are ordered from the root to the leaf.
+ * @param columnGroupingModel The model such as provided in DataGrid props
+ * @returns An object `{[field]: groupIds}` where `groupIds` is the parents of the column `field`
+ */
+
+
+export const unwrapGroupingColumnModel = columnGroupingModel => {
+  if (!columnGroupingModel) {
+    return {};
+  }
+
+  const unwrappedSubTree = {};
+  columnGroupingModel.forEach(columnGroupNode => {
+    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
+  });
+  return unwrappedSubTree;
+};
+
+const createGroupLookup = columnGroupingModel => {
+  let groupLookup = {};
+  columnGroupingModel.forEach(node => {
+    if (isLeaf(node)) {
+      return;
+    }
+
+    const {
+      groupId,
+      children
+    } = node,
+          other = _objectWithoutPropertiesLoose(node, _excluded);
+
+    if (!groupId) {
+      throw new Error('MUI: An element of the columnGroupingModel does not have either `field` or `groupId`.');
+    }
+
+    if (!children) {
+      console.warn(`MUI: group groupId=${groupId} has no children.`);
+    }
+
+    const groupParam = _extends({}, other, {
+      groupId
+    });
+
+    const subTreeLookup = createGroupLookup(children);
+
+    if (subTreeLookup[groupId] !== undefined || groupLookup[groupId] !== undefined) {
+      throw new Error(`MUI: The groupId ${groupId} is used multiple times in the columnGroupingModel.`);
+    }
+
+    groupLookup = _extends({}, groupLookup, subTreeLookup, {
+      [groupId]: groupParam
+    });
+  });
+  return _extends({}, groupLookup);
+};
+
+export const columnGroupsStateInitializer = (state, props) => {
+  const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
+  return _extends({}, state, {
+    columnGrouping: {
+      lookup: groupLookup,
+      groupCollapsedModel: {}
+    }
+  });
+};
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+
+export const useGridColumnGrouping = (apiRef, props) => {
+  /**
+   * API METHODS
+   */
+  const getColumnGroupPath = React.useCallback(field => {
+    const columnLookup = gridColumnLookupSelector(apiRef);
+    return columnLookup[field]?.groupPath ?? [];
+  }, [apiRef]);
+  const getAllGroupDetails = React.useCallback(() => {
+    const columnGroupLookup = gridColumnGroupsLookupSelector(apiRef);
+    return columnGroupLookup;
+  }, [apiRef]);
+  const columnGroupingApi = {
+    unstable_getColumnGroupPath: getColumnGroupPath,
+    unstable_getAllGroupDetails: getAllGroupDetails
+  };
+  useGridApiMethod(apiRef, columnGroupingApi, 'GridColumnGroupingApi');
+  /**
+   * EFFECTS
+   */
+  // The effect does not track any value defined synchronously during the 1st render by hooks called after `useGridColumns`
+  // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
+
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    if (!props.experimentalFeatures?.columnGrouping) {
+      return;
+    }
+
+    const groupLookup = createGroupLookup(props.columnGroupingModel ?? []);
+    apiRef.current.setState(state => _extends({}, state, {
+      columnGrouping: _extends({}, state.columnGrouping, {
+        lookup: groupLookup
+      })
+    }));
+  }, [apiRef, props.columnGroupingModel, props.experimentalFeatures?.columnGrouping]);
+};

package/modern/hooks/features/columnGrouping/useGridColumnGroupingPreProcessors.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { isDeepEqual } from '../../../utils/utils';
+import { unwrapGroupingColumnModel, hasGroupPath } from './useGridColumnGrouping';
+export const useGridColumnGroupingPreProcessors = (apiRef, props) => {
+  const addHeaderGroups = React.useCallback(columnsState => {
+    if (!props.experimentalFeatures?.columnGrouping) {
+      return columnsState;
+    }
+
+    const unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel);
+    columnsState.all.forEach(field => {
+      const newGroupPath = unwrappedGroupingModel[field] ?? [];
+      const lookupElement = columnsState.lookup[field];
+
+      if (hasGroupPath(lookupElement) && isDeepEqual(newGroupPath, lookupElement?.groupPath)) {
+        // Avoid modifying the pointer to allow shadow comparison in https://github.com/mui/mui-x/blob/f90afbf10a1264ee8b453d7549dd7cdd6110a4ed/packages/grid/x-data-grid/src/hooks/features/columns/gridColumnsUtils.ts#L446:L453
+        return;
+      }
+
+      columnsState.lookup[field] = _extends({}, columnsState.lookup[field], {
+        groupPath: unwrappedGroupingModel[field] ?? []
+      });
+    });
+    return columnsState;
+  }, [props.columnGroupingModel, props.experimentalFeatures?.columnGrouping]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addHeaderGroups);
+};

package/modern/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);
@@ -130,9 +144,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,
@@ -143,7 +157,6 @@ export const useGridColumnHeaders = props => {
       return null;
     }
 
-    const columns = [];
     const [firstRowToRender, lastRowToRender] = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
@@ -162,6 +175,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];
@@ -186,25 +220,168 @@ 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) {
+      // 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[firstColumnToRender]?.groupPath?.[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[firstColumnToRender]?.groupPath, depth);
+
+      while (firstColumnToRenderGroup !== null && columnIndex >= minColumnIndex && visibleColumns[columnIndex]?.groupPath && isDeepEqual(getParents(visibleColumns[columnIndex]?.groupPath, depth), firstColumnToRenderGroupParents)) {
+        const column = visibleColumns[columnIndex];
+        leftOverflow += column.computedWidth ?? 0;
+
+        if (initialHeader.length === 0) {
+          initialHeader.push({
+            width: column.computedWidth ?? 0,
+            fields: [column.field],
+            groupId: firstColumnToRenderGroup,
+            groupParents: firstColumnToRenderGroupParents,
+            colIndex: columnIndex
+          });
+        } else {
+          initialHeader[0].width += column.computedWidth ?? 0;
+          initialHeader[0].fields.push(column.field);
+          initialHeader[0].colIndex = columnIndex;
+        }
+
+        columnIndex -= 1;
+      }
+
+      const depthInfo = renderedColumns.reduce((aggregated, column, i) => {
+        const lastItem = aggregated[aggregated.length - 1];
+
+        if (column.groupPath && column.groupPath.length > depth) {
+          if (lastItem && lastItem.groupId === column.groupPath[depth]) {
+            // Merge with the previous columns
+            return [...aggregated.slice(0, aggregated.length - 1), _extends({}, lastItem, {
+              width: lastItem.width + (column.computedWidth ?? 0),
+              fields: [...lastItem.fields, column.field]
+            })];
+          } // Create a new grouping
+
+
+          return [...aggregated, {
+            groupId: column.groupPath[depth],
+            groupParents: getParents(column.groupPath, depth),
+            width: column.computedWidth ?? 0,
+            fields: [column.field],
+            colIndex: firstColumnToRender + i
+          }];
+        }
+
+        if (MERGE_EMPTY_CELLS && lastItem && lastItem.groupId === null && isDeepEqual(getParents(column.groupPath, depth), lastItem.groupParents)) {
+          // We merge with previous column
+          return [...aggregated.slice(0, aggregated.length - 1), _extends({}, lastItem, {
+            width: lastItem.width + (column.computedWidth ?? 0),
+            fields: [...lastItem.fields, column.field]
+          })];
+        } // We create new empty cell
+
+
+        return [...aggregated, {
+          groupId: null,
+          groupParents: getParents(column.groupPath, depth),
+          width: column.computedWidth ?? 0,
+          fields: [column.field],
+          colIndex: firstColumnToRender + i
+        }];
+      }, initialHeader);
+      columnIndex = lastColumnToRender;
+      const lastColumnToRenderGroup = depthInfo[depthInfo.length - 1].groupId;
+
+      while (lastColumnToRenderGroup !== null && columnIndex < maxLastColumn && visibleColumns[columnIndex]?.groupPath && visibleColumns[columnIndex]?.groupPath?.[depth] === lastColumnToRenderGroup) {
+        const column = visibleColumns[columnIndex];
+        depthInfo[depthInfo.length - 1].width += column.computedWidth ?? 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/modern/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/modern/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,44 @@ 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 => unwrappedGroupingColumnModel[field]?.length ?? 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 => column.groupPath?.length ?? 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 +84,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/modern/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(() => {
     const rootElement = apiRef.current.rootElementRef?.current;
     const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
@@ -85,7 +85,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: {
@@ -119,7 +119,7 @@ export function useGridDimensions(apiRef, props) {
     if (newFullDimensions.viewportInnerSize.width !== prevDimensions?.viewportInnerSize.width || newFullDimensions.viewportInnerSize.height !== 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/modern/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';
@@ -77,7 +77,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);
@@ -107,7 +107,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);