@mui/x-data-grid-premium 8.13.1 → 8.14.0

package/esm/hooks/features/dataSource/utils.js

@@ -0,0 +1,140 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { gridStringOrNumberComparator } from '@mui/x-data-grid-pro';
+export const getPropsOverrides = (pivotColumns, pivotingColDef, pivotModel, initialColumns, apiRef) => {
+  const visiblePivotColumns = pivotModel.columns.filter(column => !column.hidden);
+  const visiblePivotValues = pivotModel.values.filter(value => !value.hidden);
+  const columns = Array.from(initialColumns.values());
+
+  // Build column grouping model from pivot column paths
+  const columnGroupingModel = [];
+  const columnGroupingModelLookup = new Map();
+
+  // Build new columns lookup and ordered fields
+  const newColumns = {};
+
+  // Build aggregation model
+  const aggregationModel = {};
+
+  // Create unique combinations of all values from pivotColumns and pivotValues
+  const uniquePaths = [];
+  const processPath = (currentPath, remainingColumns, level) => {
+    if (level === visiblePivotColumns.length) {
+      uniquePaths.push([...currentPath]);
+      return;
+    }
+    remainingColumns.forEach(column => {
+      processPath([...currentPath, {
+        key: column.key,
+        field: visiblePivotColumns[level].field,
+        value: column.group
+      }], column.children || [], level + 1);
+    });
+  };
+  processPath([], pivotColumns, 0);
+
+  /**
+   * Column group headers are sorted by the leaf columns order in the column definition.
+   * Store the values of each column group path to be able to sort them by pivot column sort order.
+   * The values are stored by the column group level which allows easier sorting by going through the column group levels in reverse order.
+   * Store raw value to be able to determine if the value was formatted on the client using `getRowValue`.
+   * Values sent from the server as strings will not be sorted on the client.
+   */
+  const columnGroupPathValues = [];
+  uniquePaths.forEach(columnPath => {
+    const columnPathKeys = columnPath.map(path => path.key);
+    const columnPathValues = columnPath.map(path => path.value);
+    visiblePivotValues.forEach(pivotValue => {
+      // Find the original column definition for the last field
+      const originalColumn = initialColumns.get(pivotValue.field);
+      // get the overrides defined from the data source definition
+      const overrides = pivotingColDef(pivotValue.field, columnPathKeys);
+
+      // Create new column definition based on original column
+      const newColumnDef = _extends({}, originalColumn, overrides, {
+        aggregable: false,
+        groupable: false,
+        filterable: false,
+        hideable: false,
+        editable: false,
+        disableReorder: true
+      });
+      const pivotFieldName = newColumnDef.field;
+      newColumns[pivotFieldName] = newColumnDef;
+      aggregationModel[pivotFieldName] = pivotValue.aggFunc;
+
+      // Build column grouping model
+      const combinedPathValues = [...columnPathValues, pivotValue.field].map((path, index) => typeof path === 'string' ? path : apiRef.current.getRowValue(path, initialColumns.get(visiblePivotColumns[index].field)));
+      columnGroupPathValues.push({
+        field: pivotFieldName,
+        pathValues: combinedPathValues.slice(0, -1),
+        pathValuesRaw: columnPathValues
+      });
+
+      // Build the hierarchy for column groups
+      for (let i = 0; i < combinedPathValues.length - 1; i += 1) {
+        const currentField = visiblePivotColumns[i].field;
+        const groupPath = combinedPathValues.slice(0, i + 1);
+        const groupId = groupPath.join('-');
+        let headerName = columnPathValues[groupPath.length - 1];
+        if (typeof headerName !== 'string') {
+          headerName = apiRef.current.getRowFormattedValue(headerName, initialColumns.get(currentField));
+        }
+        if (typeof headerName === 'number') {
+          headerName = String(headerName);
+        }
+        if (typeof headerName !== 'string') {
+          throw new Error(`MUI X: Header name for a column group based on ${currentField} cannot be converted to a string.`);
+        }
+        if (!columnGroupingModelLookup.has(groupId)) {
+          const columnGroup = {
+            groupId,
+            headerName,
+            children: []
+          };
+          columnGroupingModelLookup.set(groupId, columnGroup);
+          if (i === 0) {
+            columnGroupingModel.push(columnGroup);
+          } else {
+            const parentGroupId = groupPath.slice(0, -1).join('-');
+            const parentGroup = columnGroupingModelLookup.get(parentGroupId);
+            if (parentGroup) {
+              parentGroup.children.push(columnGroup);
+            }
+          }
+        }
+      }
+
+      // Add the final column to the appropriate group
+      const parentGroupId = combinedPathValues.slice(0, -1).join('-');
+      const parentGroup = columnGroupingModelLookup.get(parentGroupId);
+      if (parentGroup) {
+        parentGroup.children.push({
+          field: pivotFieldName
+        });
+      }
+    });
+  });
+  for (let i = visiblePivotColumns.length - 1; i >= 0; i -= 1) {
+    const sort = visiblePivotColumns[i].sort;
+    if (!sort) {
+      continue;
+    }
+    columnGroupPathValues.sort((a, b) => {
+      // Do not sort values that are returned as strings
+      if (typeof a.pathValuesRaw[i] === 'string' && typeof b.pathValuesRaw[i] === 'string') {
+        return 0;
+      }
+      return (sort === 'asc' ? 1 : -1) * gridStringOrNumberComparator(a.pathValues[i], b.pathValues[i], {}, {});
+    });
+  }
+  if (visiblePivotColumns.length > 0) {
+    for (let i = 0; i < columnGroupPathValues.length; i += 1) {
+      columns.push(newColumns[columnGroupPathValues[i].field]);
+    }
+  }
+  return {
+    columns,
+    columnGroupingModel,
+    aggregationModel
+  };
+};

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

