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

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

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { GridHydrateRowsValue } from '@mui/x-data-grid/internals';
+import { GridRowEntry, GridRowId, GridRowModel } from '@mui/x-data-grid';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { GridPinnedRowsProp } from './gridRowPinningInterface';
+declare type GridPinnedRowPosition = keyof GridPinnedRowsProp;
+export declare function addPinnedRow({ groupingParams, rowModel, rowId, position, apiRef, }: {
+    groupingParams: GridHydrateRowsValue;
+    rowModel: GridRowModel;
+    rowId: GridRowId;
+    position: GridPinnedRowPosition;
+    apiRef: React.MutableRefObject<GridApiPro>;
+}): {
+    idRowsLookup: {
+        [x: string]: any;
+        [x: number]: any;
+    };
+    tree: {
+        [x: string]: import("@mui/x-data-grid").GridRowTreeNodeConfig;
+        [x: number]: import("@mui/x-data-grid").GridRowTreeNodeConfig;
+    };
+    additionalRowGroups: {
+        pinnedRows: {
+            top?: GridRowEntry<any>[] | undefined;
+            bottom?: GridRowEntry<any>[] | undefined;
+        };
+    };
+    groupingName: string;
+    treeDepth: number;
+    ids: GridRowId[];
+    idToIdLookup: Record<string, GridRowId>;
+};
+export declare const useGridRowPinningPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>) => void;
+export {};

package/hooks/features/rowPinning/useGridRowPinningPreProcessors.js

