@mui/x-data-grid 7.7.1 → 7.9.0

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

@@ -7,4 +7,4 @@ export declare const rowsMetaStateInitializer: GridStateInitializer;
  * @requires useGridPageSize (method)
  * @requires useGridPage (method)
  */
-export declare const useGridRowsMeta: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'getRowHeight' | 'getEstimatedRowHeight' | 'getRowSpacing' | 'pagination' | 'paginationMode' | 'rowHeight' | 'rowPositionsDebounceMs'>) => void;
+export declare const useGridRowsMeta: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "getRowHeight" | "getEstimatedRowHeight" | "getRowSpacing" | "pagination" | "paginationMode" | "rowHeight" | "rowPositionsDebounceMs">) => void;

package/hooks/features/scroll/useGridScroll.d.ts

@@ -9,4 +9,4 @@ import { DataGridProcessedProps } from '../../../models/props/DataGridProps';
  * @requires useGridFilter (state)
  * @requires useGridColumnSpanning (method)
  */
-export declare const useGridScroll: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'pagination'>) => void;
+export declare const useGridScroll: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "pagination">) => void;

package/hooks/features/sorting/useGridSorting.d.ts

@@ -7,4 +7,4 @@ export declare const sortingStateInitializer: GridStateInitializer<Pick<DataGrid
  * @requires useGridRows (event)
  * @requires useGridColumns (event)
  */
-export declare const useGridSorting: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, 'initialState' | 'sortModel' | 'onSortModelChange' | 'sortingOrder' | 'sortingMode' | 'disableColumnSorting' | 'disableMultipleColumnsSorting'>) => void;
+export declare const useGridSorting: (apiRef: React.MutableRefObject<GridPrivateApiCommunity>, props: Pick<DataGridProcessedProps, "initialState" | "sortModel" | "onSortModelChange" | "sortingOrder" | "sortingMode" | "disableColumnSorting" | "disableMultipleColumnsSorting">) => void;

package/hooks/features/virtualization/useGridVirtualScroller.js

@@ -4,11 +4,11 @@ import * as ReactDOM from 'react-dom';
 import { unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback } from '@mui/utils';
 import useLazyRef from '@mui/utils/useLazyRef';
 import useTimeout from '@mui/utils/useTimeout';
+import { useResizeObserver } from '@mui/x-internals/useResizeObserver';
 import { useTheme } from '@mui/material/styles';
 import { useGridPrivateApiContext } from '../../utils/useGridPrivateApiContext';
 import { useGridRootProps } from '../../utils/useGridRootProps';
 import { useGridSelector } from '../../utils/useGridSelector';
-import { useResizeObserver } from '../../utils/useResizeObserver';
 import { useRunOnce } from '../../utils/useRunOnce';
 import { gridVisibleColumnDefinitionsSelector, gridVisiblePinnedColumnDefinitionsSelector, gridColumnPositionsSelector, gridHasColSpanSelector } from '../columns/gridColumnsSelector';
 import { gridDimensionsSelector } from '../dimensions/gridDimensionsSelectors';

package/hooks/utils/index.d.ts

@@ -5,5 +5,4 @@ export { useGridSelector } from './useGridSelector';
 export * from './useGridNativeEventListener';
 export * from './useFirstRender';
 export * from './useOnMount';
-export * from './useResizeObserver';
 export * from './useRunOnce';

package/hooks/utils/index.js

@@ -5,5 +5,4 @@ export { useGridSelector } from './useGridSelector';
 export * from './useGridNativeEventListener';
 export * from './useFirstRender';
 export * from './useOnMount';
-export * from './useResizeObserver';
 export * from './useRunOnce';

package/hooks/utils/useGridApiEventHandler.d.ts

