@mui/x-data-grid 5.15.3 → 5.17.1

package/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.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']);
+const gridClasses = (0, _material.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']);
 exports.gridClasses = gridClasses;

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

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.gridColumnGroupsLookupSelector = exports.gridColumnGroupingSelector = void 0;
+
+var _createSelector = require("../../../utils/createSelector");
+
+/**
+ * @category ColumnGrouping
+ * @ignore - do not document.
+ */
+const gridColumnGroupingSelector = state => state.columnGrouping;
+
+exports.gridColumnGroupingSelector = gridColumnGroupingSelector;
+const gridColumnGroupsLookupSelector = (0, _createSelector.createSelector)(gridColumnGroupingSelector, columnGrouping => columnGrouping.lookup);
+exports.gridColumnGroupsLookupSelector = gridColumnGroupsLookupSelector;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridColumnGroupsSelector = require("./gridColumnGroupsSelector");
+
+Object.keys(_gridColumnGroupsSelector).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridColumnGroupsSelector[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridColumnGroupsSelector[key];
+    }
+  });
+});

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

@@ -0,0 +1,182 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.columnGroupsStateInitializer = void 0;
+exports.hasGroupPath = hasGroupPath;
+exports.useGridColumnGrouping = exports.unwrapGroupingColumnModel = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _gridColumnGrouping = require("../../../models/gridColumnGrouping");
+
+var _gridColumnGroupsSelector = require("./gridColumnGroupsSelector");
+
+var _gridColumnsSelector = require("../columns/gridColumnsSelector");
+
+var _useGridApiMethod = require("../../utils/useGridApiMethod");
+
+const _excluded = ["groupId", "children"];
+
+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; }
+
+function hasGroupPath(lookupElement) {
+  return lookupElement.groupPath !== undefined;
+}
+
+// This is the recurrence function that help writing `unwrapGroupingColumnModel()`
+const recurrentUnwrapGroupingColumnModel = (columnGroupNode, parents, unwrappedGroupingModelToComplet) => {
+  if ((0, _gridColumnGrouping.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`
+ */
+
+
+const unwrapGroupingColumnModel = columnGroupingModel => {
+  if (!columnGroupingModel) {
+    return {};
+  }
+
+  const unwrappedSubTree = {};
+  columnGroupingModel.forEach(columnGroupNode => {
+    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
+  });
+  return unwrappedSubTree;
+};
+
+exports.unwrapGroupingColumnModel = unwrapGroupingColumnModel;
+
+const createGroupLookup = columnGroupingModel => {
+  let groupLookup = {};
+  columnGroupingModel.forEach(node => {
+    if ((0, _gridColumnGrouping.isLeaf)(node)) {
+      return;
+    }
+
+    const {
+      groupId,
+      children
+    } = node,
+          other = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _extends2.default)({}, 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 = (0, _extends2.default)({}, groupLookup, subTreeLookup, {
+      [groupId]: groupParam
+    });
+  });
+  return (0, _extends2.default)({}, groupLookup);
+};
+
+const columnGroupsStateInitializer = (state, props) => {
+  var _props$columnGrouping;
+
+  const groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
+  return (0, _extends2.default)({}, state, {
+    columnGrouping: {
+      lookup: groupLookup,
+      groupCollapsedModel: {}
+    }
+  });
+};
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+
+
+exports.columnGroupsStateInitializer = columnGroupsStateInitializer;
+
+const useGridColumnGrouping = (apiRef, props) => {
+  var _props$experimentalFe2;
+
+  /**
+   * API METHODS
+   */
+  const getColumnGroupPath = React.useCallback(field => {
+    var _columnLookup$field$g, _columnLookup$field;
+
+    const columnLookup = (0, _gridColumnsSelector.gridColumnLookupSelector)(apiRef);
+    return (_columnLookup$field$g = (_columnLookup$field = columnLookup[field]) == null ? void 0 : _columnLookup$field.groupPath) != null ? _columnLookup$field$g : [];
+  }, [apiRef]);
+  const getAllGroupDetails = React.useCallback(() => {
+    const columnGroupLookup = (0, _gridColumnGroupsSelector.gridColumnGroupsLookupSelector)(apiRef);
+    return columnGroupLookup;
+  }, [apiRef]);
+  const columnGroupingApi = {
+    unstable_getColumnGroupPath: getColumnGroupPath,
+    unstable_getAllGroupDetails: getAllGroupDetails
+  };
+  (0, _useGridApiMethod.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(() => {
+    var _props$experimentalFe, _props$columnGrouping2;
+
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
+      return;
+    }
+
+    const groupLookup = createGroupLookup((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      columnGrouping: (0, _extends2.default)({}, state.columnGrouping, {
+        lookup: groupLookup
+      })
+    }));
+  }, [apiRef, props.columnGroupingModel, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.columnGrouping]);
+};
+
+exports.useGridColumnGrouping = useGridColumnGrouping;

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

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridColumnGroupingPreProcessors = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _pipeProcessing = require("../../core/pipeProcessing");
+
+var _utils = require("../../../utils/utils");
+
+var _useGridColumnGrouping = require("./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; }
+
+const useGridColumnGroupingPreProcessors = (apiRef, props) => {
+  var _props$experimentalFe2;
+
+  const addHeaderGroups = React.useCallback(columnsState => {
+    var _props$experimentalFe;
+
+    if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
+      return columnsState;
+    }
+
+    const unwrappedGroupingModel = (0, _useGridColumnGrouping.unwrapGroupingColumnModel)(props.columnGroupingModel);
+    columnsState.all.forEach(field => {
+      var _unwrappedGroupingMod, _unwrappedGroupingMod2;
+
+      const newGroupPath = (_unwrappedGroupingMod = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod : [];
+      const lookupElement = columnsState.lookup[field];
+
+      if ((0, _useGridColumnGrouping.hasGroupPath)(lookupElement) && (0, _utils.isDeepEqual)(newGroupPath, lookupElement == null ? void 0 : 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] = (0, _extends2.default)({}, columnsState.lookup[field], {
+        groupPath: (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod2 : []
+      });
+    });
+    return columnsState;
+  }, [props.columnGroupingModel, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.columnGrouping]);
+  (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', addHeaderGroups);
+};
+
+exports.useGridColumnGroupingPreProcessors = useGridColumnGroupingPreProcessors;

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;