@@ -3,4 +3,5 @@ export * from "./rowGrouping/index.js";
 export * from "./export/index.js";
 export * from "./cellSelection/index.js";
 export * from "./aiAssistant/index.js";
-export * from "./sidebar/index.js";
+export * from "./sidebar/index.js";
+export * from "./pivoting/index.js";

package/esm/hooks/features/index.js

@@ -4,4 +4,5 @@ export * from "./rowGrouping/index.js";
 export * from "./export/index.js";
 export * from "./cellSelection/index.js";
 export * from "./aiAssistant/index.js";
-export * from "./sidebar/index.js";
+export * from "./sidebar/index.js";
+export * from "./pivoting/index.js";

package/esm/hooks/features/pivoting/gridPivotingInterfaces.d.ts

@@ -3,22 +3,25 @@ import type { GridPivotingPrivateApiCommunity, GridPivotingStatePartial } from '
 import type { RefObject } from '@mui/x-internals/types';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 import type { GridInitialStatePremium } from "../../../models/gridStatePremium.js";
-export type GridPivotingPropsOverrides = {
-  rows: DataGridPremiumProcessedProps['rows'];
+export type GridPivotingStaticPropsOverrides = {
+  rowGroupingModel: DataGridPremiumProcessedProps['rowGroupingModel'];
+  getAggregationPosition: DataGridPremiumProcessedProps['getAggregationPosition'];
+  columnVisibilityModel: DataGridPremiumProcessedProps['columnVisibilityModel'];
+  groupingColDef: DataGridPremiumProcessedProps['groupingColDef'];
+  headerFilters: DataGridPremiumProcessedProps['headerFilters'];
+  disableAggregation: DataGridPremiumProcessedProps['disableAggregation'];
+  disableRowGrouping: DataGridPremiumProcessedProps['disableRowGrouping'];
+};
+export type GridPivotingDynamicPropsOverrides = {
+  rows?: DataGridPremiumProcessedProps['rows'];
   columns: DataGridPremiumProcessedProps['columns'];
-  rowGroupingModel: NonNullable<DataGridPremiumProcessedProps['rowGroupingModel']>;
-  aggregationModel: NonNullable<DataGridPremiumProcessedProps['aggregationModel']>;
-  getAggregationPosition: NonNullable<DataGridPremiumProcessedProps['getAggregationPosition']>;
-  columnVisibilityModel: NonNullable<DataGridPremiumProcessedProps['columnVisibilityModel']>;
-  columnGroupingModel: NonNullable<DataGridPremiumProcessedProps['columnGroupingModel']>;
-  groupingColDef: NonNullable<DataGridPremiumProcessedProps['groupingColDef']>;
-  headerFilters: NonNullable<DataGridPremiumProcessedProps['headerFilters']>;
-  disableAggregation: NonNullable<DataGridPremiumProcessedProps['disableAggregation']>;
-  disableRowGrouping: NonNullable<DataGridPremiumProcessedProps['disableRowGrouping']>;
+  aggregationModel: DataGridPremiumProcessedProps['aggregationModel'];
+  columnGroupingModel: DataGridPremiumProcessedProps['columnGroupingModel'];
 };
+export type GridPivotingPropsOverrides = GridPivotingStaticPropsOverrides & GridPivotingDynamicPropsOverrides;
 export interface GridPivotingState extends GridPivotingStatePartial {
   model: GridPivotModel;
-  propsOverrides: GridPivotingPropsOverrides | undefined;
+  propsOverrides: GridPivotingPropsOverrides | GridPivotingStaticPropsOverrides | {} | undefined;
 }
 export interface GridPivotingInitialState {
   model?: GridPivotModel;
@@ -73,7 +76,14 @@ export interface GridPivotingPrivateApi extends GridPivotingPrivateApiCommunity
     targetFieldPosition?: DropPosition;
   }) => void;
 }
