@mui/x-data-grid-premium 7.20.0 → 7.22.0

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -13,6 +13,7 @@ var _xDataGridPro = require("@mui/x-data-grid-pro");
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _GridGroupingColumnFooterCell = require("../../../components/GridGroupingColumnFooterCell");
 var _GridGroupingCriteriaCell = require("../../../components/GridGroupingCriteriaCell");
+var _GridDataSourceGroupingCriteriaCell = require("../../../components/GridDataSourceGroupingCriteriaCell");
 var _GridGroupingColumnLeafCell = require("../../../components/GridGroupingColumnLeafCell");
 var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
 var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
@@ -23,10 +24,15 @@ const GROUPING_COL_DEF_DEFAULT_PROPERTIES = (0, _extends2.default)({}, _xDataGri
   type: 'custom',
   disableReorder: true
 });
-const GROUPING_COL_DEF_FORCED_PROPERTIES = {
+const GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT = {
   editable: false,
   groupable: false
 };
+const GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE = (0, _extends2.default)({}, GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT, {
+  // TODO: Support these features on the grouping column(s)
+  filterable: false,
+  sortable: false
+});
 
 /**
  * When sorting two cells with different grouping criteria, we consider that the cell with the grouping criteria coming first in the model should be displayed below.
@@ -92,7 +98,8 @@ const createGroupingColDefForOneGroupingCriteria = ({
   columnsLookup,
   groupedByColDef,
   groupingCriteria,
-  colDefOverride
+  colDefOverride,
+  strategy = _gridRowGroupingUtils.RowGroupingStrategy.Default
 }) => {
   const _ref = colDefOverride ?? {},
     {
@@ -102,6 +109,7 @@ const createGroupingColDefForOneGroupingCriteria = ({
     } = _ref,
     colDefOverrideProperties = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const leafColDef = leafField ? columnsLookup[leafField] : null;
+  const CriteriaCell = strategy === _gridRowGroupingUtils.RowGroupingStrategy.Default ? _GridGroupingCriteriaCell.GridGroupingCriteriaCell : _GridDataSourceGroupingCriteriaCell.GridDataSourceGroupingCriteriaCell;
 
   // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
   const commonProperties = {
@@ -129,7 +137,7 @@ const createGroupingColDefForOneGroupingCriteria = ({
 
       // Render current grouping criteria groups
       if (params.rowNode.groupingField === groupingCriteria) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGroupingCriteriaCell.GridGroupingCriteriaCell, (0, _extends2.default)({}, params, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(CriteriaCell, (0, _extends2.default)({}, params, {
           hideDescendantCount: hideDescendantCount
         }));
       }
@@ -174,7 +182,7 @@ const createGroupingColDefForOneGroupingCriteria = ({
   // The properties that can't be overridden with `colDefOverride`
   const forcedProperties = (0, _extends2.default)({
     field: (0, _gridRowGroupingUtils.getRowGroupingFieldFromGroupingCriteria)(groupingCriteria)
-  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+  }, GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT);
   return (0, _extends2.default)({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
 };
 exports.createGroupingColDefForOneGroupingCriteria = createGroupingColDefForOneGroupingCriteria;
@@ -185,7 +193,8 @@ const createGroupingColDefForAllGroupingCriteria = ({
   apiRef,
   columnsLookup,
   rowGroupingModel,
-  colDefOverride
+  colDefOverride,
+  strategy = _gridRowGroupingUtils.RowGroupingStrategy.Default
 }) => {
   const _ref2 = colDefOverride ?? {},
     {
@@ -195,6 +204,7 @@ const createGroupingColDefForAllGroupingCriteria = ({
     } = _ref2,
     colDefOverrideProperties = (0, _objectWithoutPropertiesLoose2.default)(_ref2, _excluded2);
   const leafColDef = leafField ? columnsLookup[leafField] : null;
+  const CriteriaCell = strategy === _gridRowGroupingUtils.RowGroupingStrategy.Default ? _GridGroupingCriteriaCell.GridGroupingCriteriaCell : _GridDataSourceGroupingCriteriaCell.GridDataSourceGroupingCriteriaCell;
 
   // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
   const commonProperties = {
@@ -222,7 +232,7 @@ const createGroupingColDefForAllGroupingCriteria = ({
       }
 
       // Render the groups
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridGroupingCriteriaCell.GridGroupingCriteriaCell, (0, _extends2.default)({}, params, {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(CriteriaCell, (0, _extends2.default)({}, params, {
         hideDescendantCount: hideDescendantCount
       }));
     },
@@ -262,7 +272,7 @@ const createGroupingColDefForAllGroupingCriteria = ({
   // The properties that can't be overridden with `colDefOverride`
   const forcedProperties = (0, _extends2.default)({
     field: _gridRowGroupingUtils.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD
-  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+  }, strategy === _gridRowGroupingUtils.RowGroupingStrategy.Default ? GROUPING_COL_DEF_FORCED_PROPERTIES_DEFAULT : GROUPING_COL_DEF_FORCED_PROPERTIES_DATA_SOURCE);
   return (0, _extends2.default)({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
 };
 exports.createGroupingColDefForAllGroupingCriteria = createGroupingColDefForAllGroupingCriteria;

package/hooks/features/rowGrouping/gridRowGroupingUtils.d.ts

@@ -1,12 +1,15 @@
 import * as React from 'react';
-import { GridRowTreeConfig, GridFilterState, GridFilterModel, GridRowModel, GridColDef, GridKeyValue } from '@mui/x-data-grid-pro';
+import { GridRowTreeConfig, GridFilterState, GridFilterModel, GridRowModel, GridColDef, GridKeyValue, GridDataSource } from '@mui/x-data-grid-pro';
 import { GridAggregatedFilterItemApplier, GridColumnRawLookup } from '@mui/x-data-grid-pro/internals';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridGroupingRule, GridGroupingRules, GridRowGroupingModel } from './gridRowGroupingInterfaces';
 import { GridStatePremium } from '../../../models/gridStatePremium';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
 export declare const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = "__row_group_by_columns_group__";
-export declare const ROW_GROUPING_STRATEGY = "grouping-columns";
+export declare enum RowGroupingStrategy {
+    Default = "grouping-columns",
+    DataSource = "grouping-columns-data-source"
+}
 export declare const getRowGroupingFieldFromGroupingCriteria: (groupingCriteria: string | null) => string;
 export declare const getRowGroupingCriteriaFromGroupingField: (groupingColDefField: string) => string | null;
 export declare const isGroupingColumn: (field: string) => boolean;
@@ -23,9 +26,9 @@ interface FilterRowTreeFromTreeDataParams {
  * - It is passing the filter
  */
 export declare const filterRowTreeFromGroupingColumns: (params: FilterRowTreeFromTreeDataParams) => Omit<GridFilterState, "filterModel">;
-export declare const getColDefOverrides: (groupingColDefProp: DataGridPremiumProcessedProps["groupingColDef"], fields: string[]) => import("@mui/x-data-grid-pro").GridGroupingColDefOverride<any> | null | undefined;
+export declare const getColDefOverrides: (groupingColDefProp: DataGridPremiumProcessedProps["groupingColDef"], fields: string[], strategy?: RowGroupingStrategy) => import("@mui/x-data-grid-pro").GridGroupingColDefOverride<any> | null | undefined;
 export declare const mergeStateWithRowGroupingModel: (rowGroupingModel: GridRowGroupingModel) => (state: GridStatePremium) => GridStatePremium;
-export declare const setStrategyAvailability: (privateApiRef: React.MutableRefObject<GridPrivateApiPremium>, disableRowGrouping: boolean) => void;
+export declare const setStrategyAvailability: (privateApiRef: React.MutableRefObject<GridPrivateApiPremium>, disableRowGrouping: boolean, dataSource?: GridDataSource) => void;
 export declare const getCellGroupingCriteria: ({ row, colDef, groupingRule, apiRef, }: {
     row: GridRowModel;
     colDef: GridColDef;

package/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -4,12 +4,16 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setStrategyAvailability = exports.mergeStateWithRowGroupingModel = exports.isGroupingColumn = exports.getRowGroupingFieldFromGroupingCriteria = exports.getRowGroupingCriteriaFromGroupingField = exports.getGroupingRules = exports.getColDefOverrides = exports.getCellGroupingCriteria = exports.filterRowTreeFromGroupingColumns = exports.areGroupingRulesEqual = exports.ROW_GROUPING_STRATEGY = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = void 0;
+exports.setStrategyAvailability = exports.mergeStateWithRowGroupingModel = exports.isGroupingColumn = exports.getRowGroupingFieldFromGroupingCriteria = exports.getRowGroupingCriteriaFromGroupingField = exports.getGroupingRules = exports.getColDefOverrides = exports.getCellGroupingCriteria = exports.filterRowTreeFromGroupingColumns = exports.areGroupingRulesEqual = exports.RowGroupingStrategy = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _internals = require("@mui/x-data-grid-pro/internals");
 var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
 const GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = exports.GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD = '__row_group_by_columns_group__';
-const ROW_GROUPING_STRATEGY = exports.ROW_GROUPING_STRATEGY = 'grouping-columns';
+let RowGroupingStrategy = exports.RowGroupingStrategy = /*#__PURE__*/function (RowGroupingStrategy) {
+  RowGroupingStrategy["Default"] = "grouping-columns";
+  RowGroupingStrategy["DataSource"] = "grouping-columns-data-source";
+  return RowGroupingStrategy;
+}({});
 const getRowGroupingFieldFromGroupingCriteria = groupingCriteria => {
   if (groupingCriteria === null) {
     return GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD;
@@ -114,10 +118,10 @@ const filterRowTreeFromGroupingColumns = params => {
   };
 };
 exports.filterRowTreeFromGroupingColumns = filterRowTreeFromGroupingColumns;
-const getColDefOverrides = (groupingColDefProp, fields) => {
+const getColDefOverrides = (groupingColDefProp, fields, strategy) => {
   if (typeof groupingColDefProp === 'function') {
     return groupingColDefProp({
-      groupingName: ROW_GROUPING_STRATEGY,
+      groupingName: strategy ?? RowGroupingStrategy.Default,
       fields
     });
   }
@@ -130,7 +134,7 @@ const mergeStateWithRowGroupingModel = rowGroupingModel => state => (0, _extends
   })
 });
 exports.mergeStateWithRowGroupingModel = mergeStateWithRowGroupingModel;
-const setStrategyAvailability = (privateApiRef, disableRowGrouping) => {
+const setStrategyAvailability = (privateApiRef, disableRowGrouping, dataSource) => {
   let isAvailable;
   if (disableRowGrouping) {
     isAvailable = () => false;
@@ -140,7 +144,8 @@ const setStrategyAvailability = (privateApiRef, disableRowGrouping) => {
       return rowGroupingSanitizedModel.length > 0;
     };
   }
-  privateApiRef.current.setStrategyAvailability('rowTree', ROW_GROUPING_STRATEGY, isAvailable);
+  const strategy = dataSource ? RowGroupingStrategy.DataSource : RowGroupingStrategy.Default;
+  privateApiRef.current.setStrategyAvailability('rowTree', strategy, isAvailable);
 };
 exports.setStrategyAvailability = setStrategyAvailability;
 const getCellGroupingCriteria = ({

package/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
+export declare const useGridDataSourceRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridDataSourceRowGroupingPreProcessors = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _gridRowGroupingUtils = require("./gridRowGroupingUtils");
+var _gridRowGroupingSelector = require("./gridRowGroupingSelector");
+const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
+  const createRowTreeForRowGrouping = React.useCallback(params => {
+    const getGroupKey = props.unstable_dataSource?.getGroupKey;
+    if (!getGroupKey) {
+      throw new Error('MUI X: No `getGroupKey` method provided with the dataSource.');
+    }
+    const getChildrenCount = props.unstable_dataSource?.getChildrenCount;
+    if (!getChildrenCount) {
+      throw new Error('MUI X: No `getChildrenCount` method provided with the dataSource.');
+    }
+    const sanitizedRowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
+    const columnsLookup = (0, _xDataGridPro.gridColumnLookupSelector)(apiRef);
+    const groupingRules = (0, _gridRowGroupingUtils.getGroupingRules)({
+      sanitizedRowGroupingModel,
+      columnsLookup
+    });
+    apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation = groupingRules;
+    const getRowTreeBuilderNode = rowId => {
+      const parentPath = params.updates.groupKeys ?? [];
+      const row = params.dataRowIdToModelLookup[rowId];
+      const groupingRule = groupingRules[parentPath.length];
+      const groupingValueGetter = groupingRule?.groupingValueGetter;
+      const leafKey = groupingValueGetter?.(row[groupingRule.field], row, columnsLookup[groupingRule.field], apiRef) ?? getGroupKey(params.dataRowIdToModelLookup[rowId]);
+      return {
+        id: rowId,
+        path: [...parentPath, leafKey ?? rowId.toString()].map((key, i) => ({
+          key,
+          field: groupingRules[i]?.field ?? null
+        })),
+        serverChildrenCount: getChildrenCount(params.dataRowIdToModelLookup[rowId]) ?? 0
+      };
+    };
+    if (params.updates.type === 'full') {
+      return (0, _internals.createRowTree)({
+        previousTree: params.previousTree,
+        nodes: params.updates.rows.map(getRowTreeBuilderNode),
+        defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+        isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+        groupingName: _gridRowGroupingUtils.RowGroupingStrategy.DataSource
+      });
+    }
+    return (0, _internals.updateRowTree)({
+      nodes: {
+        inserted: params.updates.actions.insert.map(getRowTreeBuilderNode),
+        modified: params.updates.actions.modify.map(getRowTreeBuilderNode),
+        removed: params.updates.actions.remove
+      },
+      previousTree: params.previousTree,
+      previousGroupsToFetch: params.previousGroupsToFetch,
+      previousTreeDepth: params.previousTreeDepths,
+      defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
+      isGroupExpandedByDefault: props.isGroupExpandedByDefault,
+      groupingName: _gridRowGroupingUtils.RowGroupingStrategy.DataSource
+    });
+  }, [apiRef, props.unstable_dataSource, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
+  const filterRows = React.useCallback(() => {
+    const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
+    return (0, _internals.skipFiltering)(rowTree);
+  }, [apiRef]);
+  const sortRows = React.useCallback(() => {
+    const rowTree = (0, _xDataGridPro.gridRowTreeSelector)(apiRef);
+    return (0, _internals.skipSorting)(rowTree);
+  }, [apiRef]);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.DataSource, 'rowTreeCreation', createRowTreeForRowGrouping);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.DataSource, 'filtering', filterRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.DataSource, 'sorting', sortRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.DataSource, 'visibleRowsLookupCreation', _internals.getVisibleRowsLookup);
+};
+exports.useGridDataSourceRowGroupingPreProcessors = useGridDataSourceRowGroupingPreProcessors;

package/hooks/features/rowGrouping/useGridRowGrouping.d.ts

@@ -8,4 +8,4 @@ export declare const rowGroupingStateInitializer: GridStateInitializer<Pick<Data
  * @requires useGridRows (state, method) - can be after, async only
  * @requires useGridParamsApi (method) - can be after, async only
  */
-export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots">) => void;
+export declare const useGridRowGrouping: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "initialState" | "rowGroupingModel" | "onRowGroupingModelChange" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "groupingColDef" | "rowGroupingColumnMode" | "disableRowGrouping" | "slotProps" | "slots" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -38,7 +38,7 @@ const useGridRowGrouping = (apiRef, props) => {
     changeEvent: 'rowGroupingModelChange'
   });
 
-  /**
+  /*
    * API METHODS
    */
   const setRowGroupingModel = React.useCallback(model => {
@@ -95,6 +95,11 @@ const useGridRowGrouping = (apiRef, props) => {
     }
     return columnMenuItems;
   }, [props.disableRowGrouping]);
+  const addGetRowsParams = React.useCallback(params => {
+    return (0, _extends2.default)({}, params, {
+      groupFields: (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef)
+    });
+  }, [apiRef]);
   const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const rowGroupingModelToExport = (0, _gridRowGroupingSelector.gridRowGroupingModelSelector)(apiRef);
     const shouldExportRowGroupingModel =
@@ -126,10 +131,11 @@ const useGridRowGrouping = (apiRef, props) => {
     return params;
   }, [apiRef, props.disableRowGrouping]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuButtons);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'getRowsParams', addGetRowsParams);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'exportState', stateExportPreProcessing);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'restoreState', stateRestorePreProcessing);
 
