@mui/x-data-grid 5.15.2 → 5.17.0

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

@@ -238,8 +238,24 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
   }, [renderContext, updateRenderZonePosition]);
   var updateRenderContext = React.useCallback(function (nextRenderContext) {
     setRenderContext(nextRenderContext);
+
+    var _getRenderableIndexes7 = getRenderableIndexes({
+      firstIndex: nextRenderContext.firstRowIndex,
+      lastIndex: nextRenderContext.lastRowIndex,
+      minFirstIndex: 0,
+      maxLastIndex: currentPage.rows.length,
+      buffer: rootProps.rowBuffer
+    }),
+        _getRenderableIndexes8 = _slicedToArray(_getRenderableIndexes7, 2),
+        firstRowToRender = _getRenderableIndexes8[0],
+        lastRowToRender = _getRenderableIndexes8[1];
+
+    apiRef.current.publishEvent('renderedRowsIntervalChange', {
+      firstRowToRender: firstRowToRender,
+      lastRowToRender: lastRowToRender
+    });
     prevRenderContext.current = nextRenderContext;
-  }, [setRenderContext, prevRenderContext]);
+  }, [apiRef, setRenderContext, prevRenderContext, currentPage.rows.length, rootProps.rowBuffer]);
   React.useEffect(function () {
     if (containerWidth == null) {
       return;
@@ -311,9 +327,10 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         maxLastColumn = _params$maxLastColumn === void 0 ? renderZoneMaxColumnIndex : _params$maxLastColumn,
         _params$availableSpac = params.availableSpace,
         availableSpace = _params$availableSpac === void 0 ? containerWidth : _params$availableSpac,
-        ignoreAutoHeight = params.ignoreAutoHeight,
         _params$rowIndexOffse = params.rowIndexOffset,
-        rowIndexOffset = _params$rowIndexOffse === void 0 ? 0 : _params$rowIndexOffse;
+        rowIndexOffset = _params$rowIndexOffse === void 0 ? 0 : _params$rowIndexOffse,
+        _params$position = params.position,
+        position = _params$position === void 0 ? 'center' : _params$position;
 
     if (!nextRenderContext || availableSpace == null) {
       return null;
@@ -322,16 +339,16 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
     var rowBuffer = !disableVirtualization ? rootProps.rowBuffer : 0;
     var columnBuffer = !disableVirtualization ? rootProps.columnBuffer : 0;
 
-    var _getRenderableIndexes7 = getRenderableIndexes({
+    var _getRenderableIndexes9 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstRowIndex,
       lastIndex: nextRenderContext.lastRowIndex,
       minFirstIndex: 0,
       maxLastIndex: currentPage.rows.length,
       buffer: rowBuffer
     }),
-        _getRenderableIndexes8 = _slicedToArray(_getRenderableIndexes7, 2),
-        firstRowToRender = _getRenderableIndexes8[0],
-        lastRowToRender = _getRenderableIndexes8[1];
+        _getRenderableIndexes10 = _slicedToArray(_getRenderableIndexes9, 2),
+        firstRowToRender = _getRenderableIndexes10[0],
+        lastRowToRender = _getRenderableIndexes10[1];
 
     var renderedRows = [];
 
@@ -362,16 +379,16 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
       }
     }
 
-    var _getRenderableIndexes9 = getRenderableIndexes({
+    var _getRenderableIndexes11 = getRenderableIndexes({
       firstIndex: nextRenderContext.firstColumnIndex,
       lastIndex: nextRenderContext.lastColumnIndex,
       minFirstIndex: minFirstColumn,
       maxLastIndex: maxLastColumn,
       buffer: columnBuffer
     }),
-        _getRenderableIndexes10 = _slicedToArray(_getRenderableIndexes9, 2),
-        initialFirstColumnToRender = _getRenderableIndexes10[0],
-        lastColumnToRender = _getRenderableIndexes10[1];
+        _getRenderableIndexes12 = _slicedToArray(_getRenderableIndexes11, 2),
+        initialFirstColumnToRender = _getRenderableIndexes12[0],
+        lastColumnToRender = _getRenderableIndexes12[1];
 
     var firstColumnToRender = getFirstNonSpannedColumnToRender({
       firstColumnToRender: initialFirstColumnToRender,
@@ -390,7 +407,7 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
           _id = _renderedRows$i.id,
           _model = _renderedRows$i.model;
       var lastVisibleRowIndex = firstRowToRender + i === currentPage.rows.length - 1;
-      var baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(_id) || ignoreAutoHeight ? apiRef.current.unstable_getRowHeight(_id) : 'auto';
+      var baseRowHeight = !apiRef.current.unstable_rowHasAutoHeight(_id) ? apiRef.current.unstable_getRowHeight(_id) : 'auto';
       var isSelected = void 0;
 
       if (selectedRowsLookup[_id] == null) {
@@ -416,7 +433,8 @@ export var useGridVirtualScroller = function useGridVirtualScroller(props) {
         selected: isSelected,
         index: rowIndexOffset + ((currentPage == null ? void 0 : (_currentPage$range5 = currentPage.range) == null ? void 0 : _currentPage$range5.firstRowIndex) || 0) + firstRowToRender + i,
         containerWidth: availableSpace,
-        isLastVisible: lastVisibleRowIndex
+        isLastVisible: lastVisibleRowIndex,
+        position: position
       }, typeof getRowProps === 'function' ? getRowProps(_id, _model) : {}, (_rootProps$components = rootProps.componentsProps) == null ? void 0 : _rootProps$components.row), _id));
     }
 

package/legacy/hooks/utils/useGridNativeEventListener.js

@@ -11,8 +11,8 @@ export var useGridNativeEventListener = function useGridNativeEventListener(apiR
       setAdded = _React$useState2[1];
 
   var handlerRef = React.useRef(handler);
-  var wrapHandler = React.useCallback(function (args) {
-    return handlerRef.current && handlerRef.current(args);
+  var wrapHandler = React.useCallback(function (event) {
+    return handlerRef.current && handlerRef.current(event);
   }, []);
   React.useEffect(function () {
     handlerRef.current = handler;

package/legacy/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.15.2
+/** @license MUI v5.17.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/internals/index.js

@@ -11,6 +11,8 @@ export { useGridColumnHeaders } from '../hooks/features/columnHeaders/useGridCol
 export { useGridColumnMenu, columnMenuStateInitializer } from '../hooks/features/columnMenu/useGridColumnMenu';
 export { useGridColumns, columnsStateInitializer } from '../hooks/features/columns/useGridColumns';
 export { useGridColumnSpanning } from '../hooks/features/columns/useGridColumnSpanning';
+export { useGridColumnGrouping, columnGroupsStateInitializer } from '../hooks/features/columnGrouping/useGridColumnGrouping';
+export { useGridColumnGroupingPreProcessors } from '../hooks/features/columnGrouping/useGridColumnGroupingPreProcessors';
 export { useGridDensity, densityStateInitializer } from '../hooks/features/density/useGridDensity';
 export { useGridCsvExport } from '../hooks/features/export/useGridCsvExport';
 export { useGridPrintExport } from '../hooks/features/export/useGridPrintExport';

package/legacy/models/api/gridColumnGroupingApi.js

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

package/legacy/models/events/gridEvents.js

@@ -85,6 +85,8 @@ var GridEvents;
   GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
   GridEvents["menuOpen"] = "menuOpen";
   GridEvents["menuClose"] = "menuClose";
+  GridEvents["renderedRowsIntervalChange"] = "renderedRowsIntervalChange";
+  GridEvents["fetchRows"] = "fetchRows";
 })(GridEvents || (GridEvents = {}));
 
 export { GridEvents };

package/legacy/models/gridColumnGrouping.js

@@ -0,0 +1,6 @@
+export function isLeaf(node) {
+  return node.field !== undefined;
+}
+/**
+ * A function used to process headerClassName params.
+ */

package/legacy/models/index.js

@@ -21,7 +21,8 @@ export * from './gridDensity';
 export * from './logger';
 export * from './muiEvent';
 export * from './events';
-export * from './gridSortModel'; // Do not export GridExportFormat and GridExportExtension which are override in pro package
+export * from './gridSortModel';
+export * from './gridColumnGrouping'; // Do not export GridExportFormat and GridExportExtension which are override in pro package
 
 export * from './gridFilterOperator';
 export {};

package/legacy/models/params/gridRenderedRowsIntervalChangeParams.js

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

package/legacy/models/params/index.js

@@ -11,4 +11,5 @@ export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridSortModelParams';
 export * from './gridPreferencePanelParams';
-export * from './gridMenuParams';
+export * from './gridMenuParams';
+export * from './gridRenderedRowsIntervalChangeParams';

package/legacy/utils/utils.js

@@ -180,4 +180,22 @@ export function isDeepEqual(a, b) {
 
 
   return a !== a && b !== b;
+} // Pseudo random number. See https://stackoverflow.com/a/47593316
+
+function mulberry32(a) {
+  return function () {
+    /* eslint-disable */
+    var t = a += 0x6d2b79f5;
+    t = Math.imul(t ^ t >>> 15, t | 1);
+    t ^= t + Math.imul(t ^ t >>> 7, t | 61);
+    return ((t ^ t >>> 14) >>> 0) / 4294967296;
+    /* eslint-enable */
+  };
+}
+
+export function randomNumberBetween(seed, min, max) {
+  var random = mulberry32(seed);
+  return function () {
+    return min + (max - min) * random();
+  };
 }

package/models/api/gridApiCommon.d.ts

@@ -26,9 +26,10 @@ import type { GridStrategyProcessingApi } from '../../hooks/core/strategyProcess
 import type { GridDimensionsApi } from '../../hooks/features/dimensions';
 import type { GridPaginationApi } from '../../hooks/features/pagination';
 import type { GridStatePersistenceApi } from '../../hooks/features/statePersistence';
+import { GridColumnGroupingApi } from './gridColumnGroupingApi';
 declare type GridStateApiUntyped = {
     [key in keyof (GridStateApi<any> & GridStatePersistenceApi<any>)]: any;
 };
-export interface GridApiCommon extends GridCoreApi, GridLoggerApi, GridPipeProcessingApi, GridStrategyProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridDisableVirtualizationApi, GridVirtualScrollerApi, GridLocaleTextApi, GridClipboardApi, GridScrollApi, GridColumnSpanningApi, GridStateApiUntyped {
+export interface GridApiCommon extends GridCoreApi, GridLoggerApi, GridPipeProcessingApi, GridStrategyProcessingApi, GridDensityApi, GridDimensionsApi, GridRowApi, GridRowsMetaApi, GridEditingApi, GridParamsApi, GridColumnApi, GridSelectionApi, GridSortApi, GridPaginationApi, GridCsvExportApi, GridFocusApi, GridFilterApi, GridColumnMenuApi, GridPreferencesPanelApi, GridPrintExportApi, GridDisableVirtualizationApi, GridVirtualScrollerApi, GridLocaleTextApi, GridClipboardApi, GridScrollApi, GridColumnSpanningApi, GridStateApiUntyped, GridColumnGroupingApi {
 }
 export {};

package/models/api/gridColumnGroupingApi.d.ts

@@ -0,0 +1,19 @@
+import { GridColumnGroupLookup } from '../../hooks/features/columnGrouping/gridColumnGroupsInterfaces';
+import { GridColumnGroup } from '../gridColumnGrouping';
+/**
+ * The column grouping API interface that is available in the grid [[apiRef]].
+ */
+export interface GridColumnGroupingApi {
+    /**
+     * Returns the id of the groups leading to the requested column.
+     * The array is ordered by increasing depth (the last element is the direct parent of the column).
+     * @param {string} field The field of of the column requested.
+     * @returns {string[]} The id of the groups leading to the requested column.
+     */
+    unstable_getColumnGroupPath: (field: string) => GridColumnGroup['groupId'][];
+    /**
+     * Returns the column group lookup.
+     * @returns {GridColumnGroupLookup} The column group lookup.
+     */
+    unstable_getAllGroupDetails: () => GridColumnGroupLookup;
+}

package/models/api/gridColumnGroupingApi.js

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

package/models/api/gridDensityApi.d.ts

@@ -14,6 +14,7 @@ export interface GridDensityApi {
      * @param {string} density Can be: `"compact"`, `"standard"`, `"comfortable"`.
      * @param {number} headerHeight The new header height.
      * @param {number} rowHeight The new row height.
+     * @param {number} maxDepth The depth of maximal depth column header grouping tree.
      */
-    setDensity: (density: GridDensity, headerHeight?: number, rowHeight?: number) => void;
+    setDensity: (density: GridDensity, headerHeight?: number, rowHeight?: number, maxDepth?: number) => void;
 }

package/models/api/gridParamsApi.d.ts

@@ -24,7 +24,7 @@ export interface GridParamsApi {
      * @param {string} field The column field.
      * @returns {GridCellParams} The cell params.
      */
-    getCellParams: <V = any, R extends GridValidRowModel = any, F = V>(id: GridRowId, field: string) => GridCellParams<R, V, F>;
+    getCellParams: <V = any, R extends GridValidRowModel = any, F = V>(id: GridRowId, field: string) => GridCellParams<V, R, F>;
     /**
      * Gets the [[GridRowParams]] object that is passed as argument in events.
      * @param {GridRowId} id The id of the row.

package/models/api/gridRowApi.d.ts

@@ -86,4 +86,10 @@ export interface GridRowApi {
      * @returns {GridRowId[]} The id of each row in the grouping criteria.
      */
     getRowGroupChildren: (params: GridRowGroupChildrenGetterParams) => GridRowId[];
+    /**
+     * Replace a set of rows with new rows.
+     * @param {number} firstRowToReplace The index of the first row to be replaced.
+     * @param {GridRowModel[]} newRows The new rows.
+     */
+    unstable_replaceRows: (firstRowToReplace: number, newRows: GridRowModel[]) => void;
 }

package/models/api/gridRowsMetaApi.d.ts

@@ -28,9 +28,10 @@ export interface GridRowsMetaApi {
      * Stores the row height measurement and triggers an hydration, if needed.
      * @param {GridRowId} id The id of the row.
      * @param {number} height The new height.
+     * @param {string} position The position to it the row belongs to.
      * @ignore - do not document.
      */
-    unstable_storeRowHeightMeasurement: (id: GridRowId, height: number) => void;
+    unstable_storeRowHeightMeasurement: (id: GridRowId, height: number, position: 'left' | 'center' | 'right') => void;
     /**
      * Determines if the height of a row is "auto".
      * @ignore - do not document.
@@ -48,4 +49,8 @@ export interface GridRowsMetaApi {
      * @ignore - do not document.
      */
     unstable_setLastMeasuredRowIndex: (index: number) => void;
+    /**
+     * Forces the recalculation of the heights of all rows.
+     */
+    resetRowHeights: () => void;
 }

package/models/colDef/gridColDef.d.ts

@@ -12,6 +12,7 @@ import { GridActionsCellItemProps } from '../../components/cell/GridActionsCellI
 import { GridEditCellProps } from '../gridEditRowModel';
 import type { GridValidRowModel } from '../gridRows';
 import { GridApiCommunity } from '../api/gridApiCommunity';
+import type { GridColumnGroup } from '../gridColumnGrouping';
 /**
  * Alignment used in position elements in Cells.
  */
@@ -61,7 +62,13 @@ export interface GridColDef<R extends GridValidRowModel = any, V = any, F = V> {
     maxWidth?: number;
     /**
      * If `true`, hide the column.
-     * @deprecated Use the `columnVisibility` prop instead.
+     * @deprecated Use the `initialState` prop to hide columns:
+     * ```jsx
+     * // Hide `id` column, the other columns will remain visible
+     * <DataGrid initialState={{ columns: { columnVisibilityModel: { id: false } } }} />
+     * ```
+     * Or use `columnVisibilityModel` prop to fully control column visibility.
+     * @link https://mui.com/x/react-data-grid/column-visibility/
      * @default false
      */
     hide?: boolean;
@@ -257,6 +264,13 @@ export declare type GridStateColDef<R extends GridValidRowModel = any, V = any,
      * If `true`, it means that at least one of the dimension's property of this column has been modified since the last time the column prop has changed.
      */
     hasBeenResized?: boolean;
+    /**
+     * The id of the groups leading to the column.
+     * The array is ordered by increasing depth (the last element is the direct parent of the column).
+     * If not defined, the column is in no group (equivalent to a path equal to `[]`).
+     * This parameter is computed from the `columnGroupingModel` prop.
+     */
+    groupPath?: GridColumnGroup['groupId'][];
 };
 /**
  * Meta Info about columns.

package/models/events/gridEventLookup.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridColumnVisibilityChangeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
+import type { GridCellEditCommitParams, GridColumnHeaderParams, GridColumnOrderChangeParams, GridColumnResizeParams, GridColumnVisibilityChangeParams, GridEditCellPropsParams, GridHeaderSelectionCheckboxParams, GridMenuParams, GridPreferencePanelParams, GridRenderedRowsIntervalChangeParams, GridRowParams, GridRowSelectionCheckboxParams, GridScrollParams } from '../params';
 import { GridCellEditStartParams, GridCellEditStopParams } from '../params/gridEditCellParams';
 import { GridCellParams } from '../params/gridCellParams';
 import type { GridFilterModel } from '../gridFilterModel';
@@ -403,6 +403,12 @@ export interface GridEventLookup extends GridRowEventLookup, GridColumnHeaderEve
     rowExpansionChange: {
         params: GridRowTreeNodeConfig;
     };
+    /**
+     * Fired when the rendered rows index interval changes. Called with a [[GridRenderedRowsIntervalChangeParams]] object.
+     */
+    renderedRowsIntervalChange: {
+        params: GridRenderedRowsIntervalChangeParams;
+    };
     /**
      * Fired when the mode of a cell changes.
      * @ignore - do not document

package/models/events/gridEvents.d.ts

@@ -83,7 +83,9 @@ declare enum GridEvents {
     preferencePanelClose = "preferencePanelClose",
     preferencePanelOpen = "preferencePanelOpen",
     menuOpen = "menuOpen",
-    menuClose = "menuClose"
+    menuClose = "menuClose",
+    renderedRowsIntervalChange = "renderedRowsIntervalChange",
+    fetchRows = "fetchRows"
 }
 export declare type GridEventsStr = keyof GridEventLookup;
 export { GridEvents };

package/models/events/gridEvents.js

@@ -85,6 +85,8 @@ var GridEvents;
   GridEvents["preferencePanelOpen"] = "preferencePanelOpen";
   GridEvents["menuOpen"] = "menuOpen";
   GridEvents["menuClose"] = "menuClose";
+  GridEvents["renderedRowsIntervalChange"] = "renderedRowsIntervalChange";
+  GridEvents["fetchRows"] = "fetchRows";
 })(GridEvents || (GridEvents = {}));
 
 export { GridEvents };

package/models/gridColumnGrouping.d.ts

@@ -0,0 +1,67 @@
+/// <reference types="react" />
+import { GridColDef } from './colDef';
+export interface GridLeafColumn {
+    field: GridColDef['field'];
+}
+export declare type GridColumnNode = GridColumnGroup | GridLeafColumn;
+export declare function isLeaf(node: GridColumnNode): node is GridLeafColumn;
+/**
+ * A function used to process headerClassName params.
+ */
+export declare type GridColumnGroupHeaderClassFn = (params: GridColumnGroupHeaderParams) => string;
+/**
+ * The union type representing the [[GridColDef]] column header class type.
+ */
+export declare type GridColumnGroupHeaderClassNamePropType = string | GridColumnGroupHeaderClassFn;
+export interface GridColumnGroupHeaderParams extends Pick<GridColumnGroup, 'headerName' | 'description'> {
+    /**
+     * A unique string identifying the group.
+     */
+    groupId: GridColumnGroup['groupId'] | null;
+    /**
+     * The number parent the group have.
+     */
+    depth: number;
+    /**
+     * The maximal depth among visible columns.
+     */
+    maxDepth: number;
+    /**
+     * The column fields included in the group (including nested ones).
+     */
+    fields: string[];
+    /**
+     * The column index (0 based).
+     */
+    colIndex: number;
+    /**
+     * Indicate if the group is the last one for the given depth.
+     */
+    isLastColumn: boolean;
+}
+export interface GridColumnGroup extends Pick<GridColDef, 'headerName' | 'description' | 'headerAlign'> {
+    /**
+     * A unique string identifying the group.
+     */
+    groupId: string;
+    /**
+     * The groups and columns included in this group.
+     */
+    children: GridColumnNode[];
+    /**
+     * If `true`, allows reordering columns outside of the group.
+     * @default false
+     */
+    freeReordering?: boolean;
+    /**
+     * Allows to render a component in the column group header cell.
+     * @param {GridColumnGroupHeaderParams} params Object containing parameters for the renderer.
+     * @returns {React.ReactNode} The element to be rendered.
+     */
+    renderHeaderGroup?: (params: GridColumnGroupHeaderParams) => React.ReactNode;
+    /**
+     * Class name that will be added in the column group header cell.
+     */
+    headerClassName?: GridColumnGroupHeaderClassNamePropType;
+}
+export declare type GridColumnGroupingModel = GridColumnGroup[];

package/models/gridColumnGrouping.js

@@ -0,0 +1,6 @@
+export function isLeaf(node) {
+  return node.field !== undefined;
+}
+/**
+ * A function used to process headerClassName params.
+ */

package/models/gridRows.d.ts

@@ -2,7 +2,7 @@ import type { GridKeyValue } from './colDef/gridColDef';
 export declare type GridValidRowModel = {
     [key: string]: any;
 };
-export declare type GridRowsProp<R = any> = Readonly<GridRowModel<R>[]>;
+export declare type GridRowsProp<R = GridValidRowModel> = Readonly<GridRowModel<R>[]>;
 /**
  * @deprecated prefer GridRowModel.
  */
@@ -10,7 +10,7 @@ export declare type GridRowData = GridValidRowModel;
 /**
  * The key value object representing the data of a row.
  */
-export declare type GridRowModel<R extends GridValidRowModel = any> = R;
+export declare type GridRowModel<R extends GridValidRowModel = GridValidRowModel> = R;
 export declare type GridUpdateAction = 'delete';
 export interface GridRowModelUpdate extends GridRowModel {
     _action?: GridUpdateAction;
@@ -81,12 +81,12 @@ export interface GridRowsMeta {
     positions: number[];
 }
 export declare type GridRowTreeConfig = Record<GridRowId, GridRowTreeNodeConfig>;
-export declare type GridRowsLookup<R extends GridValidRowModel = any> = Record<GridRowId, R>;
+export declare type GridRowsLookup<R extends GridValidRowModel = GridValidRowModel> = Record<GridRowId, R>;
 /**
  * The type of Id supported by the grid.
  */
 export declare type GridRowId = string | number;
-export interface GridRowEntry<R extends GridValidRowModel = any> {
+export interface GridRowEntry<R extends GridValidRowModel = GridValidRowModel> {
     /**
      * The row id.
      */
@@ -99,4 +99,4 @@ export interface GridRowEntry<R extends GridValidRowModel = any> {
 /**
  * The function to retrieve the id of a [[GridRowModel]].
  */
-export declare type GridRowIdGetter<R extends GridValidRowModel = any> = (row: R) => GridRowId;
+export declare type GridRowIdGetter<R extends GridValidRowModel = GridValidRowModel> = (row: R) => GridRowId;

package/models/gridSlotsComponent.d.ts

@@ -50,6 +50,11 @@ export interface GridSlotsComponent extends GridIconSlotsComponent {
      * @default GridCell
      */
     Cell: React.JSXElementConstructor<any>;
+    /**
+     * Component rendered for each skeleton cell.
+     * @default GridSkeletonCell
+     */
+    SkeletonCell: React.JSXElementConstructor<any>;
     /**
      * Filter icon component rendered in each column header.
      * @default GridColumnHeaderFilterIconButton

package/models/gridStateCommunity.d.ts

@@ -1,4 +1,4 @@
-import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridDensityState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState } from '../hooks';
+import type { GridColumnMenuState, GridColumnsInitialState, GridColumnsState, GridColumnsGroupingState, GridDensityState, GridFilterInitialState, GridFilterState, GridFocusState, GridPaginationInitialState, GridPaginationState, GridPreferencePanelInitialState, GridPreferencePanelState, GridRowsState, GridSortingInitialState, GridSortingState, GridTabIndexState } from '../hooks';
 import type { GridRowsMetaState } from '../hooks/features/rows/gridRowsMetaState';
 import type { GridEditRowsModel } from './gridEditRowModel';
 import type { GridSelectionModel } from './gridSelectionModel';
@@ -11,6 +11,7 @@ export interface GridStateCommunity {
     editRows: GridEditRowsModel;
     pagination: GridPaginationState;
     columns: GridColumnsState;
+    columnGrouping: GridColumnsGroupingState;
     columnMenu: GridColumnMenuState;
     sorting: GridSortingState;
     focus: GridFocusState;

package/models/index.d.ts

@@ -22,5 +22,6 @@ export * from './logger';
 export * from './muiEvent';
 export * from './events';
 export * from './gridSortModel';
+export * from './gridColumnGrouping';
 export type { GridExportOptions, GridFileExportOptions, GridGetRowsToExportParams, GridCsvGetRowsToExportParams, GridCsvExportOptions, GridPrintExportOptions, } from './gridExport';
 export * from './gridFilterOperator';

package/models/index.js

@@ -21,7 +21,8 @@ export * from './gridDensity';
 export * from './logger';
 export * from './muiEvent';
 export * from './events';
-export * from './gridSortModel'; // Do not export GridExportFormat and GridExportExtension which are override in pro package
+export * from './gridSortModel';
+export * from './gridColumnGrouping'; // Do not export GridExportFormat and GridExportExtension which are override in pro package
 
 export * from './gridFilterOperator';
 export {};

package/models/params/gridCellParams.d.ts

@@ -16,7 +16,8 @@ export interface GridCellParams<V = any, R extends GridValidRowModel = any, F =
      */
     field: string;
     /**
-     * The cell value, but if the column has valueGetter, use getValue.
+     * The cell value.
+     * If the column has `valueGetter`, use `params.row` to directly access the fields.
      */
     value?: V | undefined;
     /**
@@ -92,12 +93,16 @@ export interface GridRenderEditCellParams<V = any, R extends GridValidRowModel =
 /**
  * Parameters passed to `colDef.valueGetter`.
  */
-export interface GridValueGetterParams<V = any, R = any> extends Omit<GridCellParams<V, R, any>, 'formattedValue' | 'isEditable'> {
+export interface GridValueGetterParams<V = any, R extends GridValidRowModel = GridValidRowModel> extends Omit<GridCellParams<V, R, any>, 'formattedValue' | 'isEditable'> {
     /**
      * GridApi that let you manipulate the grid.
      * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
      */
     api: any;
+    /**
+     * The default value for the cell that the `valueGetter` is overriding.
+     */
+    value: GridCellParams<V, R, any>['value'];
 }
 /**
  * @deprecated Use `GridValueGetterParams` instead.

package/models/params/gridMenuParams.d.ts

@@ -1,7 +1,6 @@
-/// <reference types="react" />
 export interface GridMenuParams {
     /**
      * The element that opens the menu.
      */
-    target: React.ReactNode;
+    target: HTMLElement | null;
 }

package/models/params/gridRenderedRowsIntervalChangeParams.d.ts

@@ -0,0 +1,10 @@
+export interface GridRenderedRowsIntervalChangeParams {
+    /**
+     * The index of the first row to render.
+     */
+    firstRowToRender: number;
+    /**
+     * The index of the last row to render.
+     */
+    lastRowToRender: number;
+}

package/models/params/gridRenderedRowsIntervalChangeParams.js

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

package/models/params/index.d.ts

@@ -12,3 +12,4 @@ export * from './gridCellParams';
 export * from './gridSortModelParams';
 export * from './gridPreferencePanelParams';
 export * from './gridMenuParams';
+export * from './gridRenderedRowsIntervalChangeParams';

package/models/params/index.js

@@ -11,4 +11,5 @@ export * from './gridValueOptionsParams';
 export * from './gridCellParams';
 export * from './gridSortModelParams';
 export * from './gridPreferencePanelParams';
-export * from './gridMenuParams';
+export * from './gridMenuParams';
+export * from './gridRenderedRowsIntervalChangeParams';

package/models/props/DataGridProps.d.ts

@@ -23,6 +23,7 @@ import { GridInitialStateCommunity } from '../gridStateCommunity';
 import { GridSlotsComponentsProps } from '../gridSlotsComponentsProps';
 import { GridColumnVisibilityModel } from '../../hooks/features/columns/gridColumnsInterfaces';
 import { GridCellModesModel, GridRowModesModel } from '../api/gridEditingApi';
+import { GridColumnGroupingModel } from '../gridColumnGrouping';
 export interface GridExperimentalFeatures {
     /**
      * Will be part of the premium-plan when fully ready.
@@ -32,6 +33,10 @@ export interface GridExperimentalFeatures {
      * Enables the new API for cell editing and row editing.
      */
     newEditingApi: boolean;
+    /**
+     * Enables the column grouping.
+     */
+    columnGrouping: boolean;
     /**
      * Emits a warning if the cell receives focus without also syncing the focus state.
      * Only works if NODE_ENV=test.
@@ -234,7 +239,7 @@ export interface DataGridPropsWithDefaultValues {
     logger: Logger;
     /**
      * Allows to pass the logging level or false to turn off logging.
-     * @default "debug"
+     * @default "error" ("warn" in dev mode)
      */
     logLevel: keyof Logger | false;
     /**
@@ -741,4 +746,5 @@ export interface DataGridPropsWithoutDefaultValue<R extends GridValidRowModel =
      * @param {any} error The error thrown.
      */
     onProcessRowUpdateError?: (error: any) => void;
+    columnGroupingModel?: GridColumnGroupingModel;
 }