@mui/x-data-grid 5.14.0 → 5.15.2

package/modern/hooks/features/filter/gridFilterUtils.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
+import { getDefaultGridFilterModel } from './gridFilterState';
 import { buildWarning } from '../../../utils/warning';
 import { gridColumnFieldsSelector, gridColumnLookupSelector } from '../columns';
-import { gridRowTreeSelector } from '../rows/gridRowsSelector';
 
 /**
  * Adds default values to the optional fields of a filter items.
@@ -78,10 +78,8 @@ export const mergeStateWithFilterModel = (filterModel, disableMultipleColumnsFil
 
 export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   const {
-    items,
-    linkOperator = GridLinkOperator.And
+    items
   } = filterModel;
-  const tree = gridRowTreeSelector(apiRef);
 
   const getFilterCallbackFromItem = filterItem => {
     if (!filterItem.columnField || !filterItem.operatorValue) {
@@ -143,18 +141,12 @@ export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
   }
 
   return (rowId, shouldApplyFilter) => {
-    if (tree[rowId].position === 'footer') {
-      return true;
-    }
-
-    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.columnField)) : appliers; // Return `false` as soon as we have a failing filter
-
-    if (linkOperator === GridLinkOperator.And) {
-      return filteredAppliers.every(applier => applier.fn(rowId));
-    } // Return `true` as soon as we have a passing filter
-
-
-    return filteredAppliers.some(applier => applier.fn(rowId));
+    const resultPerItemId = {};
+    const filteredAppliers = shouldApplyFilter ? appliers.filter(applier => shouldApplyFilter(applier.item.columnField)) : appliers;
+    filteredAppliers.forEach(applier => {
+      resultPerItemId[applier.item.id] = applier.fn(rowId);
+    });
+    return resultPerItemId;
   };
 };
 /**
@@ -166,8 +158,7 @@ export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
 
 export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   const {
-    quickFilterValues = [],
-    quickFilterLogicOperator = GridLinkOperator.And
+    quickFilterValues = []
   } = filterModel;
 
   if (quickFilterValues.length === 0) {
@@ -188,6 +179,11 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
   }); // If some value does not have an applier we ignore them
 
   const sanitizedQuickFilterValues = quickFilterValues.filter((value, index) => Object.keys(appliersPerColumnField).some(field => appliersPerColumnField[field][index] != null));
+
+  if (sanitizedQuickFilterValues.length === 0) {
+    return null;
+  }
+
   return (rowId, shouldApplyFilter) => {
     const usedCellParams = {};
     const columnsFieldsToFilter = [];
@@ -196,43 +192,78 @@ export const buildAggregatedQuickFilterApplier = (filterModel, apiRef) => {
         usedCellParams[columnField] = apiRef.current.getCellParams(rowId, columnField);
         columnsFieldsToFilter.push(columnField);
       }
-    }); // Return `false` as soon as we have a quick filter value that does not match any column
-
-    if (quickFilterLogicOperator === GridLinkOperator.And) {
-      return sanitizedQuickFilterValues.every((value, index) => columnsFieldsToFilter.some(field => {
+    });
+    const quickFilterValueResult = {};
+    sanitizedQuickFilterValues.forEach((value, index) => {
+      const isPassing = columnsFieldsToFilter.some(field => {
         if (appliersPerColumnField[field][index] == null) {
           return false;
         }
 
         return appliersPerColumnField[field][index]?.(usedCellParams[field]);
-      }));
-    } // Return `true` as soon as we have have a quick filter value that match any column
-
-
-    return sanitizedQuickFilterValues.some((value, index) => columnsFieldsToFilter.some(field => {
-      if (appliersPerColumnField[field][index] == null) {
-        return false;
-      }
-
-      return appliersPerColumnField[field][index]?.(usedCellParams[field]);
-    }));
+      });
+      quickFilterValueResult[value] = isPassing;
+    });
+    return quickFilterValueResult;
   };
 };
 export const buildAggregatedFilterApplier = (filterModel, apiRef) => {
   const isRowMatchingFilterItems = buildAggregatedFilterItemsApplier(filterModel, apiRef);
   const isRowMatchingQuickFilter = buildAggregatedQuickFilterApplier(filterModel, apiRef);
+  return (rowId, shouldApplyFilter) => ({
+    passingFilterItems: isRowMatchingFilterItems && isRowMatchingFilterItems(rowId, shouldApplyFilter),
+    passingQuickFilterValues: isRowMatchingQuickFilter && isRowMatchingQuickFilter(rowId, shouldApplyFilter)
+  });
+};
+export const passFilterLogic = (allFilterItemResults, allQuickFilterResults, filterModel) => {
+  const cleanedAllFilterItemResults = allFilterItemResults.filter(result => result != null);
+  const cleanedAllQuickFilterResults = allQuickFilterResults.filter(result => result != null); // Defaultize operators
 
-  if (isRowMatchingFilterItems == null && isRowMatchingQuickFilter == null) {
-    return null;
-  }
+  const quickFilterLogicOperator = filterModel.quickFilterLogicOperator ?? getDefaultGridFilterModel().quickFilterLogicOperator;
+  const linkOperator = filterModel.linkOperator ?? getDefaultGridFilterModel().linkOperator; // get result for filter items model
+
+  if (cleanedAllFilterItemResults.length > 0) {
+    // Return true if the item pass with one of the rows
+    const filterItemPredicate = item => {
+      return cleanedAllFilterItemResults.some(filterItemResult => filterItemResult[item.id]);
+    };
+
+    if (linkOperator === GridLinkOperator.And) {
+      const passesAllFilters = filterModel.items.every(filterItemPredicate);
+
+      if (!passesAllFilters) {
+        return false;
+      }
+    } else {
+      const passesSomeFilters = filterModel.items.some(filterItemPredicate);
+
+      if (!passesSomeFilters) {
+        return false;
+      }
+    }
+  } // get result for quick filter model
 
-  if (isRowMatchingFilterItems == null) {
-    return isRowMatchingQuickFilter;
-  }
 
-  if (isRowMatchingQuickFilter == null) {
-    return isRowMatchingFilterItems;
+  if (cleanedAllQuickFilterResults.length > 0 && filterModel.quickFilterValues != null) {
+    // Return true if the item pass with one of the rows
+    const quickFilterValuePredicate = value => {
+      return cleanedAllQuickFilterResults.some(quickFilterValueResult => quickFilterValueResult[value]);
+    };
+
+    if (quickFilterLogicOperator === GridLinkOperator.And) {
+      const passesAllQuickFilterValues = filterModel.quickFilterValues.every(quickFilterValuePredicate);
+
+      if (!passesAllQuickFilterValues) {
+        return false;
+      }
+    } else {
+      const passesSomeQuickFilterValues = filterModel.quickFilterValues.some(quickFilterValuePredicate);
+
+      if (!passesSomeQuickFilterValues) {
+        return false;
+      }
+    }
   }
 
-  return (rowId, shouldApplyFilter) => isRowMatchingFilterItems(rowId, shouldApplyFilter) && isRowMatchingQuickFilter(rowId, shouldApplyFilter);
+  return true;
 };

package/modern/hooks/features/filter/useGridFilter.js

@@ -12,7 +12,7 @@ import { useFirstRender } from '../../utils/useFirstRender';
 import { gridRowIdsSelector } from '../rows';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
 import { GRID_DEFAULT_STRATEGY, useGridRegisterStrategyProcessor } from '../../core/strategyProcessing';
-import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem } from './gridFilterUtils';
+import { buildAggregatedFilterApplier, sanitizeFilterModel, mergeStateWithFilterModel, cleanFilterItem, passFilterLogic } from './gridFilterUtils';
 import { isDeepEqual } from '../../../utils/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const filterStateInitializer = (state, props, apiRef) => {
@@ -45,7 +45,8 @@ export const useGridFilter = (apiRef, props) => {
       const filterModel = gridFilterModelSelector(state, apiRef.current.instanceId);
       const isRowMatchingFilters = props.filterMode === GridFeatureModeConstant.client ? buildAggregatedFilterApplier(filterModel, apiRef) : null;
       const filteringResult = apiRef.current.unstable_applyStrategyProcessor('filtering', {
-        isRowMatchingFilters
+        isRowMatchingFilters,
+        filterModel: filterModel ?? getDefaultGridFilterModel()
       });
       return _extends({}, state, {
         filter: _extends({}, state.filter, filteringResult)
@@ -249,7 +250,19 @@ export const useGridFilter = (apiRef, props) => {
 
       for (let i = 0; i < rowIds.length; i += 1) {
         const rowId = rowIds[i];
-        filteredRowsLookup[rowId] = params.isRowMatchingFilters(rowId);
+        let isRowPassing;
+
+        if (typeof rowId === 'string' && rowId.startsWith('auto-generated-group-footer')) {
+          isRowPassing = true;
+        } else {
+          const {
+            passingFilterItems,
+            passingQuickFilterValues
+          } = params.isRowMatchingFilters(rowId);
+          isRowPassing = passFilterLogic([passingFilterItems], [passingQuickFilterValues], params.filterModel);
+        }
+
+        filteredRowsLookup[rowId] = isRowPassing;
       }
 
       return {

package/modern/hooks/features/focus/useGridFocus.js

@@ -60,6 +60,12 @@ export const useGridFocus = (apiRef, props) => {
       return;
     }
 
+    if (focusedCell) {
+      // There's a focused cell but another cell was clicked
+      // Publishes an event to notify that the focus was lost
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field));
+    }
+
     apiRef.current.publishEvent('cellFocusIn', apiRef.current.getCellParams(id, field));
   }, [apiRef, logger]);
   const setColumnHeaderFocus = React.useCallback((field, event = {}) => {
@@ -191,11 +197,7 @@ export const useGridFocus = (apiRef, props) => {
 
     if (!apiRef.current.getRow(focusedCell.id)) {
       return;
-    } // There's a focused cell but another cell was clicked
-    // Publishes an event to notify that the focus was lost
-
-
-    apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
+    }
 
     if (cellParams) {
       apiRef.current.setCellFocus(cellParams.id, cellParams.field);
@@ -206,7 +208,10 @@ export const useGridFocus = (apiRef, props) => {
           columnHeader: null
         }
       }));
-      apiRef.current.forceUpdate();
+      apiRef.current.forceUpdate(); // There's a focused cell but another element (not a cell) was clicked
+      // Publishes an event to notify that the focus was lost
+
+      apiRef.current.publishEvent('cellFocusOut', apiRef.current.getCellParams(focusedCell.id, focusedCell.field), event);
     }
   }, [apiRef]);
   const handleCellModeChange = React.useCallback(params => {

package/modern/hooks/features/keyboardNavigation/useGridKeyboardNavigation.js

@@ -9,6 +9,12 @@ import { gridClasses } from '../../../constants/gridClasses';
 import { GridCellModes } from '../../../models/gridEditRowModel';
 import { isNavigationKey } from '../../../utils/keyboardUtils';
 import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPanelToggleField';
+import { gridPinnedRowsSelector } from '../rows/gridRowsSelector';
+
+function enrichPageRowsWithPinnedRows(apiRef, rows) {
+  const pinnedRows = gridPinnedRowsSelector(apiRef) || {};
+  return [...(pinnedRows.top || []), ...rows, ...(pinnedRows.bottom || [])];
+}
 /**
  * @requires useGridSorting (method) - can be after
  * @requires useGridFilter (state) - can be after
@@ -19,18 +25,19 @@ import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from '../../../constants/gridDetailPan
  * @requires useGridColumnSpanning (method) - can be after
  */
 