-  /**
+  /*
    * EVENTS
    */
   const handleCellKeyDown = React.useCallback((params, event) => {
@@ -144,9 +150,13 @@ const useGridRowGrouping = (apiRef, props) => {
       if (!isOnGroupingCell) {
         return;
       }
+      if (props.unstable_dataSource && !params.rowNode.childrenExpanded) {
+        apiRef.current.unstable_dataSource.fetchRows(params.id);
+        return;
+      }
       apiRef.current.setRowChildrenExpansion(params.id, !params.rowNode.childrenExpanded);
     }
-  }, [apiRef, props.rowGroupingColumnMode]);
+  }, [apiRef, props.rowGroupingColumnMode, props.unstable_dataSource]);
   const checkGroupingColumnsModelDiff = React.useCallback(() => {
     const sanitizedRowGroupingModel = (0, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector)(apiRef);
     const rulesOnLastRowTreeCreation = apiRef.current.caches.rowGrouping.rulesOnLastRowTreeCreation || [];
@@ -161,7 +171,7 @@ const useGridRowGrouping = (apiRef, props) => {
 
       // Refresh the row tree creation strategy processing
       // TODO: Add a clean way to re-run a strategy processing without publishing a private event
-      if (apiRef.current.getActiveStrategy('rowTree') === _gridRowGroupingUtils.ROW_GROUPING_STRATEGY) {
+      if (apiRef.current.getActiveStrategy('rowTree') === _gridRowGroupingUtils.RowGroupingStrategy.Default) {
         apiRef.current.publishEvent('activeStrategyProcessorChange', 'rowTreeCreation');
       }
     }
@@ -170,7 +180,7 @@ const useGridRowGrouping = (apiRef, props) => {
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
   (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
 
-  /**
+  /*
    * EFFECTS
    */
   React.useEffect(() => {

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
 import { GridPrivateApiPremium } from '../../../models/gridApiPremium';
-export declare const useGridRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault">) => void;
+export declare const useGridRowGroupingPreProcessors: (apiRef: React.MutableRefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "disableRowGrouping" | "groupingColDef" | "rowGroupingColumnMode" | "defaultGroupingExpansionDepth" | "isGroupExpandedByDefault" | "unstable_dataSource">) => void;

package/hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js

@@ -16,6 +16,7 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
     if (props.disableRowGrouping) {
       return [];
     }
+    const strategy = props.unstable_dataSource ? _gridRowGroupingUtils.RowGroupingStrategy.DataSource : _gridRowGroupingUtils.RowGroupingStrategy.Default;
     const groupingColDefProp = props.groupingColDef;
 
     // We can't use `gridGroupingRowsSanitizedModelSelector` here because the new columns are not in the state yet
@@ -29,8 +30,9 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
           return [(0, _createGroupingColDef.createGroupingColDefForAllGroupingCriteria)({
             apiRef,
             rowGroupingModel,
-            colDefOverride: (0, _gridRowGroupingUtils.getColDefOverrides)(groupingColDefProp, rowGroupingModel),
-            columnsLookup: columnsState.lookup
+            colDefOverride: (0, _gridRowGroupingUtils.getColDefOverrides)(groupingColDefProp, rowGroupingModel, strategy),
+            columnsLookup: columnsState.lookup,
+            strategy
           })];
         }
       case 'multiple':
@@ -39,7 +41,8 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
             groupingCriteria,
             colDefOverride: (0, _gridRowGroupingUtils.getColDefOverrides)(groupingColDefProp, [groupingCriteria]),
             groupedByColDef: columnsState.lookup[groupingCriteria],
-            columnsLookup: columnsState.lookup
+            columnsLookup: columnsState.lookup,
+            strategy
           }));
         }
       default:
@@ -47,7 +50,7 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
           return [];
         }
     }
