@mui/x-data-grid 5.13.1 → 5.14.0

package/locales/zhCN.js

@@ -111,6 +111,13 @@ const zhCNGrid = {
   // collapseDetailPanel: 'Collapse',
   // Row reordering text
   // rowReorderingHeaderName: 'Row reordering',
+  // Aggregation
+  // aggregationMenuItemHeader: 'Aggregation',
+  // aggregationFunctionLabelSum: 'sum',
+  // aggregationFunctionLabelAvg: 'avg',
+  // aggregationFunctionLabelMin: 'min',
+  // aggregationFunctionLabelMax: 'max',
+  // aggregationFunctionLabelSize: 'size',
 
 };
 export const zhCN = getGridLocalization(zhCNGrid, zhCNCore);

package/locales/zhTW.d.ts

@@ -0,0 +1,2 @@
+import { Localization } from '../utils/getGridLocalization';
+export declare const zhTW: Localization;

package/locales/zhTW.js

@@ -0,0 +1,123 @@
+import { zhTW as zhTWCore } from '@mui/material/locale';
+import { getGridLocalization } from '../utils/getGridLocalization';
+const zhTWGrid = {
+  // Root
+  noRowsLabel: '沒有資料',
+  noResultsOverlayLabel: '沒有結果',
+  errorOverlayDefaultLabel: '發生錯誤',
+  // Density selector toolbar button text
+  toolbarDensity: '表格密度',
+  toolbarDensityLabel: '表格密度',
+  toolbarDensityCompact: '緊湊',
+  toolbarDensityStandard: '標準',
+  toolbarDensityComfortable: '舒適',
+  // Columns selector toolbar button text
+  toolbarColumns: '欄位',
+  toolbarColumnsLabel: '選擇欄位',
+  // Filters toolbar button text
+  toolbarFilters: '篩選器',
+  toolbarFiltersLabel: '顯示篩選器',
+  toolbarFiltersTooltipHide: '隱藏篩選器',
+  toolbarFiltersTooltipShow: '顯示篩選器',
+  toolbarFiltersTooltipActive: count => `${count} 個篩選器`,
+  // Quick filter toolbar field
+  toolbarQuickFilterPlaceholder: '搜尋...',
+  toolbarQuickFilterLabel: '搜尋',
+  toolbarQuickFilterDeleteIconLabel: '清除',
+  // Export selector toolbar button text
+  toolbarExport: '匯出',
+  toolbarExportLabel: '匯出',
+  toolbarExportCSV: '匯出 CSV',
+  toolbarExportPrint: '列印',
+  toolbarExportExcel: '匯出 Excel',
+  // Columns panel text
+  columnsPanelTextFieldLabel: '欄位搜尋',
+  columnsPanelTextFieldPlaceholder: '欄位名稱',
+  columnsPanelDragIconLabel: '排序欄位',
+  columnsPanelShowAllButton: '顯示所有',
+  columnsPanelHideAllButton: '隱藏所有',
+  // Filter panel text
+  filterPanelAddFilter: '增加篩選器',
+  filterPanelDeleteIconLabel: '刪除',
+  filterPanelLinkOperator: '邏輯運算子',
+  filterPanelOperators: '運算子',
+  // TODO v6: rename to filterPanelOperator
+  filterPanelOperatorAnd: '且',
+  filterPanelOperatorOr: '或',
+  filterPanelColumns: '欄位',
+  filterPanelInputLabel: '值',
+  filterPanelInputPlaceholder: '篩選值',
+  // Filter operators text
+  filterOperatorContains: '包含',
+  filterOperatorEquals: '等於',
+  filterOperatorStartsWith: '以...開頭',
+  filterOperatorEndsWith: '以...結束',
+  filterOperatorIs: '為',
+  filterOperatorNot: '不為',
+  filterOperatorAfter: '...之後',
+  filterOperatorOnOrAfter: '...(含)之後',
+  filterOperatorBefore: '...之前',
+  filterOperatorOnOrBefore: '...(含)之前',
+  filterOperatorIsEmpty: '為空',
+  filterOperatorIsNotEmpty: '不為空',
+  filterOperatorIsAnyOf: '是其中之一',
+  // Filter values text
+  filterValueAny: '任何值',
+  filterValueTrue: '真',
+  filterValueFalse: '假',
+  // Column menu text
+  columnMenuLabel: '選單',
+  columnMenuShowColumns: '顯示欄位',
+  columnMenuFilter: '篩選器',
+  columnMenuHideColumn: '隱藏',
+  columnMenuUnsort: '預設排序',
+  columnMenuSortAsc: '升序',
+  columnMenuSortDesc: '降序',
+  // Column header text
+  columnHeaderFiltersTooltipActive: count => `${count} 個篩選器`,
+  columnHeaderFiltersLabel: '顯示篩選器',
+  columnHeaderSortIconLabel: '排序',
+  // Rows selected footer text
+  footerRowSelected: count => `已選取 ${count.toLocaleString()} 個`,
+  // Total row amount footer text
+  footerTotalRows: '總數:',
+  // Total visible row amount footer text
+  footerTotalVisibleRows: (visibleCount, totalCount) => `${visibleCount.toLocaleString()} / ${totalCount.toLocaleString()}`,
+  // Checkbox selection text
+  checkboxSelectionHeaderName: '核取方塊',
+  checkboxSelectionSelectAllRows: '全選',
+  checkboxSelectionUnselectAllRows: '取消全選',
+  checkboxSelectionSelectRow: '選取',
+  checkboxSelectionUnselectRow: '取消選取',
+  // Boolean cell text
+  booleanCellTrueLabel: '真',
+  booleanCellFalseLabel: '假',
+  // Actions cell more text
+  actionsCellMore: '查看更多',
+  // Column pinning text
+  pinToLeft: '釘選在左側',
+  pinToRight: '釘選在右側',
+  unpin: '取消釘選',
+  // Tree Data
+  treeDataGroupingHeaderName: '群組',
+  treeDataExpand: '查看子項目',
+  treeDataCollapse: '隱藏子項目',
+  // Grouping columns
+  groupingColumnHeaderName: '群組',
+  groupColumn: name => `以 ${name} 分組`,
+  unGroupColumn: name => `取消以 ${name} 分組`,
+  // Master/detail
+  detailPanelToggle: '切換顯示詳細資訊',
+  expandDetailPanel: '展開',
+  collapseDetailPanel: '摺疊',
+  // Row reordering text
+  rowReorderingHeaderName: '排序' // Aggregation
+  // aggregationMenuItemHeader: 'Aggregation',
+  // aggregationFunctionLabelSum: 'sum',
+  // aggregationFunctionLabelAvg: 'avg',
+  // aggregationFunctionLabelMin: 'min',
+  // aggregationFunctionLabelMax: 'max',
+  // aggregationFunctionLabelSize: 'size',
+
+};
+export const zhTW = getGridLocalization(zhTWGrid, zhTWCore);