+
 export const useGridKeyboardNavigation = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridKeyboardNavigation');
-  const currentPage = useGridVisibleRows(apiRef, props);
+  const initialCurrentPageRows = useGridVisibleRows(apiRef, props).rows;
+  const currentPageRows = React.useMemo(() => enrichPageRowsWithPinnedRows(apiRef, initialCurrentPageRows), [apiRef, initialCurrentPageRows]);
   /**
    * @param {number} colIndex Index of the column to focus
    * @param {number} rowIndex index of the row to focus
    * @param {string} closestColumnToUse Which closest column cell to use when the cell is spanned by `colSpan`.
    */
 
-  const goToCell = React.useCallback((colIndex, rowIndex, closestColumnToUse = 'left') => {
+  const goToCell = React.useCallback((colIndex, rowId, closestColumnToUse = 'left') => {
     const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
-    const rowId = visibleSortedRows[rowIndex]?.id;
     const nextCellColSpanInfo = apiRef.current.unstable_getCellColSpanInfo(rowId, colIndex);
 
     if (nextCellColSpanInfo && nextCellColSpanInfo.spannedByColSpan) {
@@ -39,12 +46,15 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       } else if (closestColumnToUse === 'right') {
         colIndex = nextCellColSpanInfo.rightVisibleCellIndex;
       }
-    }
+    } // `scrollToIndexes` requires a rowIndex relative to all visible rows.
+    // Those rows do not include pinned rows, but pinned rows do not need scroll anyway.
 
-    logger.debug(`Navigating to cell row ${rowIndex}, col ${colIndex}`);
+
+    const rowIndexRelativeToAllRows = visibleSortedRows.findIndex(row => row.id === rowId);
+    logger.debug(`Navigating to cell row ${rowIndexRelativeToAllRows}, col ${colIndex}`);
     apiRef.current.scrollToIndexes({
       colIndex,
-      rowIndex
+      rowIndex: rowIndexRelativeToAllRows
     });
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setCellFocus(rowId, field);
@@ -57,19 +67,21 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     const field = apiRef.current.getVisibleColumns()[colIndex].field;
     apiRef.current.setColumnHeaderFocus(field, event);
   }, [apiRef, logger]);
