@mui/x-data-grid 5.15.2 → 5.17.0

package/legacy/components/panel/GridColumnsPanel.js

@@ -1,7 +1,11 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+var _excluded = ["sort"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import IconButton from '@mui/material/IconButton';
 import { switchClasses } from '@mui/material/Switch';
@@ -60,7 +64,9 @@ var GridColumnsPanelRowRoot = styled('div', {
 var GridIconButtonRoot = styled(IconButton)({
   justifyContent: 'flex-end'
 });
-export function GridColumnsPanel(props) {
+var collator = new Intl.Collator();
+
+function GridColumnsPanel(props) {
   var _rootProps$components, _rootProps$components3, _rootProps$components4;
 
   var apiRef = useGridApiContext();
@@ -79,6 +85,26 @@ export function GridColumnsPanel(props) {
   };
   var classes = useUtilityClasses(ownerState);
 
+  var sort = props.sort,
+      other = _objectWithoutProperties(props, _excluded);
+
+  var sortedColumns = React.useMemo(function () {
+    switch (sort) {
+      case 'asc':
+        return _toConsumableArray(columns).sort(function (a, b) {
+          return collator.compare(a.headerName || a.field, b.headerName || b.field);
+        });
+
+      case 'desc':
+        return _toConsumableArray(columns).sort(function (a, b) {
+          return -collator.compare(a.headerName || a.field, b.headerName || b.field);
+        });
+
+      default:
+        return columns;
+    }
+  }, [columns, sort]);
+
   var toggleColumn = function toggleColumn(event) {
     var _ref3 = event.target,
         field = _ref3.name;
@@ -115,18 +141,18 @@ export function GridColumnsPanel(props) {
   }, []);
   var currentColumns = React.useMemo(function () {
     if (!searchValue) {
-      return columns;
+      return sortedColumns;
     }
 
     var searchValueToCheck = searchValue.toLowerCase();
-    return columns.filter(function (column) {
+    return sortedColumns.filter(function (column) {
       return (column.headerName || column.field).toLowerCase().indexOf(searchValueToCheck) > -1;
     });
-  }, [columns, searchValue]);
+  }, [sortedColumns, searchValue]);
   React.useEffect(function () {
     searchInputRef.current.focus();
   }, []);
-  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, props, {
+  return /*#__PURE__*/_jsxs(GridPanelWrapper, _extends({}, other, {
     children: [/*#__PURE__*/_jsx(GridPanelHeader, {
       children: /*#__PURE__*/_jsx(rootProps.components.BaseTextField, _extends({
         label: apiRef.current.getLocaleText('columnsPanelTextFieldLabel'),
@@ -181,4 +207,13 @@ export function GridColumnsPanel(props) {
       }))]
     })]
   }));
-}
+}
+
+process.env.NODE_ENV !== "production" ? GridColumnsPanel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+  sort: PropTypes.oneOf(['asc', 'desc'])
+} : void 0;
+export { GridColumnsPanel };

package/legacy/components/panel/GridPanel.js

@@ -113,6 +113,7 @@ process.env.NODE_ENV !== "production" ? GridPanel.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
+  children: PropTypes.node,
 
   /**
    * Override or extend the styles applied to the component.

package/legacy/components/panel/filterPanel/GridFilterForm.js

@@ -386,6 +386,11 @@ process.env.NODE_ENV !== "production" ? GridFilterForm.propTypes = {
    */
   applyMultiFilterOperatorChanges: PropTypes.func.isRequired,
 
+  /**
+   * @ignore - do not document.
+   */
+  children: PropTypes.node,
+
   /**
    * Props passed to the column input component.
    * @default {}

package/legacy/components/panel/filterPanel/GridFilterPanel.js

@@ -129,6 +129,11 @@ process.env.NODE_ENV !== "production" ? GridFilterPanel.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * @ignore - do not document.
+   */
+  children: PropTypes.node,
+
   /**
    * Changes how the options in the columns selector should be ordered.
    * If not specified, the order is derived from the `columns` prop.

package/legacy/constants/defaultGridSlotsComponents.js

@@ -7,7 +7,7 @@ import MUISwitch from '@mui/material/Switch';
 import MUIButton from '@mui/material/Button';
 import MUITooltip from '@mui/material/Tooltip';
 import MUIPopper from '@mui/material/Popper';
-import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon } from '../components';
+import { GridArrowDownwardIcon, GridArrowUpwardIcon, GridCell, GridSkeletonCell, GridCheckIcon, GridCloseIcon, GridColumnIcon, GridColumnMenu, GridColumnsPanel, GridFilterAltIcon, GridFilterListIcon, GridFilterPanel, GridFooter, GridHeader, GridLoadingOverlay, GridNoRowsOverlay, GridPagination, GridPanel, GridPreferencesPanel, GridRow, GridSaveAltIcon, GridSeparatorIcon, GridTableRowsIcon, GridTripleDotsVerticalIcon, GridViewHeadlineIcon, GridViewStreamIcon, GridMoreVertIcon, GridExpandMoreIcon, GridKeyboardArrowRight, GridAddIcon, GridRemoveIcon, GridDragIcon, GridColumnHeaderFilterIconButton, GridSearchIcon } from '../components';
 import { GridColumnUnsortedIcon } from '../components/columnHeaders/GridColumnUnsortedIcon';
 import { ErrorOverlay } from '../components/ErrorOverlay';
 import { GridNoResultsOverlay } from '../components/GridNoResultsOverlay';
@@ -52,6 +52,7 @@ export var DATA_GRID_DEFAULT_SLOTS_COMPONENTS = _extends({}, DEFAULT_GRID_ICON_S
   BaseTooltip: MUITooltip,
   BasePopper: MUIPopper,
   Cell: GridCell,
+  SkeletonCell: GridSkeletonCell,
   ColumnHeaderFilterIconButton: GridColumnHeaderFilterIconButton,
   ColumnMenu: GridColumnMenu,
   ErrorOverlay: ErrorOverlay,

package/legacy/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export var 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 var 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/legacy/hooks/features/columnGrouping/gridColumnGroupsInterfaces.js

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

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

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

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

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

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

@@ -0,0 +1,151 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+var _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()`
+var recurrentUnwrapGroupingColumnModel = function recurrentUnwrapGroupingColumnModel(columnGroupNode, parents, unwrappedGroupingModelToComplet) {
+  if (isLeaf(columnGroupNode)) {
+    if (unwrappedGroupingModelToComplet[columnGroupNode.field] !== undefined) {
+      throw new Error(["MUI: columnGroupingModel contains duplicated field", "column field ".concat(columnGroupNode.field, " occurrs two times in the grouping model:"), "- ".concat(unwrappedGroupingModelToComplet[columnGroupNode.field].join(' > ')), "- ".concat(parents.join(' > '))].join('\n'));
+    }
+
+    unwrappedGroupingModelToComplet[columnGroupNode.field] = parents;
+    return;
+  }
+
+  var groupId = columnGroupNode.groupId,
+      children = columnGroupNode.children;
+  children.forEach(function (child) {
+    recurrentUnwrapGroupingColumnModel(child, [].concat(_toConsumableArray(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 var unwrapGroupingColumnModel = function unwrapGroupingColumnModel(columnGroupingModel) {
+  if (!columnGroupingModel) {
+    return {};
+  }
+
+  var unwrappedSubTree = {};
+  columnGroupingModel.forEach(function (columnGroupNode) {
+    recurrentUnwrapGroupingColumnModel(columnGroupNode, [], unwrappedSubTree);
+  });
+  return unwrappedSubTree;
+};
+
+var createGroupLookup = function createGroupLookup(columnGroupingModel) {
+  var groupLookup = {};
+  columnGroupingModel.forEach(function (node) {
+    if (isLeaf(node)) {
+      return;
+    }
+
+    var groupId = node.groupId,
+        children = node.children,
+        other = _objectWithoutProperties(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=".concat(groupId, " has no children."));
+    }
+
+    var groupParam = _extends({}, other, {
+      groupId: groupId
+    });
+
+    var subTreeLookup = createGroupLookup(children);
+
+    if (subTreeLookup[groupId] !== undefined || groupLookup[groupId] !== undefined) {
+      throw new Error("MUI: The groupId ".concat(groupId, " is used multiple times in the columnGroupingModel."));
+    }
+
+    groupLookup = _extends({}, groupLookup, subTreeLookup, _defineProperty({}, groupId, groupParam));
+  });
+  return _extends({}, groupLookup);
+};
+
+export var columnGroupsStateInitializer = function columnGroupsStateInitializer(state, props) {
+  var _props$columnGrouping;
+
+  var groupLookup = createGroupLookup((_props$columnGrouping = props.columnGroupingModel) != null ? _props$columnGrouping : []);
+  return _extends({}, state, {
+    columnGrouping: {
+      lookup: groupLookup,
+      groupCollapsedModel: {}
+    }
+  });
+};
+/**
+ * @requires useGridColumns (method, event)
+ * @requires useGridParamsApi (method)
+ */
+
+export var useGridColumnGrouping = function useGridColumnGrouping(apiRef, props) {
+  var _props$experimentalFe2;
+
+  /**
+   * API METHODS
+   */
+  var getColumnGroupPath = React.useCallback(function (field) {
+    var _columnLookup$field$g, _columnLookup$field;
+
+    var columnLookup = gridColumnLookupSelector(apiRef);
+    return (_columnLookup$field$g = (_columnLookup$field = columnLookup[field]) == null ? void 0 : _columnLookup$field.groupPath) != null ? _columnLookup$field$g : [];
+  }, [apiRef]);
+  var getAllGroupDetails = React.useCallback(function () {
+    var columnGroupLookup = gridColumnGroupsLookupSelector(apiRef);
+    return columnGroupLookup;
+  }, [apiRef]);
+  var 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
+
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    var _props$experimentalFe, _props$columnGrouping2;
+
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
+      return;
+    }
+
+    var groupLookup = createGroupLookup((_props$columnGrouping2 = props.columnGroupingModel) != null ? _props$columnGrouping2 : []);
+    apiRef.current.setState(function (state) {
+      return _extends({}, state, {
+        columnGrouping: _extends({}, state.columnGrouping, {
+          lookup: groupLookup
+        })
+      });
+    });
+  }, [apiRef, props.columnGroupingModel, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.columnGrouping]);
+};

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