package/models/api/gridColumnSpanning.d.ts

@@ -1,3 +1,4 @@
+import { GridStateColDef } from '../colDef';
 import { GridColumnIndex, GridCellColSpanInfo } from '../gridColumnSpanning';
 import { GridRowId } from '../gridRows';
 /**
@@ -24,5 +25,6 @@ export interface GridColumnSpanningApi {
         rowId: GridRowId;
         minFirstColumn: number;
         maxLastColumn: number;
+        columns: GridStateColDef[];
     }) => void;
 }

package/models/api/gridLocaleTextApi.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import * as React from 'react';
 import { ComponentsPropsList } from '@mui/material/styles';
 /**
  * Set the types of the texts in the grid.
@@ -90,8 +90,14 @@ export interface GridLocaleText {
     detailPanelToggle: string;
     expandDetailPanel: string;
     collapseDetailPanel: string;
-    MuiTablePagination: Omit<ComponentsPropsList['MuiTablePagination'], 'page' | 'count' | 'onChangePage' | 'rowsPerPage' | 'onPageChange'>;
     rowReorderingHeaderName: string;
+    aggregationMenuItemHeader: string;
+    aggregationFunctionLabelSum: string;
+    aggregationFunctionLabelAvg: string;
+    aggregationFunctionLabelMin: string;
+    aggregationFunctionLabelMax: string;
+    aggregationFunctionLabelSize: string;
+    MuiTablePagination: Omit<ComponentsPropsList['MuiTablePagination'], 'page' | 'count' | 'onChangePage' | 'rowsPerPage' | 'onPageChange'>;
 }
 export declare type GridTranslationKeys = keyof GridLocaleText;
 /**

package/models/api/gridSelectionApi.d.ts

@@ -35,6 +35,12 @@ export interface GridSelectionApi {
      * @returns {boolean} A boolean indicating if the row is selected.
      */
     isRowSelected: (id: GridRowId) => boolean;
