@mui/x-data-grid-premium 8.0.0-beta.2 → 8.0.0

package/hooks/features/pivoting/useGridPivoting.js

@@ -0,0 +1,349 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGridPivoting = exports.pivotingStateInitializer = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var React = _interopRequireWildcard(require("react"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useOnMount = _interopRequireDefault(require("@mui/utils/useOnMount"));
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _gridPivotingSelectors = require("./gridPivotingSelectors");
+var _utils = require("./utils");
+var _gridAggregationUtils = require("../aggregation/gridAggregationUtils");
+const emptyPivotModel = {
+  rows: [],
+  columns: [],
+  values: []
+};
+const pivotingStateInitializer = (state, props, apiRef) => {
+  if (!(0, _utils.isPivotingAvailable)(props)) {
+    return (0, _extends2.default)({}, state, {
+      pivoting: {
+        active: false,
+        model: emptyPivotModel,
+        panelOpen: false
+      }
+    });
+  }
+  const initialColumns = (0, _utils.getInitialColumns)(props.columns ?? [], props.getPivotDerivedColumns, apiRef.current.getLocaleText);
+  return (0, _extends2.default)({}, state, {
+    pivoting: {
+      active: props.pivotActive ?? props.initialState?.pivoting?.enabled ?? false,
+      model: props.pivotModel ?? props.initialState?.pivoting?.model ?? emptyPivotModel,
+      panelOpen: props.pivotPanelOpen ?? props.initialState?.pivoting?.panelOpen ?? false,
+      initialColumns
+    }
+  });
+};
+exports.pivotingStateInitializer = pivotingStateInitializer;
+const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) => {
+  const isPivotActive = (0, _internals.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotActiveSelector);
+  const exportedStateRef = React.useRef(null);
+  const nonPivotDataRef = React.useRef(undefined);
+  const isPivotingAvailable = (0, _utils.isPivotingAvailable)(props);
+  apiRef.current.registerControlState({
+    stateId: 'pivotModel',
+    propModel: props.pivotModel,
+    propOnChange: props.onPivotModelChange,
+    stateSelector: _gridPivotingSelectors.gridPivotModelSelector,
+    changeEvent: 'pivotModelChange'
+  });
+  apiRef.current.registerControlState({
+    stateId: 'pivotMode',
+    propModel: props.pivotActive,
+    propOnChange: props.onPivotActiveChange,
+    stateSelector: _gridPivotingSelectors.gridPivotActiveSelector,
+    changeEvent: 'pivotModeChange'
+  });
+  apiRef.current.registerControlState({
+    stateId: 'pivotPanelOpen',
+    propModel: props.pivotPanelOpen,
+    propOnChange: props.onPivotPanelOpenChange,
+    stateSelector: _gridPivotingSelectors.gridPivotPanelOpenSelector,
+    changeEvent: 'pivotPanelOpenChange'
+  });
+  const getInitialData = React.useCallback(() => {
+    if (!exportedStateRef.current) {
+      exportedStateRef.current = apiRef.current.exportState();
+    }
+    const rowIds = (0, _xDataGridPro.gridDataRowIdsSelector)(apiRef);
+    const rowsLookup = (0, _xDataGridPro.gridRowsLookupSelector)(apiRef);
+    const rows = rowIds.map(id => rowsLookup[id]);
+    const initialColumns = (0, _utils.getInitialColumns)(originalColumnsProp, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
+    return {
+      rows,
+      columns: initialColumns
+    };
+  }, [apiRef, props.getPivotDerivedColumns, originalColumnsProp]);
+  const computePivotingState = React.useCallback(({
+    active,
+    model: pivotModel
+  }) => {
+    if (active && pivotModel) {
+      const {
+        rows,
+        columns
+      } = nonPivotDataRef.current || {
+        rows: [],
+        columns: new Map()
+      };
+      return {
+        initialColumns: columns,
+        // TODO: fix getPivotedData called twice in controlled mode
+        propsOverrides: (0, _utils.getPivotedData)({
+          rows,
+          columns,
+          pivotModel,
+          apiRef: apiRef,
+          pivotingColDef: props.pivotingColDef
+        })
+      };
+    }
+    return undefined;
+  }, [apiRef, props.pivotingColDef]);
+  (0, _useOnMount.default)(() => {
+    if (!isPivotingAvailable || !isPivotActive) {
+      return undefined;
+    }
+    const isLoading = (0, _xDataGridPro.gridRowsLoadingSelector)(apiRef) ?? false;
+    const runPivoting = () => {
+      nonPivotDataRef.current = getInitialData();
+      apiRef.current.setState(state => {
+        const pivotingState = (0, _extends2.default)({}, state.pivoting, computePivotingState(state.pivoting));
+        return (0, _extends2.default)({}, state, {
+          pivoting: pivotingState
+        });
+      });
+    };
+    if (!isLoading) {
+      runPivoting();
+      return undefined;
+    }
+    const unsubscribe = apiRef.current?.store.subscribe(() => {
+      const loading = (0, _xDataGridPro.gridRowsLoadingSelector)(apiRef);
+      if (loading === false) {
+        unsubscribe();
+        runPivoting();
+      }
+    });
+    return unsubscribe;
+  });
+  (0, _useEnhancedEffect.default)(() => {
+    if (!isPivotingAvailable || !isPivotActive) {
+      if (exportedStateRef.current) {
+        apiRef.current.restoreState(exportedStateRef.current);
+        exportedStateRef.current = null;
+      }
+      if (nonPivotDataRef.current) {
+        apiRef.current.setRows(nonPivotDataRef.current.rows);
+        nonPivotDataRef.current = undefined;
+      }
+    }
+  }, [isPivotActive, apiRef, isPivotingAvailable]);
+  const setPivotModel = React.useCallback(callback => {
+    if (!isPivotingAvailable) {
+      return;
+    }
+    apiRef.current.setState(state => {
+      const newPivotModel = typeof callback === 'function' ? callback(state.pivoting?.model) : callback;
+      if (state.pivoting?.model === newPivotModel) {
+        return state;
+      }
+      const newPivotingState = (0, _extends2.default)({}, state.pivoting, computePivotingState((0, _extends2.default)({}, state.pivoting, {
+        model: newPivotModel
+      })), {
+        model: newPivotModel
+      });
+      return (0, _extends2.default)({}, state, {
+        pivoting: newPivotingState
+      });
+    });
+  }, [apiRef, computePivotingState, isPivotingAvailable]);
+  const updatePivotModel = React.useCallback(({
+    field,
+    targetSection,
+    originSection,
+    targetField,
+    targetFieldPosition
+  }) => {
+    if (field === targetField) {
+      return;
+    }
+    apiRef.current.setPivotModel(prev => {
+      const newModel = (0, _extends2.default)({}, prev);
+      const isSameSection = targetSection === originSection;
+      const hidden = originSection === null ? false : prev[originSection].find(item => item.field === field)?.hidden ?? false;
+      if (targetSection) {
+        const newSectionArray = [...prev[targetSection]];
+        let toIndex = newSectionArray.length;
+        if (targetField) {
+          const fromIndex = newSectionArray.findIndex(item => item.field === field);
+          if (fromIndex > -1) {
+            newSectionArray.splice(fromIndex, 1);
+          }
+          toIndex = newSectionArray.findIndex(item => item.field === targetField);
+          if (targetFieldPosition === 'bottom') {
+            toIndex += 1;
+          }
+        }
+        if (targetSection === 'values') {
+          const initialColumns = (0, _internals.gridPivotInitialColumnsSelector)(apiRef);
+          const aggFunc = isSameSection ? prev.values.find(item => item.field === field)?.aggFunc : (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
+            aggregationFunctions: props.aggregationFunctions,
+            colDef: initialColumns.get(field),
+            isDataSource: false
+          })[0];
+          newSectionArray.splice(toIndex, 0, {
+            field,
+            aggFunc,
+            hidden
+          });
+          newModel.values = newSectionArray;
+        } else if (targetSection === 'columns') {
+          const sort = isSameSection ? prev.columns.find(item => item.field === field)?.sort : undefined;
+          newSectionArray.splice(toIndex, 0, {
+            field,
+            sort,
+            hidden
+          });
+          newModel.columns = newSectionArray;
+        } else if (targetSection === 'rows') {
+          newSectionArray.splice(toIndex, 0, {
+            field,
+            hidden
+          });
+          newModel.rows = newSectionArray;
+        }
+      }
+      if (!isSameSection && originSection) {
+        newModel[originSection] = prev[originSection].filter(f => f.field !== field);
+      }
+      return newModel;
+    });
+  }, [apiRef, props.aggregationFunctions]);
+  const setPivotActive = React.useCallback(callback => {
+    if (!isPivotingAvailable) {
+      return;
+    }
+    apiRef.current.selectRows([], false, true);
+    apiRef.current.setState(state => {
+      const newPivotMode = typeof callback === 'function' ? callback(state.pivoting?.active) : callback;
+      if (state.pivoting?.active === newPivotMode) {
+        return state;
+      }
+      if (newPivotMode) {
+        nonPivotDataRef.current = getInitialData();
+      }
+      const newPivotingState = (0, _extends2.default)({}, state.pivoting, computePivotingState((0, _extends2.default)({}, state.pivoting, {
+        active: newPivotMode
+      })), {
+        active: newPivotMode
+      });
+      const newState = (0, _extends2.default)({}, state, {
+        pivoting: newPivotingState
+      });
+      return newState;
+    });
+  }, [apiRef, computePivotingState, getInitialData, isPivotingAvailable]);
+  const setPivotPanelOpen = React.useCallback(callback => {
+    if (!isPivotingAvailable) {
+      return;
+    }
+    apiRef.current.setState(state => (0, _extends2.default)({}, state, {
+      pivoting: (0, _extends2.default)({}, state.pivoting, {
+        panelOpen: typeof callback === 'function' ? callback(state.pivoting?.panelOpen) : callback
+      })
+    }));
+  }, [apiRef, isPivotingAvailable]);
+  const addColumnMenuButton = React.useCallback(menuItems => {
+    if (isPivotingAvailable) {
+      return [...menuItems, 'columnMenuPivotItem'];
+    }
+    return menuItems;
+  }, [isPivotingAvailable]);
+  (0, _internals.useGridRegisterPipeProcessor)(apiRef, 'columnMenu', addColumnMenuButton);
+  const updateNonPivotColumns = React.useCallback((columns, keepPreviousColumns = true) => {
+    if (!nonPivotDataRef.current || !isPivotingAvailable) {
+      return;
+    }
+    if (keepPreviousColumns) {
+      (0, _utils.getInitialColumns)(columns, props.getPivotDerivedColumns, apiRef.current.getLocaleText).forEach(col => {
+        nonPivotDataRef.current.columns.set(col.field, col);
+      });
+    } else {
+      nonPivotDataRef.current.columns = (0, _utils.getInitialColumns)(columns, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
+    }
+    apiRef.current.setState(state => {
+      return (0, _extends2.default)({}, state, {
+        pivoting: (0, _extends2.default)({}, state.pivoting, computePivotingState(state.pivoting), {
+          initialColumns: nonPivotDataRef.current?.columns
+        })
+      });
+    });
+  }, [isPivotingAvailable, apiRef, props.getPivotDerivedColumns, computePivotingState]);
+  const updateNonPivotRows = React.useCallback((rows, keepPreviousRows = true) => {
+    if (!nonPivotDataRef.current || !rows || rows.length === 0) {
+      return;
+    }
+    if (keepPreviousRows) {
+      const rowsMap = new Map();
+      nonPivotDataRef.current.rows.forEach(row => {
+        rowsMap.set((0, _xDataGridPro.gridRowIdSelector)(apiRef, row), row);
+      });
+      rows.forEach(row => {
+        const rowId = (0, _xDataGridPro.gridRowIdSelector)(apiRef, row);
+        // eslint-disable-next-line no-underscore-dangle
+        if (row._action === 'delete') {
+          rowsMap.delete(rowId);
+        } else {
+          rowsMap.set(rowId, row);
+        }
+      });
+      nonPivotDataRef.current.rows = Array.from(rowsMap.values());
+    } else {
+      nonPivotDataRef.current.rows = rows;
+    }
+    apiRef.current.setState(state => {
+      return (0, _extends2.default)({}, state, {
+        pivoting: (0, _extends2.default)({}, state.pivoting, computePivotingState(state.pivoting))
+      });
+    });
+  }, [apiRef, computePivotingState]);
+  (0, _internals.useGridApiMethod)(apiRef, {
+    setPivotModel,
+    setPivotActive,
+    setPivotPanelOpen
+  }, 'public');
+  (0, _internals.useGridApiMethod)(apiRef, {
+    updatePivotModel,
+    updateNonPivotColumns,
+    updateNonPivotRows
+  }, 'private');
+  (0, _useEnhancedEffect.default)(() => {
+    apiRef.current.updateNonPivotColumns(originalColumnsProp, false);
+  }, [originalColumnsProp, apiRef]);
+  (0, _useEnhancedEffect.default)(() => {
+    apiRef.current.updateNonPivotRows(originalRowsProp, false);
+  }, [originalRowsProp, apiRef]);
+  (0, _useEnhancedEffect.default)(() => {
+    if (props.pivotModel !== undefined) {
+      apiRef.current.setPivotModel(props.pivotModel);
+    }
+  }, [apiRef, props.pivotModel]);
+  (0, _useEnhancedEffect.default)(() => {
+    if (props.pivotActive !== undefined) {
+      apiRef.current.setPivotActive(props.pivotActive);
+    }
+  }, [apiRef, props.pivotActive]);
+  (0, _useEnhancedEffect.default)(() => {
+    if (props.pivotPanelOpen !== undefined) {
+      apiRef.current.setPivotPanelOpen(props.pivotPanelOpen);
+    }
+  }, [apiRef, props.pivotPanelOpen]);
+};
+exports.useGridPivoting = useGridPivoting;

package/hooks/features/pivoting/utils.d.ts

@@ -0,0 +1,21 @@
+import { GridColDef, GridRowModel, GridLocaleTextApi } from '@mui/x-data-grid-pro';
+import type { RefObject } from '@mui/x-internals/types';
+import type { DataGridPremiumProcessedProps } from '../../../models/dataGridPremiumProps';
+import type { GridApiPremium } from '../../../models/gridApiPremium';
+import type { GridPivotingPropsOverrides, GridPivotModel } from './gridPivotingInterfaces';
+export declare const isPivotingAvailable: (props: Pick<DataGridPremiumProcessedProps, "disablePivoting">) => boolean;
+export declare const defaultGetPivotDerivedColumns: DataGridPremiumProcessedProps['getPivotDerivedColumns'];
+export declare const getInitialColumns: (originalColumns: DataGridPremiumProcessedProps["columns"], getPivotDerivedColumns: DataGridPremiumProcessedProps["getPivotDerivedColumns"], getLocaleText: GridLocaleTextApi["getLocaleText"]) => Map<string, GridColDef>;
+export declare const getPivotedData: ({
+  rows,
+  columns,
+  pivotModel,
+  apiRef,
+  pivotingColDef
+}: {
+  rows: GridRowModel[];
+  columns: Map<string, GridColDef>;
+  pivotModel: GridPivotModel;
+  apiRef: RefObject<GridApiPremium>;
+  pivotingColDef: DataGridPremiumProcessedProps["pivotingColDef"];
+}) => GridPivotingPropsOverrides;

package/hooks/features/pivoting/utils.js

@@ -0,0 +1,270 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isPivotingAvailable = exports.getPivotedData = exports.getInitialColumns = exports.defaultGetPivotDerivedColumns = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+var _internals = require("@mui/x-data-grid-pro/internals");
+var _rowGrouping = require("../rowGrouping");
+const columnGroupIdSeparator = '>->';
+const isPivotingAvailable = props => {
+  return !props.disablePivoting;
+};
+exports.isPivotingAvailable = isPivotingAvailable;
+const defaultGetPivotDerivedColumns = (column, getLocaleText) => {
+  if (column.type === 'date') {
+    const field = column.field;
+    return [{
+      // String column type to avoid formatting the value as 2,025 instead of 2025
+      field: `${field}-year`,
+      headerName: `${column.headerName} ${getLocaleText('pivotYearColumnHeaderName')}`,
+      valueGetter: (value, row) => new Date(row[field]).getFullYear()
+    }, {
+      field: `${field}-quarter`,
+      headerName: `${column.headerName} ${getLocaleText('pivotQuarterColumnHeaderName')}`,
+      valueGetter: (value, row) => `Q${Math.floor(new Date(row[field]).getMonth() / 3) + 1}`
+    }];
+  }
+  return undefined;
+};
+exports.defaultGetPivotDerivedColumns = defaultGetPivotDerivedColumns;
+const getInitialColumns = (originalColumns, getPivotDerivedColumns, getLocaleText) => {
+  const initialColumns = new Map();
+  for (let i = 0; i < originalColumns.length; i += 1) {
+    const originalColumn = originalColumns[i];
+    const column = (0, _extends2.default)({}, (0, _internals.getDefaultColTypeDef)(originalColumn.type), originalColumn);
+    const field = column.field;
+    if (!(0, _rowGrouping.isGroupingColumn)(field)) {
+      initialColumns.set(field, column);
+      const derivedColumns = getPivotDerivedColumns?.(column, getLocaleText);
+      if (derivedColumns) {
+        derivedColumns.forEach(col => initialColumns.set(col.field, col));
+      }
+    }
+  }
+  return initialColumns;
+};
+exports.getInitialColumns = getInitialColumns;
+function sortColumnGroups(columnGroups, pivotModelColumns, depth = 0) {
+  if (depth > pivotModelColumns.length - 1) {
+    return;
+  }
+  const sort = pivotModelColumns[depth].sort;
+  columnGroups.sort((a, b) => {
+    if ((0, _xDataGridPro.isLeaf)(a) || (0, _xDataGridPro.isLeaf)(b)) {
+      return 0;
+    }
+    if (a.children) {
+      sortColumnGroups(a.children, pivotModelColumns, depth + 1);
+    }
+    if (b.children) {
+      sortColumnGroups(b.children, pivotModelColumns, depth + 1);
+    }
+    if (sort === undefined) {
+      return 0;
+    }
+    return (sort === 'asc' ? 1 : -1) * (0, _xDataGridPro.gridStringOrNumberComparator)(a.headerName, b.headerName, {}, {});
+  });
+}
+const getPivotedData = ({
+  rows,
+  columns,
+  pivotModel,
+  apiRef,
+  pivotingColDef
+}) => {
+  const visibleColumns = pivotModel.columns.filter(column => !column.hidden);
+  const visibleRows = pivotModel.rows.filter(row => !row.hidden);
+  const visibleValues = pivotModel.values.filter(value => !value.hidden);
+  let pivotColumns = [];
+  const columnVisibilityModel = {};
+  const pivotColumnsIncludedInPivotValues = [];
+  const initialColumns = new Map();
+  for (const column of columns.values()) {
+    if (!(0, _rowGrouping.isGroupingColumn)(column.field)) {
+      initialColumns.set(column.field, column);
+      const pivotValueIndex = visibleValues.findIndex(({
+        field
+      }) => field === column.field);
+      const isVisiblePivotValueField = pivotValueIndex !== -1;
+      const columnToAdd = (0, _extends2.default)({}, column, {
+        aggregable: false,
+        groupable: false,
+        hideable: false,
+        editable: false,
+        disableReorder: true
+      });
+      if (isVisiblePivotValueField) {
+        // Store columns that are used as pivot values in a temporary array to keep them in the same order as in pivotModel.values, not in the order of the initial columns.
+        // `pivotColumnsIncludedInPivotValues` is concatenated to pivotColumns later.
+        pivotColumnsIncludedInPivotValues[pivotValueIndex] = columnToAdd;
+      } else {
+        pivotColumns.push(columnToAdd);
+      }
+      columnVisibilityModel[column.field] = false;
+    }
+  }
+  pivotColumns = pivotColumns.concat(pivotColumnsIncludedInPivotValues);
+  const getAttributesFromInitialColumn = field => {
+    const initialColumn = initialColumns.get(field);
+    if (!initialColumn) {
+      return undefined;
+    }
+    const attributes = {
+      width: initialColumn.width,
+      minWidth: initialColumn.minWidth,
+      maxWidth: initialColumn.maxWidth,
+      valueFormatter: initialColumn.valueFormatter,
+      headerName: initialColumn.headerName,
+      renderCell: initialColumn.renderCell,
+      display: initialColumn.display
+    };
+    return attributes;
+  };
+  const aggregationModel = {};
+  const columnGroupingModel = [];
+  const columnGroupingModelLookup = new Map();
+  let newRows = [];
+  if (visibleColumns.length === 0) {
+    newRows = rows;
+    visibleValues.forEach(pivotValue => {
+      aggregationModel[pivotValue.field] = pivotValue.aggFunc;
+      delete columnVisibilityModel[pivotValue.field];
+    });
+  } else {
+    for (let i = 0; i < rows.length; i += 1) {
+      const row = rows[i];
+      const newRow = (0, _extends2.default)({}, row);
+      const columnGroupPath = [];
+      visibleColumns.forEach(({
+        field: colGroupField
+      }, depth) => {
+        const column = initialColumns.get(colGroupField);
+        if (!column) {
+          return;
+        }
+        let colValue = apiRef.current.getRowValue(row, column) ?? '(No value)';
+        if (column.type === 'singleSelect') {
+          const singleSelectColumn = column;
+          if (singleSelectColumn.getOptionLabel) {
+            colValue = singleSelectColumn.getOptionLabel(colValue);
+          }
+        }
+        columnGroupPath.push(String(colValue));
+        const groupId = columnGroupPath.join(columnGroupIdSeparator);
+        if (!columnGroupingModelLookup.has(groupId)) {
+          const columnGroup = {
+            groupId,
+            headerName: String(colValue),
+            children: []
+          };
+          columnGroupingModelLookup.set(groupId, columnGroup);
+          if (depth === 0) {
+            columnGroupingModel.push(columnGroup);
+          } else {
+            const parentGroupId = columnGroupPath.slice(0, -1).join(columnGroupIdSeparator);
+            const parentGroup = columnGroupingModelLookup.get(parentGroupId);
+            if (parentGroup) {
+              parentGroup.children.push(columnGroup);
+            }
+          }
+        }
+        const isLastColumnGroupLevel = depth === visibleColumns.length - 1;
+        if (isLastColumnGroupLevel) {
+          visibleValues.forEach(pivotValue => {
+            const valueField = pivotValue.field;
+            const originalColumn = initialColumns.get(valueField);
+            if (!originalColumn) {
+              return;
+            }
+            const valueKey = `${columnGroupPath.join(columnGroupIdSeparator)}${columnGroupIdSeparator}${valueField}`;
+            newRow[valueKey] = apiRef.current.getRowValue(row, originalColumn);
+          });
+        }
+      });
+      newRows.push(newRow);
+    }
+    sortColumnGroups(columnGroupingModel, visibleColumns);
+  }
+  function createColumns(columnGroups, depth = 0) {
+    for (let i = 0; i < columnGroups.length; i += 1) {
+      const columnGroup = columnGroups[i];
+      if ((0, _xDataGridPro.isLeaf)(columnGroup)) {
+        continue;
+      }
+      const isLastColumnGroupLevel = depth === visibleColumns.length - 1;
+      if (isLastColumnGroupLevel) {
+        if (visibleValues.length === 0) {
+          // If there are no visible values, there are no actual columns added to the data grid, which leads to column groups not being visible.
+          // Adding an empty column to each column group ensures that the column groups are visible.
+          const emptyColumnField = `${columnGroup.groupId}${columnGroupIdSeparator}empty`;
+          const emptyColumn = {
+            field: emptyColumnField,
+            headerName: '',
+            sortable: false,
+            filterable: false,
+            groupable: false,
+            aggregable: false,
+            hideable: false,
+            disableColumnMenu: true
+          };
+          pivotColumns.push(emptyColumn);
+          if (columnGroup) {
+            columnGroup.children.push({
+              field: emptyColumnField
+            });
+          }
+        } else {
+          visibleValues.forEach(pivotValue => {
+            const valueField = pivotValue.field;
+            const mapValueKey = `${columnGroup.groupId}${columnGroupIdSeparator}${valueField}`;
+            const overrides = typeof pivotingColDef === 'function' ? pivotingColDef(valueField, columnGroup.groupId.split(columnGroupIdSeparator)) : pivotingColDef;
+            const column = (0, _extends2.default)({
+              headerName: String(valueField)
+            }, getAttributesFromInitialColumn(pivotValue.field), overrides, {
+              field: mapValueKey,
+              aggregable: false,
+              groupable: false,
+              filterable: false,
+              hideable: false,
+              editable: false,
+              disableReorder: true,
+              availableAggregationFunctions: [pivotValue.aggFunc]
+            });
+            pivotColumns.push(column);
+            aggregationModel[mapValueKey] = pivotValue.aggFunc;
+            if (columnGroup) {
+              columnGroup.children.push({
+                field: mapValueKey
+              });
+            }
+          });
+        }
+      } else {
+        createColumns(columnGroup.children, depth + 1);
+      }
+    }
+  }
+  createColumns(columnGroupingModel);
+  return {
+    rows: visibleRows.length > 0 ? newRows : [],
+    columns: pivotColumns,
+    rowGroupingModel: visibleRows.map(row => row.field),
+    aggregationModel,
+    getAggregationPosition: groupNode => groupNode.depth === -1 ? 'footer' : 'inline',
+    columnVisibilityModel,
+    columnGroupingModel,
+    groupingColDef: {
+      filterable: false,
+      aggregable: false,
+      hideable: false
+    },
+    headerFilters: false,
+    disableAggregation: false,
+    disableRowGrouping: false
+  };
+};
+exports.getPivotedData = getPivotedData;

package/hooks/features/rowGrouping/useGridDataSourceRowGroupingPreProcessors.js

@@ -29,10 +29,7 @@ const useGridDataSourceRowGroupingPreProcessors = (apiRef, props) => {
     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]);
+      const leafKey = getGroupKey(params.dataRowIdToModelLookup[rowId]);
       return {
         id: rowId,
         path: [...parentPath, leafKey ?? rowId.toString()].map((key, i) => ({

package/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -175,10 +175,9 @@ const useGridRowGrouping = (apiRef, props) => {
       }
     }
   }, [apiRef, props.disableRowGrouping]);
-  (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'cellKeyDown', handleCellKeyDown);
-  (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
-  (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
-  (0, _xDataGridPro.useGridApiEventHandler)(apiRef, 'rowGroupingModelChange', () => apiRef.current.dataSource.fetchRows());
+  (0, _xDataGridPro.useGridEvent)(apiRef, 'cellKeyDown', handleCellKeyDown);
+  (0, _xDataGridPro.useGridEvent)(apiRef, 'columnsChange', checkGroupingColumnsModelDiff);
+  (0, _xDataGridPro.useGridEvent)(apiRef, 'rowGroupingModelChange', checkGroupingColumnsModelDiff);
 
   /*
    * EFFECTS

package/hooks/utils/useResize.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export type ResizeDirection = 'horizontal' | 'vertical';
+export declare const useResize: <TElement extends HTMLDivElement>(options: {
+  getInitialSize: (handleElement: TElement) => number;
+  onSizeChange: (newSize: number, handleElement: TElement) => void;
+  direction?: ResizeDirection;
+}) => {
+  ref: React.RefObject<TElement | null>;
+};