@@ -0,0 +1,35 @@
+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 var useGridColumnGroupingPreProcessors = function useGridColumnGroupingPreProcessors(apiRef, props) {
+  var _props$experimentalFe2;
+
+  var addHeaderGroups = React.useCallback(function (columnsState) {
+    var _props$experimentalFe;
+
+    if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.columnGrouping)) {
+      return columnsState;
+    }
+
+    var unwrappedGroupingModel = unwrapGroupingColumnModel(props.columnGroupingModel);
+    columnsState.all.forEach(function (field) {
+      var _unwrappedGroupingMod, _unwrappedGroupingMod2;
+
+      var newGroupPath = (_unwrappedGroupingMod = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod : [];
+      var lookupElement = columnsState.lookup[field];
+
+      if (hasGroupPath(lookupElement) && 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] = _extends({}, columnsState.lookup[field], {
+        groupPath: (_unwrappedGroupingMod2 = unwrappedGroupingModel[field]) != null ? _unwrappedGroupingMod2 : []
+      });
+    });
+    return columnsState;
+  }, [props.columnGroupingModel, (_props$experimentalFe2 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe2.columnGrouping]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', addHeaderGroups);
+};

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

@@ -1,14 +1,16 @@
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 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';
@@ -18,7 +20,22 @@ 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";
+var MERGE_EMPTY_CELLS = true;
+var GridColumnHeaderRow = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'ColumnHeaderRow',
+  overridesResolver: function overridesResolver(props, styles) {
+    return styles.columnHeaderRow;
+  }
+})(function () {
+  return {
+    display: 'flex'
+  };
+});
 
 function isUIEvent(event) {
   return !!event.target;
@@ -46,6 +63,8 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   var cellTabIndexState = useGridSelector(apiRef, gridTabIndexCellSelector);
   var columnHeaderFocus = useGridSelector(apiRef, gridFocusColumnHeaderSelector);
   var headerHeight = useGridSelector(apiRef, gridDensityHeaderHeightSelector);
+  var headerGroupingMaxDepth = useGridSelector(apiRef, gridDensityHeaderGroupingMaxDepthSelector);
+  var totalHeaderHeight = useGridSelector(apiRef, gridDensityTotalHeaderHeightSelector);
   var filterColumnLookup = useGridSelector(apiRef, gridFilterActiveItemsLookupSelector);
   var sortColumnLookup = useGridSelector(apiRef, gridSortColumnLookupSelector);
   var columnMenuState = useGridSelector(apiRef, gridColumnMenuSelector);
@@ -163,11 +182,9 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
   useGridApiEventHandler(apiRef, 'columnResizeStop', handleColumnResizeStop);
   useGridApiEventHandler(apiRef, 'columnHeaderDragStart', handleColumnReorderStart);
   useGridApiEventHandler(apiRef, 'columnHeaderDragEnd', handleColumnReorderStop);
-  useGridApiEventHandler(apiRef, 'rowsScroll', handleScroll);
-
-  var getColumns = function getColumns(params) {
-    var other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  useGridApiEventHandler(apiRef, 'rowsScroll', handleScroll); // Helper for computation common between getColumnHeaders and getColumnGroupHeaders
 
+  var getColumnsToRender = function getColumnsToRender(params) {
     var _ref2 = params || {},
         _ref2$renderContext = _ref2.renderContext,
         nextRenderContext = _ref2$renderContext === void 0 ? renderContext : _ref2$renderContext,
@@ -180,8 +197,6 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       return null;
     }
 
-    var columns = [];
-
     var _getRenderableIndexes3 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
@@ -204,6 +219,26 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     });
     var lastColumnToRender = Math.min(nextRenderContext.lastColumnIndex + rootProps.columnBuffer, maxLastColumn);
     var renderedColumns = visibleColumns.slice(firstColumnToRender, lastColumnToRender);