+    /**
+     * Determines if a row can be selected or not.
+     * @param {GridRowId} id The id of the row.
+     * @returns {boolean} A boolean indicating if the row can be selected.
+     */
+    isRowSelectable: (id: GridRowId) => boolean;
     /**
      * Returns an array of the selected rows.
      * @returns {Map<GridRowId, GridRowModel>} A `Map` with the selected rows.

package/models/events/gridEvents.d.ts

@@ -53,6 +53,7 @@ declare enum GridEvents {
     pageChange = "pageChange",
     pageSizeChange = "pageSizeChange",
     rowGroupingModelChange = "rowGroupingModelChange",
+    aggregationModelChange = "aggregationModelChange",
     rowsScroll = "rowsScroll",
     rowsScrollEnd = "rowsScrollEnd",
     columnSeparatorMouseDown = "columnSeparatorMouseDown",

package/models/events/gridEvents.js

@@ -54,6 +54,7 @@ var GridEvents;
   GridEvents["pageChange"] = "pageChange";
   GridEvents["pageSizeChange"] = "pageSizeChange";
   GridEvents["rowGroupingModelChange"] = "rowGroupingModelChange";
+  GridEvents["aggregationModelChange"] = "aggregationModelChange";
   GridEvents["rowsScroll"] = "rowsScroll";
   GridEvents["rowsScrollEnd"] = "rowsScrollEnd";
   GridEvents["columnSeparatorMouseDown"] = "columnSeparatorMouseDown";

package/models/gridRows.d.ts

@@ -25,6 +25,10 @@ export interface GridRowTreeNodeConfig {
      * @default []
      */
     children?: GridRowId[];
+    /**
+     * The id of the footer
+     */
+    footerId?: GridRowId | null;
     /**
      * The row id of the parent (null if this row is a top level row).
      */
@@ -41,7 +45,7 @@ export interface GridRowTreeNodeConfig {
     /**
      * The key used to group the children of this row.
      */
-    groupingKey: GridKeyValue;
+    groupingKey: GridKeyValue | null;
     /**
      * The field used to group the children of this row.
      * Is `null` if no field has been used to group the children of this row.
@@ -52,6 +56,11 @@ export interface GridRowTreeNodeConfig {
      * @default false
      */
     isAutoGenerated?: boolean;
+    /**
+     * Position of the row among its sibling.
+     * @default 'body'
+     */
+    position?: 'body' | 'footer';
 }
 /**
  * The grid rows total height and row positions.

package/models/params/gridCellParams.d.ts

@@ -142,7 +142,7 @@ export interface GridValueFormatterParams<V = any> {
 /**
  * Object passed as parameter in the column [[GridColDef]] edit cell props change callback.
  */
