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

package/CHANGELOG.md

@@ -3,6 +3,63 @@
 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_
@@ -306,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">
 
@@ -623,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">
 
@@ -887,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`
 
@@ -1141,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.
@@ -3793,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);

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

@@ -2,4 +2,4 @@
 import { GridRenderCellParams } from '@mui/x-data-grid';
 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

@@ -76,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/index.d.ts

@@ -4,3 +4,4 @@ export * from './columnResize';
 export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';
+export * from './rowPinning';

package/hooks/features/index.js

@@ -4,4 +4,5 @@ export * from './columnReorder';
 export * from './columnResize';
 export * from './rowReorder';
 export * from './treeData';
-export * from './detailPanel';
+export * from './detailPanel';
+export * from './rowPinning';

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

@@ -0,0 +1,17 @@
+import { GridRowId, GridRowsLookup, GridRowsProp } from '@mui/x-data-grid';
+export interface GridPinnedRowsProp<R = any> {
+    top?: GridRowsProp<R>;
+    bottom?: GridRowsProp<R>;
+}
+export interface GridRowPinningApi {
+    /**
+     * Changes the pinned rows.
+     * @param {GridPinnedRowsProp} pinnedRows An object containing the rows to pin.
+     */
+    unstable_setPinnedRows: (pinnedRows?: GridPinnedRowsProp) => void;
+}
+export interface GridRowPinningInternalCache {
+    topIds: GridRowId[];
+    bottomIds: GridRowId[];
+    idLookup: GridRowsLookup;
+}

package/hooks/features/rowPinning/gridRowPinningInterface.js

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

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

@@ -0,0 +1 @@
+export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector, } from '@mui/x-data-grid/internals';

package/hooks/features/rowPinning/gridRowPinningSelector.js

@@ -0,0 +1 @@
+export { gridAdditionalRowGroupsSelector, gridPinnedRowsSelector } from '@mui/x-data-grid/internals';

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

@@ -0,0 +1 @@
+export * from './gridRowPinningInterface';

package/hooks/features/rowPinning/index.js

@@ -0,0 +1 @@
+export * from './gridRowPinningInterface';

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

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { GridStateInitializer } from '@mui/x-data-grid/internals';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+export declare const rowPinningStateInitializer: GridStateInitializer<Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId' | 'experimentalFeatures'>>;
+export declare const useGridRowPinning: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'pinnedRows' | 'getRowId' | 'experimentalFeatures'>) => void;

package/hooks/features/rowPinning/useGridRowPinning.js

@@ -0,0 +1,71 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiMethod } from '@mui/x-data-grid';
+import { getRowIdFromRowModel } from '@mui/x-data-grid/internals';
+
+function createPinnedRowsInternalCache(pinnedRows, getRowId) {
+  var _pinnedRows$top, _pinnedRows$bottom;
+
+  const cache = {
+    topIds: [],
+    bottomIds: [],
+    idLookup: {}
+  };
+  pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(rowModel => {
+    const id = getRowIdFromRowModel(rowModel, getRowId);
+    cache.topIds.push(id);
+    cache.idLookup[id] = rowModel;
+  });
+  pinnedRows == null ? void 0 : (_pinnedRows$bottom = pinnedRows.bottom) == null ? void 0 : _pinnedRows$bottom.forEach(rowModel => {
+    const id = getRowIdFromRowModel(rowModel, getRowId);
+    cache.bottomIds.push(id);
+    cache.idLookup[id] = rowModel;
+  });
+  return cache;
+}
+
+export const rowPinningStateInitializer = (state, props, apiRef) => {
+  var _props$experimentalFe, _state$rows;
+
+  if (!((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.rowPinning)) {
+    return state;
+  }
+
+  apiRef.current.unstable_caches.pinnedRows = createPinnedRowsInternalCache(props.pinnedRows, props.getRowId);
+  return _extends({}, state, {
+    rows: _extends({}, state.rows, {
+      additionalRowGroups: _extends({}, (_state$rows = state.rows) == null ? void 0 : _state$rows.additionalRowGroups, {
+        pinnedRows: {
+          top: [],
+          bottom: []
+        }
+      })
+    })
+  });
+};
+export const useGridRowPinning = (apiRef, props) => {
+  var _props$experimentalFe3;
+
+  const setPinnedRows = React.useCallback(newPinnedRows => {
+    var _props$experimentalFe2;
+
+    if (!((_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.rowPinning)) {
+      return;
+    }
+
+    apiRef.current.unstable_caches.pinnedRows = createPinnedRowsInternalCache(newPinnedRows, props.getRowId);
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+  }, [apiRef, (_props$experimentalFe3 = props.experimentalFeatures) == null ? void 0 : _props$experimentalFe3.rowPinning, props.getRowId]);
+  useGridApiMethod(apiRef, {
+    unstable_setPinnedRows: setPinnedRows
+  }, 'rowPinningApi');
+  const isFirstRender = React.useRef(true);
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    apiRef.current.unstable_setPinnedRows(props.pinnedRows);
+  }, [apiRef, props.pinnedRows]);
+};