@@ -0,0 +1,89 @@
+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
+}) {
+  var _groupingParams$addit;
+
+  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$addit = groupingParams.additionalRowGroups) == null ? void 0 : _groupingParams$addit.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 => {
+    var _pinnedRowsCache$topI, _pinnedRowsCache$bott;
+
+    const pinnedRowsCache = apiRef.current.unstable_caches.pinnedRows || {};
+
+    let newGroupingParams = _extends({}, groupingParams, {
+      additionalRowGroups: _extends({}, groupingParams.additionalRowGroups, {
+        // reset pinned rows state
+        pinnedRows: {}
+      })
+    });
+
+    (_pinnedRowsCache$topI = pinnedRowsCache.topIds) == null ? void 0 : _pinnedRowsCache$topI.forEach(rowId => {
+      newGroupingParams = addPinnedRow({
+        groupingParams: newGroupingParams,
+        rowModel: pinnedRowsCache.idLookup[rowId],
+        rowId,
+        position: 'top',
+        apiRef
+      });
+    });
+    (_pinnedRowsCache$bott = pinnedRowsCache.bottomIds) == null ? void 0 : _pinnedRowsCache$bott.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/hooks/features/rowReorder/useGridRowReorder.js

@@ -60,10 +60,16 @@ export const useGridRowReorder = (apiRef, props) => {
     originRowIndex.current = apiRef.current.getRowIndex(params.id);
   }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
   const handleDragOver = React.useCallback((params, event) => {
+    var _apiRef$current$getRo;
+
     if (dragRowId === '') {
       return;
     }
 
+    if ((_apiRef$current$getRo = apiRef.current.getRowNode(params.id)) != null && _apiRef$current$getRo.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/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/internals/index.d.ts

@@ -13,6 +13,8 @@ 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 type { GridExperimentalProFeatures, DataGridProPropsWithoutDefaultValue, DataGridProPropsWithDefaultValue, } from '../models/dataGridProProps';
 export { buildRowTree } from '../utils/tree/buildRowTree';
 export type { BuildRowTreeGroupingCriteria } from '../utils/tree/buildRowTree';

package/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/legacy/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/legacy/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 var useDataGridProComponent = function useDataGridProComponent(inputApiRef, props) {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -22,6 +24,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   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 var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   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 var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridKeyboardNavigation(apiRef, props);
   useGridSelection(apiRef, props);
   useGridColumnPinning(apiRef, props);
+  useGridRowPinning(apiRef, props);
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridParamsApi(apiRef);

package/legacy/components/DataGridProVirtualScroller.js

@@ -8,12 +8,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 var filterColumns = function filterColumns(pinnedColumns, columns) {
@@ -47,12 +48,13 @@ export var filterColumns = function filterColumns(pinnedColumns, columns) {
 };
 
 var useUtilityClasses = function useUtilityClasses(ownerState) {
-  var classes = ownerState.classes,
-      leftPinnedColumns = ownerState.leftPinnedColumns,
-      rightPinnedColumns = ownerState.rightPinnedColumns;
+  var classes = ownerState.classes;
   var 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']
   };
@@ -72,6 +74,10 @@ var getOverlayAlpha = function getOverlayAlpha(elevation) {
   return alphaValue / 100;
 };
 
+var getBoxShadowColor = function getBoxShadowColor(theme) {
+  return alpha(theme.palette.common.black, 0.21);
+};
+
 var VirtualScrollerDetailPanels = styled('div', {
   name: 'MuiDataGrid',
   slot: 'DetailPanels',
@@ -81,6 +87,7 @@ var VirtualScrollerDetailPanels = styled('div', {
 })({
   position: 'relative'
 });
+var darkModeBackgroundImage = "linear-gradient(".concat(alpha('#fff', getOverlayAlpha(2)), ", ").concat(alpha('#fff', getOverlayAlpha(2)), ")");
 var VirtualScrollerPinnedColumns = styled('div', {
   name: 'MuiDataGrid',
   slot: 'PinnedColumns',
@@ -90,22 +97,52 @@ var VirtualScrollerPinnedColumns = styled('div', {
 })(function (_ref3) {
   var theme = _ref3.theme,
       ownerState = _ref3.ownerState;
+  var boxShadowColor = getBoxShadowColor(theme);
   return _extends({
     position: 'sticky',
     overflow: 'hidden',
     zIndex: 1,
-    boxShadow: theme.shadows[2],
     backgroundColor: theme.palette.background.default
   }, theme.palette.mode === 'dark' && {
-    backgroundImage: "linear-gradient(".concat(alpha('#fff', getOverlayAlpha(2)), ", ").concat(alpha('#fff', getOverlayAlpha(2)), ")")
+    backgroundImage: darkModeBackgroundImage
   }, ownerState.side === GridPinnedPosition.left && {
     left: 0,
-    float: 'left'
+    float: 'left',
+    boxShadow: "2px 0px 4px -2px ".concat(boxShadowColor)
   }, ownerState.side === GridPinnedPosition.right && {
     right: 0,
-    float: 'right'
+    float: 'right',
+    boxShadow: "-2px 0px 4px -2px ".concat(boxShadowColor)
+  });
+});
+var VirtualScrollerPinnedRows = styled('div', {
+  name: 'MuiDataGrid',
+  slot: 'PinnedRows',
+  overridesResolver: function overridesResolver(props, styles) {
+    return [_defineProperty({}, "&.".concat(gridClasses['pinnedRows--top']), styles['pinnedRows--top']), _defineProperty({}, "&.".concat(gridClasses['pinnedRows--bottom']), styles['pinnedRows--bottom']), styles.pinnedRows];
+  }
+})(function (_ref6) {
+  var theme = _ref6.theme,
+      ownerState = _ref6.ownerState;
+  var 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 ".concat(boxShadowColor)
+  }, ownerState.position === 'bottom' && {
+    boxShadow: "0px -3px 4px -2px ".concat(boxShadowColor),
+    bottom: 0
   });
 });
+var VirtualScrollerPinnedRowsRenderZone = styled('div')({
+  position: 'absolute'
+});
 var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGridProVirtualScroller(props, ref) {
   var className = props.className,
       disableVirtualization = props.disableVirtualization,
@@ -119,8 +156,11 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   var detailPanelsHeights = useGridSelector(apiRef, gridDetailPanelExpandedRowsHeightCacheSelector);
   var leftColumns = React.useRef(null);
   var rightColumns = React.useRef(null);
-  var handleRenderZonePositioning = React.useCallback(function (_ref4) {
-    var top = _ref4.top;
+  var topPinnedRowsRenderZoneRef = React.useRef(null);
+  var bottomPinnedRowsRenderZoneRef = React.useRef(null);
+  var handleRenderZonePositioning = React.useCallback(function (_ref7) {
+    var top = _ref7.top,
+        left = _ref7.left;
 
     if (leftColumns.current) {
       leftColumns.current.style.transform = "translate3d(0px, ".concat(top, "px, 0px)");
@@ -129,6 +169,14 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
     if (rightColumns.current) {
       rightColumns.current.style.transform = "translate3d(0px, ".concat(top, "px, 0px)");
     }
+
+    if (topPinnedRowsRenderZoneRef.current) {
+      topPinnedRowsRenderZoneRef.current.style.transform = "translate3d(".concat(left, "px, 0px, 0px)");
+    }
+
+    if (bottomPinnedRowsRenderZoneRef.current) {
+      bottomPinnedRowsRenderZoneRef.current.style.transform = "translate3d(".concat(left, "px, 0px, 0px)");
+    }
   }, []);
 
   var getRowProps = function getRowProps(id) {
@@ -151,10 +199,19 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
       leftPinnedColumns = _filterColumns2[0],
       rightPinnedColumns = _filterColumns2[1];
 
+  var pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
+  var topPinnedRowsData = React.useMemo(function () {
+    return (pinnedRows == null ? void 0 : pinnedRows.top) || [];
+  }, [pinnedRows == null ? void 0 : pinnedRows.top]);
+  var bottomPinnedRowsData = React.useMemo(function () {
+    return (pinnedRows == null ? void 0 : pinnedRows.bottom) || [];
+  }, [pinnedRows == null ? void 0 : pinnedRows.bottom]);
   var ownerState = {
     classes: rootProps.classes,
     leftPinnedColumns: leftPinnedColumns,
-    rightPinnedColumns: rightPinnedColumns
+    rightPinnedColumns: rightPinnedColumns,
+    topPinnedRowsCount: topPinnedRowsData.length,
+    bottomPinnedRowsCount: bottomPinnedRowsData.length
   };
   var classes = useUtilityClasses(ownerState);
 
@@ -188,10 +245,6 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
     firstColumnIndex: visibleColumnFields.length - rightPinnedColumns.length,
     lastColumnIndex: visibleColumnFields.length
   }) : null;
-  var contentProps = getContentProps();
-  var pinnedColumnsStyle = {
-    minHeight: contentProps.style.minHeight
-  };
 
   var getDetailPanels = function getDetailPanels() {
     var panels = [];
@@ -232,8 +285,73 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   };
 
   var detailPanels = getDetailPanels();
-  return /*#__PURE__*/_jsx(GridVirtualScroller, _extends({}, getRootProps(other), {
-    children: /*#__PURE__*/_jsxs(GridVirtualScrollerContent, _extends({}, contentProps, {
+  var topPinnedRows = getRows({
+    renderContext: renderContext,
+    rows: topPinnedRowsData
+  });
+  var pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
+  var mainRows = getRows({
+    renderContext: renderContext,
+    rowIndexOffset: topPinnedRowsData.length
+  });
+  var bottomPinnedRows = getRows({
+    renderContext: renderContext,
+    rows: bottomPinnedRowsData,
+    rowIndexOffset: topPinnedRowsData.length + (mainRows ? mainRows.length : 0)
+  });
+  var contentProps = getContentProps();
+  var pinnedColumnsStyle = {
+    minHeight: contentProps.style.minHeight
+  };
+
+  if (contentProps.style.minHeight && contentProps.style.minHeight === '100%') {
+    contentProps.style.minHeight = "calc(100% - ".concat(pinnedRowsHeight.top, "px - ").concat(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,
@@ -246,12 +364,11 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           minFirstColumn: leftRenderContext.firstColumnIndex,
           maxLastColumn: leftRenderContext.lastColumnIndex,
           availableSpace: 0,
-          ignoreAutoHeight: true
+          ignoreAutoHeight: true,
+          rowIndexOffset: topPinnedRowsData.length
         })
       }), /*#__PURE__*/_jsx(GridVirtualScrollerRenderZone, _extends({}, getRenderZoneProps(), {
-        children: getRows({
-          renderContext: renderContext
-        })
+        children: mainRows
       })), rightRenderContext && /*#__PURE__*/_jsx(VirtualScrollerPinnedColumns, {
         ref: rightColumns,
         ownerState: {
@@ -264,13 +381,58 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
           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/legacy/components/GridRowReorderCell.js

@@ -79,5 +79,9 @@ var GridRowReorderCell = function GridRowReorderCell(params) {
 
 export { GridRowReorderCell };
 export var renderRowReorderCell = function renderRowReorderCell(params) {
+  if (params.rowNode.isPinned) {
+    return null;
+  }
+
   return /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));
 };

package/legacy/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/legacy/hooks/features/rowPinning/gridRowPinningInterface.js

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

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

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

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

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

package/legacy/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;
+
+  var cache = {
+    topIds: [],
+    bottomIds: [],
+    idLookup: {}
+  };
+  pinnedRows == null ? void 0 : (_pinnedRows$top = pinnedRows.top) == null ? void 0 : _pinnedRows$top.forEach(function (rowModel) {
+    var 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(function (rowModel) {
+    var id = getRowIdFromRowModel(rowModel, getRowId);
+    cache.bottomIds.push(id);
+    cache.idLookup[id] = rowModel;
+  });
+  return cache;
+}
+
+export var rowPinningStateInitializer = function 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 var useGridRowPinning = function useGridRowPinning(apiRef, props) {
+  var _props$experimentalFe3;
+
+  var setPinnedRows = React.useCallback(function (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');
+  var isFirstRender = React.useRef(true);
+  React.useEffect(function () {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      return;
+    }
+
+    apiRef.current.unstable_setPinnedRows(props.pinnedRows);
+  }, [apiRef, props.pinnedRows]);
+};