@mui/x-data-grid-pro 5.13.1 → 5.15.1

package/CHANGELOG.md

@@ -3,6 +3,147 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 5.15.1
+
+_Aug 4, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 📚 New [page presenting the `apiRef`](https://mui.com/x/react-data-grid/api-object/) (#5273) @flaviendelangle
+- ✨ Better keyboard support for start editing cells (#5511) @oliviertassinari
+- 🌍 Improvements to different locales
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.15.1` / `@mui/x-data-grid-pro@v5.15.1` / `@mui/x-data-grid-premium@v5.15.1`
+
+#### Changes
+
+- [DataGrid] Improve start edit UX (#5511) @oliviertassinari
+- [DataGrid] Add `initialOpen` prop to `GridEditSingleSelectCell` to allow overriding initial open state (#5645) @shapaaa
+- [DataGrid] Forward `ref` to root element in `GridEditInputCell` (#5631) @Zenoo
+- [DataGrid] Toggle open state when clicking on buttons in the `GridToolbar` (#5503) @cherniavskii
+- [DataGrid] Improve German (de-DE) locale (#5586) @sebastianfrey
+- [DataGrid] Improve Korean (ko-KR) locale (#5668) @Einere
+- [DataGrid] Complete Italian (it-IT) locale (#5487) @mamodev
+
+### `@mui/x-date-pickers@v5.0.0-beta.4` / `@mui/x-date-picker-pro@5.0.0-beta.4`
+
+#### Changes
+
+- [DatePicker] Customize day formatter in the calendar (#5373) @alexfauquette
+
+### Docs
+
+- [docs] New location for the legal content (#5595) @oliviertassinari
+- [docs] Update description of `maxDateTime` prop (#5639) @jurecuhalev
+- [docs] Add missing `date-fns` dependency when opening Codesandbox demo (#5692) @cherniavskii
+
+### Core
+
+- [core] Drop usage of `GRID_EXPERIMENTAL_ENABLED` env variable (#5669) @ar7casper
+- [core] Isolate asset loading under /x/ (#5594) @oliviertassinari
+- [core] Upgrade node to v14 (#4999) @cherniavskii
+
+## 5.15.0
+
+_Jul 29, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce aggregation (#5592) @flaviendelangle
+
+  Premium users can now aggregate data in the grid.
+  Extract information like sum, average, count, and others with a couple of clicks.
+
+  https://user-images.githubusercontent.com/45398769/181581503-77cc412e-9d9e-4de1-8bc3-c3bccc54cdaa.mp4
+
+  To enable this feature, add `experimentalFeatures={{ aggregation: true }}`.
+  Aggregation functions are customizable and they combine well with row grouping.
+  See the [documentation](https://mui.com/x/react-data-grid/aggregation/) to explore everything it has to offer.
+
+- 🚀 Introduce row pinning (#4863) @cherniavskii
+
+  Pro users can now pin rows on top or bottom of the grid.
+
+  https://user-images.githubusercontent.com/45398769/181581493-56c733a3-6dd5-4546-bf8d-3f2dff72b14a.mp4
+
+  To do so, enable the feature with `experimentalFeatures={{ rowPinning: true }}` and provide the pinned rows data to the `pinnedRows` prop.
+  For more details, see the [documentation](https://mui.com/x/react-data-grid/row-pinning/).
+
+- 🌍 Add simplified Chinese (zh-CN) locale to pickers (#5584) @gamecss
+- 📚 Documentation improvements
+
+### `@mui/x-data-grid@v5.15.0` / `@mui/x-data-grid-pro@v5.15.0` / `@mui/x-data-grid-premium@v5.15.0`
+
+#### Changes
+
+- [DataGrid] Add prop to keep modifications while processing props (#5309) @m4theushw
+- [DataGrid] Fix container width change on React 18 (#5566) @m4theushw
+- [DataGrid] Fix ellipsis style convention (#5587) @oliviertassinari
+- [DataGridPro] Implement row pinning (#4863) @cherniavskii
+- [DataGridPremium] Make aggregation public (#5592) @cherniavskii
+- [l10n] Improve simplified Chinese (zh-CN) locale (#5584) @gamecss
+
+### `@mui/x-date-pickers@v5.0.0-beta.3` / `@mui/x-date-picker-pro@5.0.0-beta.3`
+
+#### Changes
+
+- [l10n] Add simplified Chinese (zh-CN) locale (#5584) @gamecss
+
+### Docs
+
+- [docs] Split docs page about rows (#5195) @flaviendelangle
+- [docs] Add warning clarifications (#5399) @alexfauquette
+- [docs] Correct slot CSS classes for Pro and Premium components (#5452) @alexfauquette
+- [docs] Fix internal link to `valueParser` (#5450) @alexfauquette
+
+### Core
+
+- [core] Upgrade monorepo (#5560) @m4theushw
+
+## 5.14.0
+
+_Jul 21, 2022_
+
+We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:
+
+- 🧪 Export `GridBooleanCell` component from data grid (#5537) @cliedeman
+- ⚙️ Improve accessibility of the Export menu (#5486) @nogalpaulina
+- 🌍 Improvements to different locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@5.14.0` / `@mui/x-data-grid-pro@5.14.0` / `@mui/x-data-grid-premium@5.14.0`
+
+#### Changes
+
+- [DataGrid] Add generics to `GridPreProcessEditCellProps` (#5510) @YunosukeY
+- [DataGrid] Avoid inconsistent state export (#5390) @flaviendelangle
+- [DataGrid] Export `GridBooleanCell` component (#5537) @cliedeman
+- [DataGrid] Fix `date`/`dateTime` edit input font size to match view mode (#5304) @cherniavskii
+- [DataGrid] Fix loading overlay position (#5558) @DanailH
+- [DataGrid] Improve accessibility of the Export menu in the toolbar (#5486) @nogalpaulina
+- [DataGridPremium] Implement Aggregation - not publicly released (#4208) @flaviendelangle
+- [DataGridPremium] Fix crash when exporting all columns to Excel (#5425) @cherniavskii
+- [l10n] Add Traditional Chinese (zh-TW) locale (#5498) @happyincent
+
+### `@mui/x-date-pickers@v5.0.0-beta.2` / `@mui/x-date-picker-pro@5.0.0-beta.2`
+
+#### Changes
+
+- [l10n] Add Norwegian (nb-NO) locale (#5475) @elkebab
+
+### Docs
+
+- [docs] New page presenting the `apiRef` (#5273) @flaviendelangle
+- [docs] Remove blank line @oliviertassinari
+
+### Core
+
+- [core] Add missing comments on zh-TW translation (#5559) @flaviendelangle
+- [core] Polish on the bug issue template (#5525) @oliviertassinari
+- [test] Add more tests related to `isPrintableKey` (#5458) @mnajdova
+
 ## 5.13.1
 
 _Jul 15, 2022_
@@ -263,7 +404,7 @@ _May 31, 2022_
 
 We'd like to offer a big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
 
-- 🎁 Introduce support for [dynamic row height](https://mui.com/x/react-data-grid/rows/#dynamic-row-height) (#4859) @m4theushw
+- 🎁 Introduce support for [dynamic row height](https://mui.com/x/react-data-grid/row-height/#dynamic-row-height) (#4859) @m4theushw
 
   <img src="https://user-images.githubusercontent.com/42154031/171183167-718d7bcd-ec0f-459e-97fe-0f650abb4a99.gif" width="800">
 
@@ -580,7 +721,7 @@ _Apr 25, 2022_
 
 We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
 
-- 🎁 Introduce [Row reorder](https://mui.com/x/react-data-grid/rows/#row-reorder) (#4034) @DanailH
+- 🎁 Introduce [Row reorder](https://mui.com/x/react-data-grid/row-ordering/) (#4034) @DanailH
 
   <img src="https://user-images.githubusercontent.com/5858539/165091263-23472fbb-a989-44b8-849a-d2185adfe13b.gif" width="800">
 
@@ -844,7 +985,7 @@ We'd like to offer a big thanks to the 8 contributors who made this release poss
   <DataGrid getRowSpacing={() => ({ top: 10, bottom: 10 })} />
   ```
 
-  Check the [documentation](https://mui.com/x/react-data-grid/rows/#row-spacing) for more information.
+  Check the [documentation](https://mui.com/x/react-data-grid/row-height/#row-spacing) for more information.
 
 ### `@mui/x-data-grid@v5.6.1` / `@mui/x-data-grid-pro@v5.6.1`
 
@@ -1098,7 +1239,7 @@ _Jan 28, 2022_
 
 A big thanks to the 9 contributors who made this release possible. Here are some highlights ✨:
 
-- 🚣 Introduce [variable row height](https://mui.com/x/react-data-grid/rows/#variable-row-height) (#438) @DanailH
+- 🚣 Introduce [variable row height](https://mui.com/x/react-data-grid/row-height/#variable-row-height) (#438) @DanailH
 
   Allows for setting a row-specific height.
   By default, all rows have the same height, but now you can set the height on a per-row basis.
@@ -1466,7 +1607,7 @@ A big thanks to the 5 contributors who made this release possible. Here are some
 - [core] Fix `yarn prettier` script (#3292) @oliviertassinari
 - [core] Improve tests for Tree Data (#3366) @flaviendelangle
 - [core] Never import directly from the `__modules__` folder in the `x-data-grid-generator` package (#3379) @flaviendelangle
-- [core] Transition to a new StackOverflow tag (#3308) @oliviertassinari
+- [core] Transition to a new Stack Overflow tag (#3308) @oliviertassinari
 - [core] Update monorepo (#3370) @flaviendelangle
 - [core] Use pre-processors for sorting and filtering (#3318) @flaviendelangle
 - [test] Replace `useFakeTimers` (#3323) @m4theushw
@@ -3750,7 +3891,7 @@ Big thanks to the 7 contributors who made this release possible. Here are some h
 - 🎁 Add `onRowsScrollEnd` to support infinite loading (#1199) @DanailH
   This is an XGrid feature. Provides the ability to tap into the `onRowsScrollEnd` which is called when the scroll reaches the bottom of the grid viewport allowing developers to load additional data. It can be used with a combination of `scrollBottomThreshold` to control the area in which the `onRowsScrollEnd` is called.
 
-  See the documentation for [more details](https://mui.com/x/react-data-grid/rows/#infinite-loading).
+  See the documentation for [more details](https://mui.com/x/react-data-grid/row-updates/#infinite-loading).
 
 - 🕹 Provide the ability to sort by multiple columns using Shift+click (#1203) @dtassone
 - 🇵🇱 Added pl-PL locale (#1117) @LarsKumbier

package/DataGridPro/DataGridPro.js

@@ -217,6 +217,12 @@ DataGridProRaw.propTypes = {
    */
   disableExtendRowFullWidth: PropTypes.bool,
 
+  /**
+   * If `true`, modification to a cell will not be discarded if the mode is changed from "edit" to "view" while processing props.
+   * @default false
+   */
+  disableIgnoreModificationsIfProcessingProps: PropTypes.bool,
+
   /**
    * If `true`, filtering with multiple columns is disabled.
    * @default false
@@ -270,6 +276,7 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: PropTypes.shape({
     newEditingApi: PropTypes.bool,
     preventCommitWhileValidating: PropTypes.bool,
+    rowPinning: PropTypes.bool,
     warnIfFocusStateIsNotSynced: PropTypes.bool
   }),
 
@@ -854,6 +861,14 @@ DataGridProRaw.propTypes = {
     right: PropTypes.arrayOf(PropTypes.string)
   }),
 
+  /**
+   * Rows data to pin on top or bottom.
+   */
+  pinnedRows: PropTypes.shape({
+    bottom: PropTypes.array,
+    top: PropTypes.array
+  }),
+
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.

package/DataGridPro/useDataGridProComponent.js

@@ -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 { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
+import { useGridRowPinningPreProcessors } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export const useDataGridProComponent = (inputApiRef, props) => {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -22,6 +24,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(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.
 
@@ -35,6 +38,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridInitializeState(detailPanelStateInitializer, apiRef, props);
   useGridInitializeState(columnPinningStateInitializer, apiRef, props);
   useGridInitializeState(columnsStateInitializer, apiRef, props);
+  useGridInitializeState(rowPinningStateInitializer, apiRef, props);
   useGridInitializeState(rowsStateInitializer, apiRef, props);
   useGridInitializeState((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? editingStateInitializer_new : editingStateInitializer_old, apiRef, props);
   useGridInitializeState(focusStateInitializer, apiRef, props);
@@ -51,6 +55,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridColumnPinning(apiRef, props);
+  useGridRowPinning(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);
@@ -59,7 +64,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridPreferencesPanel(apiRef);
+  useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);

package/components/DataGridProVirtualScroller.js

@@ -5,12 +5,13 @@ import * as React from 'react';
 import { styled, alpha } from '@mui/material/styles';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { useGridSelector, getDataGridUtilityClass, gridClasses, gridVisibleColumnFieldsSelector, gridRowsMetaSelector, useGridApiEventHandler } from '@mui/x-data-grid';
-import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller } from '@mui/x-data-grid/internals';
+import { GridVirtualScroller, GridVirtualScrollerContent, GridVirtualScrollerRenderZone, useGridVirtualScroller, calculatePinnedRowsHeight } from '@mui/x-data-grid/internals';
 import { useGridApiContext } from '../hooks/utils/useGridApiContext';
 import { useGridRootProps } from '../hooks/utils/useGridRootProps';
 import { gridPinnedColumnsSelector, GridPinnedPosition } from '../hooks/features/columnPinning';
 import { gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector, gridDetailPanelExpandedRowIdsSelector } from '../hooks/features/detailPanel';
 import { GridDetailPanel } from './GridDetailPanel';
+import { gridPinnedRowsSelector } from '../hooks/features/rowPinning/gridRowPinningSelector';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 export const filterColumns = (pinnedColumns, columns) => {
@@ -41,13 +42,14 @@ export const filterColumns = (pinnedColumns, columns) => {
 
 const useUtilityClasses = ownerState => {
   const {
-    classes,
-    leftPinnedColumns,
-    rightPinnedColumns
+    classes
   } = ownerState;
   const slots = {
-    leftPinnedColumns: ['pinnedColumns', leftPinnedColumns && leftPinnedColumns.length > 0 && 'pinnedColumns--left'],
-    rightPinnedColumns: ['pinnedColumns', rightPinnedColumns && rightPinnedColumns.length > 0 && 'pinnedColumns--right'],
+    leftPinnedColumns: ['pinnedColumns', 'pinnedColumns--left'],
+    rightPinnedColumns: ['pinnedColumns', 'pinnedColumns--right'],
+    topPinnedRows: ['pinnedRows', 'pinnedRows--top'],
+    bottomPinnedRows: ['pinnedRows', 'pinnedRows--bottom'],
+    pinnedRowsRenderZone: ['pinnedRowsRenderZone'],
     detailPanels: ['detailPanels'],
     detailPanel: ['detailPanel']
   };
@@ -67,6 +69,10 @@ const getOverlayAlpha = elevation => {
   return alphaValue / 100;
 };
 
+const getBoxShadowColor = theme => {
+  return alpha(theme.palette.common.black, 0.21);
+};
+
 const VirtualScrollerDetailPanels = styled('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanels',
@@ -74,6 +80,7 @@ const VirtualScrollerDetailPanels = styled('div', {
 })({
   position: 'relative'
 });
+const darkModeBackgroundImage = `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha('#fff', getOverlayAlpha(2))})`;
 const VirtualScrollerPinnedColumns = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedColumns',
@@ -85,21 +92,56 @@ const VirtualScrollerPinnedColumns = styled('div', {
 })(({
   theme,
   ownerState
-}) => _extends({
-  position: 'sticky',
-  overflow: 'hidden',
-  zIndex: 1,
-  boxShadow: theme.shadows[2],
-  backgroundColor: theme.palette.background.default
-}, theme.palette.mode === 'dark' && {
-  backgroundImage: `linear-gradient(${alpha('#fff', getOverlayAlpha(2))}, ${alpha('#fff', getOverlayAlpha(2))})`
-}, ownerState.side === GridPinnedPosition.left && {
-  left: 0,
-  float: 'left'
-}, ownerState.side === GridPinnedPosition.right && {
-  right: 0,
-  float: 'right'
-}));
+}) => {
+  const boxShadowColor = getBoxShadowColor(theme);
+  return _extends({
+    position: 'sticky',
+    overflow: 'hidden',
+    zIndex: 1,
+    backgroundColor: theme.palette.background.default
+  }, theme.palette.mode === 'dark' && {
+    backgroundImage: darkModeBackgroundImage
+  }, ownerState.side === GridPinnedPosition.left && {
+    left: 0,
+    float: 'left',
+    boxShadow: `2px 0px 4px -2px ${boxShadowColor}`
+  }, ownerState.side === GridPinnedPosition.right && {
+    right: 0,
+    float: 'right',
+    boxShadow: `-2px 0px 4px -2px ${boxShadowColor}`
+  });
+});
+const VirtualScrollerPinnedRows = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedRows',
+  overridesResolver: (props, styles) => [{
+    [`&.${gridClasses['pinnedRows--top']}`]: styles['pinnedRows--top']
+  }, {
+    [`&.${gridClasses['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
+  }, styles.pinnedRows]
+})(({
+  theme,
+  ownerState
+}) => {
+  const boxShadowColor = getBoxShadowColor(theme);
+  return _extends({
+    position: 'sticky',
+    // should be above the detail panel
+    zIndex: 3,
+    backgroundColor: theme.palette.background.default
+  }, theme.palette.mode === 'dark' && {
+    backgroundImage: darkModeBackgroundImage
+  }, ownerState.position === 'top' && {
+    top: 0,
+    boxShadow: `0px 3px 4px -2px ${boxShadowColor}`
+  }, ownerState.position === 'bottom' && {
+    boxShadow: `0px -3px 4px -2px ${boxShadowColor}`,
+    bottom: 0
+  });
+});
+const VirtualScrollerPinnedRowsRenderZone = styled('div')({
+  position: 'absolute'
+});
 const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridProVirtualScroller(props, ref) {
   const other = _objectWithoutPropertiesLoose(props, _excluded);
 
@@ -111,8 +153,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const detailPanelsHeights = useGridSelector(apiRef, gridDetailPanelExpandedRowsHeightCacheSelector);
   const leftColumns = React.useRef(null);
   const rightColumns = React.useRef(null);
+  const topPinnedRowsRenderZoneRef = React.useRef(null);
+  const bottomPinnedRowsRenderZoneRef = React.useRef(null);
   const handleRenderZonePositioning = React.useCallback(({
-    top
+    top,
+    left
   }) => {
     if (leftColumns.current) {
       leftColumns.current.style.transform = `translate3d(0px, ${top}px, 0px)`;
@@ -121,6 +166,14 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     if (rightColumns.current) {
       rightColumns.current.style.transform = `translate3d(0px, ${top}px, 0px)`;
     }
+
+    if (topPinnedRowsRenderZoneRef.current) {
+      topPinnedRowsRenderZoneRef.current.style.transform = `translate3d(${left}px, 0px, 0px)`;
+    }
+
+    if (bottomPinnedRowsRenderZoneRef.current) {
+      bottomPinnedRowsRenderZoneRef.current.style.transform = `translate3d(${left}px, 0px, 0px)`;
+    }
   }, []);
 
   const getRowProps = id => {
@@ -138,10 +191,15 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
 
   const pinnedColumns = useGridSelector(apiRef, gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
+  const topPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.top) || [], [pinnedRows == null ? void 0 : pinnedRows.top]);
+  const bottomPinnedRowsData = React.useMemo(() => (pinnedRows == null ? void 0 : pinnedRows.bottom) || [], [pinnedRows == null ? void 0 : pinnedRows.bottom]);
   const ownerState = {
     classes: rootProps.classes,
     leftPinnedColumns,
-    rightPinnedColumns
+    rightPinnedColumns,
+    topPinnedRowsCount: topPinnedRowsData.length,
+    bottomPinnedRowsCount: bottomPinnedRowsData.length
   };
   const classes = useUtilityClasses(ownerState);
   const {
@@ -174,10 +232,6 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  const contentProps = getContentProps();
-  const pinnedColumnsStyle = {
-    minHeight: contentProps.style.minHeight
-  };
 
   const getDetailPanels = () => {
     const panels = [];
@@ -218,8 +272,73 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   };
 
   const detailPanels = getDetailPanels();
-  return /*#__PURE__*/_jsx(GridVirtualScroller, _extends({}, getRootProps(other), {
-    children: /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
+  const topPinnedRows = getRows({
+    renderContext,
+    rows: topPinnedRowsData
+  });
+  const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
+  const mainRows = getRows({
+    renderContext,
+    rowIndexOffset: topPinnedRowsData.length
+  });
+  const bottomPinnedRows = getRows({
+    renderContext,
+    rows: bottomPinnedRowsData,
+    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+  });
+  const contentProps = getContentProps();
+  const pinnedColumnsStyle = {
+    minHeight: contentProps.style.minHeight
+  };
+
+  if (contentProps.style.minHeight && contentProps.style.minHeight === '100%') {
+    contentProps.style.minHeight = `calc(100% - ${pinnedRowsHeight.top}px - ${pinnedRowsHeight.bottom}px)`;
+  }
+
+  return /*#__PURE__*/_jsxs(GridVirtualScroller, _extends({}, getRootProps(other), {
+    children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
+      className: classes.topPinnedRows,
+      ownerState: {
+        position: 'top'
+      },
+      style: {
+        width: contentProps.style.width,
+        height: pinnedRowsHeight.top
+      },
+      role: "rowgroup",
+      children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        className: classes.leftPinnedColumns,
+        ownerState: {
+          side: GridPinnedPosition.left
+        },
+        children: getRows({
+          renderContext: leftRenderContext,
+          minFirstColumn: leftRenderContext.firstColumnIndex,
+          maxLastColumn: leftRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: topPinnedRowsData
+        })
+      }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
+        className: classes.pinnedRowsRenderZone,
+        ref: topPinnedRowsRenderZoneRef,
+        role: "presentation",
+        children: topPinnedRows
+      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        className: classes.rightPinnedColumns,
+        ownerState: {
+          side: GridPinnedPosition.right
+        },
+        children: getRows({
+          renderContext: rightRenderContext,
+          minFirstColumn: rightRenderContext.firstColumnIndex,
+          maxLastColumn: rightRenderContext.lastColumnIndex,
+          ignoreAutoHeight: true,
+          availableSpace: 0,
+          rows: topPinnedRowsData
+        })
+      })]
+    }) : null, /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
       children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
@@ -232,12 +351,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true
+          ignoreAutoHeight: true,
+          rowIndexOffset: topPinnedRowsData.length
         })
       }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext
-        })
+        children: mainRows
       })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
@@ -250,13 +368,58 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: rightRenderContext.firstColumnIndex,
           maxLastColumn: rightRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true
+          ignoreAutoHeight: true,
+          rowIndexOffset: topPinnedRowsData.length
         })
       }), detailPanels.length > 0 && /*#__PURE__*/_jsx(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]
-    }))
+    })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/_jsxs(VirtualScrollerPinnedRows, {
+      className: classes.bottomPinnedRows,
+      ownerState: {
+        position: 'bottom'
+      },
+      style: {
+        width: contentProps.style.width,
+        height: pinnedRowsHeight.bottom
+      },
+      role: "rowgroup",
+      children: [leftRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        className: classes.leftPinnedColumns,
+        ownerState: {
+          side: GridPinnedPosition.left
+        },
+        children: getRows({
+          renderContext: leftRenderContext,
+          minFirstColumn: leftRenderContext.firstColumnIndex,
+          maxLastColumn: leftRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: bottomPinnedRowsData,
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+        })
+      }), /*#__PURE__*/_jsx(VirtualScrollerPinnedRowsRenderZone, {
+        className: classes.pinnedRowsRenderZone,
+        ref: bottomPinnedRowsRenderZoneRef,
+        role: "presentation",
+        children: bottomPinnedRows
+      }), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
+        className: classes.rightPinnedColumns,
+        ownerState: {
+          side: GridPinnedPosition.right
+        },
+        children: getRows({
+          renderContext: rightRenderContext,
+          minFirstColumn: rightRenderContext.firstColumnIndex,
+          maxLastColumn: rightRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: bottomPinnedRowsData,
+          rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+        })
+      })]
+    }) : null]
   }));
 });
 export { DataGridProVirtualScroller };

