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

package/modern/hooks/features/rowPinning/useGridRowPinning.js

@@ -0,0 +1,63 @@
+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) {
+  const cache = {
+    topIds: [],
+    bottomIds: [],
+    idLookup: {}
+  };
+  pinnedRows?.top?.forEach(rowModel => {
+    const id = getRowIdFromRowModel(rowModel, getRowId);
+    cache.topIds.push(id);
+    cache.idLookup[id] = rowModel;
+  });
+  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) => {
+  if (!props.experimentalFeatures?.rowPinning) {
+    return state;
+  }
+
+  apiRef.current.unstable_caches.pinnedRows = createPinnedRowsInternalCache(props.pinnedRows, props.getRowId);
+  return _extends({}, state, {
+    rows: _extends({}, state.rows, {
+      additionalRowGroups: _extends({}, state.rows?.additionalRowGroups, {
+        pinnedRows: {
+          top: [],
+          bottom: []
+        }
+      })
+    })
+  });
+};
+export const useGridRowPinning = (apiRef, props) => {
+  const setPinnedRows = React.useCallback(newPinnedRows => {
+    if (!props.experimentalFeatures?.rowPinning) {
+      return;
+    }
+
+    apiRef.current.unstable_caches.pinnedRows = createPinnedRowsInternalCache(newPinnedRows, props.getRowId);
+    apiRef.current.unstable_requestPipeProcessorsApplication('hydrateRows');
+  }, [apiRef, props.experimentalFeatures?.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]);
+};

package/modern/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -0,0 +1,85 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+export function addPinnedRow({
+  groupingParams,
+  rowModel,
+  rowId,
+  position,
+  apiRef
+}) {
+  const idRowsLookup = _extends({}, groupingParams.idRowsLookup);
+
+  const tree = _extends({}, groupingParams.tree); // TODO: warn if id is already present in `props.rows`
+
+
+  idRowsLookup[rowId] = rowModel; // Do not push it to ids list so that pagination is not affected by pinned rows
+  // ids.push(rowId);
+
+  tree[rowId] = {
+    id: rowId,
+    isAutoGenerated: false,
+    parent: null,
+    depth: 0,
+    groupingKey: null,
+    groupingField: null,
+    isPinned: true
+  };
+  apiRef.current.unstable_caches.rows.idRowsLookup[rowId] = _extends({}, rowModel);
+  apiRef.current.unstable_caches.rows.idToIdLookup[rowId] = rowId;
+  const previousPinnedRows = groupingParams.additionalRowGroups?.pinnedRows || {};
+  const newPinnedRow = {
+    id: rowId,
+    model: rowModel
+  };
+  return _extends({}, groupingParams, {
+    idRowsLookup,
+    tree,
+    additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
+      pinnedRows: _extends({}, previousPinnedRows, {
+        [position]: [...(previousPinnedRows[position] || []), newPinnedRow]
+      })
+    })
+  });
+}
+export const useGridRowPinningPreProcessors = apiRef => {
+  const addPinnedRows = React.useCallback(groupingParams => {
+    const pinnedRowsCache = apiRef.current.unstable_caches.pinnedRows || {};
+
+    let newGroupingParams = _extends({}, groupingParams, {
+      additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
+        // reset pinned rows state
+        pinnedRows: {}
+      })
+    });
+
+    pinnedRowsCache.topIds?.forEach(rowId => {
+      newGroupingParams = addPinnedRow({
+        groupingParams: newGroupingParams,
+        rowModel: pinnedRowsCache.idLookup[rowId],
+        rowId,
+        position: 'top',
+        apiRef
+      });
+    });
+    pinnedRowsCache.bottomIds?.forEach(rowId => {
+      newGroupingParams = addPinnedRow({
+        groupingParams: newGroupingParams,
+        rowModel: pinnedRowsCache.idLookup[rowId],
+        rowId,
+        position: 'bottom',
+        apiRef
+      });
+    }); // If row with the same `id` is present both in `rows` and `pinnedRows` - remove it from `ids`
+
+    newGroupingParams.ids = newGroupingParams.ids.filter(rowId => {
+      if (newGroupingParams.tree[rowId] && newGroupingParams.tree[rowId].isPinned) {
+        return false;
+      }
+
+      return true;
+    });
+    return newGroupingParams;
+  }, [apiRef]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateRows', addPinnedRows);
+};

package/modern/hooks/features/rowReorder/useGridRowReorder.js

@@ -64,6 +64,10 @@ export const useGridRowReorder = (apiRef, props) => {
       return;
     }
 
