@mui/x-data-grid-pro 5.13.0 → 5.15.0

package/CHANGELOG.md

@@ -3,6 +3,156 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 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_
+
+We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:
+
+- ✏️ Enter edit mode when pasting in a cell with Ctrl+V (Cmd+V on macOS) (#5405) @alexfauquette
+- 🌍 Many improvements to the locales
+- 📚 Documentation improvements
+- 🐞 Bugfixes
+
+### `@mui/x-data-grid@v5.13.1` / `@mui/x-data-grid-pro@v5.13.1` / `@mui/x-data-grid-premium@v5.13.1`
+
+#### Changes
+
+- [DataGrid] Fix blank space when using dynamic row height with pagination (#5315) @m4theushw
+- [DataGrid] Start editing with uppercase letter and Ctrl+V (#5405) @alexfauquette
+- [DataGrid] Fix some filters being removed from filter model on filter panel open (#5403) @cherniavskii
+- [DataGridPro] Improve pinned column headers accessibility (#5370) @cherniavskii
+- [l10n] Improve Dutch (nl-NL) locale (#5464) @developenguin
+- [l10n] Improve French (fr-FR) locale (#3211) (#5420) @Zenoo
+- [l10n] Improve German (de-DE) locale (#5448) @sebastianfrey
+- [l10n] Improve Brazilian Portuguese (pt-BR) locale (#5394) @andrepxa
+- [l10n] Improve Romanian (ro-RO) locale (#5449) @rolule
+
+### `@mui/x-date-pickers@v5.0.0-beta.1` / `@mui/x-date-picker-pro@5.0.0-beta.1`
+
+#### Changes
+
+- [pickers] Add Italian (it-IT) locale (#5467) @felixh10r
+- [pickers] Add Spanish (es-ES) locale (#5468) @felixh10r
+- [pickers] Improve French (fr-FR) locale (#5446) @Zenoo
+- [pickers] Improve German (de-DE) locale (#5447) @sebastianfrey
+
+### Docs
+
+- [docs] Fix typo in the sorting page (#5431) @JosephMarinier
+- [docs] Fix description for "Striped rows" example (#5432) @lindapaiste
+- [docs] Make a clear difference between the license and license key (#5316) @oliviertassinari
+- [docs] Update pickers README files (#5456) @cherniavskii
+- [docs] Clarify the scope of support for MUI X (#5423) @joserodolfofreitas
+
+### Core
+
+- [core] Add technical support link to \_redirects (#5428) @joserodolfofreitas
+- [core] Improve GitHub bug reproduction template (#5067) @joserodolfofreitas
+- [core] Include playground pages in tsconfig (#5367) @cherniavskii
+- [core] Sort keys like in material-ui @oliviertassinari
+- [test] Wait for flags to load on regression tests (#5473) @m4theushw
+
 ## 5.13.0
 
 _Jul 7, 2022_
@@ -213,7 +363,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">
 
@@ -530,7 +680,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">
 
@@ -794,7 +944,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`
 
@@ -1048,7 +1198,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.
@@ -1416,7 +1566,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
@@ -3700,7 +3850,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/DataGridProColumnHeaders.js

@@ -117,15 +117,21 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
+  const innerProps = getInnerProps();
+  const pinnedColumnHeadersProps = {
+    role: innerProps.role,
+    'aria-rowindex': innerProps['aria-rowindex']
+  };
   return /*#__PURE__*/_jsxs(GridColumnHeaders, _extends({
     ref: ref,
     className: className
   }, getRootProps(other), {
-    children: [leftRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+    children: [leftRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
       className: classes.leftPinnedColumns,
       ownerState: {
         side: GridPinnedPosition.left
-      },
+      }
+    }, pinnedColumnHeadersProps, {
       children: getColumns({
         renderContext: leftRenderContext,
         minFirstColumn: leftRenderContext.firstColumnIndex,
@@ -133,22 +139,23 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
       }, {
         disableReorder: true
       })
-    }), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
+    })), /*#__PURE__*/_jsx(GridColumnHeadersInner, _extends({
       isDragging: isDragging
-    }, getInnerProps(), {
+    }, innerProps, {
       children: getColumns({
         renderContext,
         minFirstColumn: leftPinnedColumns.length,
         maxLastColumn: visibleColumnFields.length - rightPinnedColumns.length
       })
-    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, {
+    })), rightRenderContext && /*#__PURE__*/_jsx(GridColumnHeadersPinnedColumnHeaders, _extends({
       ownerState: {
         side: GridPinnedPosition.right
       },
       className: classes.rightPinnedColumns,
       style: {
         paddingRight: scrollbarSize
-      },
+      }
+    }, pinnedColumnHeadersProps, {
       children: getColumns({
         renderContext: rightRenderContext,
         minFirstColumn: rightRenderContext.firstColumnIndex,
@@ -157,6 +164,6 @@ export const DataGridProColumnHeaders = /*#__PURE__*/React.forwardRef(function D
         disableReorder: true,
         separatorSide: GridColumnHeaderSeparatorSides.Left
       })
-    })]
+    }))]
   }));
 });

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