-export type GridPivotingColDefOverrides = Pick<GridColDef, 'width' | 'flex' | 'headerName' | 'description' | 'align' | 'headerAlign' | 'cellClassName' | 'headerClassName' | 'display' | 'maxWidth' | 'minWidth' | 'resizable' | 'sortingOrder'>;
+export type GridPivotingColDefOverrides = Pick<GridColDef, 'field' | 'width' | 'flex' | 'headerName' | 'description' | 'align' | 'headerAlign' | 'cellClassName' | 'headerClassName' | 'display' | 'maxWidth' | 'minWidth' | 'resizable' | 'sortingOrder'>;
+/**
+ * The column definition overrides callback for the columns generated by the pivoting feature.
+ * @param {string} originalColumnField The field of the original column.
+ * @param {string[]} columnGroupPath The path of the column groups the column belongs to.
+ * @returns {Partial<GridPivotingColDefOverrides> | undefined | void} The column definition overrides.
+ */
+export type PivotingColDefCallback = (originalColumnField: GridColDef['field'], columnGroupPath: string[]) => Partial<GridPivotingColDefOverrides> | undefined;
 export interface GridPivotingInternalCache {
   nonPivotDataRef: RefObject<{
     rows: GridRowModel[];

package/esm/hooks/features/pivoting/gridPivotingSelectors.d.ts

@@ -7,5 +7,5 @@ export declare const gridPivotModelSelector: (args_0: import("react").RefObject<
 } | null>) => import("./gridPivotingInterfaces.js").GridPivotModel;
 export declare const gridPivotPropsOverridesSelector: (args_0: import("react").RefObject<{
   state: GridStatePremium;
-} | null>) => import("./gridPivotingInterfaces.js").GridPivotingPropsOverrides | undefined;
+} | null>) => {} | undefined;
 export { gridPivotActiveSelector, gridPivotInitialColumnsSelector } from '@mui/x-data-grid/internals';

package/esm/hooks/features/pivoting/index.d.ts

@@ -0,0 +1 @@
+export { gridPivotModelSelector } from "./gridPivotingSelectors.js";

package/esm/hooks/features/pivoting/index.js

@@ -0,0 +1 @@
+export { gridPivotModelSelector } from "./gridPivotingSelectors.js";

package/esm/hooks/features/pivoting/useGridPivoting.d.ts

@@ -4,5 +4,5 @@ import { GridStateInitializer } from '@mui/x-data-grid-pro/internals';
 import type { DataGridPremiumProcessedProps } from "../../../models/dataGridPremiumProps.js";
 import { GridPrivateApiPremium } from "../../../models/gridApiPremium.js";
 export declare const pivotingStateInitializer: GridStateInitializer<Pick<DataGridPremiumProcessedProps, 'pivotActive' | 'pivotModel' | 'pivotPanelOpen' | 'initialState' | 'disablePivoting' | 'getPivotDerivedColumns' | 'columns'>, GridPrivateApiPremium>;
