@mui/x-data-grid-pro 5.15.3 → 5.16.0

package/CHANGELOG.md

@@ -3,6 +3,62 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.16.0
+
+_Aug 25, 2022_
+
+We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce column grouping for data grid (#5133) @alexfauquette
+
+  You can now group columns using the `columnGroupingModel` prop. This lets you to display more structured data.
+
+  <img src="https://user-images.githubusercontent.com/45398769/186178366-4fba66b2-bf90-4c7a-9d83-940a7fc78704.png" width="800" />
+
+  To enable this feature, add `experimentalFeatures={{ columnGrouping: true }}`.
+  The grouping header can be fully customized.
+  See the [documentation](https://mui.com/x/react-data-grid/column-groups/) to explore everything it has to offer.
+
+- 🐞 Bugfixes
+- 🌏 New locales for pickers thanks to @tesseractjh and @drastus
+
+### `@mui/x-data-grid@v5.16.0` / `@mui/x-data-grid-pro@v5.16.0` / `@mui/x-data-grid-premium@v5.16.0`
+
+#### Changes
+
+- [DataGrid] Implement column grouping (#5133) @alexfauquette
+- [DataGrid] Handle `disableVirtualization` prop change (#5889) @cherniavskii
+- [DataGrid] Improve `GridRowModel` typing (#5734) @cherniavskii
+- [DataGrid] Update deprecation note for `GridColDef` `hide` property (#5886) @cherniavskii
+
+### `@mui/x-date-pickers@v5.0.0-beta.7` / `@mui/x-date-pickers-pro@v5.0.0-beta.7`
+
+#### Changes
+
+- [DatePicker] Fix to pass down `className` prop provided on DatePicker to `renderInput` (#5471) @CruseCtrl
+- [DatePicker] Improve `a11y` support (#5809) @LukasTy
+- [pickers] Add `PaperContent` component slot (#5801) @LukasTy
+- [pickers] Add a breaking change section in the migration guide (#5805) @alexfauquette
+- [pickers] Add new translations to `localeText` (#5143) @alexfauquette
+- [pickers] Document components slots (#4657) @flaviendelangle
+- [pickers] Add new unstable field components (#5504) @flaviendelangle
+- [pickers] Fallback to default `minDate` / `maxDate` when `null` value is passed (#5397) @flaviendelangle
+- [l10n] Add Korean (ko-KR) locale (#5854) @tesseractjh
+- [l10n] Add Polish (pl-PL) locale (#5833) @drastus
+
+### Docs
+
+- [docs] Fix typo in `migration from lab` (#5277) @chuckwired
+- [docs] Use `dayjs` instead of `date-fns` in doc examples (#5481) @flaviendelangle
+
+### Core
+
+- [core] Clarify the scope of the license key used for tests and documentation (#5824) @oliviertassinari
+- [core] Fix Typescript error on field hooks (#5892) @flaviendelangle
+- [core] Memoize `columns` in `useDemoData` hook (#5848) @cherniavskii
+- [core] Remove Firefox from the BrowserStack list (#5874) @DanailH
+- [core] Small changes to the release script (#5840) @m4theushw
+
 ## 5.15.3
 
 _Aug 18, 2022_

package/DataGridPro/DataGridPro.js

@@ -106,6 +106,7 @@ DataGridProRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -274,6 +275,7 @@ DataGridProRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,

package/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridColumnGroupingPreProcessors } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -21,6 +21,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
@@ -51,6 +52,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
@@ -61,6 +63,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/components/DataGridProColumnHeaders.js

@@ -11,7 +11,6 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
 import { filterColumns } from './DataGridProVirtualScroller';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 const useUtilityClasses = ownerState => {
@@ -57,6 +56,7 @@ const GridColumnHeadersPinnedColumnHeaders = styled('div', {
   height: '100%',
   zIndex: 1,
   display: 'flex',
+  flexDirection: 'column',
   boxShadow: theme.shadows[2],
   backgroundColor: theme.palette.background.default
 }, theme.palette.mode === 'dark' && {
@@ -98,7 +98,8 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     renderContext,
     getRootProps,
     getInnerProps,
-    getColumns
+    getColumnHeaders,
+    getColumnGroupHeaders
   } = useGridColumnHeaders({
     innerRef,
     minColumnIndex: leftPinnedColumns.length
@@ -119,35 +120,42 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
   }) : null;
   const innerProps = getInnerProps();
   const pinnedColumnHeadersProps = {
-    role: innerProps.role,
-    'aria-rowindex': innerProps['aria-rowindex']
+    role: innerProps.role
   };
   return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
     ref: ref,
     className: className
   }, getRootProps(other), {
-    children: [leftRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
+    children: [leftRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       className: classes.leftPinnedColumns,
       ownerState: {
         side: GridPinnedPosition.left
       }
     }, pinnedColumnHeadersProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }), getColumnHeaders({
         renderContext: leftRenderContext,
         minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
-      })
-    })), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      })]
+    })), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, innerProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
         renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
-      })
-    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
+      }), getColumnHeaders({
+        renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })]
+    })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       ownerState: {
         side: GridPinnedPosition.right
       },
@@ -156,14 +164,18 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         paddingRight: scrollbarSize
       }
     }, pinnedColumnHeadersProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }), getColumnHeaders({
         renderContext: rightRenderContext,
         minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       }, {
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
-      })
+      })]
     }))]
   }));
 });

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -39,6 +39,7 @@ export const useGridColumnReorder = (apiRef, props) => {
     y: 0
   });
   const originColumnIndex = React.useRef(null);
