@mui/x-data-grid 7.7.1 → 7.9.0

package/hooks/features/density/useGridDensity.d.ts

@@ -3,4 +3,4 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const densityStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'initialState' | 'density'>>;
-export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'density' | 'onDensityChange' | 'initialState'>) => void;
+export declare const useGridDensity: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "density" | "onDensityChange" | "initialState">) => void;

package/hooks/features/dimensions/useGridDimensions.js

@@ -49,6 +49,7 @@ export function useGridDimensions(apiRef, props) {
   const logger = useGridLogger(apiRef, 'useResizeContainer');
   const errorShown = React.useRef(false);
   const rootDimensionsRef = React.useRef(EMPTY_SIZE);
+  const dimensionsState = useGridSelector(apiRef, gridDimensionsSelector);
   const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
   const pinnedColumns = useGridSelector(apiRef, gridVisiblePinnedColumnDefinitionsSelector);
   const densityFactor = useGridSelector(apiRef, gridDensityFactorSelector);
@@ -208,26 +209,25 @@ export function useGridDimensions(apiRef, props) {
     }
   }, [apiRef, savedSize, updateDimensions]);
   const root = apiRef.current.rootElementRef.current;
-  const dimensions = apiRef.current.state.dimensions;
   useEnhancedEffect(() => {
     if (!root) {
       return;
     }
     const set = (k, v) => root.style.setProperty(k, v);
-    set('--DataGrid-width', `${dimensions.viewportOuterSize.width}px`);
-    set('--DataGrid-hasScrollX', `${Number(dimensions.hasScrollX)}`);
-    set('--DataGrid-hasScrollY', `${Number(dimensions.hasScrollY)}`);
-    set('--DataGrid-scrollbarSize', `${dimensions.scrollbarSize}px`);
-    set('--DataGrid-rowWidth', `${dimensions.rowWidth}px`);
-    set('--DataGrid-columnsTotalWidth', `${dimensions.columnsTotalWidth}px`);
-    set('--DataGrid-leftPinnedWidth', `${dimensions.leftPinnedWidth}px`);
-    set('--DataGrid-rightPinnedWidth', `${dimensions.rightPinnedWidth}px`);
-    set('--DataGrid-headerHeight', `${dimensions.headerHeight}px`);
-    set('--DataGrid-headersTotalHeight', `${dimensions.headersTotalHeight}px`);
-    set('--DataGrid-topContainerHeight', `${dimensions.topContainerHeight}px`);
-    set('--DataGrid-bottomContainerHeight', `${dimensions.bottomContainerHeight}px`);
-    set('--height', `${dimensions.rowHeight}px`);
-  }, [root, dimensions]);
+    set('--DataGrid-width', `${dimensionsState.viewportOuterSize.width}px`);
+    set('--DataGrid-hasScrollX', `${Number(dimensionsState.hasScrollX)}`);
+    set('--DataGrid-hasScrollY', `${Number(dimensionsState.hasScrollY)}`);
+    set('--DataGrid-scrollbarSize', `${dimensionsState.scrollbarSize}px`);
+    set('--DataGrid-rowWidth', `${dimensionsState.rowWidth}px`);
+    set('--DataGrid-columnsTotalWidth', `${dimensionsState.columnsTotalWidth}px`);
+    set('--DataGrid-leftPinnedWidth', `${dimensionsState.leftPinnedWidth}px`);
+    set('--DataGrid-rightPinnedWidth', `${dimensionsState.rightPinnedWidth}px`);
+    set('--DataGrid-headerHeight', `${dimensionsState.headerHeight}px`);
+    set('--DataGrid-headersTotalHeight', `${dimensionsState.headersTotalHeight}px`);
+    set('--DataGrid-topContainerHeight', `${dimensionsState.topContainerHeight}px`);
+    set('--DataGrid-bottomContainerHeight', `${dimensionsState.bottomContainerHeight}px`);
+    set('--height', `${dimensionsState.rowHeight}px`);
+  }, [root, dimensionsState]);
   const isFirstSizing = React.useRef(true);
   const handleResize = React.useCallback(size => {
     rootDimensionsRef.current = size;

package/hooks/features/editing/useGridCellEditing.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onCellEditStart' | 'onCellEditStop' | 'cellModesModel' | 'onCellModesModelChange' | 'onProcessRowUpdateError' | 'signature'>) => void;
+export declare const useGridCellEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onCellEditStart" | "onCellEditStop" | "cellModesModel" | "onCellModesModelChange" | "onProcessRowUpdateError" | "signature">) => void;

package/hooks/features/editing/useGridEditing.d.ts

@@ -3,4 +3,4 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const editingStateInitializer: GridStateInitializer;
-export declare const useGridEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'isCellEditable' | 'editMode' | 'processRowUpdate'>) => void;
+export declare const useGridEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "isCellEditable" | "editMode" | "processRowUpdate">) => void;