+  const getRowIdFromIndex = React.useCallback(rowIndex => {
+    return currentPageRows[rowIndex].id;
+  }, [currentPageRows]);
   const handleCellNavigationKeyDown = React.useCallback((params, event) => {
     const dimensions = apiRef.current.getRootDimensions();
 
-    if (!currentPage.range || !dimensions) {
+    if (currentPageRows.length === 0 || !dimensions) {
       return;
     }
 
     const viewportPageSize = apiRef.current.unstable_getViewportPageSize();
-    const visibleSortedRows = gridVisibleSortedRowEntriesSelector(apiRef);
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    const rowIndexBefore = visibleSortedRows.findIndex(row => row.id === params.id);
-    const firstRowIndexInPage = currentPage.range.firstRowIndex;
-    const lastRowIndexInPage = currentPage.range.lastRowIndex;
+    const rowIndexBefore = currentPageRows.findIndex(row => row.id === params.id);
+    const firstRowIndexInPage = 0;
+    const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
     const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
     let shouldPreventDefault = true;
@@ -80,7 +92,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Enter" is only triggered by the row / cell editing feature
           if (rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, rowIndexBefore + 1);
+            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore + 1));
           }
 
           break;
@@ -89,7 +101,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowUp':
         {
           if (rowIndexBefore > firstRowIndexInPage) {
-            goToCell(colIndexBefore, rowIndexBefore - 1);
+            goToCell(colIndexBefore, getRowIdFromIndex(rowIndexBefore - 1));
           } else {
             goToHeader(colIndexBefore, event);
           }
@@ -100,7 +112,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowRight':
         {
           if (colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
+            goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
           }
 
           break;
@@ -109,7 +121,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowLeft':
         {
           if (colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore);
+            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore));
           }
 
           break;