+  const forbiddenIndexes = React.useRef({});
   const removeDnDStylesTimeout = React.useRef();
   const ownerState = {
     classes: props.classes
@@ -70,6 +71,69 @@ export const useGridColumnReorder = (apiRef, props) => {
       dragColNode.current.classList.remove(classes.columnHeaderDragging);
     });
     originColumnIndex.current = apiRef.current.getColumnIndex(params.field, false);
+    const draggingColumnGroupPath = apiRef.current.unstable_getColumnGroupPath(params.field);
+    const columnIndex = originColumnIndex.current;
+    const allColumns = apiRef.current.getAllColumns();
+    const groupsLookup = apiRef.current.unstable_getAllGroupDetails(); // The limitingGroupId is the id of the group from which the dragged column should not escape
+
+    let limitingGroupId = null;
+    draggingColumnGroupPath.forEach(groupId => {
+      var _groupsLookup$groupId;
+
+      if (!((_groupsLookup$groupId = groupsLookup[groupId]) != null && _groupsLookup$groupId.freeReordering)) {
+        var _allColumns$groupPath, _allColumns$groupPath2;
+
+        // Only consider group that are made of more than one column
+        if (columnIndex > 0 && (_allColumns$groupPath = allColumns[columnIndex - 1].groupPath) != null && _allColumns$groupPath.includes(groupId)) {
+          limitingGroupId = groupId;
+        } else if (columnIndex + 1 < allColumns.length && (_allColumns$groupPath2 = allColumns[columnIndex + 1].groupPath) != null && _allColumns$groupPath2.includes(groupId)) {
+          limitingGroupId = groupId;
+        }
+      }
+    });
+    forbiddenIndexes.current = {};
+
+    for (let indexToForbid = 0; indexToForbid < allColumns.length; indexToForbid += 1) {
+      const leftIndex = indexToForbid <= columnIndex ? indexToForbid - 1 : indexToForbid;
+      const rightIndex = indexToForbid < columnIndex ? indexToForbid : indexToForbid + 1;
+
+      if (limitingGroupId !== null) {
+        var _allColumns$leftIndex, _allColumns$rightInde;
+
+        // verify this indexToForbid will be linked to the limiting group. Otherwise forbid it
+        let allowIndex = false;
+
+        if (leftIndex >= 0 && (_allColumns$leftIndex = allColumns[leftIndex].groupPath) != null && _allColumns$leftIndex.includes(limitingGroupId)) {
+          allowIndex = true;
+        } else if (rightIndex < allColumns.length && (_allColumns$rightInde = allColumns[rightIndex].groupPath) != null && _allColumns$rightInde.includes(limitingGroupId)) {
+          allowIndex = true;
+        }
+
+        if (!allowIndex) {
+          forbiddenIndexes.current[indexToForbid] = true;
+        }
+      } // Verify we are not splitting another group
+
+
+      if (leftIndex >= 0 && rightIndex < allColumns.length) {
+        var _allColumns$rightInde2, _allColumns$rightInde3;
+
+        (_allColumns$rightInde2 = allColumns[rightIndex]) == null ? void 0 : (_allColumns$rightInde3 = _allColumns$rightInde2.groupPath) == null ? void 0 : _allColumns$rightInde3.forEach(groupId => {
+          var _allColumns$leftIndex2;
+
+          if ((_allColumns$leftIndex2 = allColumns[leftIndex].groupPath) != null && _allColumns$leftIndex2.includes(groupId)) {
+            if (!draggingColumnGroupPath.includes(groupId)) {
+              var _groupsLookup$groupId2;
+
+              // moving here split the group groupId in two distincts chunks
+              if (!((_groupsLookup$groupId2 = groupsLookup[groupId]) != null && _groupsLookup$groupId2.freeReordering)) {
+                forbiddenIndexes.current[indexToForbid] = true;
+              }
+            }
+          }
+        });
+      }
+    }
   }, [props.disableColumnReorder, classes.columnHeaderDragging, logger, apiRef]);
   const handleDragEnter = React.useCallback((params, event) => {
     event.preventDefault(); // Prevent drag events propagation.
@@ -100,19 +164,47 @@ export const useGridColumnReorder = (apiRef, props) => {
       const targetCol = apiRef.current.getColumn(params.field);
       const dragColIndex = apiRef.current.getColumnIndex(dragColField, false);
       const visibleColumns = apiRef.current.getVisibleColumns();
+      const allColumns = apiRef.current.getAllColumns();
       const cursorMoveDirectionX = getCursorMoveDirectionX(cursorPosition.current, coordinates);
       const hasMovedLeft = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_LEFT && targetColIndex < dragColIndex;
       const hasMovedRight = cursorMoveDirectionX === CURSOR_MOVE_DIRECTION_RIGHT && dragColIndex < targetColIndex;
 
       if (hasMovedLeft || hasMovedRight) {
         let canBeReordered;
+        let indexOffsetInHiddenColumns = 0;
 
         if (!targetCol.disableReorder) {
           canBeReordered = true;
         } else if (hasMovedLeft) {
-          canBeReordered = targetColIndex > 0 && !visibleColumns[targetColIndex - 1].disableReorder;
+          canBeReordered = targetColVisibleIndex > 0 && !visibleColumns[targetColVisibleIndex - 1].disableReorder;
         } else {
-          canBeReordered = targetColIndex < visibleColumns.length - 1 && !visibleColumns[targetColIndex + 1].disableReorder;
+          canBeReordered = targetColVisibleIndex < visibleColumns.length - 1 && !visibleColumns[targetColVisibleIndex + 1].disableReorder;
+        }
+
+        if (forbiddenIndexes.current[targetColIndex]) {
+          let nextVisibleColumnField;
+          let indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+
+          if (hasMovedLeft) {
+            nextVisibleColumnField = targetColVisibleIndex > 0 ? visibleColumns[targetColVisibleIndex - 1].field : null;
+
+            while (indexWithOffset > 0 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns -= 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          } else {
+            nextVisibleColumnField = targetColVisibleIndex + 1 < visibleColumns.length ? visibleColumns[targetColVisibleIndex + 1].field : null;
+
+            while (indexWithOffset < allColumns.length - 1 && allColumns[indexWithOffset].field !== nextVisibleColumnField && forbiddenIndexes.current[indexWithOffset]) {
+              indexOffsetInHiddenColumns += 1;
+              indexWithOffset = targetColIndex + indexOffsetInHiddenColumns;
+            }
+          }
+
+          if (forbiddenIndexes.current[indexWithOffset] || allColumns[indexWithOffset].field === nextVisibleColumnField) {
+            // If we ended up on a visible column, or a forbidden one, we can not do the reorder
+            canBeReordered = false;
+          }
         }
 
         const canBeReorderedProcessed = apiRef.current.unstable_applyPipeProcessors('canBeReordered', canBeReordered, {
@@ -120,7 +212,7 @@ export const useGridColumnReorder = (apiRef, props) => {
         });
 
         if (canBeReorderedProcessed) {
-          apiRef.current.setColumnIndex(dragColField, targetColIndex);
+          apiRef.current.setColumnIndex(dragColField, targetColIndex + indexOffsetInHiddenColumns);
         }
       }
 

package/hooks/features/columnResize/useGridColumnResize.js

@@ -4,7 +4,7 @@ import { ownerDocument, useEventCallback } from '@mui/material/utils';
 import { gridClasses, useGridApiEventHandler, useGridApiOptionHandler, useGridNativeEventListener, useGridLogger } from '@mui/x-data-grid';
 import { clamp, findParentElementFromClassName } from '@mui/x-data-grid/internals';
 import { useTheme } from '@mui/material/styles';
-import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField } from '../../../utils/domUtils';
+import { findGridCellElementsFromCol, getFieldFromHeaderElem, findHeaderElementFromField, findGroupHeaderElementsFromField } from '../../../utils/domUtils';
 // TODO: remove support for Safari < 13.
 // https://caniuse.com/#search=touch-action
 //
@@ -104,6 +104,7 @@ export const useGridColumnResize = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridColumnResize');
   const colDefRef = React.useRef();
   const colElementRef = React.useRef();
+  const colGroupingElementRef = React.useRef();
   const colCellElementsRef = React.useRef();
   const theme = useTheme(); // To improve accessibility, the separator has padding on both sides.
   // Clicking inside the padding area should be treated as a click in the separator.
@@ -124,7 +125,7 @@ export const useGridColumnResize = (apiRef, props) => {
     colElementRef.current.style.width = `${newWidth}px`;
     colElementRef.current.style.minWidth = `${newWidth}px`;
     colElementRef.current.style.maxWidth = `${newWidth}px`;
-    colCellElementsRef.current.forEach(element => {
+    [...colCellElementsRef.current, ...colGroupingElementRef.current].forEach(element => {
       const div = element;
       let finalWidth;
 
@@ -182,7 +183,7 @@ export const useGridColumnResize = (apiRef, props) => {
   const handleColumnResizeMouseDown = useEventCallback(({
     colDef
   }, event) => {
-    var _apiRef$current$colum;
+    var _apiRef$current$colum, _apiRef$current$colum2;
 
     // Only handle left clicks
     if (event.button !== 0) {
@@ -202,6 +203,7 @@ export const useGridColumnResize = (apiRef, props) => {
     }, event);
     colDefRef.current = colDef;
     colElementRef.current = (_apiRef$current$colum = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum.current.querySelector(`[data-field="${colDef.field}"]`);
+    colGroupingElementRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     const doc = ownerDocument(apiRef.current.rootElementRef.current);
     doc.body.style.cursor = 'col-resize';
@@ -250,7 +252,7 @@ export const useGridColumnResize = (apiRef, props) => {
     apiRef.current.publishEvent('columnResize', params, nativeEvent);
   });
   const handleTouchStart = useEventCallback(event => {
-    var _apiRef$current$colum2;
+    var _apiRef$current$colum3, _apiRef$current$colum4;
 
     const cellSeparator = findParentElementFromClassName(event.target, gridClasses['columnSeparator--resizable']); // Let the event bubble if the target is not a col separator
 
@@ -273,12 +275,13 @@ export const useGridColumnResize = (apiRef, props) => {
     colElementRef.current = findParentElementFromClassName(event.target, gridClasses.columnHeader);
     const field = getFieldFromHeaderElem(colElementRef.current);
     const colDef = apiRef.current.getColumn(field);
+    colGroupingElementRef.current = findGroupHeaderElementsFromField((_apiRef$current$colum3 = apiRef.current.columnHeadersContainerElementRef) == null ? void 0 : _apiRef$current$colum3.current, field);
     logger.debug(`Start Resize on col ${colDef.field}`);
     apiRef.current.publishEvent('columnResizeStart', {
       field
     }, event);
     colDefRef.current = colDef;
-    colElementRef.current = findHeaderElementFromField((_apiRef$current$colum2 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum2.current, colDef.field);
+    colElementRef.current = findHeaderElementFromField((_apiRef$current$colum4 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum4.current, colDef.field);
     colCellElementsRef.current = findGridCellElementsFromCol(colElementRef.current, apiRef.current);
     resizeDirection.current = getResizeDirection(event.target, theme.direction);
     initialOffsetToSeparator.current = computeOffsetToSeparator(touch.clientX, colElementRef.current.getBoundingClientRect(), resizeDirection.current);
@@ -319,9 +322,9 @@ export const useGridColumnResize = (apiRef, props) => {
     };
   }, [apiRef, handleTouchStart, stopListening]);
   useGridNativeEventListener(apiRef, () => {
-    var _apiRef$current$colum3;
+    var _apiRef$current$colum5;
 
-    return (_apiRef$current$colum3 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum3.current;
+    return (_apiRef$current$colum5 = apiRef.current.columnHeadersElementRef) == null ? void 0 : _apiRef$current$colum5.current;
   }, 'touchstart', handleTouchStart, {
     passive: doesSupportTouchActionNone()
   });

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.d.ts

@@ -12,8 +12,8 @@ export declare function addPinnedRow({ groupingParams, rowModel, rowId, position
     apiRef: React.MutableRefObject<GridApiPro>;
 }): {
     idRowsLookup: {
-        [x: string]: any;
-        [x: number]: any;
+        [x: string]: import("@mui/x-data-grid").GridValidRowModel;
+        [x: number]: import("@mui/x-data-grid").GridValidRowModel;
     };
     tree: {
         [x: string]: import("@mui/x-data-grid").GridRowTreeNodeConfig;
@@ -21,8 +21,8 @@ export declare function addPinnedRow({ groupingParams, rowModel, rowId, position
     };
     additionalRowGroups: {
         pinnedRows: {
-            top?: GridRowEntry<any>[] | undefined;
-            bottom?: GridRowEntry<any>[] | undefined;
+            top?: GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[] | undefined;
+            bottom?: GridRowEntry<import("@mui/x-data-grid").GridValidRowModel>[] | undefined;
         };
     };
     groupingName: string;

package/index.js

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

package/legacy/DataGridPro/DataGridPro.js

@@ -106,6 +106,7 @@ DataGridProRaw.propTypes = {
    * @default 3
    */
   columnBuffer: PropTypes.number,
+  columnGroupingModel: PropTypes.arrayOf(PropTypes.object),
 
   /**
    * Set of columns of type [[GridColumns]].
@@ -274,6 +275,7 @@ DataGridProRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: PropTypes.shape({
+    columnGrouping: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -1,4 +1,4 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer } from '@mui/x-data-grid/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing_new, useGridEditing_old, editingStateInitializer_old, editingStateInitializer_new, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, useGridDimensions, useGridStatePersistence, useGridSelectionPreProcessors, useGridColumnSpanning, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, selectionStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridColumnGroupingPreProcessors } from '@mui/x-data-grid/internals';
 // Pro-only features
 import { useGridInfiniteLoader } from '../hooks/features/infiniteLoader/useGridInfiniteLoader';
 import { useGridColumnReorder, columnReorderStateInitializer } from '../hooks/features/columnReorder/useGridColumnReorder';
@@ -21,6 +21,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
    * Register all pre-processors called during state initialization here.
    */
 
+  useGridColumnGroupingPreProcessors(apiRef, props);
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
@@ -51,6 +52,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridInitializeState(paginationStateInitializer, apiRef, props);
   useGridInitializeState(rowsMetaStateInitializer, apiRef, props);
   useGridInitializeState(columnMenuStateInitializer, apiRef, props);
+  useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridTreeData(apiRef);
   useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
@@ -61,6 +63,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridParamsApi(apiRef);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
+  useGridColumnGrouping(apiRef, props);
   var useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);

package/legacy/components/DataGridProColumnHeaders.js

@@ -13,7 +13,6 @@ import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
 import { filterColumns } from './DataGridProVirtualScroller';
-import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
@@ -55,6 +54,7 @@ var GridColumnHeadersPinnedColumnHeaders = styled('div', {
     height: '100%',
     zIndex: 1,
     display: 'flex',
+    flexDirection: 'column',
     boxShadow: theme.shadows[2],
     backgroundColor: theme.palette.background.default
   }, theme.palette.mode === 'dark' && {
@@ -109,7 +109,8 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
       renderContext = _useGridColumnHeaders.renderContext,
       getRootProps = _useGridColumnHeaders.getRootProps,
       getInnerProps = _useGridColumnHeaders.getInnerProps,
-      getColumns = _useGridColumnHeaders.getColumns;
+      getColumnHeaders = _useGridColumnHeaders.getColumnHeaders,
+      getColumnGroupHeaders = _useGridColumnHeaders.getColumnGroupHeaders;
 
   var ownerState = {
     leftPinnedColumns: leftPinnedColumns,
@@ -127,35 +128,42 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
   }) : null;
   var innerProps = getInnerProps();
   var pinnedColumnHeadersProps = {
-    role: innerProps.role,
-    'aria-rowindex': innerProps['aria-rowindex']
+    role: innerProps.role
   };
   return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
     ref: ref,
     className: className
   }, getRootProps(other), {
-    children: [leftRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
+    children: [leftRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       className: classes.leftPinnedColumns,
       ownerState: {
         side: GridPinnedPosition.left
       }
     }, pinnedColumnHeadersProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
+        renderContext: leftRenderContext,
+        minFirstColumn: leftRenderContext.firstColumnIndex,
+        maxLastColumn: leftRenderContext.lastColumnIndex
+      }), getColumnHeaders({
         renderContext: leftRenderContext,
         minFirstColumn: leftRenderContext.firstColumnIndex,
         maxLastColumn: leftRenderContext.lastColumnIndex
       }, {
         disableReorder: true
-      })
-    })), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+      })]
+    })), /*#__PURE__*/_jsxs(GridColumnHeadersInner, _extends({
       isDragging: isDragging
     }, innerProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
         renderContext: renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
-      })
-    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
+      }), getColumnHeaders({
+        renderContext: renderContext,
+        minFirstColumn: leftPinnedColumns.length,
+        maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
+      })]
+    })), rightRenderContext && /*#__PURE__*/_jsxs(GridColumnHeadersPinnedColumnHeaders, _extends({
       ownerState: {
         side: GridPinnedPosition.right
       },
@@ -164,14 +172,18 @@ export var DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function Dat
         paddingRight: scrollbarSize
       }
     }, pinnedColumnHeadersProps, {
-      children: getColumns({
+      children: [getColumnGroupHeaders({
+        renderContext: rightRenderContext,
+        minFirstColumn: rightRenderContext.firstColumnIndex,
+        maxLastColumn: rightRenderContext.lastColumnIndex
+      }), getColumnHeaders({
         renderContext: rightRenderContext,
         minFirstColumn: rightRenderContext.firstColumnIndex,
         maxLastColumn: rightRenderContext.lastColumnIndex
       }, {
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
-      })
+      })]
     }))]
   }));
 });