package/hooks/features/editing/useGridRowEditing.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'editMode' | 'processRowUpdate' | 'onRowEditStart' | 'onRowEditStop' | 'onProcessRowUpdateError' | 'rowModesModel' | 'onRowModesModelChange' | 'signature'>) => void;
+export declare const useGridRowEditing: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "editMode" | "processRowUpdate" | "onRowEditStart" | "onRowEditStop" | "onProcessRowUpdateError" | "rowModesModel" | "onRowModesModelChange" | "signature">) => void;

package/hooks/features/export/serializers/csvSerializer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { GridCsvExportOptions, GridRowId } from '../../../../models';
 import type { GridCellParams } from '../../../../models/params/gridCellParams';
 import type { GridStateColDef } from '../../../../models/colDef/gridColDef';

package/hooks/features/export/useGridCsvExport.d.ts

@@ -8,4 +8,4 @@ import type { DataGridProcessedProps } from '../../../models/props/DataGridProps
  * @requires useGridSelection (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'ignoreValueFormatterDuringExport'>) => void;
+export declare const useGridCsvExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "ignoreValueFormatterDuringExport">) => void;

package/hooks/features/export/useGridPrintExport.d.ts

@@ -7,4 +7,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridSorting (state)
  * @requires useGridParamsApi (method)
  */
-export declare const useGridPrintExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'columnHeaderHeight' | 'headerFilterHeight'>) => void;
+export declare const useGridPrintExport: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "columnHeaderHeight" | "headerFilterHeight">) => void;

package/hooks/features/export/useGridPrintExport.js

@@ -119,14 +119,15 @@ export const useGridPrintExport = (apiRef, props) => {
     gridClone.style.height = `${computedTotalHeight}px`;
     // The height above does not include grid border width, so we need to exclude it
     gridClone.style.boxSizing = 'content-box';
-
-    // the footer is always being placed at the bottom of the page as if all rows are exported
-    // so if getRowsToExport is being used to only export a subset of rows then we need to
-    // adjust the footer position to be correctly placed at the bottom of the grid
-    const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
-    gridFooterElement.style.position = 'absolute';
-    gridFooterElement.style.width = '100%';
-    gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+    if (!normalizeOptions.hideFooter) {
+      // the footer is always being placed at the bottom of the page as if all rows are exported
+      // so if getRowsToExport is being used to only export a subset of rows then we need to
+      // adjust the footer position to be correctly placed at the bottom of the grid
+      const gridFooterElement = gridClone.querySelector(`.${gridClasses.footerContainer}`);
+      gridFooterElement.style.position = 'absolute';
+      gridFooterElement.style.width = '100%';
+      gridFooterElement.style.top = `${computedTotalHeight - gridFooterElementHeight}px`;
+    }
 
     // printDoc.body.appendChild(gridClone); should be enough but a clone isolation bug in Safari
     // prevents us to do it

package/hooks/features/filter/gridFilterUtils.d.ts

@@ -12,7 +12,7 @@ import { GridAggregatedFilterItemApplier, GridFilterItemResult, GridQuickFilterV
  */
 export declare const cleanFilterItem: (item: GridFilterItem, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => GridFilterItem;
 export declare const sanitizeFilterModel: (model: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => GridFilterModel;
-export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity['filter']) => GridStateCommunity['filter'];
+export declare const mergeStateWithFilterModel: (filterModel: GridFilterModel, disableMultipleColumnsFiltering: boolean, apiRef: React.MutableRefObject<GridPrivateApiCommunity>) => (filteringState: GridStateCommunity["filter"]) => GridStateCommunity["filter"];
 export declare const removeDiacritics: (value: unknown) => unknown;
 export declare const shouldQuickFilterExcludeHiddenColumns: (filterModel: GridFilterModel) => boolean;
 export declare const buildAggregatedFilterApplier: (filterModel: GridFilterModel, apiRef: React.MutableRefObject<GridPrivateApiCommunity>, disableEval: boolean) => GridAggregatedFilterItemApplier;

package/hooks/features/filter/useGridFilter.d.ts

@@ -8,4 +8,4 @@ export declare const filterStateInitializer: GridStateInitializer<Pick<DataGridP
  * @requires useGridParamsApi (method)
  * @requires useGridRows (event)
  */
-export declare const useGridFilter: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'initialState' | 'filterModel' | 'getRowId' | 'onFilterModelChange' | 'filterMode' | 'disableMultipleColumnsFiltering' | 'slots' | 'slotProps' | 'disableColumnFilter' | 'disableEval' | 'ignoreDiacritics'>) => void;
+export declare const useGridFilter: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "initialState" | "filterModel" | "getRowId" | "onFilterModelChange" | "filterMode" | "disableMultipleColumnsFiltering" | "slots" | "slotProps" | "disableColumnFilter" | "disableEval" | "ignoreDiacritics">) => void;

package/hooks/features/focus/useGridFocus.d.ts

@@ -8,4 +8,4 @@ export declare const focusStateInitializer: GridStateInitializer;
  * @requires useGridRows (method)
  * @requires useGridEditing (event)
  */
-export declare const useGridFocus: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => void;
+export declare const useGridFocus: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => void;

package/hooks/features/headerFiltering/useGridHeaderFiltering.d.ts

@@ -3,4 +3,4 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
 export declare const headerFilteringStateInitializer: GridStateInitializer;
-export declare const useGridHeaderFiltering: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'signature' | 'headerFilters'>) => void;
+export declare const useGridHeaderFiltering: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "signature" | "headerFilters">) => void;