package/components/GridRowReorderCell.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
 import { GridRenderCellParams } from '@mui/x-data-grid';
-declare const GridRowReorderCell: (params: GridRenderCellParams) => JSX.Element;
+declare const GridRowReorderCell: (params: GridRenderCellParams) => JSX.Element | null;
 export { GridRowReorderCell };
-export declare const renderRowReorderCell: (params: GridRenderCellParams) => JSX.Element;
+export declare const renderRowReorderCell: (params: GridRenderCellParams) => JSX.Element | null;

package/components/GridRowReorderCell.js

@@ -19,6 +19,8 @@ const useUtilityClasses = ownerState => {
 };
 
 const GridRowReorderCell = params => {
+  var _params$rowNode$posit;
+
   const apiRef = useGridApiContext();
   const rootProps = useGridRootProps();
   const sortModel = useGridSelector(apiRef, gridSortModelSelector);
@@ -57,6 +59,11 @@ const GridRowReorderCell = params => {
     onDragOver: publish('rowDragOver'),
     onDragEnd: publish('rowDragEnd')
   } : null;
+
+  if (((_params$rowNode$posit = params.rowNode.position) != null ? _params$rowNode$posit : 'body') !== 'body') {
+    return null;
+  }
+
   return /*#__PURE__*/_jsxs("div", _extends({
     className: classes.root,
     draggable: isDraggable
@@ -69,4 +76,10 @@ const GridRowReorderCell = params => {
 };
 
 export { GridRowReorderCell };
-export const renderRowReorderCell = params => /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));
+export const renderRowReorderCell = params => {
+  if (params.rowNode.isPinned) {
+    return null;
+  }
+
+  return /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));
+};

package/hooks/features/columnPinning/useGridColumnPinning.d.ts

@@ -3,4 +3,4 @@ import { GridStateInitializer } from '@mui/x-data-grid/internals';
 import { GridApiPro } from '../../../models/gridApiPro';
 import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
 export declare const columnPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedColumns' | 'initialState' | 'disableColumnPinning'>>;
-export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'pinnedColumns' | 'onPinnedColumnsChange'>) => void;
+export declare const useGridColumnPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'disableColumnPinning' | 'initialState' | 'pinnedColumns' | 'onPinnedColumnsChange'>) => void;