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

package/CHANGELOG.md

@@ -3,6 +3,155 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.17.1
+
+_Sep 5, 2022_
+
+We'd like to offer a big thanks to the 3 contributors who made this release possible. Here are some highlights ✨:
+
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.1` / `@mui/x-data-grid-pro@v5.17.1` / `@mui/x-data-grid-premium@v5.17.1`
+
+#### Changes
+
+- [DataGrid] Fix cells being focused on mouseUp (#5980) @cherniavskii
+- [DataGrid] Fix focused cell if column is spanned and new editing API is used (#5962) @m4theushw
+- [DataGridPro] Fix import in lazy-loading causing a bundling error (#6031) @flaviendelangle
+
+## 5.17.0
+
+_Sep 2, 2022_
+
+🎉 We are excited to finally introduce a stable release (v5.0.0) for the `@mui/x-date-pickers` and  `@mui/x-date-pickers-pro` packages!
+
+If you are still using picker components from the `lab`, take a look at the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/).
+
+We'd like to offer a big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Implement Lazy loading (#5214) @DanailH
+
+  Pro users now can try the experimental lazy loading feature.
+  In a few steps, you can load your data on demand, as the rows are displayed.
+
+  To enable this feature, add `experimentalFeatures={{ lazyLoading: true }}`.
+  Lazy Loading requires a few other settings.
+  See the [documentation](https://mui.com/x/react-data-grid/row-updates/#lazy-loading) to explore the example in detail.
+
+- 🚀 Improve `pickers` focus management (#5820) @alexfauquette
+- 🎉 Enable disabling `day` on date range picker depending on `position` (#5773) @alexfauquette
+- ✨ Various improvements
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.17.0` / `@mui/x-data-grid-pro@v5.17.0` / `@mui/x-data-grid-premium@v5.17.0`
+
+#### Changes
+
+- [DataGrid] Add `sort` prop to columns panel slot (#5888) @gavbrennan
+- [DataGrid] Do not throw if `fieldToFocus` cannot be found (#5871) @cherniavskii
+- [DataGrid] Support `getRowId` in the `replaceRows` method (#5988) @flaviendelangle
+- [DataGridPro] Add class name to row with open detail panel (#5924) @m4theushw
+- [DataGridPro] Fix crash when using `pinnedRows` + `getRowClassName` props and `rows=[]` (#5851) @cherniavskii
+- [DataGridPro] Fix filtering with inactive filter items (#5993) @alexfauquette
+- [DataGridPro] Implement Lazy loading (#5214) @DanailH
+- [DataGridPro] Support pinned columns and dynamic row height (#5782) @m4theushw
+- [DataGridPremium] Add state initializer for column groups (#5963) @alexfauquette
+- [DataGridPremium] Update grouping when `groupingValueGetter` changes (#5919) @flaviendelangle
+- [DataGridPremium] Use the aggregated value on tree data real groups (#5953) @flaviendelangle
+
+### `@mui/x-date-pickers@v5.0.0` / `@mui/x-date-pickers-pro@v5.0.0`
+
+#### Changes
+
+- [DatePicker] Improve focus management (#5820) @alexfauquette
+- [DateRangePicker] Enable disabling `day` depending on `position` (#5773) @alexfauquette
+- [DateTimePicker] Create a new `tabs` component slot (#5972) @LukasTy
+- [pickers] Do not forward validation props to the DOM on field components (#5971) @flaviendelangle
+- [pickers] Do not hardcode `date-fns` elements in field components (#5975) @flaviendelangle
+- [pickers] Do not require `date-fns` in `@mui/x-date-pickers-pro` (#5941) @flaviendelangle
+- [pickers] Fix mobile picker not opening on label click (#5651) @LukasTy
+- [pickers] Improve DOM event management on `useField` (#5901) @flaviendelangle
+- [pickers] Include `community` package `themeAugmentation` in `pro` package types (#5969) @LukasTy
+- [pickers] Rename `DateRangeField` into `SingleInputDateRangeField` (#5961) @flaviendelangle
+- [pickers] Support `isSameError` on field components (#5984) @flaviendelangle
+
+### Docs
+
+- [docs] Add `description` and `default` to pickers slots (#5893) @alexfauquette
+- [docs] Fix typo (#5945) @wettopa
+- [docs] Fix typo `onYearPicker` to `onYearChange` (#5954) @alexfauquette
+- [docs] Update `GridCellParams`'s `value` description (#5849) @cherniavskii
+- [docs] Update `README.md` to match Introduction section of the docs (#5754) @samuelsycamore
+
+### Core
+
+- [core] Fix typo (#5990) @flaviendelangle
+- [core] Remove old babel resolve rule (#5939) @oliviertassinari
+- [core] Remove outdated TODO (#5956) @flaviendelangle
+- [core] Upgrade monorepo (#5960) @cherniavskii
+- [core] Fix statics (#5986) @DanailH
+- [core] Remove unused dependencies (#5937) @oliviertassinari
+- [license] Remove CLI (#5757) @flaviendelangle
+- [test] Fix time zone sensitive test (#5955) @LukasTy
+- [test] Use `userEvent.mousePress` instead of `fireClickEvent` (#5920) @cherniavskii
+
+## 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_
@@ -529,7 +678,7 @@ We'd like to offer a big thanks to the 15 contributors who made this release pos
 
   **MonthPicker**: The prop `onMonthChange` has been removed, you can use `onChange` instead since every change is a month change
 
-  **YearPicker**: The prop `onYearPicker` has been removed, you can use `onChange` instead since every change is a year change
+  **YearPicker**: The prop `onYearChange` has been removed, you can use `onChange` instead since every change is a year change
 
   **DayPicker**: The prop `isDateDisabled` has been removed, you can now use the same validation props as for the other components (`maxDate`, `minDate`, `shouldDisableDate`, `disableFuture` and `disablePast`)
 

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,8 @@ 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,
+    lazyLoading: PropTypes.bool,
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
     rowPinning: PropTypes.bool,
@@ -668,6 +671,14 @@ DataGridProRaw.propTypes = {
    */
   onError: PropTypes.func,
 
+  /**
+   * Callback fired when rowCount is set and the next batch of virtualized rows is rendered.
+   * @param {GridFetchRowsParams} params With all properties from [[GridFetchRowsParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onFetchRows: PropTypes.func,
+
   /**
    * Callback fired when the Filter model changes before the filters are applied.
    * @param {GridFilterModel} model With all properties from [[GridFilterModel]].
@@ -913,6 +924,14 @@ DataGridProRaw.propTypes = {
    */
   rows: PropTypes.array.isRequired,
 
+  /**
+   * Loading rows can be processed on the server or client-side.
+   * Set it to 'client' if you would like enable infnite loading.
+   * Set it to 'server' if you would like to enable lazy loading.
+   * * @default "client"
+   */
+  rowsLoadingMode: PropTypes.oneOf(['client', 'server']),
+
   /**
    * Sets the type of space between rows added by `getRowSpacing`.
    * @default "margin"

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';
@@ -11,6 +11,8 @@ import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/featur
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
 import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
 import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
+import { useGridLazyLoader } from '../hooks/features/lazyLoader/useGridLazyLoader';
+import { useGridLazyLoaderPreProcessors } from '../hooks/features/lazyLoader/useGridLazyLoaderPreProcessors';
 import { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
 import { useGridRowPinningPreProcessors } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export const useDataGridProComponent = (inputApiRef, props) => {
@@ -21,9 +23,11 @@ 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);
+  useGridLazyLoaderPreProcessors(apiRef, props);
   useGridRowPinningPreProcessors(apiRef);
   useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
   // Because it changes the order of the columns.
@@ -51,6 +55,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 +66,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);
@@ -75,6 +81,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
+  useGridLazyLoader(apiRef, props);
   useGridColumnMenu(apiRef);
   useGridCsvExport(apiRef);
   useGridPrintExport(apiRef, props);

package/DataGridPro/useDataGridProProps.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useThemeProps } from '@mui/material/styles';
-import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES } from '@mui/x-data-grid';
+import { DATA_GRID_DEFAULT_SLOTS_COMPONENTS, GRID_DEFAULT_LOCALE_TEXT, DATA_GRID_PROPS_DEFAULT_VALUES, GridFeatureModeConstant } from '@mui/x-data-grid';
 
 /**
  * The default values of `DataGridProPropsWithDefaultValue` to inject in the props of DataGridPro.
@@ -14,6 +14,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowReordering: false,
+  rowsLoadingMode: GridFeatureModeConstant.client,
   getDetailPanelHeight: () => 500
 });
 export const useDataGridProProps = inProps => {

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/components/DataGridProVirtualScroller.js

@@ -274,17 +274,20 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const detailPanels = getDetailPanels();
   const topPinnedRows = getRows({
     renderContext,
-    rows: topPinnedRowsData
+    rows: topPinnedRowsData,
+    position: 'center'
   });
   const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
   const mainRows = getRows({
     renderContext,
-    rowIndexOffset: topPinnedRowsData.length
+    rowIndexOffset: topPinnedRowsData.length,
+    position: 'center'
   });
   const bottomPinnedRows = getRows({
     renderContext,
     rows: bottomPinnedRowsData,
-    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+    position: 'center'
   });
   const contentProps = getContentProps();
   const pinnedColumnsStyle = {
@@ -316,8 +319,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rows: topPinnedRowsData
+          rows: topPinnedRowsData,
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
         className: classes.pinnedRowsRenderZone,
@@ -333,9 +336,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           renderContext: rightRenderContext,
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
-          ignoreAutoHeight: true,
           availableSpace: 0,
-          rows: topPinnedRowsData
+          rows: topPinnedRowsData,
+          position: 'right'
         })
       })]
     }) : null, /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
@@ -351,8 +354,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rowIndexOffset: topPinnedRowsData.length
+          rowIndexOffset: topPinnedRowsData.length,
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
         children: mainRows
@@ -368,8 +371,8 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
-          rowIndexOffset: topPinnedRowsData.length
+          rowIndexOffset: topPinnedRowsData.length,
+          position: 'right'
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
@@ -395,9 +398,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
           rows: bottomPinnedRowsData,
-          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+          position: 'left'
         })
       }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
         className: classes.pinnedRowsRenderZone,
@@ -414,9 +417,9 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true,
           rows: bottomPinnedRowsData,
-          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0),
+          position: 'right'
         })
       })]
     }) : null]

package/components/GridDetailPanelToggleCell.js

@@ -129,7 +129,8 @@ process.env.NODE_ENV !== "production" ? GridDetailPanelToggleCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

package/components/GridTreeDataGroupingCell.js

@@ -164,7 +164,8 @@ process.env.NODE_ENV !== "production" ? GridTreeDataGroupingCell.propTypes = {
   tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
 
   /**
-   * The cell value, but if the column has valueGetter, use getValue.
+   * The cell value.
+   * If the column has `valueGetter`, use `params.row` to directly access the fields.
    */
   value: PropTypes.any
 } : void 0;

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);
         }
       }