package/hooks/features/keyboardNavigation/useGridKeyboardNavigation.d.ts

@@ -10,4 +10,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridScroll (method) - can be after
  * @requires useGridColumnSpanning (method) - can be after
  */
-export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode' | 'getRowId' | 'experimentalFeatures' | 'signature' | 'headerFilters'>) => void;
+export declare const useGridKeyboardNavigation: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode" | "getRowId" | "experimentalFeatures" | "signature" | "headerFilters">) => void;

package/hooks/features/overlays/useGridOverlays.d.ts

@@ -0,0 +1,11 @@
+import { GridLoadingOverlayVariant } from '../../../components/GridLoadingOverlay';
+import { GridSlotsComponent } from '../../../models/gridSlotsComponent';
+export type GridOverlayType = keyof Pick<GridSlotsComponent, 'noRowsOverlay' | 'noResultsOverlay' | 'loadingOverlay'> | null;
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+export declare const useGridOverlays: () => {
+    overlayType: GridOverlayType;
+    loadingOverlayVariant: GridLoadingOverlayVariant | null;
+};

package/hooks/features/overlays/useGridOverlays.js

@@ -0,0 +1,35 @@
+import { useGridSelector } from '../../utils';
+import { useGridApiContext } from '../../utils/useGridApiContext';
+import { useGridRootProps } from '../../utils/useGridRootProps';
+import { gridExpandedRowCountSelector } from '../filter';
+import { gridRowCountSelector, gridRowsLoadingSelector } from '../rows';
+/**
+ * Uses the grid state to determine which overlay to display.
+ * Returns the active overlay type and the active loading overlay variant.
+ */
+export const useGridOverlays = () => {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const totalRowCount = useGridSelector(apiRef, gridRowCountSelector);
+  const visibleRowCount = useGridSelector(apiRef, gridExpandedRowCountSelector);
+  const noRows = totalRowCount === 0;
+  const loading = useGridSelector(apiRef, gridRowsLoadingSelector);
+  const showNoRowsOverlay = !loading && noRows;
+  const showNoResultsOverlay = !loading && totalRowCount > 0 && visibleRowCount === 0;
+  let overlayType = null;
+  let loadingOverlayVariant = null;
+  if (showNoRowsOverlay) {
+    overlayType = 'noRowsOverlay';
+  }
+  if (showNoResultsOverlay) {
+    overlayType = 'noResultsOverlay';
+  }
+  if (loading) {
+    overlayType = 'loadingOverlay';
+    loadingOverlayVariant = rootProps.slotProps?.loadingOverlay?.[noRows ? 'noRowsVariant' : 'variant'] || null;
+  }
+  return {
+    overlayType,
+    loadingOverlayVariant
+  };
+};

package/hooks/features/pagination/gridPaginationUtils.d.ts

@@ -6,4 +6,4 @@ export declare const getDefaultGridPaginationModel: (autoPageSize: boolean) => {
     pageSize: number;
 };
 export declare const getValidPage: (page: number, pageCount?: number) => number;
-export declare const throwIfPageSizeExceedsTheLimit: (pageSize: number, signatureProp: DataGridProcessedProps['signature']) => void;
+export declare const throwIfPageSizeExceedsTheLimit: (pageSize: number, signatureProp: DataGridProcessedProps["signature"]) => void;

package/hooks/features/pagination/index.d.ts

@@ -1,2 +1,2 @@
 export * from './gridPaginationSelector';
-export type { GridPaginationApi, GridPaginationState, GridPaginationInitialState, } from './gridPaginationInterfaces';
+export type { GridPaginationModelApi, GridPaginationRowCountApi, GridPaginationApi, GridPaginationState, GridPaginationInitialState, } from './gridPaginationInterfaces';