+    return {
+      renderedColumns: renderedColumns,
+      firstColumnToRender: firstColumnToRender,
+      lastColumnToRender: lastColumnToRender,
+      minFirstColumn: minFirstColumn,
+      maxLastColumn: maxLastColumn
+    };
+  };
+
+  var getColumnHeaders = function getColumnHeaders(params) {
+    var other = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    var columnsToRender = getColumnsToRender(params);
+
+    if (columnsToRender == null) {
+      return null;
+    }
+
+    var renderedColumns = columnsToRender.renderedColumns,
+        firstColumnToRender = columnsToRender.firstColumnToRender;
+    var columns = [];
 
     for (var i = 0; i < renderedColumns.length; i += 1) {
       var column = renderedColumns[i];
@@ -228,17 +263,184 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
       }, other), column.field));
     }
 
+    return /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+      role: "row",
+      "aria-rowindex": headerGroupingMaxDepth + 1,
+      children: columns
+    });
+  };
+
+  var getParents = function getParents() {
+    var path = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+    var depth = arguments.length > 1 ? arguments[1] : undefined;
+    return path.slice(0, depth + 1);
+  };
+
+  var getColumnGroupHeaders = function getColumnGroupHeaders(params) {
+    if (headerGroupingMaxDepth === 0) {
+      return null;
+    }
+
+    var columnsToRender = getColumnsToRender(params);
+
+    if (columnsToRender == null) {
+      return null;
+    }
+
+    var renderedColumns = columnsToRender.renderedColumns,
+        firstColumnToRender = columnsToRender.firstColumnToRender,
+        lastColumnToRender = columnsToRender.lastColumnToRender,
+        maxLastColumn = columnsToRender.maxLastColumn;
+    var columns = [];
+    var headerToRender = [];
+
+    var _loop = function _loop(depth) {
+      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
+      var initialHeader = [];
+      var leftOverflow = 0;
+      var columnIndex = firstColumnToRender - 1;
+      var 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.
+
+      var 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;
+
+        var 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;
+      }
+
+      var depthInfo = renderedColumns.reduce(function (aggregated, column, i) {
+        var _column$computedWidth7;
+
+        var 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 [].concat(_toConsumableArray(aggregated.slice(0, aggregated.length - 1)), [_extends({}, lastItem, {
+              width: lastItem.width + ((_column$computedWidth4 = column.computedWidth) != null ? _column$computedWidth4 : 0),
+              fields: [].concat(_toConsumableArray(lastItem.fields), [column.field])
+            })]);
+          } // Create a new grouping
+
+
+          return [].concat(_toConsumableArray(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 [].concat(_toConsumableArray(aggregated.slice(0, aggregated.length - 1)), [_extends({}, lastItem, {
+            width: lastItem.width + ((_column$computedWidth6 = column.computedWidth) != null ? _column$computedWidth6 : 0),
+            fields: [].concat(_toConsumableArray(lastItem.fields), [column.field])
+          })]);
+        } // We create new empty cell
+
+
+        return [].concat(_toConsumableArray(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;
+      var 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;
+
+        var _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: leftOverflow,
+        elements: _toConsumableArray(depthInfo)
+      });
+    };
+
+    for (var depth = 0; depth < headerGroupingMaxDepth; depth += 1) {
+      _loop(depth);
+    }
+
+    headerToRender.forEach(function (depthInfo, depthIndex) {
+      columns.push( /*#__PURE__*/_jsx(GridColumnHeaderRow, {
+        style: {
+          height: "".concat(headerHeight, "px"),
+          transform: "translateX(-".concat(depthInfo.leftOverflow, "px)")
+        },
+        role: "row",
+        "aria-rowindex": depthIndex + 1,
+        children: depthInfo.elements.map(function (_ref3, groupIndex) {
+          var groupId = _ref3.groupId,
+              width = _ref3.width,
+              fields = _ref3.fields,
+              colIndex = _ref3.colIndex;
+          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;
   };
 
   var rootStyle = {
-    minHeight: headerHeight,
-    maxHeight: headerHeight,
+    minHeight: totalHeaderHeight,
+    maxHeight: totalHeaderHeight,
     lineHeight: "".concat(headerHeight, "px")
   };
   return {
     renderContext: renderContext,
-    getColumns: getColumns,
+    getColumnHeaders: getColumnHeaders,
+    getColumnGroupHeaders: getColumnGroupHeaders,
     isDragging: !!dragCol,
     getRootProps: function getRootProps() {
       var other = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -249,8 +451,7 @@ export var useGridColumnHeaders = function useGridColumnHeaders(props) {
     getInnerProps: function getInnerProps() {
       return {
         ref: handleInnerRef,
-        'aria-rowindex': 1,
-        role: 'row'
+        role: 'rowgroup'
       };
     }
   };