@@ -14,8 +14,8 @@ declare enum GridSignature {
 interface RegistryContainer {
     registry: CleanupTracking | null;
 }
-export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon<any, any>, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
+export declare function createUseGridApiEventHandler(registryContainer: RegistryContainer): <Api extends GridApiCommon, E extends GridEvents>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
 export declare const unstable_resetCleanupTracking: () => void;
-export declare const useGridApiEventHandler: <Api extends GridApiCommon<any, any>, E extends keyof import("../../models").GridEventLookup>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
+export declare const useGridApiEventHandler: <Api extends GridApiCommon, E extends GridEvents>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>, options?: EventListenerOptions) => void;
 export declare function useGridApiOptionHandler<Api extends GridApiCommon, E extends GridEvents>(apiRef: React.MutableRefObject<Api>, eventName: E, handler?: GridEventListener<E>): void;
 export { GridSignature };

package/hooks/utils/useGridApiRef.d.ts

@@ -4,4 +4,4 @@ import { GridApiCommunity } from '../../models/api/gridApiCommunity';
 /**
  * Hook that instantiate a [[GridApiRef]].
  */
-export declare const useGridApiRef: <Api extends GridApiCommon<any, any> = GridApiCommunity>() => React.MutableRefObject<Api>;
+export declare const useGridApiRef: <Api extends GridApiCommon = GridApiCommunity>() => React.MutableRefObject<Api>;

package/hooks/utils/useGridInitializeState.d.ts

@@ -6,5 +6,5 @@ type DeepPartial<T> = {
     [P in keyof T]?: DeepPartial<T[P]>;
 };
 export type GridStateInitializer<P extends Partial<DataGridProcessedProps> = DataGridProcessedProps, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity> = (state: DeepPartial<PrivateApi['state']>, props: P, privateApiRef: React.MutableRefObject<PrivateApi>) => DeepPartial<PrivateApi['state']>;
-export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps<any>>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: React.MutableRefObject<PrivateApi>, props: P) => void;
+export declare const useGridInitializeState: <P extends Partial<DataGridProcessedProps>, PrivateApi extends GridPrivateApiCommon = GridPrivateApiCommunity>(initializer: GridStateInitializer<P, PrivateApi>, privateApiRef: React.MutableRefObject<PrivateApi>, props: P) => void;
 export {};

package/hooks/utils/useGridRootProps.d.ts

@@ -1,2 +1,2 @@
 import type { DataGridProcessedProps } from '../../models/props/DataGridProps';
-export declare const useGridRootProps: () => DataGridProcessedProps<any>;
+export declare const useGridRootProps: () => DataGridProcessedProps;

package/hooks/utils/useGridSelector.d.ts

@@ -3,4 +3,4 @@ import type { GridApiCommon } from '../../models/api/gridApiCommon';
 import { OutputSelector } from '../../utils/createSelector';
 import { fastObjectShallowCompare } from '../../utils/fastObjectShallowCompare';
 export declare const objectShallowCompare: typeof fastObjectShallowCompare;
-export declare const useGridSelector: <Api extends GridApiCommon<any, any>, T>(apiRef: React.MutableRefObject<Api>, selector: ((state: Api['state']) => T) | OutputSelector<Api['state'], T>, equals?: (a: T, b: T) => boolean) => T;
+export declare const useGridSelector: <Api extends GridApiCommon, T>(apiRef: React.MutableRefObject<Api>, selector: ((state: Api["state"]) => T) | OutputSelector<Api["state"], T>, equals?: (a: T, b: T) => boolean) => T;

package/hooks/utils/useGridVisibleRows.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { DataGridProcessedProps } from '../../models/props/DataGridProps';
 import type { GridApiCommon, GridRowEntry } from '../../models';