-  }, [apiRef, props.groupingColDef, props.rowGroupingColumnMode, props.disableRowGrouping]);
+  }, [apiRef, props.groupingColDef, props.rowGroupingColumnMode, props.disableRowGrouping, props.unstable_dataSource]);
   const updateGroupingColumn = React.useCallback(columnsState => {
     const groupingColDefs = getGroupingColDefs(columnsState);
     let newColumnFields = [];
@@ -107,7 +110,7 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
         nodes: params.updates.rows.map(getRowTreeBuilderNode),
         defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
         isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-        groupingName: _gridRowGroupingUtils.ROW_GROUPING_STRATEGY
+        groupingName: _gridRowGroupingUtils.RowGroupingStrategy.Default
       });
     }
     return (0, _internals.updateRowTree)({
@@ -120,7 +123,7 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
       previousTreeDepth: params.previousTreeDepths,
       defaultGroupingExpansionDepth: props.defaultGroupingExpansionDepth,
       isGroupExpandedByDefault: props.isGroupExpandedByDefault,
-      groupingName: _gridRowGroupingUtils.ROW_GROUPING_STRATEGY
+      groupingName: _gridRowGroupingUtils.RowGroupingStrategy.Default
     });
   }, [apiRef, props.defaultGroupingExpansionDepth, props.isGroupExpandedByDefault]);
   const filterRows = React.useCallback(params => {
@@ -142,28 +145,20 @@ const useGridRowGroupingPreProcessors = (apiRef, props) => {
     });
   }, [apiRef]);
   (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'hydrateColumns', updateGroupingColumn);
