@mui/x-data-grid 5.13.1 → 5.14.0

package/node/components/columnSelection/GridCellCheckboxRenderer.js

@@ -52,6 +52,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     field,
     id,
     value: isChecked,
+    rowNode,
     hasFocus,
     tabIndex
   } = props,
@@ -100,7 +101,12 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   }, [apiRef, props]);
-  const isSelectable = !rootProps.isRowSelectable || rootProps.isRowSelectable(apiRef.current.getRowParams(id));
+
+  if (rowNode.position === 'footer') {
+    return null;
+  }
+
+  const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.BaseCheckbox, (0, _extends2.default)({
     ref: handleRef,

package/node/components/containers/GridRootStyles.js

@@ -18,6 +18,16 @@ const GridRootStyles = (0, _styles.styled)('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => [{
     [`&.${_gridClasses.gridClasses.autoHeight}`]: styles.autoHeight
+  }, {
+    [`&.${_gridClasses.gridClasses.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+  }, {
+    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+  }, {
+    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+  }, {
+    [`&.${_gridClasses.gridClasses['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+  }, {
+    [`&.${_gridClasses.gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
   }, {
     [`& .${_gridClasses.gridClasses.editBooleanCell}`]: styles.editBooleanCell
   }, {

package/node/components/toolbar/GridToolbarExport.js

@@ -23,7 +23,9 @@ var _GridToolbarExportContainer = require("./GridToolbarExportContainer");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["csvOptions", "printOptions", "excelOptions"];
+const _excluded = ["hideMenu", "options"],
+      _excluded2 = ["hideMenu", "options"],
+      _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -34,14 +36,16 @@ const GridCsvExportMenuItem = props => {
   const {
     hideMenu,
     options
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
       hideMenu == null ? void 0 : hideMenu();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
-  });
+  }));
 };
 
 exports.GridCsvExportMenuItem = GridCsvExportMenuItem;
@@ -51,14 +55,16 @@ const GridPrintExportMenuItem = props => {
   const {
     hideMenu,
     options
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded2);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
       hideMenu == null ? void 0 : hideMenu();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportPrint')
-  });
+  }));
 };
 
 exports.GridPrintExportMenuItem = GridPrintExportMenuItem;
@@ -68,7 +74,7 @@ const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExpo
     printOptions = {},
     excelOptions
   } = props,
-        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded3);
   const apiRef = (0, _useGridApiContext.useGridApiContext)();
   const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {
     excelOptions,

package/node/constants/gridClasses.js

@@ -12,5 +12,5 @@ function getDataGridUtilityClass(slot) {
   return (0, _material.generateUtilityClass)('MuiDataGrid', slot);
 }
 
-const gridClasses = (0, _material.generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+const gridClasses = (0, _material.generateUtilityClasses)('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
 exports.gridClasses = gridClasses;

package/node/constants/localeTextConstants.js

@@ -117,6 +117,13 @@ 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'
 };
 exports.GRID_DEFAULT_LOCALE_TEXT = GRID_DEFAULT_LOCALE_TEXT;

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

@@ -41,11 +41,11 @@ 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) {
@@ -67,7 +67,7 @@ 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,
@@ -93,14 +93,16 @@ 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/node/hooks/features/columns/useGridColumns.js

@@ -63,7 +63,7 @@ const columnsStateInitializer = (state, props, apiRef) => {
 exports.columnsStateInitializer = columnsStateInitializer;
 
 function useGridColumns(apiRef, props) {
-  var _props$componentsProp2;
+  var _props$initialState5, _props$componentsProp2;
 
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridColumns');
   const columnTypes = React.useMemo(() => (0, _gridColumnsUtils.computeColumnTypes)(props.columnTypes), [props.columnTypes]);
@@ -214,14 +214,21 @@ 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 = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
-      const hasHiddenColumns = Object.values(columnVisibilityModelToExport).some(value => value === false);
+      var _props$initialState$c2, _props$initialState4, _props$initialState4$;
 
-      if (hasHiddenColumns) {
+      const columnVisibilityModelToExport = (0, _gridColumnsSelector.gridColumnVisibilityModelSelector)(apiRef);
+      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$c2 = (_props$initialState4 = props.initialState) == null ? void 0 : (_props$initialState4$ = _props$initialState4.columns) == null ? void 0 : _props$initialState4$.columnVisibilityModel) != null ? _props$initialState$c2 : {}).length > 0 || // Always export if the model is not empty
+      Object.keys(columnVisibilityModelToExport).length > 0;
+
+      if (shouldExportColumnVisibilityModel) {
         columnsStateToExport.columnVisibilityModel = columnVisibilityModelToExport;
       }
     }
@@ -254,7 +261,7 @@ function useGridColumns(apiRef, props) {
     return (0, _extends2.default)({}, prevState, {
       columns: columnsStateToExport
     });
-  }, [apiRef]);
+  }, [apiRef, props.columnVisibilityModel, (_props$initialState5 = props.initialState) == null ? void 0 : _props$initialState5.columns]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 

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

@@ -9,6 +9,8 @@ var _columns = require("../columns");
 
 var _filter = require("../filter");
 
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+
 const getColumnsToExport = ({
   apiRef,
   options
@@ -29,13 +31,19 @@ const defaultGetRowsToExport = ({
   apiRef
 }) => {
   const filteredSortedRowIds = (0, _filter.gridFilteredSortedRowIdsSelector)(apiRef);
+  const rowTree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
   const selectedRows = apiRef.current.getSelectedRows();
+  const bodyRows = filteredSortedRowIds.filter(id => {
+    var _rowTree$id$position;
+
+    return ((_rowTree$id$position = rowTree[id].position) != null ? _rowTree$id$position : 'body') === 'body';
+  });
 
   if (selectedRows.size > 0) {
-    return filteredSortedRowIds.filter(id => selectedRows.has(id));
+    return bodyRows.filter(id => selectedRows.has(id));
   }
 
-  return filteredSortedRowIds;
+  return bodyRows;
 };
 
 exports.defaultGetRowsToExport = defaultGetRowsToExport;

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

@@ -15,6 +15,8 @@ var _warning = require("../../../utils/warning");
 
 var _columns = require("../columns");
 
+var _gridRowsSelector = require("../rows/gridRowsSelector");
+
 /**
  * Adds default values to the optional fields of a filter items.
  * @param {GridFilterItem} item The raw filter item.
@@ -101,6 +103,7 @@ const buildAggregatedFilterItemsApplier = (filterModel, apiRef) => {
     items,
     linkOperator = _models.GridLinkOperator.And
   } = filterModel;
+  const tree = (0, _gridRowsSelector.gridRowTreeSelector)(apiRef);
 
   const getFilterCallbackFromItem = filterItem => {
     if (!filterItem.columnField || !filterItem.operatorValue) {
@@ -163,6 +166,10 @@ 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 === _models.GridLinkOperator.And) {

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

@@ -67,7 +67,7 @@ const filterStateInitializer = (state, props, apiRef) => {
 exports.filterStateInitializer = filterStateInitializer;
 
 const useGridFilter = (apiRef, props) => {
-  var _props$componentsProp2;
+  var _props$initialState3, _props$initialState3$, _props$componentsProp2;
 
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridFilter');
   apiRef.current.unstable_registerControlState({
@@ -243,10 +243,17 @@ const useGridFilter = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    var _props$initialState2, _props$initialState2$;
+
     const filterModelToExport = (0, _gridFilterSelector.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$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.filter) == null ? void 0 : _props$initialState2$.filterModel) != null || // Export if the model is not equal to the default value
+    !(0, _utils.isDeepEqual)(filterModelToExport, (0, _gridFilterState.getDefaultGridFilterModel)());
 
-    if (filterModelToExport.items.length === 0 && filterModelToExport.linkOperator === (0, _gridFilterState.getDefaultGridFilterModel)().linkOperator) {
+    if (!shouldExportFilterModel) {
       return prevState;
     }
 
@@ -255,7 +262,7 @@ const useGridFilter = (apiRef, props) => {
         filterModel: filterModelToExport
       }
     });
-  }, [apiRef]);
+  }, [apiRef, props.filterModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.filter) == null ? void 0 : _props$initialState3$.filterModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 

package/node/hooks/features/pagination/useGridPage.js

@@ -85,13 +85,14 @@ const useGridPage = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     var _props$initialState, _props$initialState$p;
 
     const pageToExport = (0, _gridPaginationSelector.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 = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.page) != null || // Export if the page value is not equal to the default value
+    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.page) != null || // Export if the page is not equal to the default value
     pageToExport !== 0;
 
     if (!shouldExportPage) {

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

@@ -70,13 +70,14 @@ const useGridPageSize = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     var _props$initialState, _props$initialState$p;
 
     const pageSizeToExport = (0, _gridPaginationSelector.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 = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null || // Export if the page size value is not equal to the default value
+    ((_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$p = _props$initialState.pagination) == null ? void 0 : _props$initialState$p.pageSize) != null || // Export if the page size is not equal to the default value
     pageSizeToExport !== defaultPageSize(props.autoPageSize);
 
     if (!shouldExportPageSize) {

package/node/hooks/features/preferencesPanel/useGridPreferencesPanel.js

@@ -39,7 +39,9 @@ const preferencePanelStateInitializer = (state, props) => {
 
 exports.preferencePanelStateInitializer = preferencePanelStateInitializer;
 
-const useGridPreferencesPanel = apiRef => {
+const useGridPreferencesPanel = (apiRef, props) => {
+  var _props$initialState3;
+
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridPreferencesPanel');
   const hideTimeout = React.useRef();
   const immediateTimeout = React.useRef();
@@ -96,17 +98,23 @@ const useGridPreferencesPanel = apiRef => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    var _props$initialState2;
+
     const preferencePanelToExport = (0, _gridPreferencePanelSelector.gridPreferencePanelStateSelector)(apiRef.current.state);
+    const shouldExportPreferencePanel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the panel was initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.preferencePanel) != null || // Always export if the panel is opened
+    preferencePanelToExport.open;
 
-    if (!preferencePanelToExport.open && !preferencePanelToExport.openedPanelValue) {
+    if (!shouldExportPreferencePanel) {
       return prevState;
     }
 
     return (0, _extends2.default)({}, prevState, {
       preferencePanel: preferencePanelToExport
     });
-  }, [apiRef]);
+  }, [apiRef, (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.preferencePanel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     const preferencePanel = context.stateToRestore.preferencePanel;
 

package/node/hooks/features/selection/useGridSelection.js

@@ -91,9 +91,9 @@ const useGridSelection = (apiRef, props) => {
     checkboxSelection,
     disableMultipleSelection,
     disableSelectionOnClick,
-    isRowSelectable,
     pagination,
-    paginationMode
+    paginationMode,
+    isRowSelectable: propIsRowSelectable
   } = props;
   const canHaveMultipleSelection = !disableMultipleSelection || checkboxSelection;
   const visibleRows = (0, _useGridVisibleRows.useGridVisibleRows)(apiRef, props);
@@ -142,9 +142,22 @@ const useGridSelection = (apiRef, props) => {
     }
   }, [apiRef, logger]);
   const isRowSelected = React.useCallback(id => (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state).includes(id), [apiRef]);
+  const isRowSelectable = React.useCallback(id => {
+    var _apiRef$current$getRo;
+
+    if (propIsRowSelectable && !propIsRowSelectable(apiRef.current.getRowParams(id))) {
+      return false;
+    }
+
+    if (((_apiRef$current$getRo = apiRef.current.getRowNode(id)) == null ? void 0 : _apiRef$current$getRo.position) === 'footer') {
+      return false;
+    }
+
+    return true;
+  }, [apiRef, propIsRowSelectable]);
   const getSelectedRows = React.useCallback(() => (0, _gridSelectionSelector.selectedGridRowsSelector)(apiRef), [apiRef]);
   const selectRow = React.useCallback((id, isSelected = true, resetSelection = false) => {
-    if (isRowSelectable && !isRowSelectable(apiRef.current.getRowParams(id))) {
+    if (!apiRef.current.isRowSelectable(id)) {
       return;
     }
 
@@ -168,10 +181,10 @@ const useGridSelection = (apiRef, props) => {
         apiRef.current.setSelectionModel(newSelection);
       }
     }
-  }, [apiRef, isRowSelectable, logger, canHaveMultipleSelection]);
+  }, [apiRef, logger, canHaveMultipleSelection]);
   const selectRows = React.useCallback((ids, isSelected = true, resetSelection = false) => {
     logger.debug(`Setting selection for several rows`);
-    const selectableIds = isRowSelectable ? ids.filter(id => isRowSelectable(apiRef.current.getRowParams(id))) : ids;
+    const selectableIds = ids.filter(id => apiRef.current.isRowSelectable(id));
     let newSelection;
 
     if (resetSelection) {
@@ -194,7 +207,7 @@ const useGridSelection = (apiRef, props) => {
     if (isSelectionValid) {
       apiRef.current.setSelectionModel(newSelection);
     }
-  }, [apiRef, isRowSelectable, logger, canHaveMultipleSelection]);
+  }, [apiRef, logger, canHaveMultipleSelection]);
   const selectRowRange = React.useCallback(({
     startId,
     endId
@@ -218,7 +231,8 @@ const useGridSelection = (apiRef, props) => {
     selectRowRange,
     setSelectionModel,
     getSelectedRows,
-    isRowSelected
+    isRowSelected,
+    isRowSelectable
   };
   (0, _useGridApiMethod.useGridApiMethod)(apiRef, selectionApi, 'GridSelectionApi');
   /**
@@ -399,13 +413,13 @@ const useGridSelection = (apiRef, props) => {
   React.useEffect(() => {
     if (isStateControlled) {
       return;
-    } // isRowSelectable changed
+    } // props.isRowSelectable changed
 
 
     const currentSelection = (0, _gridSelectionSelector.gridSelectionStateSelector)(apiRef.current.state);
 
     if (isRowSelectable) {
-      const newSelection = currentSelection.filter(id => isRowSelectable(apiRef.current.getRowParams(id)));
+      const newSelection = currentSelection.filter(id => isRowSelectable(id));
 
       if (newSelection.length < currentSelection.length) {
         apiRef.current.setSelectionModel(newSelection);
@@ -432,7 +446,7 @@ const useGridSelection = (apiRef, props) => {
         let isSelectable = true;
 
         if (isRowSelectable) {
-          isSelectable = isRowSelectable(apiRef.current.getRowParams(id));
+          isSelectable = isRowSelectable(id);
         }
 
         return isSelectable && currentPageRowsLookup[id]; // Check if the row is in the current page

package/node/hooks/features/sorting/gridSortingUtils.js

@@ -63,25 +63,24 @@ const parseSortItem = (sortItem, apiRef) => {
     comparator
   };
 };
+
 /**
  * Compare two rows according to a list of valid sort items.
  * The `row1Params` and `row2Params` must have the same length as `parsedSortItems`,
  * and each of their index must contain the `GridSortCellParams` of the sort item with the same index.
  * @param {GridParsedSortItem[]} parsedSortItems All the sort items with which we want to compare the rows.
- * @param {GridSortCellParams} row1Params The params of the 1st row for each sort item.
- * @param {GridSortCellParams} row2Params The params of the 2nd row for each sort item.
+ * @param {GridRowAggregatedSortingParams} row1 The node and params of the 1st row for each sort item.
+ * @param {GridRowAggregatedSortingParams} row2 The node and params of the 2nd row for each sort item.
  */
-
-
-const compareRows = (parsedSortItems, row1Params, row2Params) => {
+const compareRows = (parsedSortItems, row1, row2) => {
   return parsedSortItems.reduce((res, item, index) => {
     if (res !== 0) {
       // return the results of the first comparator which distinguish the two rows
       return res;
     }
 
-    const sortCellParams1 = row1Params[index];
-    const sortCellParams2 = row2Params[index];
+    const sortCellParams1 = row1.params[index];
+    const sortCellParams2 = row2.params[index];
     res = item.comparator(sortCellParams1.value, sortCellParams2.value, sortCellParams1, sortCellParams2);
     return res;
   }, 0);
@@ -101,10 +100,10 @@ const buildAggregatedSortingApplier = (sortModel, apiRef) => {
     return null;
   }
 
-  return rowList => rowList.map(value => ({
-    value,
-    params: comparatorList.map(el => el.getSortCellParams(value.id))
-  })).sort((a, b) => compareRows(comparatorList, a.params, b.params)).map(row => row.value.id);
+  return rowList => rowList.map(node => ({
+    node,
+    params: comparatorList.map(el => el.getSortCellParams(node.id))
+  })).sort((a, b) => compareRows(comparatorList, a, b)).map(row => row.node.id);
 };
 
 exports.buildAggregatedSortingApplier = buildAggregatedSortingApplier;

package/node/hooks/features/sorting/useGridSorting.js

@@ -59,6 +59,8 @@ const sortingStateInitializer = (state, props) => {
 exports.sortingStateInitializer = sortingStateInitializer;
 
 const useGridSorting = (apiRef, props) => {
+  var _props$initialState3, _props$initialState3$;
+
   const logger = (0, _useGridLogger.useGridLogger)(apiRef, 'useGridSorting');
   apiRef.current.unstable_registerControlState({
     stateId: 'sortModel',
@@ -182,10 +184,17 @@ const useGridSorting = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const stateExportPreProcessing = React.useCallback(prevState => {
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
+    var _props$initialState2, _props$initialState2$;
+
     const sortModelToExport = (0, _gridSortingSelector.gridSortModelSelector)(apiRef);
+    const shouldExportSortModel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.sortModel != null || // Always export if the model has been initialized
+    ((_props$initialState2 = props.initialState) == null ? void 0 : (_props$initialState2$ = _props$initialState2.sorting) == null ? void 0 : _props$initialState2$.sortModel) != null || // Export if the model is not empty
+    sortModelToExport.length > 0;
 
-    if (sortModelToExport.length === 0) {
+    if (!shouldExportSortModel) {
       return prevState;
     }
 
@@ -194,7 +203,7 @@ const useGridSorting = (apiRef, props) => {
         sortModel: sortModelToExport
       }
     });
-  }, [apiRef]);
+  }, [apiRef, props.sortModel, (_props$initialState3 = props.initialState) == null ? void 0 : (_props$initialState3$ = _props$initialState3.sorting) == null ? void 0 : _props$initialState3$.sortModel]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     var _context$stateToResto;
 
@@ -210,12 +219,31 @@ const useGridSorting = (apiRef, props) => {
     });
   }, [apiRef, props.disableMultipleColumnsSorting]);
   const flatSortingMethod = React.useCallback(params => {
+    const rowTree = (0, _rows.gridRowTreeSelector)(apiRef);
+
     if (!params.sortRowList) {
-      return (0, _rows.gridRowIdsSelector)(apiRef);
+      const bodyRowIds = [];
+      const footerRowIds = [];
+      (0, _rows.gridRowIdsSelector)(apiRef).forEach(rowId => {
+        if (rowTree[rowId].position === 'footer') {
+          footerRowIds.push(rowId);
+        } else {
+          bodyRowIds.push(rowId);
+        }
+      });
+      return [...bodyRowIds, ...footerRowIds];
     }
 
-    const rowTree = (0, _rows.gridRowTreeSelector)(apiRef);
-    return params.sortRowList(Object.values(rowTree));
+    const bodyRows = [];
+    const footerRowIds = [];
+    Object.values(rowTree).forEach(rowNode => {
+      if (rowNode.position === 'footer') {
+        footerRowIds.push(rowNode.id);
+      } else {
+        bodyRows.push(rowNode);
+      }
+    });
+    return [...params.sortRowList(bodyRows), ...footerRowIds];
   }, [apiRef]);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _pipeProcessing.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);

package/node/hooks/features/statePersistence/useGridStatePersistence.js

@@ -14,8 +14,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const useGridStatePersistence = apiRef => {
-  const exportState = React.useCallback(() => {
-    const stateToExport = apiRef.current.unstable_applyPipeProcessors('exportState', {});
+  const exportState = React.useCallback((params = {}) => {
+    const stateToExport = apiRef.current.unstable_applyPipeProcessors('exportState', {}, params);
     return stateToExport;
   }, [apiRef]);
   const restoreState = React.useCallback(stateToRestore => {

package/node/hooks/features/virtualization/useGridVirtualScroller.js

@@ -350,7 +350,8 @@ const useGridVirtualScroller = props => {
       apiRef.current.unstable_calculateColSpan({
         rowId: row.id,
         minFirstColumn,
-        maxLastColumn
+        maxLastColumn,
+        columns: visibleColumns
       });
     }
 
@@ -384,10 +385,8 @@ const useGridVirtualScroller = props => {
 
       if (selectedRowsLookup[id] == null) {
         isSelected = false;
-      } else if (typeof rootProps.isRowSelectable === 'function') {
-        isSelected = rootProps.isRowSelectable(apiRef.current.getRowParams(id));
       } else {
-        isSelected = true;
+        isSelected = apiRef.current.isRowSelectable(id);
       }
 
       rows.push( /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.components.Row, (0, _extends2.default)({