-export interface GridPreProcessEditCellProps {
+export interface GridPreProcessEditCellProps<V = any, R extends GridValidRowModel = any> {
     /**
      * The grid row id.
      */
@@ -150,11 +150,11 @@ export interface GridPreProcessEditCellProps {
     /**
      * The row that is being edited.
      */
-    row: GridRowModel;
+    row: GridRowModel<R>;
     /**
      * The edit cell props.
      */
-    props: GridEditCellProps;
+    props: GridEditCellProps<V>;
     /**
      * Whether the new value is different from the stored value or not.
      */
@@ -163,5 +163,5 @@ export interface GridPreProcessEditCellProps {
      * Object containing the props of the other fields.
      * Only available for row editing and when using the new editing API.
      */
-    otherFieldsProps?: Record<string, GridEditCellProps>;
+    otherFieldsProps?: Record<string, GridEditCellProps<V>>;
 }

package/modern/DataGrid/useDataGridComponent.js

@@ -58,7 +58,7 @@ export const useDataGridComponent = props => {
   const useGridEditing = props.experimentalFeatures?.newEditingApi ? useGridEditing_new : useGridEditing_old;
   useGridEditing(apiRef, props);
   useGridFocus(apiRef, props);
-  useGridPreferencesPanel(apiRef);
+  useGridPreferencesPanel(apiRef, props);
   useGridFilter(apiRef, props);
   useGridSorting(apiRef, props);
   useGridDensity(apiRef, props);

package/modern/colDef/gridActionsColDef.js

@@ -5,6 +5,8 @@ export const GRID_ACTIONS_COLUMN_TYPE = 'actions';
 export const GRID_ACTIONS_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortable: false,
   filterable: false,
+  // @ts-ignore
+  aggregable: false,
   width: 100,
   align: 'center',
   headerAlign: 'center',

package/modern/colDef/gridBooleanColDef.js

@@ -21,5 +21,7 @@ export const GRID_BOOLEAN_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
   sortComparator: gridNumberComparator,
   valueFormatter: gridBooleanFormatter,
   filterOperators: getGridBooleanOperators(),
-  getApplyQuickFilterFn: undefined
+  getApplyQuickFilterFn: undefined,
+  // @ts-ignore
+  aggregable: false
 });

package/modern/colDef/gridCheckboxSelectionColDef.js

@@ -13,6 +13,8 @@ export const GRID_CHECKBOX_SELECTION_COL_DEF = _extends({}, GRID_BOOLEAN_COL_DEF
   resizable: false,
   sortable: false,
   filterable: false,
+  // @ts-ignore
+  aggregable: false,
   disableColumnMenu: true,
   disableReorder: true,
   disableExport: true,

package/modern/colDef/gridStringColDef.js

@@ -1,6 +1,10 @@
 import { renderEditInputCell } from '../components/cell/GridEditInputCell';
 import { gridStringOrNumberComparator } from '../hooks/features/sorting/gridSortingUtils';
 import { getGridStringOperators, getGridStringQuickFilterFn } from './gridStringOperators';
+/**
+ * TODO: Move pro and premium properties outside of this Community file
+ */
+
 export const GRID_STRING_COL_DEF = {
   width: 100,
   minWidth: 50,
@@ -12,6 +16,8 @@ export const GRID_STRING_COL_DEF = {
   filterable: true,
   groupable: true,
   pinnable: true,
+  // @ts-ignore
+  private_aggregable: true,
   editable: false,
   sortComparator: gridStringOrNumberComparator,
   type: 'string',

package/modern/components/base/GridOverlays.js

@@ -36,7 +36,10 @@ function GridOverlayWrapper(props) {
       width: viewportInnerSize?.width ?? 0,
       position: 'absolute',
       top: headerHeight,
-      bottom: height === 'auto' ? 0 : undefined
+      bottom: height === 'auto' ? 0 : undefined,
+      zIndex: 3,
+      // should be above pinned columns and detail panel
+      pointerEvents: 'none'
     }
   }, props));
 }

package/modern/components/cell/GridBooleanCell.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 const _excluded = ["id", "value", "formattedValue", "api", "field", "row", "rowNode", "colDef", "cellMode", "isEditable", "hasFocus", "tabIndex", "getValue"];
 import * as React from 'react';
+import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
@@ -18,7 +19,7 @@ const useUtilityClasses = ownerState => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
+const GridBooleanCellRaw = props => {
   const {
     value
   } = props,
@@ -37,7 +38,97 @@ export const GridBooleanCell = /*#__PURE__*/React.memo(props => {
     titleAccess: apiRef.current.getLocaleText(value ? 'booleanCellTrueLabel' : 'booleanCellFalseLabel'),
     "data-value": Boolean(value)
   }, other));
-});
+};
+
+process.env.NODE_ENV !== "production" ? GridBooleanCellRaw.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "yarn proptypes"  |
+  // ----------------------------------------------------------------------
+
+  /**
+   * GridApi that let you manipulate the grid.
+   * @deprecated Use the `apiRef` returned by `useGridApiContext` or `useGridApiRef` (only available in `@mui/x-data-grid-pro`)
+   */
+  api: PropTypes.any.isRequired,
+
+  /**
+   * The mode of the cell.
+   */
+  cellMode: PropTypes.oneOf(['edit', 'view']).isRequired,
+
+  /**
+   * The column of the row that the current cell belongs to.
+   */
+  colDef: PropTypes.object.isRequired,
+
+  /**
+   * The column field of the cell that triggered the event.
+   */
+  field: PropTypes.string.isRequired,
+
+  /**
+   * A ref allowing to set imperative focus.
+   * It can be passed to the element that should receive focus.
+   * @ignore - do not document.
+   */
+  focusElementRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.shape({
+      focus: PropTypes.func.isRequired
+    })
+  })]),
+
+  /**
+   * The cell value formatted with the column valueFormatter.
+   */
+  formattedValue: PropTypes.any,
+
+  /**
+   * Get the cell value of a row and field.
+   * @param {GridRowId} id The row id.
+   * @param {string} field The field.
+   * @returns {any} The cell value.
+   * @deprecated Use `params.row` to directly access the fields you want instead.
+   */
+  getValue: PropTypes.func.isRequired,
+
+  /**
+   * If true, the cell is the active element.
+   */
+  hasFocus: PropTypes.bool.isRequired,
+
+  /**
+   * The grid row id.
+   */
+  id: PropTypes.oneOfType([PropTypes.number, PropTypes.string]).isRequired,
+
+  /**
+   * If true, the cell is editable.
+   */
+  isEditable: PropTypes.bool,
+
+  /**
+   * The row model of the row that the current cell belongs to.
+   */
+  row: PropTypes.object.isRequired,
+
+  /**
+   * The node of the row that the current cell belongs to.
+   */
+  rowNode: PropTypes.object.isRequired,
+
+  /**
+   * the tabIndex value.
+   */
+  tabIndex: PropTypes.oneOf([-1, 0]).isRequired,
+
+  /**
+   * The cell value, but if the column has valueGetter, use getValue.
+   */
+  value: PropTypes.any
+} : void 0;
+const GridBooleanCell = /*#__PURE__*/React.memo(GridBooleanCellRaw);
+export { GridBooleanCell };
 export const renderBooleanCell = params => {
   if (params.rowNode.isAutoGenerated) {
     return '';

package/modern/components/cell/GridEditDateCell.js

@@ -6,10 +6,14 @@ import PropTypes from 'prop-types';
 import { unstable_composeClasses as composeClasses } from '@mui/material';
 import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
 import InputBase from '@mui/material/InputBase';
+import { styled } from '@mui/material/styles';
 import { getDataGridUtilityClass } from '../../constants/gridClasses';
 import { useGridRootProps } from '../../hooks/utils/useGridRootProps';
 import { useGridApiContext } from '../../hooks/utils/useGridApiContext';
 import { jsx as _jsx } from "react/jsx-runtime";
+const StyledInputBase = styled(InputBase)({
+  fontSize: 'inherit'
+});
 
 const useUtilityClasses = ownerState => {
   const {
@@ -114,7 +118,7 @@ function GridEditDateCell(props) {
       inputRef.current.focus();
     }
   }, [hasFocus]);
-  return /*#__PURE__*/_jsx(InputBase, _extends({
+  return /*#__PURE__*/_jsx(StyledInputBase, _extends({
     inputRef: inputRef,
     fullWidth: true,
     className: classes.root,

package/modern/components/cell/index.js

@@ -1,4 +1,5 @@
 export * from './GridCell';
+export * from './GridBooleanCell';
 export * from './GridEditBooleanCell';
 export * from './GridEditDateCell';
 export * from './GridEditInputCell';

package/modern/components/columnSelection/GridCellCheckboxRenderer.js

@@ -26,6 +26,7 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
     field,
     id,
     value: isChecked,
+    rowNode,
     hasFocus,
     tabIndex
   } = props,
@@ -73,7 +74,12 @@ const GridCellCheckboxForwardRef = /*#__PURE__*/React.forwardRef(function GridCe
       apiRef.current.publishEvent('cellNavigationKeyDown', props, event);
     }
   }, [apiRef, props]);
-  const isSelectable = !rootProps.isRowSelectable || rootProps.isRowSelectable(apiRef.current.getRowParams(id));
+
+  if (rowNode.position === 'footer') {
+    return null;
+  }
+
+  const isSelectable = apiRef.current.isRowSelectable(id);
   const label = apiRef.current.getLocaleText(isChecked ? 'checkboxSelectionUnselectRow' : 'checkboxSelectionSelectRow');
   return /*#__PURE__*/_jsx(rootProps.components.BaseCheckbox, _extends({
     ref: handleRef,

package/modern/components/containers/GridRootStyles.js

@@ -6,6 +6,16 @@ export const GridRootStyles = styled('div', {
   slot: 'Root',
   overridesResolver: (props, styles) => [{
     [`&.${gridClasses.autoHeight}`]: styles.autoHeight
+  }, {
+    [`&.${gridClasses.aggregationColumnHeader}`]: styles.aggregationColumnHeader
+  }, {
+    [`&.${gridClasses['aggregationColumnHeader--alignLeft']}`]: styles['aggregationColumnHeader--alignLeft']
+  }, {
+    [`&.${gridClasses['aggregationColumnHeader--alignCenter']}`]: styles['aggregationColumnHeader--alignCenter']
+  }, {
+    [`&.${gridClasses['aggregationColumnHeader--alignRight']}`]: styles['aggregationColumnHeader--alignRight']
+  }, {
+    [`&.${gridClasses.aggregationColumnHeaderLabel}`]: styles.aggregationColumnHeaderLabel
   }, {
     [`& .${gridClasses.editBooleanCell}`]: styles.editBooleanCell
   }, {

package/modern/components/toolbar/GridToolbarExport.js

@@ -1,6 +1,8 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["csvOptions", "printOptions", "excelOptions"];
+const _excluded = ["hideMenu", "options"],
+      _excluded2 = ["hideMenu", "options"],
+      _excluded3 = ["csvOptions", "printOptions", "excelOptions"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import MenuItem from '@mui/material/MenuItem';
@@ -9,31 +11,39 @@ import { GridToolbarExportContainer } from './GridToolbarExportContainer';
 import { jsx as _jsx } from "react/jsx-runtime";
 export const GridCsvExportMenuItem = props => {
   const apiRef = useGridApiContext();
+
   const {
     hideMenu,
     options
-  } = props;
-  return /*#__PURE__*/_jsx(MenuItem, {
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded);
+
+  return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsCsv(options);
       hideMenu?.();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportCSV')
-  });
+  }));
 };
 export const GridPrintExportMenuItem = props => {
   const apiRef = useGridApiContext();
+
   const {
     hideMenu,
     options
-  } = props;
-  return /*#__PURE__*/_jsx(MenuItem, {
+  } = props,
+        other = _objectWithoutPropertiesLoose(props, _excluded2);
+
+  return /*#__PURE__*/_jsx(MenuItem, _extends({
     onClick: () => {
       apiRef.current.exportDataAsPrint(options);
       hideMenu?.();
-    },
+    }
+  }, other, {
     children: apiRef.current.getLocaleText('toolbarExportPrint')
-  });
+  }));
 };
 const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExport(props, ref) {
   const {
@@ -41,7 +51,7 @@ const GridToolbarExport = /*#__PURE__*/React.forwardRef(function GridToolbarExpo
     printOptions = {},
     excelOptions
   } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
+        other = _objectWithoutPropertiesLoose(props, _excluded3);
 
   const apiRef = useGridApiContext();
   const preProcessedButtons = apiRef.current.unstable_applyPipeProcessors('exportMenu', [], {

package/modern/constants/gridClasses.js

@@ -2,4 +2,4 @@ import { generateUtilityClasses, generateUtilityClass } from '@mui/material';
 export function getDataGridUtilityClass(slot) {
   return generateUtilityClass('MuiDataGrid', slot);
 }
-export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);
+export const gridClasses = generateUtilityClasses('MuiDataGrid', ['actionsCell', 'aggregationColumnHeader', 'aggregationColumnHeader--alignLeft', 'aggregationColumnHeader--alignCenter', 'aggregationColumnHeader--alignRight', 'autoHeight', 'booleanCell', 'cell--editable', 'cell--editing', 'cell--textCenter', 'cell--textLeft', 'cell--textRight', 'cell--withRenderer', 'cell', 'cellContent', 'cellCheckbox', 'checkboxInput', 'columnHeader--alignCenter', 'columnHeader--alignLeft', 'columnHeader--alignRight', 'columnHeader--dragging', 'columnHeader--moving', 'columnHeader--numeric', 'columnHeader--sortable', 'columnHeader--sorted', 'columnHeader--filtered', 'columnHeader', 'columnHeaderCheckbox', 'columnHeaderDraggableContainer', 'columnHeaderDropZone', 'columnHeaderTitle', 'columnHeaderTitleContainer', 'columnHeaderTitleContainerContent', 'columnHeaders', 'columnHeadersInner', 'columnHeadersInner--scrollable', 'columnSeparator--resizable', 'columnSeparator--resizing', 'columnSeparator--sideLeft', 'columnSeparator--sideRight', 'columnSeparator', 'columnsPanel', 'columnsPanelRow', 'detailPanel', 'detailPanels', 'detailPanelToggleCell', 'detailPanelToggleCell--expanded', 'footerCell', 'panel', 'panelHeader', 'panelWrapper', 'panelContent', 'panelFooter', 'paper', 'editBooleanCell', 'editInputCell', 'filterForm', 'filterFormDeleteIcon', 'filterFormLinkOperatorInput', 'filterFormColumnInput', 'filterFormOperatorInput', 'filterFormValueInput', 'filterIcon', 'footerContainer', 'iconButtonContainer', 'iconSeparator', 'main', 'menu', 'menuIcon', 'menuIconButton', 'menuOpen', 'menuList', 'overlay', 'root', 'root--densityStandard', 'root--densityComfortable', 'root--densityCompact', 'row', 'row--editable', 'row--editing', 'row--lastVisible', 'row--dragging', 'row--dynamicHeight', 'rowReorderCellPlaceholder', 'rowCount', 'rowReorderCellContainer', 'rowReorderCell', 'rowReorderCell--draggable', 'scrollArea--left', 'scrollArea--right', 'scrollArea', 'selectedRowCount', 'sortIcon', 'toolbarContainer', 'toolbarFilterList', 'virtualScroller', 'virtualScrollerContent', 'virtualScrollerContent--overflowed', 'virtualScrollerRenderZone', 'pinnedColumns', 'pinnedColumns--left', 'pinnedColumns--right', 'pinnedColumnHeaders', 'pinnedColumnHeaders--left', 'pinnedColumnHeaders--right', 'withBorder', 'treeDataGroupingCell', 'treeDataGroupingCellToggle', 'groupingCriteriaCell', 'groupingCriteriaCellToggle']);

package/modern/constants/localeTextConstants.js

@@ -111,5 +111,12 @@ export const GRID_DEFAULT_LOCALE_TEXT = {
   // Used core components translation keys
   MuiTablePagination: {},
   // Row reordering text
-  rowReorderingHeaderName: 'Row reordering'
+  rowReorderingHeaderName: 'Row reordering',
+  // Aggregation
+  aggregationMenuItemHeader: 'Aggregation',
+  aggregationFunctionLabelSum: 'sum',
+  aggregationFunctionLabelAvg: 'avg',
+  aggregationFunctionLabelMin: 'min',
+  aggregationFunctionLabelMax: 'max',
+  aggregationFunctionLabelSize: 'size'
 };