+    if (apiRef.current.getRowNode(params.id)?.isPinned) {
+      return;
+    }
+
     logger.debug(`Dragging over row ${params.id}`);
     event.preventDefault(); // Prevent drag events propagation.
     // For more information check here https://github.com/mui/mui-x/issues/2680.

package/modern/index.js

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

package/modern/internals/index.js

@@ -13,5 +13,7 @@ export { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/use
 export { useGridTreeData } from '../hooks/features/treeData/useGridTreeData';
 export { useGridTreeDataPreProcessors } from '../hooks/features/treeData/useGridTreeDataPreProcessors';
 export { TREE_DATA_STRATEGY } from '../hooks/features/treeData/gridTreeDataUtils';
+export { useGridRowPinning, rowPinningStateInitializer } from '../hooks/features/rowPinning/useGridRowPinning';
+export { useGridRowPinningPreProcessors, addPinnedRow } from '../hooks/features/rowPinning/useGridRowPinningPreProcessors';
 export { buildRowTree } from '../utils/tree/buildRowTree';
 export { sortRowTree } from '../utils/tree/sortRowTree';

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY1ODQ0MDgwMDAwMA==";
+  const releaseInfo = "MTY1OTA0NTYwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/node/DataGridPro/DataGridPro.js

@@ -241,6 +241,12 @@ DataGridProRaw.propTypes = {
    */
   disableExtendRowFullWidth: _propTypes.default.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.default.bool,
+
   /**
    * If `true`, filtering with multiple columns is disabled.
    * @default false
@@ -294,6 +300,7 @@ DataGridProRaw.propTypes = {
   experimentalFeatures: _propTypes.default.shape({
     newEditingApi: _propTypes.default.bool,
     preventCommitWhileValidating: _propTypes.default.bool,
+    rowPinning: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
 
@@ -878,6 +885,14 @@ DataGridProRaw.propTypes = {
     right: _propTypes.default.arrayOf(_propTypes.default.string)
   }),
 
+  /**
+   * Rows data to pin on top or bottom.
+   */
+  pinnedRows: _propTypes.default.shape({
+    bottom: _propTypes.default.array,
+    top: _propTypes.default.array
+  }),
+
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.

package/node/DataGridPro/useDataGridProComponent.js

@@ -29,6 +29,10 @@ var _useGridRowReorder = require("../hooks/features/rowReorder/useGridRowReorder
 
 var _useGridRowReorderPreProcessors = require("../hooks/features/rowReorder/useGridRowReorderPreProcessors");
 
+var _useGridRowPinning = require("../hooks/features/rowPinning/useGridRowPinning");
+
+var _useGridRowPinningPreProcessors = require("../hooks/features/rowPinning/useGridRowPinningPreProcessors");
+
 // Pro-only features
 const useDataGridProComponent = (inputApiRef, props) => {
   var _props$experimentalFe, _props$experimentalFe2;
@@ -41,6 +45,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridSelectionPreProcessors)(apiRef, props);
   (0, _useGridRowReorderPreProcessors.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridTreeDataPreProcessors.useGridTreeDataPreProcessors)(apiRef, props);
+  (0, _useGridRowPinningPreProcessors.useGridRowPinningPreProcessors)(apiRef);
   (0, _useGridDetailPanelPreProcessors.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.
 
@@ -54,6 +59,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_useGridDetailPanel.detailPanelStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_useGridColumnPinning.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridRowPinning.rowPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? _internals.editingStateInitializer_new : _internals.editingStateInitializer_old, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
@@ -70,6 +76,7 @@ const useDataGridProComponent = (inputApiRef, props) => {
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridSelection)(apiRef, props);
   (0, _useGridColumnPinning.useGridColumnPinning)(apiRef, props);
+  (0, _useGridRowPinning.useGridRowPinning)(apiRef, props);
   (0, _internals.useGridColumns)(apiRef, props);
   (0, _internals.useGridRows)(apiRef, props);
   (0, _internals.useGridParamsApi)(apiRef);

package/node/components/DataGridProVirtualScroller.js

@@ -31,6 +31,8 @@ var _detailPanel = require("../hooks/features/detailPanel");
 
 var _GridDetailPanel = require("./GridDetailPanel");
 
+var _gridRowPinningSelector = require("../hooks/features/rowPinning/gridRowPinningSelector");
+
 var _jsxRuntime = require("react/jsx-runtime");
 
 const _excluded = ["className", "disableVirtualization"];
@@ -69,13 +71,14 @@ exports.filterColumns = filterColumns;
 
 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']
   };
@@ -95,6 +98,10 @@ const getOverlayAlpha = elevation => {
   return alphaValue / 100;
 };
 
+const getBoxShadowColor = theme => {
+  return (0, _styles.alpha)(theme.palette.common.black, 0.21);
+};
+
 const VirtualScrollerDetailPanels = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanels',
@@ -102,6 +109,7 @@ const VirtualScrollerDetailPanels = (0, _styles.styled)('div', {
 })({
   position: 'relative'
 });
+const darkModeBackgroundImage = `linear-gradient(${(0, _styles.alpha)('#fff', getOverlayAlpha(2))}, ${(0, _styles.alpha)('#fff', getOverlayAlpha(2))})`;
 const VirtualScrollerPinnedColumns = (0, _styles.styled)('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedColumns',
@@ -113,21 +121,56 @@ const VirtualScrollerPinnedColumns = (0, _styles.styled)('div', {
 })(({
   theme,
   ownerState
-}) => (0, _extends2.default)({
-  position: 'sticky',
-  overflow: 'hidden',
-  zIndex: 1,
-  boxShadow: theme.shadows[2],
-  backgroundColor: theme.palette.background.default
-}, theme.palette.mode === 'dark' && {
-  backgroundImage: `linear-gradient(${(0, _styles.alpha)('#fff', getOverlayAlpha(2))}, ${(0, _styles.alpha)('#fff', getOverlayAlpha(2))})`
-}, ownerState.side === _columnPinning.GridPinnedPosition.left && {
-  left: 0,
-  float: 'left'
-}, ownerState.side === _columnPinning.GridPinnedPosition.right && {
-  right: 0,
-  float: 'right'
-}));
+}) => {
+  const boxShadowColor = getBoxShadowColor(theme);
+  return (0, _extends2.default)({
+    position: 'sticky',
+    overflow: 'hidden',
+    zIndex: 1,
+    backgroundColor: theme.palette.background.default
+  }, theme.palette.mode === 'dark' && {
+    backgroundImage: darkModeBackgroundImage
+  }, ownerState.side === _columnPinning.GridPinnedPosition.left && {
+    left: 0,
+    float: 'left',
+    boxShadow: `2px 0px 4px -2px ${boxShadowColor}`
+  }, ownerState.side === _columnPinning.GridPinnedPosition.right && {
+    right: 0,
+    float: 'right',
+    boxShadow: `-2px 0px 4px -2px ${boxShadowColor}`
+  });
+});
+const VirtualScrollerPinnedRows = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedRows',
+  overridesResolver: (props, styles) => [{
+    [`&.${_xDataGrid.gridClasses['pinnedRows--top']}`]: styles['pinnedRows--top']
+  }, {
+    [`&.${_xDataGrid.gridClasses['pinnedRows--bottom']}`]: styles['pinnedRows--bottom']
+  }, styles.pinnedRows]
+})(({
+  theme,
+  ownerState
+}) => {
+  const boxShadowColor = getBoxShadowColor(theme);
+  return (0, _extends2.default)({
+    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 = (0, _styles.styled)('div')({
+  position: 'absolute'
+});
 const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridProVirtualScroller(props, ref) {
   const other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
@@ -138,8 +181,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   const detailPanelsHeights = (0, _xDataGrid.useGridSelector)(apiRef, _detailPanel.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)`;
@@ -148,6 +194,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 => {
@@ -165,10 +219,15 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
 
   const pinnedColumns = (0, _xDataGrid.useGridSelector)(apiRef, _columnPinning.gridPinnedColumnsSelector);
   const [leftPinnedColumns, rightPinnedColumns] = filterColumns(pinnedColumns, visibleColumnFields);
+  const pinnedRows = (0, _xDataGrid.useGridSelector)(apiRef, _gridRowPinningSelector.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 {
@@ -201,10 +260,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 = [];
@@ -245,8 +300,73 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   };
 
   const detailPanels = getDetailPanels();
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridVirtualScroller, (0, _extends2.default)({}, getRootProps(other), {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridVirtualScrollerContent, (0, _extends2.default)({}, contentProps, {
+  const topPinnedRows = getRows({
+    renderContext,
+    rows: topPinnedRowsData
+  });
+  const pinnedRowsHeight = (0, _internals.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__*/(0, _jsxRuntime.jsxs)(_internals.GridVirtualScroller, (0, _extends2.default)({}, getRootProps(other), {
+    children: [topPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
+      className: classes.topPinnedRows,
+      ownerState: {
+        position: 'top'
+      },
+      style: {
+        width: contentProps.style.width,
+        height: pinnedRowsHeight.top
+      },
+      role: "rowgroup",
+      children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
+        className: classes.leftPinnedColumns,
+        ownerState: {
+          side: _columnPinning.GridPinnedPosition.left
+        },
+        children: getRows({
+          renderContext: leftRenderContext,
+          minFirstColumn: leftRenderContext.firstColumnIndex,
+          maxLastColumn: leftRenderContext.lastColumnIndex,
+          availableSpace: 0,
+          ignoreAutoHeight: true,
+          rows: topPinnedRowsData
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedRowsRenderZone, {
+        className: classes.pinnedRowsRenderZone,
+        ref: topPinnedRowsRenderZoneRef,
+        role: "presentation",
+        children: topPinnedRows
+      }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
+        className: classes.rightPinnedColumns,
+        ownerState: {
+          side: _columnPinning.GridPinnedPosition.right
+        },
+        children: getRows({
+          renderContext: rightRenderContext,
+          minFirstColumn: rightRenderContext.firstColumnIndex,
+          maxLastColumn: rightRenderContext.lastColumnIndex,
+          ignoreAutoHeight: true,
+          availableSpace: 0,
+          rows: topPinnedRowsData
+        })
+      })]
+    }) : null, /*#__PURE__*/(0, _jsxRuntime.jsxs)(_internals.GridVirtualScrollerContent, (0, _extends2.default)({}, contentProps, {
       children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         ref: leftColumns,
         className: classes.leftPinnedColumns,
@@ -259,12 +379,11 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true
+          ignoreAutoHeight: true,
+          rowIndexOffset: topPinnedRowsData.length
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridVirtualScrollerRenderZone, (0, _extends2.default)({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext
-        })
+        children: mainRows
       })), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
@@ -277,13 +396,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__*/(0, _jsxRuntime.jsx)(VirtualScrollerDetailPanels, {
         className: classes.detailPanels,
         children: detailPanels
       })]
-    }))
+    })), bottomPinnedRowsData.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(VirtualScrollerPinnedRows, {
+      className: classes.bottomPinnedRows,
+      ownerState: {
+        position: 'bottom'
+      },
+      style: {
+        width: contentProps.style.width,
+        height: pinnedRowsHeight.bottom
+      },
+      role: "rowgroup",
+      children: [leftRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
+        className: classes.leftPinnedColumns,
+        ownerState: {
+          side: _columnPinning.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__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedRowsRenderZone, {
+        className: classes.pinnedRowsRenderZone,
+        ref: bottomPinnedRowsRenderZoneRef,
+        role: "presentation",
+        children: bottomPinnedRows
+      }), rightRenderContext && /*#__PURE__*/(0, _jsxRuntime.jsx)(VirtualScrollerPinnedColumns, {
+        className: classes.rightPinnedColumns,
+        ownerState: {
+          side: _columnPinning.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]
   }));
 });
 exports.DataGridProVirtualScroller = DataGridProVirtualScroller;

package/node/components/GridRowReorderCell.js

@@ -94,6 +94,12 @@ const GridRowReorderCell = params => {
 
 exports.GridRowReorderCell = GridRowReorderCell;
 
-const renderRowReorderCell = params => /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRowReorderCell, (0, _extends2.default)({}, params));
+const renderRowReorderCell = params => {
+  if (params.rowNode.isPinned) {
+    return null;
+  }
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(GridRowReorderCell, (0, _extends2.default)({}, params));
+};
 
 exports.renderRowReorderCell = renderRowReorderCell;

package/node/hooks/features/index.js

@@ -80,4 +80,17 @@ Object.keys(_detailPanel).forEach(function (key) {
       return _detailPanel[key];
     }
   });
+});
+
+var _rowPinning = require("./rowPinning");
+
+Object.keys(_rowPinning).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _rowPinning[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _rowPinning[key];
+    }
+  });
 });

package/node/hooks/features/rowPinning/gridRowPinningInterface.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/hooks/features/rowPinning/gridRowPinningSelector.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "gridAdditionalRowGroupsSelector", {
+  enumerable: true,
+  get: function () {
+    return _internals.gridAdditionalRowGroupsSelector;
+  }
+});
+Object.defineProperty(exports, "gridPinnedRowsSelector", {
+  enumerable: true,
+  get: function () {
+    return _internals.gridPinnedRowsSelector;
+  }
+});
+
+var _internals = require("@mui/x-data-grid/internals");

package/node/hooks/features/rowPinning/index.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _gridRowPinningInterface = require("./gridRowPinningInterface");
+
+Object.keys(_gridRowPinningInterface).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _gridRowPinningInterface[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _gridRowPinningInterface[key];
+    }
+  });
+});