@@ -119,9 +131,9 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
         {
           // "Tab" is only triggered by the row / cell editing feature
           if (event.shiftKey && colIndexBefore > firstColIndex) {
-            goToCell(colIndexBefore - 1, rowIndexBefore, 'left');
+            goToCell(colIndexBefore - 1, getRowIdFromIndex(rowIndexBefore), 'left');
           } else if (!event.shiftKey && colIndexBefore < lastColIndex) {
-            goToCell(colIndexBefore + 1, rowIndexBefore, 'right');
+            goToCell(colIndexBefore + 1, getRowIdFromIndex(rowIndexBefore), 'right');
           }
 
           break;
@@ -142,7 +154,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           }
 
           if (!event.shiftKey && rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage)));
           }
 
           break;
@@ -151,7 +163,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'PageDown':
         {
           if (rowIndexBefore < lastRowIndexInPage) {
-            goToCell(colIndexBefore, Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage));
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(rowIndexBefore + viewportPageSize, lastRowIndexInPage)));
           }
 
           break;
@@ -163,7 +175,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
           const nextRowIndex = Math.max(rowIndexBefore - viewportPageSize, firstRowIndexInPage);
 
           if (nextRowIndex !== rowIndexBefore && nextRowIndex >= firstRowIndexInPage) {
-            goToCell(colIndexBefore, nextRowIndex);
+            goToCell(colIndexBefore, getRowIdFromIndex(nextRowIndex));
           } else {
             goToHeader(colIndexBefore, event);
           }
