@mui/x-data-grid-premium 5.13.0 → 5.15.0

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

@@ -4,6 +4,7 @@ const _excluded = ["leafField", "mainGroupingCriteria", "hideDescendantCount"],
       _excluded2 = ["leafField", "mainGroupingCriteria", "hideDescendantCount"];
 import * as React from 'react';
 import { GRID_STRING_COL_DEF } from '@mui/x-data-grid-pro';
+import { GridGroupingColumnFooterCell } from '../../../components/GridGroupingColumnFooterCell';
 import { GridGroupingCriteriaCell } from '../../../components/GridGroupingCriteriaCell';
 import { GridGroupingColumnLeafCell } from '../../../components/GridGroupingColumnLeafCell';
 import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from './gridRowGroupingUtils';
@@ -142,7 +143,12 @@ export const createGroupingColDefForOneGroupingCriteria = ({
   const commonProperties = {
     width: Math.max((groupedByColDef.width ?? GRID_STRING_COL_DEF.width) + 40, leafColDef?.width ?? 0),
     renderCell: params => {
-      // Render leaves
+      // Render footer
+      if (params.rowNode.position === 'footer') {
+        return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
+      } // Render leaves
+
+
       if (params.rowNode.groupingField == null) {
         if (leafColDef) {
           const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
@@ -237,7 +243,12 @@ export const createGroupingColDefForAllGroupingCriteria = ({
     headerName: apiRef.current.getLocaleText('groupingColumnHeaderName'),
     width: Math.max(...rowGroupingModel.map(field => (columnsLookup[field].width ?? GRID_STRING_COL_DEF.width) + 40), leafColDef?.width ?? 0),
     renderCell: params => {
-      // Render the leaves
+      // Render footer
+      if (params.rowNode.position === 'footer') {
+        return /*#__PURE__*/_jsx(GridGroupingColumnFooterCell, _extends({}, params));
+      } // Render the leaves
+
+
       if (params.rowNode.groupingField == null) {
         if (leafColDef) {
           const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {

package/modern/hooks/features/rowGrouping/gridRowGroupingUtils.js

@@ -77,13 +77,17 @@ export const filterRowTreeFromGroupingColumns = params => {
     visibleRowsLookup[node.id] = shouldPassFilters && areAncestorsExpanded;
     filteredRowsLookup[node.id] = shouldPassFilters;
 
+    if (node.footerId != null) {
+      visibleRowsLookup[node.footerId] = shouldPassFilters && areAncestorsExpanded && !!node.childrenExpanded;
+    }
+
     if (!shouldPassFilters) {
       return 0;
     }
 
     filteredDescendantCountLookup[node.id] = filteredDescendantCount;
 
-    if (!node.children) {
+    if (!node.children && !node.isAutoGenerated) {
       return filteredDescendantCount + 1;
     }
 

package/modern/hooks/features/rowGrouping/useGridRowGrouping.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
-import Divider from '@mui/material/Divider';
+import MuiDivider from '@mui/material/Divider';
 import { useGridApiEventHandler, useGridApiMethod, gridFilteredDescendantCountLookupSelector } from '@mui/x-data-grid-pro';
 import { useGridRegisterPipeProcessor, isDeepEqual } from '@mui/x-data-grid-pro/internals';
 import { gridRowGroupingModelSelector, gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
@@ -8,6 +8,11 @@ import { getRowGroupingFieldFromGroupingCriteria, ROW_GROUPING_STRATEGY, isGroup
 import { GridRowGroupableColumnMenuItems } from '../../../components/GridRowGroupableColumnMenuItems';
 import { GridRowGroupingColumnMenuItems } from '../../../components/GridRowGroupingColumnMenuItems';
 import { jsx as _jsx } from "react/jsx-runtime";
+
+const Divider = () => /*#__PURE__*/_jsx(MuiDivider, {
+  onClick: event => event.stopPropagation()
+});
+
 export const rowGroupingStateInitializer = (state, props, apiRef) => {
   apiRef.current.unstable_caches.rowGrouping = {
     sanitizedModelOnLastRowTreeCreation: []
@@ -88,16 +93,16 @@ export const useGridRowGrouping = (apiRef, props) => {
    * PRE-PROCESSING
    */
 
-  const addColumnMenuButtons = React.useCallback((initialValue, columns) => {
+  const addColumnMenuButtons = React.useCallback((initialValue, column) => {
     if (props.disableRowGrouping) {
       return initialValue;
     }
 
     let menuItems;
 
-    if (isGroupingColumn(columns.field)) {
+    if (isGroupingColumn(column.field)) {
       menuItems = /*#__PURE__*/_jsx(GridRowGroupingColumnMenuItems, {});
-    } else if (columns.groupable) {
+    } else if (column.groupable) {
       menuItems = /*#__PURE__*/_jsx(GridRowGroupableColumnMenuItems, {});
     } else {
       menuItems = null;
@@ -109,14 +114,15 @@ export const useGridRowGrouping = (apiRef, props) => {
 
     return [...initialValue, /*#__PURE__*/_jsx(Divider, {}), menuItems];
   }, [props.disableRowGrouping]);
-  const stateExportPreProcessing = React.useCallback(prevState => {
-    if (props.disableRowGrouping) {
-      return prevState;
-    }
-
+  const stateExportPreProcessing = React.useCallback((prevState, context) => {
     const rowGroupingModelToExport = gridRowGroupingModelSelector(apiRef);
+    const shouldExportRowGroupingModel = // Always export if the `exportOnlyDirtyModels` property is activated
+    !context.exportOnlyDirtyModels || // Always export if the model is controlled
+    props.rowGroupingModel != null || // Always export if the model has been initialized
+    props.initialState?.rowGrouping?.model != null || // Export if the model is not empty
+    Object.keys(rowGroupingModelToExport).length > 0;
 
-    if (rowGroupingModelToExport.length === 0) {
+    if (!shouldExportRowGroupingModel) {
       return prevState;
     }
 
@@ -125,7 +131,7 @@ export const useGridRowGrouping = (apiRef, props) => {
         model: rowGroupingModelToExport
       }
     });
-  }, [apiRef, props.disableRowGrouping]);
+  }, [apiRef, props.rowGroupingModel, props.initialState?.rowGrouping?.model]);
   const stateRestorePreProcessing = React.useCallback((params, context) => {
     if (props.disableRowGrouping) {
       return params;

package/modern/index.js

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

package/modern/typeOverloads/index.js

@@ -1,2 +1,2 @@
 import '@mui/x-data-grid-pro/typeOverloads';
-import './modules';
+export * from './modules';

package/modern/utils/releaseInfo.js

@@ -1,6 +1,6 @@
 import { ponyfillGlobal } from '@mui/utils';
 export const getReleaseInfo = () => {
-  const releaseInfo = "MTY1NzE0NDgwMDAwMA==";
+  const releaseInfo = "MTY1OTA0NTYwMDAwMA==";
 
   if (process.env.NODE_ENV !== 'production') {
     // A simple hack to set the value in the test environment (has no build step).

package/node/DataGridPremium/DataGridPremium.js

@@ -65,6 +65,25 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
   // | To update them edit the TypeScript types and run "yarn proptypes"  |
   // ----------------------------------------------------------------------
 
+  /**
+   * Aggregation functions available on the grid.
+   * @default GRID_AGGREGATION_FUNCTIONS
+   */
+  aggregationFunctions: _propTypes.default.object,
+
+  /**
+   * Set the aggregation model of the grid.
+   */
+  aggregationModel: _propTypes.default.object,
+
+  /**
+   * Rows used to generate the aggregated value.
+   * If `filtered`, the aggregated values will be generated using only the rows currently passing the filtering process.
+   * If `all`, the aggregated values will be generated using all the rows.
+   * @default "filtered"
+   */
+  aggregationRowsScope: _propTypes.default.oneOf(['all', 'filtered']),
+
   /**
    * The ref object that allows grid manipulation. Can be instantiated with [[useGridApiRef()]].
    */
@@ -179,6 +198,12 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   detailPanelExpandedRowIds: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]).isRequired),
 
+  /**
+   * If `true`, aggregation is disabled.
+   * @default false
+   */
+  disableAggregation: _propTypes.default.bool,
+
   /**
    * If `true`, the filtering will only be applied to the top level rows when grouping rows with the `treeData` prop.
    * @default false
@@ -239,6 +264,12 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   disableExtendRowFullWidth: _propTypes.default.bool,
 
+  /**
+   * If `true`, modification to a cell will not be discarded if the mode is changed from "edit" to "view" while processing props.
+   * @default false
+   */
+  disableIgnoreModificationsIfProcessingProps: _propTypes.default.bool,
+
   /**
    * If `true`, filtering with multiple columns is disabled.
    * @default false
@@ -296,8 +327,10 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    * For each feature, if the flag is not explicitly set to `true`, the feature will be fully disabled and any property / method call will not have any effect.
    */
   experimentalFeatures: _propTypes.default.shape({
+    aggregation: _propTypes.default.bool,
     newEditingApi: _propTypes.default.bool,
     preventCommitWhileValidating: _propTypes.default.bool,
+    rowPinning: _propTypes.default.bool,
     warnIfFocusStateIsNotSynced: _propTypes.default.bool
   }),
 
@@ -329,6 +362,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     quickFilterValues: _propTypes.default.array
   }),
 
+  /**
+   * Determines the position of an aggregated value.
+   * @param {GridRowTreeNodeConfig | null} groupNode The current group (`null` being the top level group).
+   * @returns {GridAggregationPosition | null} Position of the aggregated value (if `null`, the group will not be aggregated).
+   * @default `(groupNode) => groupNode == null ? 'footer' : 'inline'`
+   */
+  getAggregationPosition: _propTypes.default.func,
+
   /**
    * Function that applies CSS classes dynamically on cells.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -508,6 +549,13 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
    */
   nonce: _propTypes.default.string,
 
+  /**
+   * Callback fired when the row grouping model changes.
+   * @param {GridAggregationModel} model The aggregated columns.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onAggregationModelChange: _propTypes.default.func,
+
   /**
    * Callback fired when any cell is clicked.
    * @param {GridCellParams} params With all properties from [[GridCellParams]].
@@ -889,6 +937,14 @@ process.env.NODE_ENV !== "production" ? DataGridPremiumRaw.propTypes = {
     right: _propTypes.default.arrayOf(_propTypes.default.string)
   }),
 
+  /**
+   * Rows data to pin on top or bottom.
+   */
+  pinnedRows: _propTypes.default.shape({
+    bottom: _propTypes.default.array,
+    top: _propTypes.default.array
+  }),
+
   /**
    * Callback called before updating a row with new values in the row and cell editing.
    * Only applied if `props.experimentalFeatures.newEditingApi: true`.

package/node/DataGridPremium/useDataGridPremiumComponent.js

@@ -7,6 +7,10 @@ exports.useDataGridPremiumComponent = void 0;
 
 var _internals = require("@mui/x-data-grid-pro/internals");
 
+var _useGridAggregation = require("../hooks/features/aggregation/useGridAggregation");
+
+var _useGridAggregationPreProcessors = require("../hooks/features/aggregation/useGridAggregationPreProcessors");
+
 var _useGridRowGrouping = require("../hooks/features/rowGrouping/useGridRowGrouping");
 
 var _useGridRowGroupingPreProcessors = require("../hooks/features/rowGrouping/useGridRowGroupingPreProcessors");
@@ -26,6 +30,8 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridRowReorderPreProcessors)(apiRef, props);
   (0, _useGridRowGroupingPreProcessors.useGridRowGroupingPreProcessors)(apiRef, props);
   (0, _internals.useGridTreeDataPreProcessors)(apiRef, props);
+  (0, _internals.useGridRowPinningPreProcessors)(apiRef);
+  (0, _useGridAggregationPreProcessors.useGridAggregationPreProcessors)(apiRef, props);
   (0, _internals.useGridDetailPanelPreProcessors)(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
   // Because it changes the order of the columns.
 
@@ -36,10 +42,12 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
    */
 
   (0, _internals.useGridInitializeState)(_useGridRowGrouping.rowGroupingStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_useGridAggregation.aggregationStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.selectionStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.detailPanelStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.columnsStateInitializer, apiRef, props);
+  (0, _internals.useGridInitializeState)(_internals.rowPinningStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.rowsStateInitializer, apiRef, props);
   (0, _internals.useGridInitializeState)((_props$experimentalFe = props.experimentalFeatures) != null && _props$experimentalFe.newEditingApi ? _internals.editingStateInitializer_new : _internals.editingStateInitializer_old, apiRef, props);
   (0, _internals.useGridInitializeState)(_internals.focusStateInitializer, apiRef, props);
@@ -54,9 +62,11 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   (0, _internals.useGridInitializeState)(_internals.columnMenuStateInitializer, apiRef, props);
   (0, _useGridRowGrouping.useGridRowGrouping)(apiRef, props);
   (0, _internals.useGridTreeData)(apiRef);
+  (0, _useGridAggregation.useGridAggregation)(apiRef, props);
   (0, _internals.useGridKeyboardNavigation)(apiRef, props);
   (0, _internals.useGridSelection)(apiRef, props);
   (0, _internals.useGridColumnPinning)(apiRef, props);
+  (0, _internals.useGridRowPinning)(apiRef, props);
   (0, _internals.useGridColumns)(apiRef, props);
   (0, _internals.useGridRows)(apiRef, props);
   (0, _internals.useGridParamsApi)(apiRef);
@@ -65,7 +75,7 @@ const useDataGridPremiumComponent = (inputApiRef, props) => {
   const useGridEditing = (_props$experimentalFe2 = props.experimentalFeatures) != null && _props$experimentalFe2.newEditingApi ? _internals.useGridEditing_new : _internals.useGridEditing_old;
   useGridEditing(apiRef, props);
   (0, _internals.useGridFocus)(apiRef, props);
-  (0, _internals.useGridPreferencesPanel)(apiRef);
+  (0, _internals.useGridPreferencesPanel)(apiRef, props);
   (0, _internals.useGridFilter)(apiRef, props);
   (0, _internals.useGridSorting)(apiRef, props);
   (0, _internals.useGridDensity)(apiRef, props);

package/node/DataGridPremium/useDataGridPremiumProps.js

@@ -15,6 +15,8 @@ var _styles = require("@mui/material/styles");
 
 var _xDataGridPro = require("@mui/x-data-grid-pro");
 
+var _aggregation = require("../hooks/features/aggregation");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -23,8 +25,12 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * The default values of `DataGridPremiumPropsWithDefaultValue` to inject in the props of DataGridPremium.
  */
 const DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = (0, _extends2.default)({}, _xDataGridPro.DATA_GRID_PRO_PROPS_DEFAULT_VALUES, {
+  disableAggregation: false,
   disableRowGrouping: false,
-  rowGroupingColumnMode: 'single'
+  rowGroupingColumnMode: 'single',
+  aggregationFunctions: _aggregation.GRID_AGGREGATION_FUNCTIONS,
+  aggregationRowsScope: 'filtered',
+  getAggregationPosition: groupNode => groupNode == null ? 'footer' : 'inline'
 });
 exports.DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES = DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES;
 
@@ -47,11 +53,16 @@ const useDataGridPremiumProps = inProps => {
     });
     return mergedComponents;
   }, [themedProps.components]);
-  return React.useMemo(() => (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
-    localeText,
-    components,
-    signature: 'DataGridPremium'
-  }), [themedProps, localeText, components]);
+  return React.useMemo(() => {
+    var _themedProps$experime;
+
+    return (0, _extends2.default)({}, DATA_GRID_PREMIUM_PROPS_DEFAULT_VALUES, themedProps, {
+      disableAggregation: themedProps.disableAggregation || !((_themedProps$experime = themedProps.experimentalFeatures) != null && _themedProps$experime.aggregation),
+      localeText,
+      components,
+      signature: 'DataGridPremium'
+    });
+  }, [themedProps, localeText, components]);
 };
 
 exports.useDataGridPremiumProps = useDataGridPremiumProps;

package/node/components/GridAggregationColumnMenuItem.js

@@ -0,0 +1,120 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridAggregationColumnMenuItem = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _xDataGridPro = require("@mui/x-data-grid-pro");
+
+var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
+
+var _FormControl = _interopRequireDefault(require("@mui/material/FormControl"));
+
+var _InputLabel = _interopRequireDefault(require("@mui/material/InputLabel"));
+
+var _utils = require("@mui/material/utils");
+
+var _Select = _interopRequireDefault(require("@mui/material/Select"));
+
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+
+var _gridAggregationUtils = require("../hooks/features/aggregation/gridAggregationUtils");
+
+var _gridAggregationSelectors = require("../hooks/features/aggregation/gridAggregationSelectors");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const GridAggregationColumnMenuItem = props => {
+  const {
+    column,
+    label,
+    availableAggregationFunctions
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const id = (0, _utils.unstable_useId)();
+  const aggregationModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridAggregationSelectors.gridAggregationModelSelector);
+  const selectedAggregationRule = React.useMemo(() => {
+    if (!column || !aggregationModel[column.field]) {
+      return '';
+    }
+
+    const aggregationFunctionName = aggregationModel[column.field];
+
+    if ((0, _gridAggregationUtils.canColumnHaveAggregationFunction)({
+      column,
+      aggregationFunctionName,
+      aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName]
+    })) {
+      return aggregationFunctionName;
+    }
+
+    return '';
+  }, [rootProps.aggregationFunctions, aggregationModel, column]);
+
+  const handleAggregationItemChange = event => {
+    const newAggregationItem = event.target.value || undefined;
+    const currentModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
+    const _column$field = column.field,
+          otherColumnItems = (0, _objectWithoutPropertiesLoose2.default)(currentModel, [_column$field].map(_toPropertyKey2.default));
+    const newModel = newAggregationItem == null ? otherColumnItems : (0, _extends2.default)({}, otherColumnItems, {
+      [column.field]: newAggregationItem
+    });
+    apiRef.current.setAggregationModel(newModel);
+    apiRef.current.hideColumnMenu();
+  };
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+    disableRipple: true,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_FormControl.default, {
+      size: "small",
+      sx: {
+        width: 150
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+        id: `${id}-label`,
+        children: label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Select.default, {
+        labelId: `${id}-label`,
+        id: `${id}-input`,
+        value: selectedAggregationRule,
+        label: label,
+        onChange: handleAggregationItemChange,
+        onBlur: e => e.stopPropagation(),
+        fullWidth: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          value: "",
+          children: "..."
+        }), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+          value: aggFunc,
+          children: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+            apiRef,
+            aggregationRule: {
+              aggregationFunctionName: aggFunc,
+              aggregationFunction: rootProps.aggregationFunctions[aggFunc]
+            }
+          })
+        }, aggFunc))]
+      })]
+    })
+  });
+};
+
+exports.GridAggregationColumnMenuItem = GridAggregationColumnMenuItem;

package/node/components/GridAggregationHeader.js

@@ -0,0 +1,115 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.GridAggregationHeader = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _material = require("@mui/material");
+
+var _Box = _interopRequireDefault(require("@mui/material/Box"));
+
+var _styles = require("@mui/material/styles");
+
+var _xDataGrid = require("@mui/x-data-grid");
+
+var _gridAggregationUtils = require("../hooks/features/aggregation/gridAggregationUtils");
+
+var _useGridApiContext = require("../hooks/utils/useGridApiContext");
+
+var _useGridRootProps = require("../hooks/utils/useGridRootProps");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const GridAggregationHeaderRoot = (0, _styles.styled)(_Box.default, {
+  name: 'MuiDataGrid',
+  slot: 'AggregationColumnHeader',
+  overridesResolver: (_, styles) => styles.aggregationColumnHeader
+})({
+  display: 'flex',
+  flexDirection: 'column',
+  [`&.${_xDataGrid.gridClasses['aggregationColumnHeader--alignRight']}`]: {
+    alignItems: 'flex-end'
+  },
+  [`&.${_xDataGrid.gridClasses['aggregationColumnHeader--alignCenter']}`]: {
+    alignItems: 'center'
+  }
+});
+const GridAggregationFunctionLabel = (0, _styles.styled)('div', {
+  name: 'MuiDataGrid',
+  slot: 'AggregationColumnHeaderLabel',
+  overridesResolver: (_, styles) => styles.aggregationColumnHeaderLabel
+})(({
+  theme
+}) => {
+  return {
+    fontSize: theme.typography.caption.fontSize,
+    lineHeight: theme.typography.caption.fontSize,
+    marginTop: `calc(-2px - ${theme.typography.caption.fontSize})`,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.palette.primary.dark,
+    textTransform: 'uppercase'
+  };
+});
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes,
+    colDef
+  } = ownerState;
+  const slots = {
+    root: ['aggregationColumnHeader', colDef.headerAlign === 'left' && 'aggregationColumnHeader--alignLeft', colDef.headerAlign === 'center' && 'aggregationColumnHeader--alignCenter', colDef.headerAlign === 'right' && 'aggregationColumnHeader--alignRight'],
+    aggregationLabel: ['aggregationColumnHeaderLabel']
+  };
+  return (0, _material.unstable_composeClasses)(slots, _xDataGrid.getDataGridUtilityClass, classes);
+};
+
+const GridAggregationHeader = props => {
+  var _colDef$headerName;
+
+  const {
+    colDef,
+    aggregation
+  } = props;
+  const apiRef = (0, _useGridApiContext.useGridApiContext)();
+  const rootProps = (0, _useGridRootProps.useGridRootProps)();
+  const headerHeight = (0, _xDataGrid.useGridSelector)(apiRef, _xDataGrid.gridDensityHeaderHeightSelector);
+  const ownerState = {
+    classes: rootProps.classes,
+    headerHeight,
+    colDef
+  };
+  const classes = useUtilityClasses(ownerState);
+
+  if (!aggregation) {
+    return null;
+  }
+
+  const aggregationLabel = (0, _gridAggregationUtils.getAggregationFunctionLabel)({
+    apiRef,
+    aggregationRule: aggregation.aggregationRule
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridAggregationHeaderRoot, {
+    ownerState: ownerState,
+    className: classes.root,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGrid.GridColumnHeaderTitle, {
+      label: (_colDef$headerName = colDef.headerName) != null ? _colDef$headerName : colDef.field,
+      description: colDef.description,
+      columnWidth: colDef.computedWidth
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(GridAggregationFunctionLabel, {
+      ownerState: ownerState,
+      className: classes.aggregationLabel,
+      children: aggregationLabel
+    })]
+  });
+};
+
+exports.GridAggregationHeader = GridAggregationHeader;

package/node/components/GridExcelExportMenuItem.js

@@ -7,6 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.GridExcelExportMenuItem = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
 var React = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
@@ -17,6 +21,8 @@ var _useGridApiContext = require("../hooks/utils/useGridApiContext");
 
 var _jsxRuntime = require("react/jsx-runtime");
 
+const _excluded = ["hideMenu", "options"];
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -26,14 +32,16 @@ const GridExcelExportMenuItem = props => {
   const {
     hideMenu,
     options
-  } = props;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, {
+  } = props,
+        other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_MenuItem.default, (0, _extends2.default)({
     onClick: () => {
       apiRef.current.exportDataAsExcel(options);
       hideMenu == null ? void 0 : hideMenu();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportExcel')
-  });
+  }));
 };
 
 exports.GridExcelExportMenuItem = GridExcelExportMenuItem;