-  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'rowTreeCreation', createRowTreeForRowGrouping);
-  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'filtering', filterRows);
-  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'sorting', sortRows);
-  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.ROW_GROUPING_STRATEGY, 'visibleRowsLookupCreation', _internals.getVisibleRowsLookup);
-
-  /**
-   * 1ST RENDER
-   */
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.Default, 'rowTreeCreation', createRowTreeForRowGrouping);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.Default, 'filtering', filterRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.Default, 'sorting', sortRows);
+  (0, _internals.useGridRegisterStrategyProcessor)(apiRef, _gridRowGroupingUtils.RowGroupingStrategy.Default, 'visibleRowsLookupCreation', _internals.getVisibleRowsLookup);
   (0, _xDataGridPro.useFirstRender)(() => {
-    (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping);
+    (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping, props.unstable_dataSource);
   });
-
-  /**
-   * EFFECTS
-   */
   const isFirstRender = React.useRef(true);
   React.useEffect(() => {
     if (!isFirstRender.current) {
-      (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping);
+      (0, _gridRowGroupingUtils.setStrategyAvailability)(apiRef, props.disableRowGrouping, props.unstable_dataSource);
     } else {
       isFirstRender.current = false;
     }
-  }, [apiRef, props.disableRowGrouping]);
+  }, [apiRef, props.disableRowGrouping, props.unstable_dataSource]);
 };
 exports.useGridRowGroupingPreProcessors = useGridRowGroupingPreProcessors;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/x-data-grid-premium v7.20.0