@@ -174,9 +186,9 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'Home':
         {
           if (event.ctrlKey || event.metaKey || event.shiftKey) {
-            goToCell(firstColIndex, firstRowIndexInPage);
+            goToCell(firstColIndex, getRowIdFromIndex(firstRowIndexInPage));
           } else {
-            goToCell(firstColIndex, rowIndexBefore);
+            goToCell(firstColIndex, getRowIdFromIndex(rowIndexBefore));
           }
 
           break;
@@ -185,9 +197,9 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'End':
         {
           if (event.ctrlKey || event.metaKey || event.shiftKey) {
-            goToCell(lastColIndex, lastRowIndexInPage);
+            goToCell(lastColIndex, getRowIdFromIndex(lastRowIndexInPage));
           } else {
-            goToCell(lastColIndex, rowIndexBefore);
+            goToCell(lastColIndex, getRowIdFromIndex(rowIndexBefore));
           }
 
           break;
@@ -202,7 +214,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPage, goToCell, goToHeader]);
+  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
   const handleColumnHeaderKeyDown = React.useCallback((params, event) => {
     const headerTitleNode = event.currentTarget.querySelector(`.${gridClasses.columnHeaderTitleContainerContent}`);
     const isFromInsideContent = !!headerTitleNode && headerTitleNode.contains(event.target);
@@ -221,8 +233,8 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
 
     const viewportPageSize = apiRef.current.unstable_getViewportPageSize();
     const colIndexBefore = params.field ? apiRef.current.getColumnIndex(params.field) : 0;
-    const firstRowIndexInPage = currentPage.range?.firstRowIndex ?? null;
-    const lastRowIndexInPage = currentPage.range?.lastRowIndex ?? null;
+    const firstRowIndexInPage = 0;
+    const lastRowIndexInPage = currentPageRows.length - 1;
     const firstColIndex = 0;
     const lastColIndex = gridVisibleColumnDefinitionsSelector(apiRef).length - 1;
     let shouldPreventDefault = true;
@@ -231,7 +243,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'ArrowDown':
         {
           if (firstRowIndexInPage !== null) {
-            goToCell(colIndexBefore, firstRowIndexInPage);
+            goToCell(colIndexBefore, getRowIdFromIndex(firstRowIndexInPage));
           }
 
           break;
@@ -258,7 +270,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
       case 'PageDown':
         {
           if (firstRowIndexInPage !== null && lastRowIndexInPage !== null) {
-            goToCell(colIndexBefore, Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage));
+            goToCell(colIndexBefore, getRowIdFromIndex(Math.min(firstRowIndexInPage + viewportPageSize, lastRowIndexInPage)));
           }
 
           break;
@@ -300,7 +312,7 @@ export const useGridKeyboardNavigation = (apiRef, props) => {
     if (shouldPreventDefault) {
       event.preventDefault();
     }
-  }, [apiRef, currentPage, goToCell, goToHeader]);
+  }, [apiRef, currentPageRows, goToCell, goToHeader, getRowIdFromIndex]);
   const handleCellKeyDown = React.useCallback((params, event) => {
     // Ignore portal
     if (!event.currentTarget.contains(event.target)) {

package/modern/hooks/features/pagination/useGridPageSize.js

@@ -4,6 +4,7 @@ import { useGridLogger, useGridApiMethod, useGridApiEventHandler, useGridSelecto
 import { gridPageSizeSelector } from './gridPaginationSelector';
 import { gridDensityRowHeightSelector } from '../density';
 import { useGridRegisterPipeProcessor } from '../../core/pipeProcessing';
+import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 export const defaultPageSize = autoPageSize => autoPageSize ? 0 : 100;
 
 const mergeStateWithPageSize = pageSize => state => _extends({}, state, {
@@ -91,7 +92,8 @@ export const useGridPageSize = (apiRef, props) => {
       return;
     }
 
-    const maximumPageSizeWithoutScrollBar = Math.floor(dimensions.viewportInnerSize.height / rowHeight);
+    const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
+    const maximumPageSizeWithoutScrollBar = Math.floor((dimensions.viewportInnerSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom) / rowHeight);
     apiRef.current.setPageSize(maximumPageSizeWithoutScrollBar);
   }, [apiRef, props.autoPageSize, rowHeight]);
   useGridApiEventHandler(apiRef, 'viewportInnerSizeChange', handleUpdateAutoPageSize);

package/modern/hooks/features/rows/gridRowsSelector.js

@@ -8,4 +8,21 @@ export const gridRowsIdToIdLookupSelector = createSelector(gridRowsStateSelector
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
 export const gridRowTreeDepthSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepth);
-export const gridRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.ids);
+export const gridRowIdsSelector = createSelector(gridRowsStateSelector, rows => rows.ids);
+/**
+ * @ignore - do not document.
+ */
+
+export const gridAdditionalRowGroupsSelector = createSelector(gridRowsStateSelector, rows => rows?.additionalRowGroups);
+/**
+ * @ignore - do not document.
+ */
+
+export const gridPinnedRowsSelector = createSelector(gridAdditionalRowGroupsSelector, additionalRowGroups => additionalRowGroups?.pinnedRows);
+/**
+ * @ignore - do not document.
+ */
+
+export const gridPinnedRowsCountSelector = createSelector(gridPinnedRowsSelector, pinnedRows => {
+  return (pinnedRows?.top?.length || 0) + (pinnedRows?.bottom?.length || 0);
+});

package/modern/hooks/features/rows/gridRowsUtils.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["rowsBeforePartialUpdates"];
-
+import { gridPinnedRowsSelector } from './gridRowsSelector';
 /**
  * A helper function to check if the id provided is valid.
  * @param {GridRowId} id Id as [[GridRowId]].
  * @param {GridRowModel | Partial<GridRowModel>} row Row as [[GridRowModel]].
  * @param {string} detailErrorMessage A custom error message to display for invalid IDs
  */
+
 export function checkGridRowIdIsValid(id, row, detailErrorMessage = 'A row was provided without id in the rows prop:') {
   if (id == null) {
     throw new Error(['MUI: The data grid component requires all rows to have a unique `id` property.', 'Alternatively, you can use the `getRowId` prop to specify a custom id for each row.', detailErrorMessage, JSON.stringify(row)].join('\n'));
@@ -55,7 +56,7 @@ export const getRowsStateFromCache = ({
     previousTree
   }));
   const processedGroupingResponse = apiRef.current.unstable_applyPipeProcessors('hydrateRows', groupingResponse);
-  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null).length;
+  const dataTopLevelRowCount = processedGroupingResponse.treeDepth === 1 ? processedGroupingResponse.ids.length : Object.values(processedGroupingResponse.tree).filter(node => node.parent == null && !node.isPinned).length;
   return _extends({}, processedGroupingResponse, {
     groupingResponseBeforeRowHydration: groupingResponse,
     loading: loadingProp,
@@ -84,4 +85,19 @@ export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) =>
   }
 
   return validDescendants;
-};
+};
+export function calculatePinnedRowsHeight(apiRef) {
+  const pinnedRows = gridPinnedRowsSelector(apiRef);
+  const topPinnedRowsHeight = pinnedRows?.top?.reduce((acc, value) => {
+    acc += apiRef.current.unstable_getRowHeight(value.id);
+    return acc;
+  }, 0) || 0;
+  const bottomPinnedRowsHeight = pinnedRows?.bottom?.reduce((acc, value) => {
+    acc += apiRef.current.unstable_getRowHeight(value.id);
+    return acc;
+  }, 0) || 0;
+  return {
+    top: topPinnedRowsHeight,
+    bottom: bottomPinnedRowsHeight
+  };
+}

package/modern/hooks/features/rows/index.js

@@ -1,4 +1,4 @@
 export * from './gridRowsMetaSelector';
 export * from './gridRowsMetaState';
-export * from './gridRowsSelector';
+export { gridRowsStateSelector, gridRowCountSelector, gridRowsLoadingSelector, gridTopLevelRowCountSelector, gridRowsLookupSelector, gridRowsIdToIdLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthSelector, gridRowIdsSelector } from './gridRowsSelector';
 export { checkGridRowIdIsValid } from './gridRowsUtils';

package/modern/hooks/features/rows/useGridRows.js

@@ -26,8 +26,11 @@ export const rowsStateInitializer = (state, props, apiRef) => {
 };
 export const useGridRows = (apiRef, props) => {
   if (process.env.NODE_ENV !== 'production') {
-    // Freeze rows for immutability
-    Object.freeze(props.rows);
+    try {
+      // Freeze the `rows` prop so developers have a fast failure if they try to use Array.prototype.push().
+      Object.freeze(props.rows);
+    } catch (error) {// Sometimes, it's impossible to freeze, so we give up on it.
+    }
   }
 
   const logger = useGridLogger(apiRef, 'useGridRows');

package/modern/hooks/features/rows/useGridRowsMeta.js

@@ -9,6 +9,7 @@ import { gridFilterStateSelector } from '../filter/gridFilterSelector';
 import { gridPaginationSelector } from '../pagination/gridPaginationSelector';
 import { gridSortingStateSelector } from '../sorting/gridSortingSelector';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
+import { gridPinnedRowsSelector } from './gridRowsSelector';
 export const rowsMetaStateInitializer = state => _extends({}, state, {
   rowsMeta: {
     currentPageTotalHeight: 0,
@@ -35,13 +36,12 @@ export const useGridRowsMeta = (apiRef, props) => {
   const paginationState = useGridSelector(apiRef, gridPaginationSelector);
   const sortingState = useGridSelector(apiRef, gridSortingStateSelector);
   const currentPage = useGridVisibleRows(apiRef, props);
+  const pinnedRows = useGridSelector(apiRef, gridPinnedRowsSelector);
   const hydrateRowsMeta = React.useCallback(() => {
     hasRowWithAutoHeight.current = false;
     const densityFactor = gridDensityFactorSelector(apiRef.current.state, apiRef.current.instanceId);
-    const positions = [];
-    const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
-      positions.push(acc);
 
+    const calculateRowProcessedSizes = row => {
       if (!rowsHeightLookup.current[row.id]) {
         rowsHeightLookup.current[row.id] = {
           sizes: {
@@ -111,9 +111,22 @@ export const useGridRowsMeta = (apiRef, props) => {
 
       const processedSizes = apiRef.current.unstable_applyPipeProcessors('rowHeight', initialHeights, row);
       rowsHeightLookup.current[row.id].sizes = processedSizes;
+      return processedSizes;
+    };
+
+    const positions = [];
+    const currentPageTotalHeight = currentPage.rows.reduce((acc, row) => {
+      positions.push(acc);
+      const processedSizes = calculateRowProcessedSizes(row);
       const finalRowHeight = Object.values(processedSizes).reduce((acc2, value) => acc2 + value, 0);
       return acc + finalRowHeight;
     }, 0);
+    pinnedRows?.top?.forEach(row => {
+      calculateRowProcessedSizes(row);
+    });
+    pinnedRows?.bottom?.forEach(row => {
+      calculateRowProcessedSizes(row);
+    });
     apiRef.current.setState(state => {
       return _extends({}, state, {
         rowsMeta: {
@@ -129,7 +142,7 @@ export const useGridRowsMeta = (apiRef, props) => {
     }
 
     apiRef.current.forceUpdate();
-  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight]);
+  }, [apiRef, currentPage.rows, rowHeightFromDensity, getRowHeightProp, getRowSpacing, getEstimatedRowHeight, pinnedRows]);
   const getRowHeight = React.useCallback(rowId => {
     const height = rowsHeightLookup.current[rowId];
     return height ? height.sizes.base : rowHeightFromDensity;

package/modern/hooks/features/rows/useGridRowsPreProcessors.js

@@ -11,7 +11,8 @@ const flatRowTreeCreationMethod = ({
   for (let i = 0; i < ids.length; i += 1) {
     const rowId = ids[i];
 
-    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null) {
+    if (previousTree && previousTree[rowId] && previousTree[rowId].depth === 0 && previousTree[rowId].parent == null && // pinned row can be unpinned
+    !previousTree[rowId].isPinned) {
       tree[rowId] = previousTree[rowId];
     } else {
       tree[rowId] = {