@mui/x-data-grid 5.13.0 → 5.15.0

package/modern/constants/localeTextConstants.js

@@ -19,7 +19,7 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   toolbarFiltersTooltipShow: 'Show filters',
   toolbarFiltersTooltipActive: count => count !== 1 ? `${count} active filters` : `${count} active filter`,
   // Quick filter toolbar field
-  toolbarQuickFilterPlaceholder: 'Search...',
+  toolbarQuickFilterPlaceholder: 'Search…',
   toolbarQuickFilterLabel: 'Search',
   toolbarQuickFilterDeleteIconLabel: 'Clear',
   // Export selector toolbar button text
@@ -111,5 +111,12 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   // Used core components translation keys
   MuiTablePagination: {},
   // Row reordering text
-  rowReorderingHeaderName: 'Row reordering'
+  rowReorderingHeaderName: 'Row reordering',
+  // Aggregation
+  aggregationMenuItemHeader: 'Aggregation',
+  aggregationFunctionLabelSum: 'sum',
+  aggregationFunctionLabelAvg: 'avg',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSize: 'size'
 };

package/modern/hooks/features/columns/useGridColumnSpanning.js

@@ -26,11 +26,11 @@ export const useGridColumnSpanning = apiRef => {
       columnIndex,
       rowId,
       minFirstColumnIndex,
-      maxLastColumnIndex
+      maxLastColumnIndex,
+      columns
     } = params;