-export declare const useGridPivoting: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pivotActive" | "onPivotActiveChange" | "pivotModel" | "onPivotModelChange" | "pivotPanelOpen" | "onPivotPanelOpenChange" | "disablePivoting" | "getPivotDerivedColumns" | "pivotingColDef" | "groupingColDef" | "aggregationFunctions">, originalColumnsProp: readonly GridColDef[], originalRowsProp: readonly GridRowModel[]) => void;
+export declare const useGridPivoting: (apiRef: RefObject<GridPrivateApiPremium>, props: Pick<DataGridPremiumProcessedProps, "pivotActive" | "onPivotActiveChange" | "pivotModel" | "onPivotModelChange" | "pivotPanelOpen" | "onPivotPanelOpenChange" | "disablePivoting" | "getPivotDerivedColumns" | "pivotingColDef" | "groupingColDef" | "aggregationFunctions" | "loading" | "dataSource">, originalColumnsProp: readonly GridColDef[], originalRowsProp: readonly GridRowModel[]) => void;
 export declare const useGridPivotingExportState: (apiRef: RefObject<GridPrivateApiPremium>) => void;

package/esm/hooks/features/pivoting/useGridPivoting.js

@@ -6,7 +6,7 @@ import useOnMount from '@mui/utils/useOnMount';
 import { useGridApiMethod, useGridRegisterPipeProcessor, useGridSelector, gridPivotInitialColumnsSelector } from '@mui/x-data-grid-pro/internals';
 import { GridPivotPanel } from "../../../components/pivotPanel/index.js";
 import { gridPivotModelSelector, gridPivotActiveSelector, gridPivotPanelOpenSelector } from "./gridPivotingSelectors.js";
-import { getInitialColumns, getPivotedData, isPivotingAvailable as isPivotingAvailableFn } from "./utils.js";
+import { getInitialColumns, getPivotForcedProps, createPivotPropsFromRows } from "./utils.js";
 import { getAvailableAggregationFunctions } from "../aggregation/gridAggregationUtils.js";
 import { GridSidebarValue } from "../sidebar/index.js";
 import { jsx as _jsx } from "react/jsx-runtime";
@@ -24,7 +24,7 @@ export const pivotingStateInitializer = (state, props, apiRef) => {
       current: undefined
     }
   };