+ * @mui/x-data-grid-premium v7.22.0
  *
  * @license MUI X Commercial
  * This source code is licensed under the commercial license found in the

package/modern/DataGridPremium/DataGridPremium.js

@@ -932,6 +932,7 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * Setting it to a lower value could be useful when using dynamic row height,
    * but might reduce performance when displaying a large number of rows.
    * @default 166
+   * @deprecated
    */
   rowPositionsDebounceMs: PropTypes.number,
   /**
@@ -1060,6 +1061,21 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     get: PropTypes.func.isRequired,
     set: PropTypes.func.isRequired
   }),
+  /**
+   * Definition of the column rendered when the `unstable_listView` prop is enabled.
+   */
+  unstable_listColumn: PropTypes.shape({
+    align: PropTypes.oneOf(['center', 'left', 'right']),
+    cellClassName: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
+    display: PropTypes.oneOf(['flex', 'text']),
+    field: PropTypes.string.isRequired,
+    renderCell: PropTypes.func
+  }),
+  /**
+   * If `true`, displays the data in a list view.
+   * Use in combination with `unstable_listColumn`.
+   */
+  unstable_listView: PropTypes.bool,
   unstable_onDataSourceError: PropTypes.func,
   /**
    * If `true`, the Data Grid will auto span the cells over the rows having the same value.

package/modern/DataGridPremium/useDataGridPremiumComponent.js

@@ -1,9 +1,10 @@
-import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, useGridDataSource, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer } from '@mui/x-data-grid-pro/internals';
+import { useGridInitialization, useGridInitializeState, useGridClipboard, useGridColumnMenu, useGridColumns, columnsStateInitializer, useGridDensity, useGridCsvExport, useGridPrintExport, useGridFilter, filterStateInitializer, useGridFocus, useGridKeyboardNavigation, useGridPagination, paginationStateInitializer, useGridPreferencesPanel, useGridEditing, editingStateInitializer, useGridRows, useGridRowsPreProcessors, rowsStateInitializer, useGridRowsMeta, useGridParamsApi, useGridRowSelection, useGridSorting, sortingStateInitializer, useGridScroll, useGridEvents, dimensionsStateInitializer, useGridDimensions, useGridStatePersistence, useGridRowSelectionPreProcessors, columnMenuStateInitializer, densityStateInitializer, focusStateInitializer, preferencePanelStateInitializer, rowsMetaStateInitializer, rowSelectionStateInitializer, useGridColumnReorder, columnReorderStateInitializer, useGridColumnResize, columnResizeStateInitializer, useGridTreeData, useGridTreeDataPreProcessors, useGridColumnPinning, columnPinningStateInitializer, useGridColumnPinningPreProcessors, useGridDetailPanel, detailPanelStateInitializer, useGridDetailPanelPreProcessors, useGridInfiniteLoader, useGridColumnSpanning, useGridRowReorder, useGridRowReorderPreProcessors, useGridRowPinning, useGridRowPinningPreProcessors, rowPinningStateInitializer, useGridColumnGrouping, columnGroupsStateInitializer, useGridLazyLoader, useGridLazyLoaderPreProcessors, headerFilteringStateInitializer, useGridHeaderFiltering, virtualizationStateInitializer, useGridVirtualization, useGridDataSourceTreeDataPreProcessors, useGridDataSource, dataSourceStateInitializer, useGridRowSpanning, rowSpanningStateInitializer, useGridListView, listViewStateInitializer } from '@mui/x-data-grid-pro/internals';
 // Premium-only features
 import { useGridAggregation, aggregationStateInitializer } from "../hooks/features/aggregation/useGridAggregation.js";
 import { useGridAggregationPreProcessors } from "../hooks/features/aggregation/useGridAggregationPreProcessors.js";
 import { useGridRowGrouping, rowGroupingStateInitializer } from "../hooks/features/rowGrouping/useGridRowGrouping.js";
 import { useGridRowGroupingPreProcessors } from "../hooks/features/rowGrouping/useGridRowGroupingPreProcessors.js";
+import { useGridDataSourceRowGroupingPreProcessors } from "../hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js";
 import { useGridExcelExport } from "../hooks/features/export/useGridExcelExport.js";
 import { cellSelectionStateInitializer, useGridCellSelection } from "../hooks/features/cellSelection/useGridCellSelection.js";
 import { useGridClipboardImport } from "../hooks/features/clipboard/useGridClipboardImport.js";
@@ -16,6 +17,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridRowSelectionPreProcessors(apiRef, props);
   useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
+  useGridDataSourceRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
   useGridDataSourceTreeDataPreProcessors(apiRef, props);
   useGridLazyLoaderPreProcessors(apiRef, props);
@@ -56,6 +58,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridInitializeState(columnGroupsStateInitializer, apiRef, props);
   useGridInitializeState(virtualizationStateInitializer, apiRef, props);
   useGridInitializeState(dataSourceStateInitializer, apiRef, props);
+  useGridInitializeState(listViewStateInitializer, apiRef, props);
   useGridRowGrouping(apiRef, props);
   useGridHeaderFiltering(apiRef, props);
   useGridTreeData(apiRef, props);
@@ -68,7 +71,7 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridColumns(apiRef, props);
   useGridRows(apiRef, props);
   useGridRowSpanning(apiRef, props);
-  useGridParamsApi(apiRef);
+  useGridParamsApi(apiRef, props);
   useGridDetailPanel(apiRef, props);
   useGridColumnSpanning(apiRef);
   useGridColumnGrouping(apiRef, props);
@@ -97,5 +100,6 @@ export const useDataGridPremiumComponent = (inputApiRef, props) => {
   useGridStatePersistence(apiRef);
   useGridDataSource(apiRef, props);
   useGridVirtualization(apiRef, props);
+  useGridListView(apiRef, props);
   return apiRef;
 };