-    const visibleColumns = apiRef.current.getVisibleColumns();
-    const columnsLength = visibleColumns.length;
-    const column = visibleColumns[columnIndex];
+    const columnsLength = columns.length;
+    const column = columns[columnIndex];
     const colSpan = typeof column.colSpan === 'function' ? column.colSpan(apiRef.current.getCellParams(rowId, column.field)) : column.colSpan;
 
     if (!colSpan || colSpan === 1) {
@@ -52,7 +52,7 @@ export const useGridColumnSpanning = apiRef => {
       const nextColumnIndex = columnIndex + j; // Cells should be spanned only within their column section (left-pinned, right-pinned and unpinned).
 
       if (nextColumnIndex >= minFirstColumnIndex && nextColumnIndex < maxLastColumnIndex) {
-        const nextColumn = visibleColumns[nextColumnIndex];
+        const nextColumn = columns[nextColumnIndex];
         width += nextColumn.computedWidth;
         setCellColSpanInfo(rowId, columnIndex + j, {
           spannedByColSpan: true,
@@ -78,14 +78,16 @@ export const useGridColumnSpanning = apiRef => {
   const calculateColSpan = React.useCallback(({
     rowId,
     minFirstColumn,
-    maxLastColumn
+    maxLastColumn,
+    columns
   }) => {
     for (let i = minFirstColumn; i < maxLastColumn; i += 1) {
       const cellProps = calculateCellColSpan({
         columnIndex: i,
         rowId,
         minFirstColumnIndex: minFirstColumn,
-        maxLastColumnIndex: maxLastColumn
+        maxLastColumnIndex: maxLastColumn,
+        columns
       });
 
       if (cellProps.colSpan > 1) {

package/modern/hooks/features/columns/useGridColumns.js

@@ -186,14 +186,19 @@ export function useGridColumns(apiRef, props) {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const columnsStateToExport = {};
 
     if (apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel) {
       const columnVisibilityModelToExport = gridColumnVisibilityModelSelector(apiRef);
-      const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
-
-      if (hasHiddenColumns) {
+      const shouldExportColumnVisibilityModel = // Always export if the `exportOnlyDirtyModels` property is activated
+      !context.exportOnlyDirtyModels || // Always export if the model is controlled
+      props.columnVisibilityModel != null || // Always export if the model has been initialized
+      // TODO v6 Do a nullish check instead to export even if the initial model equals "{}"
+      Object.keys(props.initialState?.columns?.columnVisibilityModel ?? {}).length > 0 || // Always export if the model is not empty
+      Object.keys(columnVisibilityModelToExport).length > 0;
+
+      if (shouldExportColumnVisibilityModel) {
         columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
       }
     }
@@ -224,7 +229,7 @@ export function useGridColumns(apiRef, props) {
     return _extends({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef]);
+  }, [apiRef, props.columnVisibilityModel, props.initialState?.columns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const columnVisibilityModelToImport = apiRef.current.unstable_caches.columns.isUsingColumnVisibilityModel ? context.stateToRestore.columns?.columnVisibilityModel : undefined;
     const initialState = context.stateToRestore.columns;

package/modern/hooks/features/dimensions/useGridDimensions.js

@@ -8,6 +8,7 @@ import { gridDensityHeaderHeightSelector, gridDensityRowHeightSelector } from '.
 import { useGridSelector } from '../../utils';
 import { getVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridRowsMetaSelector } from '../rows/gridRowsMetaSelector';
+import { calculatePinnedRowsHeight } from '../rows/gridRowsUtils';
 const isTestEnvironment = process.env.NODE_ENV === 'test';
 
 const hasScroll = ({
@@ -45,6 +46,7 @@ export function useGridDimensions(apiRef, props) {
   const updateGridDimensionsRef = React.useCallback(() => {
     const rootElement = apiRef.current.rootElementRef?.current;
     const columnsTotalWidth = gridColumnsTotalWidthSelector(apiRef);
+    const pinnedRowsHeight = calculatePinnedRowsHeight(apiRef);
 
     if (!rootDimensionsRef.current) {
       return;
@@ -90,7 +92,10 @@ export function useGridDimensions(apiRef, props) {
           width: Math.round(columnsTotalWidth),
           height: rowsMeta.currentPageTotalHeight
         },
-        container: viewportOuterSize,
+        container: {
+          width: viewportOuterSize.width,
+          height: viewportOuterSize.height - pinnedRowsHeight.top - pinnedRowsHeight.bottom
+        },
         scrollBarSize
       });
       hasScrollY = scrollInformation.hasScrollY;

package/modern/hooks/features/editRows/useGridCellEditing.new.js

@@ -98,7 +98,7 @@ export const useGridCellEditing = (apiRef, props) => {
       let reason;
 
       if (isPrintableKey(event.key)) {
-        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
           return;
         }
 
@@ -141,6 +141,7 @@ export const useGridCellEditing = (apiRef, props) => {
       field,
       reason
     } = params;
+    apiRef.current.unstable_runPendingEditCellValueMutation(id, field);
     let cellToFocusAfter;
 
     if (reason === GridCellEditStopReasons.enterKeyDown) {
@@ -154,7 +155,7 @@ export const useGridCellEditing = (apiRef, props) => {
     let ignoreModifications = reason === 'escapeKeyDown';
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
 
-    if (editingState[id][field].isProcessingProps) {
+    if (editingState[id][field].isProcessingProps && !props.disableIgnoreModificationsIfProcessingProps) {
       // The user wants to stop editing the cell but we can't wait for the props to be processed.
       // In this case, discard the modifications.
       ignoreModifications = true;
@@ -166,7 +167,7 @@ export const useGridCellEditing = (apiRef, props) => {
       ignoreModifications,
       cellToFocusAfter
     });
-  }, [apiRef]);
+  }, [apiRef, props.disableIgnoreModificationsIfProcessingProps]);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsCell(handleCellDoubleClick));
   useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsCell(handleCellFocusOut));
   useGridApiEventHandler(apiRef, 'cellKeyDown', runIfEditModeIsCell(handleCellKeyDown));
@@ -394,7 +395,7 @@ export const useGridCellEditing = (apiRef, props) => {
     newProps.value = column.preProcessEditCellProps ? editingState[id][field].value : parsedValue;
     updateOrDeleteFieldState(id, field, newProps);
     editingState = gridEditRowsStateSelector(apiRef.current.state);
-    return !editingState[id][field].error;
+    return !editingState[id]?.[field]?.error;
   }, [apiRef, throwIfNotEditable, throwIfNotInMode, updateOrDeleteFieldState]);
   const getRowWithUpdatedValuesFromCellEditing = React.useCallback((id, field) => {
     const column = apiRef.current.getColumn(field);

package/modern/hooks/features/editRows/useGridEditing.new.js

@@ -31,6 +31,10 @@ export const useGridEditing = (apiRef, props) => {
       return isCellEditableProp(params);
     }
 
+    if (params.rowNode.isPinned) {
+      return false;
+    }
+
     return true;
   }, [isCellEditableProp]);
 

package/modern/hooks/features/editRows/useGridEditing.old.js

@@ -28,7 +28,7 @@ export function useGridEditing(apiRef, props) {
     stateSelector: gridEditRowsStateSelector,
     changeEvent: 'editRowsModelChange'
   });
-  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
+  const isCellEditable = React.useCallback(params => !params.rowNode.isAutoGenerated && !params.rowNode.isPinned && !!params.colDef.editable && !!params.colDef.renderEditCell && (!props.isCellEditable || props.isCellEditable(params)), // eslint-disable-next-line react-hooks/exhaustive-deps
   [props.isCellEditable]);
 
   const maybeDebounce = (id, field, debounceMs, callback) => {

package/modern/hooks/features/editRows/useGridRowEditing.new.js

@@ -152,7 +152,7 @@ export const useGridRowEditing = (apiRef, props) => {
       let reason;
 
       if (isPrintableKey(event.key)) {
-        if (event.shiftKey || event.ctrlKey || event.metaKey || event.altKey) {
+        if (event.ctrlKey && event.key !== 'v' || event.metaKey && event.key !== 'v' || event.altKey) {
           return;
         }
 
@@ -212,7 +212,7 @@ export const useGridRowEditing = (apiRef, props) => {
     let ignoreModifications = reason === 'escapeKeyDown';
     const editingState = gridEditRowsStateSelector(apiRef.current.state);
 
-    if (!ignoreModifications) {
+    if (!ignoreModifications && !props.disableIgnoreModificationsIfProcessingProps) {
       // The user wants to stop editing the cell but we can't wait for the props to be processed.
       // In this case, discard the modifications if any field is processing its props.
       ignoreModifications = Object.values(editingState[id]).some(fieldProps => {
@@ -226,7 +226,7 @@ export const useGridRowEditing = (apiRef, props) => {
       field,
       cellToFocusAfter
     });
-  }, [apiRef]);
+  }, [apiRef, props.disableIgnoreModificationsIfProcessingProps]);
   useGridApiEventHandler(apiRef, 'cellDoubleClick', runIfEditModeIsRow(handleCellDoubleClick));
   useGridApiEventHandler(apiRef, 'cellFocusIn', runIfEditModeIsRow(handleCellFocusIn));
   useGridApiEventHandler(apiRef, 'cellFocusOut', runIfEditModeIsRow(handleCellFocusOut));

package/modern/hooks/features/export/utils.js

@@ -1,5 +1,6 @@
 import { gridColumnDefinitionsSelector, gridVisibleColumnDefinitionsSelector } from '../columns';
 import { gridFilteredSortedRowIdsSelector } from '../filter';
+import { gridPinnedRowsSelector, gridRowTreeSelector } from '../rows/gridRowsSelector';
 export const getColumnsToExport = ({
   apiRef,
   options
@@ -17,11 +18,18 @@ export const defaultGetRowsToExport = ({
   apiRef
 }) => {
   const filteredSortedRowIds = gridFilteredSortedRowIdsSelector(apiRef);
+  const rowTree = gridRowTreeSelector(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
+  const bodyRows = filteredSortedRowIds.filter(id => (rowTree[id].position ?? 'body') === 'body');
+  const pinnedRows = gridPinnedRowsSelector(apiRef);
+  const topPinnedRowsIds = pinnedRows?.top?.map(row => row.id) || [];
+  const bottomPinnedRowsIds = pinnedRows?.bottom?.map(row => row.id) || [];
+  bodyRows.unshift(...topPinnedRowsIds);
+  bodyRows.push(...bottomPinnedRowsIds);
 
   if (selectedRows.size > 0) {
-    return filteredSortedRowIds.filter(id => selectedRows.has(id));
+    return bodyRows.filter(id => selectedRows.has(id));
   }
 
-  return filteredSortedRowIds;
+  return bodyRows;
 };

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

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { GridLinkOperator } from '../../../models';
 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.
@@ -80,6 +81,7 @@ export const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
     items,
     linkOperator = GridLinkOperator.And
   } = filterModel;
+  const tree = gridRowTreeSelector(apiRef);
 
   const getFilterCallbackFromItem = filterItem => {
     if (!filterItem.columnField || !filterItem.operatorValue) {
@@ -141,6 +143,10 @@ 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) {

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

@@ -109,7 +109,23 @@ export const useGridFilter = (apiRef, props) => {
 
     if (targetColumnField) {
       const filterModel = gridFilterModelSelector(apiRef);
-      const filterItemsWithValue = filterModel.items.filter(item => item.value !== undefined);
+      const filterItemsWithValue = filterModel.items.filter(item => {
+        if (item.value !== undefined) {
+          return true;
+        }
+
+        const column = apiRef.current.getColumn(item.columnField);
+        const filterOperator = column.filterOperators?.find(operator => operator.value === item.operatorValue);
+        const requiresFilterValue = typeof filterOperator?.requiresFilterValue === 'undefined' ? true : filterOperator?.requiresFilterValue; // Operators like `isEmpty` don't have and don't require `item.value`.
+        // So we don't want to remove them from the filter model if `item.value === undefined`.
+        // See https://github.com/mui/mui-x/issues/5402
+
+        if (requiresFilterValue) {
+          return false;
+        }
+
+        return true;
+      });
       let newFilterItems;
       const filterItemOnTarget = filterItemsWithValue.find(item => item.columnField === targetColumnField);
 
@@ -188,10 +204,15 @@ export const useGridFilter = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const filterModelToExport = gridFilterModelSelector(apiRef);
+    const shouldExportFilterModel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.filterModel != null || // Always export if the model has been initialized
+    props.initialState?.filter?.filterModel != null || // Export if the model is not equal to the default value
+    !isDeepEqual(filterModelToExport, getDefaultGridFilterModel());
 
-    if (filterModelToExport.items.length === 0 && filterModelToExport.linkOperator === getDefaultGridFilterModel().linkOperator) {
+    if (!shouldExportFilterModel) {
       return prevState;
     }
 
@@ -200,7 +221,7 @@ export const useGridFilter = (apiRef, props) => {
         filterModel: filterModelToExport
       }
     });
-  }, [apiRef]);
+  }, [apiRef, props.filterModel, props.initialState?.filter?.filterModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const filterModel = context.stateToRestore.filter?.filterModel;
 

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/useGridPage.js

@@ -61,11 +61,12 @@ export const useGridPage = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const pageToExport = gridPageSelector(apiRef);
-    const shouldExportPage = // Always export if the page is controlled
+    const shouldExportPage = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the page is controlled
     props.page != null || // Always export if the page has been initialized
-    props.initialState?.pagination?.page != null || // Export if the page value is not equal to the default value
+    props.initialState?.pagination?.page != null || // Export if the page is not equal to the default value
     pageToExport !== 0;
 
     if (!shouldExportPage) {

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, {
@@ -47,11 +48,12 @@ export const useGridPageSize = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const pageSizeToExport = gridPageSizeSelector(apiRef);
-    const shouldExportPageSize = // Always export if the page size is controlled
+    const shouldExportPageSize = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the page size is controlled
     props.pageSize != null || // Always export if the page size has been initialized
-    props.initialState?.pagination?.pageSize != null || // Export if the page size value is not equal to the default value
+    props.initialState?.pagination?.pageSize != null || // Export if the page size is not equal to the default value
     pageSizeToExport !== defaultPageSize(props.autoPageSize);
 
     if (!shouldExportPageSize) {
@@ -90,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/preferencesPanel/useGridPreferencesPanel.js

@@ -13,7 +13,7 @@ export const preferencePanelStateInitializer = (state, props) => _extends({}, st
  * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
  */
 
-export const useGridPreferencesPanel = apiRef => {
+export const useGridPreferencesPanel = (apiRef, props) => {
   const logger = useGridLogger(apiRef, 'useGridPreferencesPanel');
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
@@ -70,17 +70,21 @@ export const useGridPreferencesPanel = apiRef => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const preferencePanelToExport = gridPreferencePanelStateSelector(apiRef.current.state);
+    const shouldExportPreferencePanel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the panel was initialized
+    props.initialState?.preferencePanel != null || // Always export if the panel is opened
+    preferencePanelToExport.open;
 
-    if (!preferencePanelToExport.open && !preferencePanelToExport.openedPanelValue) {
+    if (!shouldExportPreferencePanel) {
       return prevState;
     }
 
     return _extends({}, prevState, {
       preferencePanel: preferencePanelToExport
     });
-  }, [apiRef]);
+  }, [apiRef, props.initialState?.preferencePanel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const preferencePanel = context.stateToRestore.preferencePanel;