-export declare const getVisibleRows: <Api extends GridApiCommon<any, any>>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
+export declare const getVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
     rows: GridRowEntry<import("../../models").GridValidRowModel>[];
     range: {
         firstRowIndex: number;
@@ -15,7 +15,7 @@ export declare const getVisibleRows: <Api extends GridApiCommon<any, any>>(apiRe
  * - If the row tree has several layers, it contains up to `state.pageSize` top level rows and all their descendants.
  * - If the row tree is flat, it only contains up to `state.pageSize` rows.
  */
-export declare const useGridVisibleRows: <Api extends GridApiCommon<any, any>>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, 'pagination' | 'paginationMode'>) => {
+export declare const useGridVisibleRows: <Api extends GridApiCommon>(apiRef: React.MutableRefObject<Api>, props: Pick<DataGridProcessedProps, "pagination" | "paginationMode">) => {
     rows: GridRowEntry<import("../../models").GridValidRowModel>[];
     range: {
         firstRowIndex: number;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid v7.7.1
+ * @mui/x-data-grid v7.9.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internals/index.d.ts

@@ -66,9 +66,11 @@ export { useGridVisibleRows, getVisibleRows } from '../hooks/utils/useGridVisibl
 export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export type { GridStateInitializer } from '../hooks/utils/useGridInitializeState';
 export type * from '../models/props/DataGridProps';
+export type * from '../models/gridDataSource';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized } from '../utils/createSelector';
+export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal, } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';

package/internals/index.js

@@ -55,6 +55,7 @@ export { useGridInitializeState } from '../hooks/utils/useGridInitializeState';
 export { getColumnsToExport, defaultGetRowsToExport } from '../hooks/features/export/utils';
 export * from '../utils/createControllablePromise';
 export { createSelector, createSelectorMemoized } from '../utils/createSelector';
+export { gridRowGroupsToFetchSelector } from '../hooks/features/rows/gridRowsSelector';
 export { findParentElementFromClassName, getActiveElement, isEventTargetInPortal } from '../utils/domUtils';
 export { isNavigationKey, isPasteShortcut } from '../utils/keyboardUtils';
 export * from '../utils/utils';

package/internals/utils/propValidation.js

@@ -1,6 +1,6 @@
 import { isNumber } from '../../utils/utils';
 import { GridSignature } from '../../hooks/utils/useGridApiEventHandler';
-export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
+export const propValidatorsDataGrid = [props => props.autoPageSize && props.autoHeight && ['MUI X: `<DataGrid autoPageSize={true} autoHeight={true} />` are not valid props.', 'You cannot use both the `autoPageSize` and `autoHeight` props at the same time because `autoHeight` scales the height of the Data Grid according to the `pageSize`.', '', 'Please remove one of these two props.'].join('\n') || undefined, props => props.paginationMode === 'client' && props.paginationMeta != null && ['MUI X: Usage of the `paginationMeta` prop with client-side pagination (`paginationMode="client"`) has no effect.', '`paginationMeta` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.signature === GridSignature.DataGrid && props.paginationMode === 'client' && isNumber(props.rowCount) && ['MUI X: Usage of the `rowCount` prop with client side pagination (`paginationMode="client"`) has no effect.', '`rowCount` is only meant to be used with `paginationMode="server"`.'].join('\n') || undefined, props => props.paginationMode === 'server' && props.rowCount == null && !props.unstable_dataSource && ["MUI X: The `rowCount` prop must be passed using `paginationMode='server'`", 'For more detail, see http://mui.com/components/data-grid/pagination/#index-based-pagination'].join('\n') || undefined];
 const warnedOnceCache = new Set();
 function warnOnce(message) {
   if (!warnedOnceCache.has(message)) {

package/models/api/gridApiCommon.d.ts

@@ -10,7 +10,7 @@ import type { GridLocaleTextApi } from './gridLocaleTextApi';
 import type { GridParamsApi } from './gridParamsApi';
 import { GridPreferencesPanelApi } from './gridPreferencesPanelApi';
 import { GridPrintExportApi } from './gridPrintExportApi';
-import { GridRowApi } from './gridRowApi';
+import { GridRowApi, GridRowProPrivateApi } from './gridRowApi';
 import { GridRowsMetaApi, GridRowsMetaPrivateApi } from './gridRowsMetaApi';
 import { GridRowSelectionApi } from './gridRowSelectionApi';
 import { GridSortApi } from './gridSortApi';
@@ -31,7 +31,7 @@ import type { DataGridProcessedProps } from '../props/DataGridProps';
 import type { GridColumnResizeApi } from '../../hooks/features/columnResize';
 export interface GridApiCommon<GridState extends GridStateCommunity = any, GridInitialState extends GridInitialStateCommunity = any> extends GridCoreApi, GridPipeProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridRowSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridVirtualizationApi, GridLocaleTextApi, GridScrollApi, GridColumnSpanningApi, GridStateApi<GridState>, GridStatePersistenceApi<GridInitialState>, GridColumnGroupingApi, GridHeaderFilteringApi, GridColumnResizeApi {
 }
-export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi {
+export interface GridPrivateOnlyApiCommon<Api extends GridApiCommon, PrivateApi extends GridPrivateApiCommon, Props extends DataGridProcessedProps> extends GridCorePrivateApi<Api, PrivateApi, Props>, GridStatePrivateApi<PrivateApi['state']>, GridPipeProcessingPrivateApi, GridStrategyProcessingApi, GridColumnSpanningPrivateApi, GridRowsMetaPrivateApi, GridDimensionsPrivateApi, GridEditingPrivateApi, GridLoggerApi, GridFocusPrivateApi, GridHeaderFilteringPrivateApi, GridVirtualizationPrivateApi, GridRowProPrivateApi {
 }
 export interface GridPrivateApiCommon extends GridApiCommon, GridPrivateOnlyApiCommon<GridApiCommon, GridPrivateApiCommon, DataGridProcessedProps> {
 }

package/models/api/gridInfiniteLoaderApi.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface GridInfiniteLoaderPrivateApi {
     getInfiniteLoadingTriggerElement?: ({ lastRowId, }: {
         lastRowId: string | number;

package/models/api/gridRowApi.d.ts

@@ -40,6 +40,11 @@ export interface GridRowApi {
      * @returns {GridRowId[]} A list of ids.
      */
     getAllRowIds: () => GridRowId[];
+    /**
+     * Sets the internal loading state.
+     * @param {boolean} loading If `true` the loading indicator will be shown over the Data Grid.
+     */
+    setLoading: (loading: boolean) => void;
     /**
      * Sets a new set of rows.
      * @param {GridRowModel[]} rows The new rows.
@@ -103,3 +108,12 @@ export interface GridRowProApi {
      */
     setRowChildrenExpansion: (id: GridRowId, isExpanded: boolean) => void;
 }
+export interface GridRowProPrivateApi {
+    /**
+     * Allows to update, insert and delete rows at a specific nested level.
+     * @param {GridRowModelUpdate[]} updates An array of rows with an `action` specifying what to do.
+     * @param {string[]} groupKeys The group keys of the rows to update.
+     * @param {boolean} throttle Whether to throttle the updates or not. (default: `true`)
+     */
+    updateServerRows: (updates: GridRowModelUpdate[], groupKeys?: string[]) => void;
+}

package/models/gridColumnGrouping.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { GridColDef } from './colDef';
 import type { GridColumnGroupHeaderParams } from './params/gridColumnGroupHeaderParams';
 export interface GridLeafColumn {

package/models/gridDataSource.d.ts

@@ -0,0 +1,87 @@
+import type { GridSortModel, GridFilterModel, GridColDef, GridRowModel, GridPaginationModel } from '.';
+export interface GridGetRowsParams {
+    sortModel: GridSortModel;
+    filterModel: GridFilterModel;
+    /**
+     * Alternate to `start` and `end`, maps to `GridPaginationModel` interface.
+     */
+    paginationModel: GridPaginationModel;
+    /**
+     * First row index to fetch (number) or cursor information (number | string).
+     */
+    start: number | string;
+    /**
+     * Last row index to fetch.
+     */
+    end: number;
+    /**
+     * List of grouped columns (only applicable with `rowGrouping`).
+     */
+    groupFields?: GridColDef['field'][];
+    /**
+     * Array of keys returned by `getGroupKey` of all the parent rows until the row for which the data is requested
+     * `getGroupKey` prop must be implemented to use this.
+     * Useful for `treeData` and `rowGrouping` only.
+     */
+    groupKeys?: string[];
+}
+export interface GridGetRowsResponse {
+    rows: GridRowModel[];
+    /**
+     * To reflect updates in total `rowCount` (optional).
+     * Useful when the `rowCount` is inaccurate (for example when filtering) or not available upfront.
+     */
+    rowCount?: number;
+    /**
+     * Additional `pageInfo` for advanced use-cases.
+     * `hasNextPage`: When row count is unknown/estimated, `hasNextPage` will be used to check if more records are available on server
+     */
+    pageInfo?: {
+        hasNextPage?: boolean;
+        nextCursor?: string;
+    };
+}
+export interface GridDataSource {
+    /**
+     * This method will be called when the grid needs to fetch some rows
+     * @param {GridGetRowsParams} params The parameters required to fetch the rows
+     * @returns {Promise<GridGetRowsResponse>} A promise that resolves to the data of type [GridGetRowsResponse]
+     */
+    getRows(params: GridGetRowsParams): Promise<GridGetRowsResponse>;
+    /**
+     * This method will be called when the user updates a row [Not yet implemented]
+     * @param {GridRowModel} updatedRow The updated row
+     * @returns {Promise<any>} If resolved (synced on the backend), the grid will update the row and mutate the cache
+     */
+    updateRow?(updatedRow: GridRowModel): Promise<any>;
+    /**
+     * Used to group rows by their parent group. Replaces `getTreeDataPath` used in client side tree-data .
+     * @param {GridRowModel} row The row to get the group key of
+     * @returns {string} The group key for the row
+     */
+    getGroupKey?: (row: GridRowModel) => string;
+    /**
+     * Used to determine the number of children a row has on server.
+     * @param {GridRowModel} row The row to check the number of children
+     * @returns {number} The number of children the row has
+     */
+    getChildrenCount?: (row: GridRowModel) => number;
+}
+export interface GridDataSourceCache {
+    /**
+     * Set the cache entry for the given key
+     * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
+     * @param {GridGetRowsResponse} value The value to be stored in the cache
+     */
+    set: (key: GridGetRowsParams, value: GridGetRowsResponse) => void;
+    /**
+     * Get the cache entry for the given key
+     * @param {GridGetRowsParams} key The key of type `GridGetRowsParams`
+     * @returns {GridGetRowsResponse} The value stored in the cache
+     */
+    get: (key: GridGetRowsParams) => GridGetRowsResponse | undefined;
+    /**
+     * Clear the cache
+     */
+    clear: () => void;
+}

package/models/gridDataSource.js

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

package/models/gridRows.d.ts

@@ -102,6 +102,16 @@ export interface GridDataGroupNode extends GridBasicGroupNode {
      */
     isAutoGenerated: false;
 }
+export interface GridDataSourceGroupNode extends GridDataGroupNode {
+    /**
+     * If true, this node has children on server.
+     */
+    hasServerChildren: boolean;
+    /**
+     * The cached path to be passed on as `groupKey` to the server.
+     */
+    path: string[];
+}
 export type GridGroupNode = GridDataGroupNode | GridAutoGeneratedGroupNode;
 export type GridChildrenFromPathLookup = {
     [groupingField: string]: {

package/models/gridSlotsComponent.d.ts

@@ -88,6 +88,11 @@ export interface GridSlotsComponent extends GridBaseSlots, GridIconSlotsComponen
      * @default GridColumnHeaderFilterIconButton
      */
     columnHeaderFilterIconButton: React.JSXElementConstructor<GridSlotProps['columnHeaderFilterIconButton']>;
+    /**
+     * Sort icon component rendered in each column header.
+     * @default GridColumnHeaderSortIcon
+     */
+    columnHeaderSortIcon: React.JSXElementConstructor<GridSlotProps['columnHeaderSortIcon']>;
     /**
      * Column menu component rendered by clicking on the 3 dots "kebab" icon in column headers.
      * @default GridColumnMenu

package/models/gridSlotsComponentsProps.d.ts

@@ -27,7 +27,9 @@ import type { GridColumnHeadersProps } from '../components/GridColumnHeaders';
 import type { GridDetailPanelsProps } from '../components/GridDetailPanels';
 import type { GridPinnedRowsProps } from '../components/GridPinnedRows';
 import type { GridColumnsManagementProps } from '../components/columnsManagement/GridColumnsManagement';
-import type { GridRowCountProps } from '../components';
+import type { GridLoadingOverlayProps } from '../components/GridLoadingOverlay';
+import type { GridRowCountProps } from '../components/GridRowCount';
+import type { GridColumnHeaderSortIconProps } from '../components/columnHeaders/GridColumnHeaderSortIcon';
 export interface BaseCheckboxPropsOverrides {
 }
 export interface BaseTextFieldPropsOverrides {
@@ -60,6 +62,8 @@ export interface ToolbarPropsOverrides {
 }
 export interface ColumnHeaderFilterIconButtonPropsOverrides {
 }
+export interface ColumnHeaderSortIconPropsOverrides {
+}
 export interface ColumnMenuPropsOverrides {
 }
 export interface ColumnsPanelPropsOverrides {
@@ -111,6 +115,7 @@ export interface GridSlotProps {
     cell: GridCellProps & CellPropsOverrides;
     columnHeaders: GridColumnHeadersProps;
     columnHeaderFilterIconButton: ColumnHeaderFilterIconButtonProps & ColumnHeaderFilterIconButtonPropsOverrides;
+    columnHeaderSortIcon: GridColumnHeaderSortIconProps & ColumnHeaderSortIconPropsOverrides;
     columnMenu: GridColumnMenuProps & ColumnMenuPropsOverrides;
     columnsPanel: GridColumnsPanelProps & ColumnsPanelPropsOverrides;
     columnsManagement: GridColumnsManagementProps & ColumnsManagementPropsOverrides;
@@ -118,7 +123,7 @@ export interface GridSlotProps {
     filterPanel: GridFilterPanelProps & FilterPanelPropsOverrides;
     footer: GridFooterContainerProps & FooterPropsOverrides;
     footerRowCount: GridRowCountProps & FooterRowCountOverrides;
-    loadingOverlay: GridOverlayProps & LoadingOverlayPropsOverrides;
+    loadingOverlay: GridLoadingOverlayProps & LoadingOverlayPropsOverrides;
     noResultsOverlay: GridOverlayProps & NoResultsOverlayPropsOverrides;
     noRowsOverlay: GridOverlayProps & NoRowsOverlayPropsOverrides;
     pagination: Partial<TablePaginationProps> & PaginationPropsOverrides;

package/models/props/DataGridProps.d.ts

@@ -25,6 +25,7 @@ import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
 import { GridColumnGroupingModel } from '../gridColumnGrouping';
 import { GridPaginationMeta, GridPaginationModel } from '../gridPaginationProps';
 import type { GridAutosizeOptions } from '../../hooks/features/columnResize';
+import type { GridDataSource } from '../gridDataSource';
 export interface GridExperimentalFeatures {
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
@@ -774,6 +775,7 @@ export interface DataGridProSharedPropsWithoutDefaultValue {
      * Override the height of the header filters.
      */
     headerFilterHeight?: number;
+    unstable_dataSource?: GridDataSource;
 }
 export interface DataGridPremiumSharedPropsWithDefaultValue {
     /**

package/modern/DataGrid/useDataGridProps.js

@@ -85,8 +85,15 @@ export const useDataGridProps = inProps => {
     defaultSlots,
     slots: themedProps.slots
   }), [themedProps.slots]);
-  return React.useMemo(() => _extends({}, DATA_GRID_PROPS_DEFAULT_VALUES, themedProps, {
+  const injectDefaultProps = React.useMemo(() => {
+    return Object.keys(DATA_GRID_PROPS_DEFAULT_VALUES).reduce((acc, key) => {
+      // @ts-ignore
+      acc[key] = themedProps[key] ?? DATA_GRID_PROPS_DEFAULT_VALUES[key];
+      return acc;
+    }, {});
+  }, [themedProps]);
+  return React.useMemo(() => _extends({}, themedProps, injectDefaultProps, {
     localeText,
     slots
-  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots]);
+  }, DATA_GRID_FORCED_PROPS), [themedProps, localeText, slots, injectDefaultProps]);
 };

package/modern/components/GridLoadingOverlay.js

@@ -1,14 +1,48 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+const _excluded = ["variant", "noRowsVariant", "style"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import LinearProgress from '@mui/material/LinearProgress';
 import CircularProgress from '@mui/material/CircularProgress';
 import { GridOverlay } from './containers/GridOverlay';
+import { GridSkeletonLoadingOverlay } from './GridSkeletonLoadingOverlay';
+import { useGridApiContext } from '../hooks/utils/useGridApiContext';
+import { gridRowCountSelector, useGridSelector } from '../hooks';
 import { jsx as _jsx } from "react/jsx-runtime";
+const LOADING_VARIANTS = {
+  'circular-progress': {
+    component: CircularProgress,
+    style: {}
+  },
+  'linear-progress': {
+    component: LinearProgress,
+    style: {
+      display: 'block'
+    }
+  },
+  skeleton: {
+    component: GridSkeletonLoadingOverlay,
+    style: {
+      display: 'block'
+    }
+  }
+};
 const GridLoadingOverlay = /*#__PURE__*/React.forwardRef(function GridLoadingOverlay(props, ref) {
+  const {
+      variant = 'circular-progress',
+      noRowsVariant = 'circular-progress',
+      style
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  const apiRef = useGridApiContext();
+  const rowsCount = useGridSelector(apiRef, gridRowCountSelector);
+  const activeVariant = LOADING_VARIANTS[rowsCount === 0 ? noRowsVariant : variant];
   return /*#__PURE__*/_jsx(GridOverlay, _extends({
-    ref: ref
-  }, props, {
-    children: /*#__PURE__*/_jsx(CircularProgress, {})
+    ref: ref,
+    style: _extends({}, activeVariant.style, style)
+  }, other, {
+    children: /*#__PURE__*/_jsx(activeVariant.component, {})
   }));
 });
 process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
@@ -16,6 +50,16 @@ process.env.NODE_ENV !== "production" ? GridLoadingOverlay.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
+  /**
+   * The variant of the overlay when no rows are displayed.
+   * @default 'circular-progress'
+   */
+  noRowsVariant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton']),
+  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  /**
+   * The variant of the overlay.
+   * @default 'circular-progress'
+   */
+  variant: PropTypes.oneOf(['circular-progress', 'linear-progress', 'skeleton'])
 } : void 0;
 export { GridLoadingOverlay };

package/modern/components/GridRow.js

@@ -249,10 +249,11 @@ const GridRow = /*#__PURE__*/React.forwardRef(function GridRow(props, refProp) {
     const pinnedOffset = getPinnedCellOffset(gridPinnedColumnPositionLookup[pinnedPosition], column.computedWidth, indexRelativeToAllColumns, columnPositions, dimensions);
     if (rowNode?.type === 'skeletonRow') {
       return /*#__PURE__*/_jsx(slots.skeletonCell, {
+        type: column.type,
         width: width,
         height: rowHeight,
         field: column.field,
-        align: column.align ?? 'left'
+        align: column.align
       }, column.field);
     }
     const editCellState = editRowsState[rowId]?.[column.field] ?? null;