-  if (!isPivotingAvailableFn(props)) {
+  if (props.disablePivoting) {
     return _extends({}, state, {
       pivoting: {
         active: false,
@@ -49,11 +49,12 @@ export const pivotingStateInitializer = (state, props, apiRef) => {
 };
 export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRowsProp) => {
   const isPivotActive = useGridSelector(apiRef, gridPivotActiveSelector);
+  const isLoading = props.loading ?? gridRowsLoadingSelector(apiRef);
   const {
     exportedStateRef,
     nonPivotDataRef
   } = apiRef.current.caches.pivoting;
-  const isPivotingAvailable = isPivotingAvailableFn(props);
+  const isPivotingAvailable = !props.disablePivoting;
   apiRef.current.registerControlState({
     stateId: 'pivotModel',
     propModel: props.pivotModel,
@@ -79,16 +80,19 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
     if (!exportedStateRef.current) {
       exportedStateRef.current = apiRef.current.exportState();
     }
-    const rowIds = gridDataRowIdsSelector(apiRef);
-    const rowsLookup = gridRowsLookupSelector(apiRef);
-    const rows = rowIds.map(id => rowsLookup[id]);
+    let rows = [];
+    if (!props.dataSource) {
+      const rowIds = gridDataRowIdsSelector(apiRef);
+      const rowsLookup = gridRowsLookupSelector(apiRef);
+      rows = rowIds.map(id => rowsLookup[id]);
+    }
     const initialColumns = getInitialColumns(originalColumnsProp, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
     return {
       rows,
       columns: initialColumns,
       originalRowsProp
     };
-  }, [apiRef, props.getPivotDerivedColumns, originalColumnsProp, originalRowsProp, exportedStateRef]);
+  }, [apiRef, props.getPivotDerivedColumns, originalColumnsProp, originalRowsProp, exportedStateRef, props.dataSource]);
   const computePivotingState = React.useCallback(({
     active,
     model: pivotModel
@@ -101,32 +105,39 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
         rows: [],
         columns: new Map()
       };
-      return {
-        initialColumns: columns,
-        // TODO: fix getPivotedData called twice in controlled mode
-        propsOverrides: getPivotedData({
+      let propsOverrides = getPivotForcedProps(pivotModel, columns, props.groupingColDef);
+
+      // without data source, add more props overrides based on the data
+      if (!isLoading && !props.dataSource) {
+        propsOverrides = _extends({}, propsOverrides, createPivotPropsFromRows({
           rows,
           columns,
           pivotModel,
-          apiRef: apiRef,
           pivotingColDef: props.pivotingColDef,
-          groupingColDef: props.groupingColDef
-        })
+          apiRef
+        }));
+      }
+      return {
+        initialColumns: columns,
+        propsOverrides
       };
     }
-    return undefined;
-  }, [apiRef, props.pivotingColDef, props.groupingColDef, nonPivotDataRef]);
+    return {};
+  }, [apiRef, isLoading, props.dataSource, props.pivotingColDef, props.groupingColDef, nonPivotDataRef]);
   useOnMount(() => {
     if (!isPivotingAvailable || !isPivotActive) {
       return undefined;
     }
     nonPivotDataRef.current = getInitialData();
-    const isLoading = gridRowsLoadingSelector(apiRef) ?? false;
-    if (isLoading) {
-      return undefined;
-    }
     apiRef.current.setState(state => {
-      const pivotingState = _extends({}, state.pivoting, computePivotingState(state.pivoting));
+      const {
+        initialColumns,
+        propsOverrides
+      } = computePivotingState(state.pivoting);
+      const pivotingState = _extends({}, state.pivoting, {
+        initialColumns: initialColumns || state.pivoting.initialColumns,
+        propsOverrides: _extends({}, state.pivoting.propsOverrides, propsOverrides)
+      });
       return _extends({}, state, {
         pivoting: pivotingState
       });
@@ -156,9 +167,15 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
       if (state.pivoting?.model === newPivotModel) {
         return state;
       }
-      const newPivotingState = _extends({}, state.pivoting, computePivotingState(_extends({}, state.pivoting, {
+      const {
+        initialColumns,
+        propsOverrides
+      } = computePivotingState(_extends({}, state.pivoting, {
         model: newPivotModel
-      })), {
+      }));
+      const newPivotingState = _extends({}, state.pivoting, {
+        initialColumns: initialColumns || state.pivoting.initialColumns,
+        propsOverrides: _extends({}, state.pivoting.propsOverrides, propsOverrides),
         model: newPivotModel
       });
       return _extends({}, state, {
@@ -198,7 +215,7 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
           const aggFunc = isSameSection ? prev.values.find(item => item.field === field)?.aggFunc : getAvailableAggregationFunctions({
             aggregationFunctions: props.aggregationFunctions,
             colDef: initialColumns.get(field),
-            isDataSource: false
+            isDataSource: !!props.dataSource
           })[0];
           newSectionArray.splice(toIndex, 0, {
             field,
@@ -227,7 +244,7 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
       }
       return newModel;
     });
-  }, [apiRef, props.aggregationFunctions]);
+  }, [apiRef, props.aggregationFunctions, props.dataSource]);
   const setPivotActive = React.useCallback(callback => {
     if (!isPivotingAvailable) {
       return;
@@ -240,9 +257,15 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
       if (newPivotMode) {
         nonPivotDataRef.current = getInitialData();
       }
-      const newPivotingState = _extends({}, state.pivoting, computePivotingState(_extends({}, state.pivoting, {
+      const {
+        initialColumns,
+        propsOverrides
+      } = computePivotingState(_extends({}, state.pivoting, {
         active: newPivotMode
-      })), {
+      }));
+      const newPivotingState = _extends({}, state.pivoting, {
+        initialColumns: initialColumns || state.pivoting.initialColumns,
+        propsOverrides: _extends({}, state.pivoting.propsOverrides, propsOverrides),
         active: newPivotMode
       });
       const newState = _extends({}, state, {
@@ -286,15 +309,19 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
       nonPivotDataRef.current.columns = getInitialColumns(columns, props.getPivotDerivedColumns, apiRef.current.getLocaleText);
     }
     apiRef.current.setState(state => {
+      const {
+        propsOverrides
+      } = computePivotingState(state.pivoting);
       return _extends({}, state, {
-        pivoting: _extends({}, state.pivoting, computePivotingState(state.pivoting), {
-          initialColumns: nonPivotDataRef.current?.columns
+        pivoting: _extends({}, state.pivoting, {
+          initialColumns: nonPivotDataRef.current?.columns,
+          propsOverrides: _extends({}, state.pivoting.propsOverrides, propsOverrides)
         })
       });
     });
   }, [isPivotingAvailable, apiRef, props.getPivotDerivedColumns, computePivotingState, nonPivotDataRef]);
   const updateNonPivotRows = React.useCallback((rows, keepPreviousRows = true) => {
-    if (!nonPivotDataRef.current || !isPivotingAvailable || !rows || rows.length === 0) {
+    if (!nonPivotDataRef.current || props.dataSource || !isPivotingAvailable || !rows || rows.length === 0) {
       return;
     }
     if (keepPreviousRows) {
@@ -316,18 +343,42 @@ export const useGridPivoting = (apiRef, props, originalColumnsProp, originalRows
       nonPivotDataRef.current.rows = rows;
     }
     apiRef.current.setState(state => {
+      const {
+        initialColumns,
+        propsOverrides
+      } = computePivotingState(state.pivoting);
       return _extends({}, state, {
-        pivoting: _extends({}, state.pivoting, computePivotingState(state.pivoting))
+        pivoting: _extends({}, state.pivoting, {
+          initialColumns: initialColumns || state.pivoting.initialColumns,
+          propsOverrides: _extends({}, state.pivoting.propsOverrides, propsOverrides)
+        })
       });
     });
-  }, [apiRef, computePivotingState, isPivotingAvailable, nonPivotDataRef]);
+  }, [apiRef, computePivotingState, isPivotingAvailable, nonPivotDataRef, props.dataSource]);
   const addPivotingPanel = React.useCallback((initialValue, value) => {
     if (isPivotingAvailable && value === GridSidebarValue.Pivot) {
       return /*#__PURE__*/_jsx(GridPivotPanel, {});
     }
     return initialValue;
   }, [isPivotingAvailable]);
+  const addGetRowsParams = React.useCallback(params => {
+    if (!isPivotingAvailable || !isPivotActive) {
+      return params;
+    }
+    const pivotModel = gridPivotModelSelector(apiRef);
+    const visibleColumns = pivotModel.columns.filter(column => !column.hidden);
+    const visibleRows = pivotModel.rows.filter(row => !row.hidden);
+    const visibleValues = pivotModel.values.filter(value => !value.hidden);
+    return _extends({}, params, {
+      pivotModel: {
+        columns: visibleColumns,
+        rows: visibleRows,
+        values: visibleValues
+      }
+    });
+  }, [apiRef, isPivotingAvailable, isPivotActive]);
   useGridRegisterPipeProcessor(apiRef, 'sidebar', addPivotingPanel);
+  useGridRegisterPipeProcessor(apiRef, 'getRowsParams', addGetRowsParams);
   useGridApiMethod(apiRef, {
     setPivotModel,
     setPivotActive,

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

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

package/esm/hooks/features/pivoting/utils.js

@@ -4,9 +4,6 @@ import { getDefaultColTypeDef } from '@mui/x-data-grid-pro/internals';
 import { COLUMN_GROUP_ID_SEPARATOR } from "../../../constants/columnGroups.js";
 import { isGroupingColumn } from "../rowGrouping/index.js";
 import { defaultGetAggregationPosition } from "../aggregation/gridAggregationUtils.js";
-export const isPivotingAvailable = props => {
-  return !props.disablePivoting;
-};
 export const defaultGetPivotDerivedColumns = (column, getLocaleText) => {
   if (column.type === 'date') {
     const field = column.field;
@@ -39,11 +36,17 @@ export const getInitialColumns = (originalColumns, getPivotDerivedColumns, getLo
   }
   return initialColumns;
 };
-function sortColumnGroups(columnGroups, pivotModelColumns, depth = 0) {
+const sortColumnGroups = (columnGroups, pivotModelColumns, depth = 0) => {
   if (depth > pivotModelColumns.length - 1) {
     return;
   }
   const sort = pivotModelColumns[depth].sort;
+  if (columnGroups.length < 2) {
+    if (columnGroups[0]?.children) {
+      sortColumnGroups(columnGroups[0].children, pivotModelColumns, depth + 1);
+    }
+    return;
+  }
   columnGroups.sort((a, b) => {
     if (isLeaf(a) || isLeaf(b)) {
       return 0;
@@ -59,20 +62,46 @@ function sortColumnGroups(columnGroups, pivotModelColumns, depth = 0) {
     }
     return (sort === 'asc' ? 1 : -1) * gridStringOrNumberComparator(a.rawHeaderName, b.rawHeaderName, {}, {});
   });
-}
-export const getPivotedData = ({
+};
+export const getPivotForcedProps = (pivotModel, columns, groupingColDef) => {
+  const visibleRows = pivotModel.rows.filter(row => !row.hidden);
+  const visibleColumns = pivotModel.columns.filter(column => !column.hidden);
+  const visibleValues = pivotModel.values.filter(value => !value.hidden);
+  const columnVisibilityModel = {};
+  for (const column of columns.values()) {
+    columnVisibilityModel[column.field] = false;
+  }
+  if (visibleColumns.length === 0) {
+    visibleValues.forEach(value => {
+      delete columnVisibilityModel[value.field];
+    });
+  }
+  const groupingColDefOverrides = params => _extends({}, typeof groupingColDef === 'function' ? groupingColDef(params) : groupingColDef || {}, {
+    filterable: false,
+    aggregable: false,
+    hideable: false
+  });
+  return {
+    columnVisibilityModel,
+    rowGroupingModel: visibleRows.map(row => row.field),
+    getAggregationPosition: defaultGetAggregationPosition,
+    groupingColDef: groupingColDefOverrides,
+    headerFilters: false,
+    disableAggregation: false,
+    disableRowGrouping: false
+  };
+};
+export const createPivotPropsFromRows = ({
   rows,
   columns,
   pivotModel,
-  apiRef,
   pivotingColDef,
-  groupingColDef
+  apiRef
 }) => {
   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()) {
@@ -96,7 +125,6 @@ export const getPivotedData = ({
       } else {
         pivotColumns.push(columnToAdd);
       }
-      columnVisibilityModel[column.field] = false;
     }
   }
   pivotColumns = pivotColumns.concat(pivotColumnsIncludedInPivotValues);
@@ -124,7 +152,6 @@ export const getPivotedData = ({
     newRows = rows;
     visibleValues.forEach(pivotValue => {
       aggregationModel[pivotValue.field] = pivotValue.aggFunc;
-      delete columnVisibilityModel[pivotValue.field];
     });
   } else {
     for (let i = 0; i < rows.length; i += 1) {
@@ -250,22 +277,10 @@ export const getPivotedData = ({
     }
   }
   createColumns(columnGroupingModel);
-  const groupingColDefOverrides = params => _extends({}, typeof groupingColDef === 'function' ? groupingColDef(params) : groupingColDef || {}, {
-    filterable: false,
-    aggregable: false,
-    hideable: false
-  });
   return {
     rows: visibleRows.length > 0 ? newRows : [],
     columns: pivotColumns,
-    rowGroupingModel: visibleRows.map(row => row.field),
-    aggregationModel,
-    getAggregationPosition: defaultGetAggregationPosition,
-    columnVisibilityModel,
     columnGroupingModel,
-    groupingColDef: groupingColDefOverrides,
-    headerFilters: false,
-    disableAggregation: false,
-    disableRowGrouping: false
+    aggregationModel
   };
 };

package/esm/hooks/features/rowGrouping/createGroupingColDef.js

@@ -83,7 +83,7 @@ function getGroupingCriteriaProperties(groupedByColDef, rowGroupingColumnMode, r
     valueFormatter = (value, row, column, apiRef) => {
       const rowId = gridRowIdSelector(apiRef, row);
       const rowNode = gridRowNodeSelector(apiRef, rowId);
-      if (rowNode.type === 'group') {
+      if (rowNode?.type === 'group') {
         const originalColDef = columnsLookup[rowNode.groupingField];
         if (originalColDef.type === 'singleSelect') {
           // the default valueFormatter of a singleSelect colDef won't work with the grouping column values