package/hooks/features/pagination/useGridPaginationMeta.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridPaginationMeta: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'paginationMeta' | 'initialState' | 'paginationMode' | 'onPaginationMetaChange'>) => void;
+export declare const useGridPaginationMeta: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationMeta" | "initialState" | "paginationMode" | "onPaginationMetaChange">) => void;

package/hooks/features/pagination/useGridPaginationModel.d.ts

@@ -3,9 +3,9 @@ import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPaginationState } from './gridPaginationInterfaces';
 import { GridPaginationModel } from '../../../models/gridPaginationProps';
-export declare const getDerivedPaginationModel: (paginationState: GridPaginationState, signature: DataGridProcessedProps['signature'], paginationModelProp?: GridPaginationModel) => GridPaginationModel;
+export declare const getDerivedPaginationModel: (paginationState: GridPaginationState, signature: DataGridProcessedProps["signature"], paginationModelProp?: GridPaginationModel) => GridPaginationModel;
 /**
  * @requires useGridFilter (state)
  * @requires useGridDimensions (event) - can be after
  */
-export declare const useGridPaginationModel: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'paginationModel' | 'onPaginationModelChange' | 'autoPageSize' | 'initialState' | 'paginationMode' | 'signature' | 'rowHeight'>) => void;
+export declare const useGridPaginationModel: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "paginationModel" | "onPaginationModelChange" | "autoPageSize" | "initialState" | "paginationMode" | "signature" | "rowHeight">) => void;

package/hooks/features/pagination/useGridRowCount.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
-export declare const useGridRowCount: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rowCount' | 'initialState' | 'paginationMode' | 'onRowCountChange'>) => void;
+export declare const useGridRowCount: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rowCount" | "initialState" | "paginationMode" | "onRowCountChange">) => void;

package/hooks/features/preferencesPanel/useGridPreferencesPanel.d.ts

@@ -6,4 +6,4 @@ export declare const preferencePanelStateInitializer: GridStateInitializer<Pick<
 /**
  * TODO: Add a single `setPreferencePanel` method to avoid multiple `setState`
  */
-export declare const useGridPreferencesPanel: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState'>) => void;
+export declare const useGridPreferencesPanel: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState">) => void;

package/hooks/features/rowSelection/useGridRowSelection.d.ts

@@ -9,4 +9,4 @@ export declare const rowSelectionStateInitializer: GridStateInitializer<Pick<Dat
  * @requires useGridFocus (state) - can be after
  * @requires useGridKeyboardNavigation (`cellKeyDown` event must first be consumed by it)
  */
-export declare const useGridRowSelection: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'checkboxSelection' | 'rowSelectionModel' | 'onRowSelectionModelChange' | 'disableMultipleRowSelection' | 'disableRowSelectionOnClick' | 'isRowSelectable' | 'checkboxSelectionVisibleOnly' | 'pagination' | 'paginationMode' | 'classes' | 'keepNonExistentRowsSelected' | 'rowSelection' | 'signature'>) => void;
+export declare const useGridRowSelection: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "checkboxSelection" | "rowSelectionModel" | "onRowSelectionModelChange" | "disableMultipleRowSelection" | "disableRowSelectionOnClick" | "isRowSelectable" | "checkboxSelectionVisibleOnly" | "pagination" | "paginationMode" | "classes" | "keepNonExistentRowsSelected" | "rowSelection" | "signature">) => void;

package/hooks/features/rows/gridRowsInterfaces.d.ts

@@ -43,7 +43,7 @@ export interface GridRowsState {
     treeDepths: GridTreeDepths;
     dataRowIds: GridRowId[];
     /**
-     * Matches the value of the `loading` prop.
+     * The loading status of the rows.
      */
     loading?: boolean;
     /**
@@ -63,6 +63,12 @@ export interface GridRowsState {
     additionalRowGroups?: {
         pinnedRows?: GridPinnedRowsState;
     };
+    /**
+     * Contains some values of type `GridRowId` that have been requested to be fetched
+     * either by `defaultGroupingExpansionDepth` or `isGroupExpandedByDefault` props.
+     * Applicable with server-side grouped data and `unstable_dataSource` only.
+     */
+    groupsToFetch?: GridRowId[];
 }
 export interface GridRowTreeCreationParams {
     previousTree: GridRowTreeConfig | null;
@@ -70,6 +76,7 @@ export interface GridRowTreeCreationParams {
     updates: GridRowsPartialUpdates | GridRowsFullUpdate;
     dataRowIdToIdLookup: GridRowIdToIdLookup;
     dataRowIdToModelLookup: GridRowIdToModelLookup;
+    previousGroupsToFetch?: GridRowId[];
 }
 export type GridRowTreeUpdateGroupAction = 'removeChildren' | 'insertChildren' | 'modifyChildren';
 export type GridRowTreeUpdatedGroupsValue = {
@@ -81,7 +88,7 @@ export type GridRowTreeUpdatedGroupsManager = {
     value: GridRowTreeUpdatedGroupsValue;
     addAction: (groupId: GridRowId, action: GridRowTreeUpdateGroupAction) => void;
 };
-export type GridRowTreeCreationValue = Pick<GridRowsState, 'groupingName' | 'tree' | 'treeDepths' | 'dataRowIds'> & {
+export type GridRowTreeCreationValue = Pick<GridRowsState, 'groupingName' | 'tree' | 'treeDepths' | 'dataRowIds' | 'groupsToFetch'> & {
     updatedGroupsManager?: GridRowTreeUpdatedGroupsManager;
 };
 export type GridHydrateRowsValue = Pick<GridRowsState, 'tree' | 'treeDepths' | 'dataRowIds' | 'dataRowIdToIdLookup' | 'dataRowIdToModelLookup' | 'additionalRowGroups'>;
@@ -103,6 +110,7 @@ export interface GridRowsPartialUpdates {
     idToActionLookup: {
         [id: GridRowId]: GridRowsPartialUpdateAction | undefined;
     };
+    groupKeys?: string[];
 }
 export interface GridPinnedRowsState {
     top?: GridRowEntry[];

package/hooks/features/rows/gridRowsSelector.d.ts

@@ -5,6 +5,7 @@ export declare const gridTopLevelRowCountSelector: import("../../../utils/create
 export declare const gridRowsLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowIdToModelLookup<import("../../..").GridValidRowModel>>;
 export declare const gridRowsDataRowIdToIdLookupSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridRowIdToIdLookup>;
 export declare const gridRowTreeSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowTreeConfig>;
+export declare const gridRowGroupsToFetchSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("../../..").GridRowId[] | undefined>;
 export declare const gridRowGroupingNameSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, string>;
 export declare const gridRowTreeDepthsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, import("./gridRowsInterfaces").GridTreeDepths>;
 export declare const gridRowMaximumTreeDepthSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, number>;
@@ -13,7 +14,7 @@ export declare const gridDataRowIdsSelector: import("../../../utils/createSelect
  * @ignore - do not document.
  */
 export declare const gridAdditionalRowGroupsSelector: import("../../../utils/createSelector").OutputSelector<GridStateCommunity, {
-    pinnedRows?: import("./gridRowsInterfaces").GridPinnedRowsState | undefined;
+    pinnedRows?: import("./gridRowsInterfaces").GridPinnedRowsState;
 } | undefined>;
 /**
  * @ignore - do not document.

package/hooks/features/rows/gridRowsSelector.js

@@ -8,6 +8,7 @@ export const gridTopLevelRowCountSelector = createSelector(gridRowsStateSelector
 export const gridRowsLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToModelLookup);
 export const gridRowsDataRowIdToIdLookupSelector = createSelector(gridRowsStateSelector, rows => rows.dataRowIdToIdLookup);
 export const gridRowTreeSelector = createSelector(gridRowsStateSelector, rows => rows.tree);
+export const gridRowGroupsToFetchSelector = createSelector(gridRowsStateSelector, rows => rows.groupsToFetch);
 export const gridRowGroupingNameSelector = createSelector(gridRowsStateSelector, rows => rows.groupingName);
 export const gridRowTreeDepthsSelector = createSelector(gridRowsStateSelector, rows => rows.treeDepths);
 export const gridRowMaximumTreeDepthSelector = createSelectorMemoized(gridRowsStateSelector, rows => {

package/hooks/features/rows/gridRowsUtils.d.ts

@@ -14,25 +14,27 @@ export declare const buildRootGroup: () => GridGroupNode;
  */
 export declare function checkGridRowIdIsValid(id: GridRowId, row: GridRowModel | Partial<GridRowModel>, detailErrorMessage?: string): void;
 export declare const getRowIdFromRowModel: (rowModel: GridRowModel, getRowId?: GridRowIdGetter, detailErrorMessage?: string) => GridRowId;
-export declare const createRowsInternalCache: ({ rows, getRowId, loading, rowCount, }: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'loading' | 'rowCount'>) => GridRowsInternalCache;
+export declare const createRowsInternalCache: ({ rows, getRowId, loading, rowCount, }: Pick<DataGridProcessedProps, "rows" | "getRowId" | "loading" | "rowCount">) => GridRowsInternalCache;
 export declare const getTopLevelRowCount: ({ tree, rowCountProp, }: {
     tree: GridRowTreeConfig;
-    rowCountProp: DataGridProcessedProps['rowCount'];
+    rowCountProp: DataGridProcessedProps["rowCount"];
 }) => number;
-export declare const getRowsStateFromCache: ({ apiRef, rowCountProp, loadingProp, previousTree, previousTreeDepths, }: Pick<GridRowTreeCreationParams, 'previousTree' | 'previousTreeDepths'> & {
+export declare const getRowsStateFromCache: ({ apiRef, rowCountProp, loadingProp, previousTree, previousTreeDepths, previousGroupsToFetch, }: Pick<GridRowTreeCreationParams, "previousTree" | "previousTreeDepths" | "previousGroupsToFetch"> & {
     apiRef: React.MutableRefObject<GridPrivateApiCommunity>;
     rowCountProp: number | undefined;
     loadingProp: boolean | undefined;
 }) => GridRowsState;
-export declare const isAutoGeneratedRow: (rowNode: GridTreeNode) => rowNode is GridAutoGeneratedGroupNode | GridFooterNode | GridSkeletonRowNode | GridAutoGeneratedPinnedRowNode;
+export declare const isAutoGeneratedRow: (rowNode: GridTreeNode) => rowNode is GridFooterNode | GridSkeletonRowNode | GridAutoGeneratedGroupNode | GridAutoGeneratedPinnedRowNode;
 export declare const getTreeNodeDescendants: (tree: GridRowTreeConfig, parentId: GridRowId, skipAutoGeneratedRows: boolean) => GridRowId[];
-export declare const updateCacheWithNewRows: ({ previousCache, getRowId, updates, }: {
+export declare const updateCacheWithNewRows: ({ previousCache, getRowId, updates, groupKeys, }: {
     previousCache: GridRowsInternalCache;
-    getRowId: DataGridProcessedProps['getRowId'];
+    getRowId: DataGridProcessedProps["getRowId"];
     updates: GridRowModelUpdate[];
+    groupKeys?: string[];
 }) => GridRowsInternalCache;
 export declare function calculatePinnedRowsHeight(apiRef: React.MutableRefObject<GridApiCommunity>): {
     top: number;
     bottom: number;
 };
 export declare function getMinimalContentHeight(apiRef: React.MutableRefObject<GridApiCommunity>): string;
+export declare function computeRowsUpdates(apiRef: React.MutableRefObject<GridApiCommunity>, updates: GridRowModelUpdate[], getRowId: DataGridProcessedProps['getRowId']): GridRowModelUpdate[];

package/hooks/features/rows/gridRowsUtils.js

@@ -72,7 +72,8 @@ export const getRowsStateFromCache = ({
   rowCountProp = 0,
   loadingProp,
   previousTree,
-  previousTreeDepths
+  previousTreeDepths,
+  previousGroupsToFetch
 }) => {
   const cache = apiRef.current.caches.rows;
 
@@ -81,13 +82,15 @@ export const getRowsStateFromCache = ({
     tree: unProcessedTree,
     treeDepths: unProcessedTreeDepths,
     dataRowIds: unProcessedDataRowIds,
-    groupingName
+    groupingName,
+    groupsToFetch = []
   } = apiRef.current.applyStrategyProcessor('rowTreeCreation', {
     previousTree,
     previousTreeDepths,
     updates: cache.updates,
     dataRowIdToIdLookup: cache.dataRowIdToIdLookup,
-    dataRowIdToModelLookup: cache.dataRowIdToModelLookup
+    dataRowIdToModelLookup: cache.dataRowIdToModelLookup,
+    previousGroupsToFetch
   });
 
   // 2. Apply the "hydrateRows" pipe-processing.
@@ -116,7 +119,8 @@ export const getRowsStateFromCache = ({
       rowCountProp
     }),
     groupingName,
-    loading: loadingProp
+    loading: loadingProp,
+    groupsToFetch
   });
 };
 export const isAutoGeneratedRow = rowNode => rowNode.type === 'skeletonRow' || rowNode.type === 'footer' || rowNode.type === 'group' && rowNode.isAutoGenerated || rowNode.type === 'pinnedRow' && rowNode.isAutoGenerated;
@@ -144,7 +148,8 @@ export const getTreeNodeDescendants = (tree, parentId, skipAutoGeneratedRows) =>
 export const updateCacheWithNewRows = ({
   previousCache,
   getRowId,
-  updates
+  updates,
+  groupKeys
 }) => {
   if (previousCache.updates.type === 'full') {
     throw new Error('MUI X: Unable to prepare a partial update if a full update is not applied yet.');
@@ -168,7 +173,8 @@ export const updateCacheWithNewRows = ({
       modify: [...(previousCache.updates.actions.modify ?? [])],
       remove: [...(previousCache.updates.actions.remove ?? [])]
     },
-    idToActionLookup: _extends({}, previousCache.updates.idToActionLookup)
+    idToActionLookup: _extends({}, previousCache.updates.idToActionLookup),
+    groupKeys
   };
   const dataRowIdToModelLookup = _extends({}, previousCache.dataRowIdToModelLookup);
   const dataRowIdToIdLookup = _extends({}, previousCache.dataRowIdToIdLookup);
@@ -281,4 +287,22 @@ export function calculatePinnedRowsHeight(apiRef) {
 export function getMinimalContentHeight(apiRef) {
   const dimensions = gridDimensionsSelector(apiRef.current.state);
   return `var(--DataGrid-overlayHeight, ${2 * dimensions.rowHeight}px)`;
+}
+export function computeRowsUpdates(apiRef, updates, getRowId) {
+  const nonPinnedRowsUpdates = [];
+  updates.forEach(update => {
+    const id = getRowIdFromRowModel(update, getRowId, 'A row was provided without id when calling updateRows():');
+    const rowNode = apiRef.current.getRowNode(id);
+    if (rowNode?.type === 'pinnedRow') {
+      // @ts-ignore because otherwise `release:build` doesn't work
+      const pinnedRowsCache = apiRef.current.caches.pinnedRows;
+      const prevModel = pinnedRowsCache.idLookup[id];
+      if (prevModel) {
+        pinnedRowsCache.idLookup[id] = _extends({}, prevModel, update);
+      }
+    } else {
+      nonPinnedRowsUpdates.push(update);
+    }
+  });
+  return nonPinnedRowsUpdates;
 }

package/hooks/features/rows/useGridRows.d.ts

@@ -2,5 +2,5 @@ import * as React from 'react';
 import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
 import { GridPrivateApiCommunity } from '../../../models/api/gridApiCommunity';
 import { GridStateInitializer } from '../../utils/useGridInitializeState';
-export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'rows' | 'rowCount' | 'getRowId' | 'loading'>>;
-export declare const useGridRows: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'rows' | 'getRowId' | 'rowCount' | 'throttleRowsMs' | 'signature' | 'pagination' | 'paginationMode' | 'loading'>) => void;
+export declare const rowsStateInitializer: GridStateInitializer<Pick<DataGridProcessedProps, 'unstable_dataSource' | 'rows' | 'rowCount' | 'getRowId' | 'loading'>>;
+export declare const useGridRows: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "rows" | "getRowId" | "rowCount" | "throttleRowsMs" | "signature" | "pagination" | "paginationMode" | "loading">) => void;

package/hooks/features/rows/useGridRows.js

@@ -2,17 +2,18 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
 import { useGridApiMethod } from '../../utils/useGridApiMethod';
 import { useGridLogger } from '../../utils/useGridLogger';
-import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector } from './gridRowsSelector';
+import { gridRowCountSelector, gridRowsLookupSelector, gridRowTreeSelector, gridRowGroupingNameSelector, gridRowTreeDepthsSelector, gridDataRowIdsSelector, gridRowsDataRowIdToIdLookupSelector, gridRowMaximumTreeDepthSelector, gridRowGroupsToFetchSelector } from './gridRowsSelector';
 import { useTimeout } from '../../utils/useTimeout';
 import { GridSignature, useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { useGridVisibleRows } from '../../utils/useGridVisibleRows';
 import { gridSortedRowIdsSelector } from '../sorting/gridSortingSelector';
 import { gridFilteredRowsLookupSelector } from '../filter/gridFilterSelector';
-import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel } from './gridRowsUtils';
+import { getTreeNodeDescendants, createRowsInternalCache, getRowsStateFromCache, isAutoGeneratedRow, GRID_ROOT_GROUP_ID, GRID_ID_AUTOGENERATED, updateCacheWithNewRows, getTopLevelRowCount, getRowIdFromRowModel, computeRowsUpdates } from './gridRowsUtils';
 import { useGridRegisterPipeApplier } from '../../core/pipeProcessing';
 export const rowsStateInitializer = (state, props, apiRef) => {
+  const isDataSourceAvailable = !!props.unstable_dataSource;
   apiRef.current.caches.rows = createRowsInternalCache({
-    rows: props.rows,
+    rows: isDataSourceAvailable ? [] : props.rows,
     getRowId: props.getRowId,
     loading: props.loading,
     rowCount: props.rowCount
@@ -21,7 +22,7 @@ export const rowsStateInitializer = (state, props, apiRef) => {
     rows: getRowsStateFromCache({
       apiRef,
       rowCountProp: props.rowCount,
-      loadingProp: props.loading,
+      loadingProp: isDataSourceAvailable ? true : props.loading,
       previousTree: null,
       previousTreeDepths: null
     })
@@ -82,7 +83,8 @@ export const useGridRows = (apiRef, props) => {
           rowCountProp: props.rowCount,
           loadingProp: props.loading,
           previousTree: gridRowTreeSelector(apiRef),
-          previousTreeDepths: gridRowTreeDepthsSelector(apiRef)
+          previousTreeDepths: gridRowTreeDepthsSelector(apiRef),
+          previousGroupsToFetch: gridRowGroupsToFetchSelector(apiRef)
         })
       }));
       apiRef.current.publishEvent('rowsSet');
@@ -124,21 +126,7 @@ export const useGridRows = (apiRef, props) => {
     if (props.signature === GridSignature.DataGrid && updates.length > 1) {
       throw new Error(['MUI X: You cannot update several rows at once in `apiRef.current.updateRows` on the DataGrid.', 'You need to upgrade to DataGridPro or DataGridPremium component to unlock this feature.'].join('\n'));
     }
-    const nonPinnedRowsUpdates = [];
-    updates.forEach(update => {
-      const id = getRowIdFromRowModel(update, props.getRowId, 'A row was provided without id when calling updateRows():');
-      const rowNode = apiRef.current.getRowNode(id);
-      if (rowNode?.type === 'pinnedRow') {
-        // @ts-ignore because otherwise `release:build` doesn't work
-        const pinnedRowsCache = apiRef.current.caches.pinnedRows;
-        const prevModel = pinnedRowsCache.idLookup[id];
-        if (prevModel) {
-          pinnedRowsCache.idLookup[id] = _extends({}, prevModel, update);
-        }
-      } else {
-        nonPinnedRowsUpdates.push(update);
-      }
-    });
+    const nonPinnedRowsUpdates = computeRowsUpdates(apiRef, updates, props.getRowId);
     const cache = updateCacheWithNewRows({
       updates: nonPinnedRowsUpdates,
       getRowId: props.getRowId,
@@ -149,6 +137,31 @@ export const useGridRows = (apiRef, props) => {
       throttle: true
     });
   }, [props.signature, props.getRowId, throttledRowsChange, apiRef]);
+  const updateServerRows = React.useCallback((updates, groupKeys) => {
+    const nonPinnedRowsUpdates = computeRowsUpdates(apiRef, updates, props.getRowId);
+    const cache = updateCacheWithNewRows({
+      updates: nonPinnedRowsUpdates,
+      getRowId: props.getRowId,
+      previousCache: apiRef.current.caches.rows,
+      groupKeys: groupKeys ?? []
+    });
+    throttledRowsChange({
+      cache,
+      throttle: false
+    });
+  }, [props.getRowId, throttledRowsChange, apiRef]);
+  const setLoading = React.useCallback(loading => {
+    if (loading === props.loading) {
+      return;
+    }
+    logger.debug(`Setting loading to ${loading}`);
+    apiRef.current.setState(state => _extends({}, state, {
+      rows: _extends({}, state.rows, {
+        loading
+      })
+    }));
+    apiRef.current.caches.rows.loadingPropBeforePartialUpdates = loading;
+  }, [props.loading, apiRef, logger]);
   const getRowModels = React.useCallback(() => {
     const dataRows = gridDataRowIdsSelector(apiRef);
     const idRowsLookup = gridRowsLookupSelector(apiRef);
@@ -303,6 +316,7 @@ export const useGridRows = (apiRef, props) => {
   }, [apiRef, props.signature, props.getRowId]);
   const rowApi = {
     getRow,
+    setLoading,
     getRowId,
     getRowModels,
     getRowsCount,
@@ -318,6 +332,9 @@ export const useGridRows = (apiRef, props) => {
     setRowChildrenExpansion,
     getRowGroupChildren
   };
+  const rowProPrivateApi = {
+    updateServerRows
+  };
 
   /**
    * EVENTS
@@ -392,6 +409,7 @@ export const useGridRows = (apiRef, props) => {
   useGridRegisterPipeApplier(apiRef, 'hydrateRows', applyHydrateRowsProcessor);
   useGridApiMethod(apiRef, rowApi, 'public');
   useGridApiMethod(apiRef, rowProApi, props.signature === GridSignature.DataGrid ? 'private' : 'public');
+  useGridApiMethod(apiRef, rowProPrivateApi, 'private');
 
   // The effect do not track any value defined synchronously during the 1st render by hooks called after `useGridRows`
   // As a consequence, the state generated by the 1st run of this useEffect will always be equal to the initialization one
@@ -436,7 +454,7 @@ export const useGridRows = (apiRef, props) => {
         return;
       }
     }
-    logger.debug(`Updating all rows, new length ${props.rows.length}`);
+    logger.debug(`Updating all rows, new length ${props.rows?.length}`);
     throttledRowsChange({
       cache: createRowsInternalCache({
         rows: props.rows,