@mui/x-data-grid-premium 5.11.0

package/hooks/features/export/serializer/excelSerializer.js

@@ -0,0 +1,218 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_DATE_COL_DEF, GRID_DATETIME_COL_DEF } from '@mui/x-data-grid-pro';
+import { buildWarning } from '@mui/x-data-grid/internals';
+
+const getExcelJs = () => import('exceljs');
+
+const warnInvalidFormattedValue = buildWarning(['MUI: When the value of a field is an object or a `renderCell` is provided, the Excel export might not display the value correctly.', 'You can provide a `valueFormatter` with a string representation to be used.']);
+
+const getFormattedValueOptions = (colDef, valueOptions, api) => {
+  if (!colDef.valueOptions) {
+    return [];
+  }
+
+  let valueOptionsFormatted = valueOptions;
+
+  if (colDef.valueFormatter) {
+    valueOptionsFormatted = valueOptionsFormatted.map(option => {
+      if (typeof option === 'object') {
+        return option;
+      }
+
+      const params = {
+        field: colDef.field,
+        api,
+        value: option
+      };
+      return String(colDef.valueFormatter(params));
+    });
+  }
+
+  return valueOptionsFormatted.map(option => typeof option === 'object' ? option.label : option);
+};
+
+const serializeRow = (id, columns, api, defaultValueOptionsFormulae) => {
+  const row = {};
+  const dataValidation = {};
+  const firstCellParams = api.getCellParams(id, columns[0].field);
+  const outlineLevel = firstCellParams.rowNode.depth;
+  columns.forEach(column => {
+    const cellParams = api.getCellParams(id, column.field);
+
+    switch (cellParams.colDef.type) {
+      case 'singleSelect':
+        {
+          var _formattedValue$label;
+
+          if (typeof cellParams.colDef.valueOptions === 'function') {
+            // If value option depends on the row, set specific options to the cell
+            // This dataValidation is buggy with LibreOffice and does not allow to have coma
+            const valueOptions = cellParams.colDef.valueOptions({
+              id,
+              row,
+              field: cellParams.field
+            });
+            const formattedValueOptions = getFormattedValueOptions(cellParams.colDef, valueOptions, api);
+            dataValidation[column.field] = {
+              type: 'list',
+              allowBlank: true,
+              formulae: [`"${formattedValueOptions.map(x => x.toString().replaceAll(',', 'CHAR(44)')).join(',')}"`]
+            };
+          } else {
+            // If value option is defined for the column, refer to another sheet
+            dataValidation[column.field] = {
+              type: 'list',
+              allowBlank: true,
+              formulae: [defaultValueOptionsFormulae[column.field]]
+            };
+          }
+
+          const formattedValue = api.getCellParams(id, column.field).formattedValue;
+
+          if (process.env.NODE_ENV !== 'production') {
+            if (String(cellParams.formattedValue) === '[object Object]') {
+              warnInvalidFormattedValue();
+            }
+          }
+
+          row[column.field] = (_formattedValue$label = formattedValue == null ? void 0 : formattedValue.label) != null ? _formattedValue$label : formattedValue;
+          break;
+        }
+
+      case 'boolean':
+      case 'number':
+        row[column.field] = api.getCellParams(id, column.field).value;
+        break;
+
+      case 'date':
+      case 'dateTime':
+        {
+          // Excel does not do any timezone conversion, so we create a date using UTC instead of local timezone
+          // Solution from: https://github.com/exceljs/exceljs/issues/486#issuecomment-432557582
+          // About Date.UTC(): https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Global_Objects/Date/UTC#exemples
+          const date = api.getCellParams(id, column.field).value; // value may be `undefined` in auto-generated grouping rows
+
+          if (!date) {
+            break;
+          }
+
+          const utcDate = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), date.getHours(), date.getMinutes(), date.getSeconds()));
+          row[column.field] = utcDate;
+          break;
+        }
+
+      case 'actions':
+        break;
+
+      default:
+        row[column.field] = api.getCellParams(id, column.field).formattedValue;
+
+        if (process.env.NODE_ENV !== 'production') {
+          if (String(cellParams.formattedValue) === '[object Object]') {
+            warnInvalidFormattedValue();
+          }
+        }
+
+        break;
+    }
+  });
+  return {
+    row,
+    dataValidation,
+    outlineLevel
+  };
+};
+
+const defaultColumnsStyles = {
+  [GRID_DATE_COL_DEF.type]: {
+    numFmt: 'dd.mm.yyyy'
+  },
+  [GRID_DATETIME_COL_DEF.type]: {
+    numFmt: 'dd.mm.yyyy hh:mm'
+  }
+};
+
+const serializeColumn = (column, columnsStyles) => {
+  const {
+    field,
+    type
+  } = column;
+  return {
+    key: field,
+    // Excel width must stay between 0 and 255 (https://support.microsoft.com/en-us/office/change-the-column-width-and-row-height-72f5e3cc-994d-43e8-ae58-9774a0905f46)
+    // From the example of column width behavior (https://docs.microsoft.com/en-US/office/troubleshoot/excel/determine-column-widths#example-of-column-width-behavior)
+    // a value of 10 corresponds to 75px. This is an approximation, because column width depends on the the font-size
+    width: Math.min(255, column.width ? column.width / 7.5 : 8.43),
+    style: _extends({}, type && (defaultColumnsStyles == null ? void 0 : defaultColumnsStyles[type]), columnsStyles == null ? void 0 : columnsStyles[field])
+  };
+};
+
+export async function buildExcel(options, api) {
+  const {
+    columns,
+    rowIds,
+    includeHeaders,
+    valueOptionsSheetName,
+    exceljsPreProcess,
+    exceljsPostProcess,
+    columnsStyles = {}
+  } = options;
+  const excelJS = await getExcelJs();
+  const workbook = new excelJS.Workbook();
+  const worksheet = workbook.addWorksheet('Sheet1');
+  worksheet.columns = columns.map(column => serializeColumn(column, columnsStyles));
+
+  if (exceljsPreProcess) {
+    await exceljsPreProcess({
+      workbook,
+      worksheet
+    });
+  }
+
+  if (includeHeaders) {
+    worksheet.addRow(columns.map(column => column.headerName || column.field));
+  }
+
+  const columnsWithArrayValueOptions = columns.filter(column => column.type === 'singleSelect' && column.valueOptions && typeof column.valueOptions !== 'function');
+  const defaultValueOptionsFormulae = {};
+
+  if (columnsWithArrayValueOptions.length) {
+    const valueOptionsWorksheet = workbook.addWorksheet(valueOptionsSheetName);
+    valueOptionsWorksheet.columns = columnsWithArrayValueOptions.map(({
+      field
+    }) => ({
+      key: field
+    }));
+    columnsWithArrayValueOptions.forEach(column => {
+      const formattedValueOptions = getFormattedValueOptions(column, column.valueOptions, api);
+      valueOptionsWorksheet.getColumn(column.field).values = [column.headerName || column.field, ...formattedValueOptions];
+      const columnLetter = valueOptionsWorksheet.getColumn(column.field).letter;
+      defaultValueOptionsFormulae[column.field] = `${valueOptionsSheetName}!$${columnLetter}$2:$${columnLetter}$${1 + formattedValueOptions.length}`;
+    });
+  }
+
+  rowIds.forEach(id => {
+    const {
+      row,
+      dataValidation,
+      outlineLevel
+    } = serializeRow(id, columns, api, defaultValueOptionsFormulae);
+    const newRow = worksheet.addRow(row);
+    Object.keys(dataValidation).forEach(field => {
+      newRow.getCell(field).dataValidation = _extends({}, dataValidation[field]);
+    });
+
+    if (outlineLevel) {
+      newRow.outlineLevel = outlineLevel;
+    }
+  });
+
+  if (exceljsPostProcess) {
+    await exceljsPostProcess({
+      workbook,
+      worksheet
+    });
+  }
+
+  return workbook;
+}

package/hooks/features/export/useGridExcelExport.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+/**
+ * @requires useGridColumns (state)
+ * @requires useGridFilter (state)
+ * @requires useGridSorting (state)
+ * @requires useGridSelection (state)
+ * @requires useGridParamsApi (method)
+ */
+export declare const useGridExcelExport: (apiRef: React.MutableRefObject<GridApiPremium>) => void;

package/hooks/features/export/useGridExcelExport.js

@@ -0,0 +1,77 @@
+import * as React from 'react';
+import { useGridApiMethod, useGridLogger } from '@mui/x-data-grid';
+import { useGridRegisterPipeProcessor, exportAs, getColumnsToExport, defaultGetRowsToExport } from '@mui/x-data-grid/internals';
+import { buildExcel } from './serializer/excelSerializer';
+import { GridExcelExportMenuItem } from '../../../components';
+/**
+ * @requires useGridColumns (state)
+ * @requires useGridFilter (state)
+ * @requires useGridSorting (state)
+ * @requires useGridSelection (state)
+ * @requires useGridParamsApi (method)
+ */
+
+import { jsx as _jsx } from "react/jsx-runtime";
+export const useGridExcelExport = apiRef => {
+  const logger = useGridLogger(apiRef, 'useGridExcelExport');
+  const getDataAsExcel = React.useCallback((options = {}) => {
+    var _options$getRowsToExp, _options$includeHeade;
+
+    logger.debug(`Get data as excel`);
+    const getRowsToExport = (_options$getRowsToExp = options.getRowsToExport) != null ? _options$getRowsToExp : defaultGetRowsToExport;
+    const exportedRowIds = getRowsToExport({
+      apiRef
+    });
+    const exportedColumns = getColumnsToExport({
+      apiRef,
+      options
+    });
+    return buildExcel({
+      columns: exportedColumns,
+      rowIds: exportedRowIds,
+      includeHeaders: (_options$includeHeade = options.includeHeaders) != null ? _options$includeHeade : true,
+      valueOptionsSheetName: (options == null ? void 0 : options.valueOptionsSheetName) || 'Options',
+      columnsStyles: options == null ? void 0 : options.columnsStyles,
+      exceljsPreProcess: options == null ? void 0 : options.exceljsPreProcess,
+      exceljsPostProcess: options == null ? void 0 : options.exceljsPostProcess
+    }, apiRef.current);
+  }, [logger, apiRef]);
+  const exportDataAsExcel = React.useCallback(async options => {
+    logger.debug(`Export data as excel`);
+    const workbook = await getDataAsExcel(options);
+
+    if (workbook === null) {
+      return;
+    }
+
+    const content = await workbook.xlsx.writeBuffer();
+    const blob = new Blob([content], {
+      type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+    });
+    exportAs(blob, 'xlsx', options == null ? void 0 : options.fileName);
+  }, [logger, getDataAsExcel]);
+  const excelExportApi = {
+    getDataAsExcel,
+    exportDataAsExcel
+  };
+  useGridApiMethod(apiRef, excelExportApi, 'GridExcelExportApi');
+  /**
+   * PRE-PROCESSING
+   */
+
+  const addExportMenuButtons = React.useCallback((initialValue, options) => {
+    var _options$excelOptions;
+
+    if ((_options$excelOptions = options.excelOptions) != null && _options$excelOptions.disableToolbarButton) {
+      return initialValue;
+    }
+
+    return [...initialValue, {
+      component: /*#__PURE__*/_jsx(GridExcelExportMenuItem, {
+        options: options.excelOptions
+      }),
+      componentName: 'excelExport'
+    }];
+  }, []);
+  useGridRegisterPipeProcessor(apiRef, 'exportMenu', addExportMenuButtons);
+};

package/hooks/features/index.d.ts

@@ -0,0 +1,2 @@
+export * from './rowGrouping';
+export * from './export';

package/hooks/features/index.js

@@ -0,0 +1,3 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-premium`
+export * from './rowGrouping';
+export * from './export';

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

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { GridColDef, GridStateColDef, GridGroupingColDefOverride } from '@mui/x-data-grid-pro';
+import { GridColumnRawLookup } from '@mui/x-data-grid-pro/internals';
+import { GridApiPremium } from '../../../models/gridApiPremium';
+interface CreateGroupingColDefMonoCriteriaParams {
+    columnsLookup: GridColumnRawLookup;
+    /**
+     * The field from which we are grouping the rows.
+     */
+    groupingCriteria: string;
+    /**
+     * The col def from which we are grouping the rows.
+     */
+    groupedByColDef: GridColDef | GridStateColDef;
+    /**
+     * The col def properties the user wants to override.
+     * This value comes `prop.groupingColDef`.
+     */
+    colDefOverride: GridGroupingColDefOverride | null | undefined;
+}
+/**
+ * Creates the `GridColDef` for a grouping column that only takes care of a single grouping criteria
+ */
+export declare const createGroupingColDefForOneGroupingCriteria: ({ columnsLookup, groupedByColDef, groupingCriteria, colDefOverride, }: CreateGroupingColDefMonoCriteriaParams) => GridColDef;
+interface CreateGroupingColDefSeveralCriteriaParams {
+    apiRef: React.MutableRefObject<GridApiPremium>;
+    columnsLookup: GridColumnRawLookup;
+    /**
+     * The fields from which we are grouping the rows.
+     */
+    rowGroupingModel: string[];
+    /**
+     * The col def properties the user wants to override.
+     * This value comes `prop.groupingColDef`.
+     */
+    colDefOverride: GridGroupingColDefOverride | null | undefined;
+}
+/**
+ * Creates the `GridColDef` for a grouping column that takes care of all the grouping criteria
+ */
+export declare const createGroupingColDefForAllGroupingCriteria: ({ apiRef, columnsLookup, rowGroupingModel, colDefOverride, }: CreateGroupingColDefSeveralCriteriaParams) => GridColDef;
+export {};

package/hooks/features/rowGrouping/createGroupingColDef.js

@@ -0,0 +1,318 @@
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+import _extends from "@babel/runtime/helpers/esm/extends";
+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 { GridGroupingCriteriaCell } from '../../../components/GridGroupingCriteriaCell';
+import { GridGroupingColumnLeafCell } from '../../../components/GridGroupingColumnLeafCell';
+import { getRowGroupingFieldFromGroupingCriteria, GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD } from './gridRowGroupingUtils';
+import { gridRowGroupingSanitizedModelSelector } from './gridRowGroupingSelector';
+import { jsx as _jsx } from "react/jsx-runtime";
+
+const GROUPING_COL_DEF_DEFAULT_PROPERTIES = _extends({}, GRID_STRING_COL_DEF, {
+  disableReorder: true
+});
+
+const GROUPING_COL_DEF_FORCED_PROPERTIES = {
+  type: 'rowGroupByColumnsGroup',
+  editable: false,
+  groupable: false
+};
+/**
+ * When sorting two cells with different grouping criteria, we consider that the cell with the grouping criteria coming first in the model should be displayed below.
+ * This can occur when some rows don't have all the fields. In which case we want the rows with the missing field to be displayed above.
+ * TODO: Make this index comparator depth invariant, the logic should not be inverted when sorting in the "desc" direction (but the current return format of `sortComparator` does not support this behavior).
+ */
+
+const groupingFieldIndexComparator = (v1, v2, cellParams1, cellParams2) => {
+  const model = gridRowGroupingSanitizedModelSelector(cellParams1.api.state, cellParams1.api.instanceId);
+  const groupingField1 = cellParams1.rowNode.groupingField;
+  const groupingField2 = cellParams2.rowNode.groupingField;
+
+  if (groupingField1 === groupingField2) {
+    return 0;
+  }
+
+  if (groupingField1 == null) {
+    return -1;
+  }
+
+  if (groupingField2 == null) {
+    return 1;
+  }
+
+  if (model.indexOf(groupingField1) < model.indexOf(groupingField2)) {
+    return -1;
+  }
+
+  return 1;
+};
+
+const getLeafProperties = leafColDef => {
+  var _leafColDef$headerNam, _leafColDef$filterOpe;
+
+  return {
+    headerName: (_leafColDef$headerNam = leafColDef.headerName) != null ? _leafColDef$headerNam : leafColDef.field,
+    sortable: leafColDef.sortable,
+    filterable: leafColDef.filterable,
+    filterOperators: (_leafColDef$filterOpe = leafColDef.filterOperators) == null ? void 0 : _leafColDef$filterOpe.map(operator => _extends({}, operator, {
+      getApplyFilterFn: (filterItem, column) => {
+        const originalFn = operator.getApplyFilterFn(filterItem, column);
+
+        if (!originalFn) {
+          return null;
+        }
+
+        return params => {
+          // We only want to filter leaves
+          if (params.rowNode.groupingField != null) {
+            return true;
+          }
+
+          return originalFn(params);
+        };
+      }
+    })),
+    sortComparator: (v1, v2, cellParams1, cellParams2) => {
+      // We only want to sort the leaves
+      if (cellParams1.rowNode.groupingField === null && cellParams2.rowNode.groupingField === null) {
+        return leafColDef.sortComparator(v1, v2, cellParams1, cellParams2);
+      }
+
+      return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
+    }
+  };
+};
+
+const getGroupingCriteriaProperties = (groupedByColDef, applyHeaderName) => {
+  var _groupedByColDef$filt;
+
+  const properties = {
+    sortable: groupedByColDef.sortable,
+    filterable: groupedByColDef.filterable,
+    sortComparator: (v1, v2, cellParams1, cellParams2) => {
+      // We only want to sort the groups of the current grouping criteria
+      if (cellParams1.rowNode.groupingField === groupedByColDef.field && cellParams2.rowNode.groupingField === groupedByColDef.field) {
+        return groupedByColDef.sortComparator(v1, v2, cellParams1, cellParams2);
+      }
+
+      return groupingFieldIndexComparator(v1, v2, cellParams1, cellParams2);
+    },
+    filterOperators: (_groupedByColDef$filt = groupedByColDef.filterOperators) == null ? void 0 : _groupedByColDef$filt.map(operator => _extends({}, operator, {
+      getApplyFilterFn: (filterItem, column) => {
+        const originalFn = operator.getApplyFilterFn(filterItem, column);
+
+        if (!originalFn) {
+          return null;
+        }
+
+        return params => {
+          // We only want to filter the groups of the current grouping criteria
+          if (params.rowNode.groupingField !== groupedByColDef.field) {
+            return true;
+          }
+
+          return originalFn(params);
+        };
+      }
+    }))
+  };
+
+  if (applyHeaderName) {
+    var _groupedByColDef$head;
+
+    properties.headerName = (_groupedByColDef$head = groupedByColDef.headerName) != null ? _groupedByColDef$head : groupedByColDef.field;
+  }
+
+  return properties;
+};
+
+/**
+ * Creates the `GridColDef` for a grouping column that only takes care of a single grouping criteria
+ */
+export const createGroupingColDefForOneGroupingCriteria = ({
+  columnsLookup,
+  groupedByColDef,
+  groupingCriteria,
+  colDefOverride
+}) => {
+  var _groupedByColDef$widt, _leafColDef$width;
+
+  const _ref = colDefOverride != null ? colDefOverride : {},
+        {
+    leafField,
+    mainGroupingCriteria,
+    hideDescendantCount
+  } = _ref,
+        colDefOverrideProperties = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  const leafColDef = leafField ? columnsLookup[leafField] : null; // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
+
+  const commonProperties = {
+    width: Math.max(((_groupedByColDef$widt = groupedByColDef.width) != null ? _groupedByColDef$widt : GRID_STRING_COL_DEF.width) + 40, (_leafColDef$width = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width : 0),
+    renderCell: params => {
+      // Render leaves
+      if (params.rowNode.groupingField == null) {
+        if (leafColDef) {
+          const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
+            api: params.api
+          });
+
+          if (leafColDef.renderCell) {
+            return leafColDef.renderCell(leafParams);
+          }
+
+          return /*#__PURE__*/_jsx(GridGroupingColumnLeafCell, _extends({}, leafParams));
+        }
+
+        return '';
+      } // Render current grouping criteria groups
+
+
+      if (params.rowNode.groupingField === groupingCriteria) {
+        return /*#__PURE__*/_jsx(GridGroupingCriteriaCell, _extends({}, params, {
+          hideDescendantCount: hideDescendantCount
+        }));
+      }
+
+      return '';
+    },
+    valueGetter: params => {
+      if (!params.rowNode) {
+        return undefined;
+      }
+
+      if (params.rowNode.groupingField == null) {
+        if (leafColDef) {
+          return params.api.getCellValue(params.id, leafField);
+        }
+
+        return undefined;
+      }
+
+      if (params.rowNode.groupingField === groupingCriteria) {
+        return params.rowNode.groupingKey;
+      }
+
+      return undefined;
+    }
+  }; // If we have a `mainGroupingCriteria` defined and matching the `groupingCriteria`
+  // Then we apply the sorting / filtering on the groups of this column's grouping criteria based on the properties of `groupedByColDef`.
+  // It can be useful to define a `leafField` for leaves rendering but still use the grouping criteria for the sorting / filtering
+  //
+  // If we have a `leafField` defined and matching an existing column
+  // Then we apply the sorting / filtering on the leaves based on the properties of `leavesColDef`
+  //
+  // By default, we apply the sorting / filtering on the groups of this column's grouping criteria based on the properties of `groupedColDef`.
+
+  let sourceProperties;
+
+  if (mainGroupingCriteria && mainGroupingCriteria === groupingCriteria) {
+    sourceProperties = getGroupingCriteriaProperties(groupedByColDef, true);
+  } else if (leafColDef) {
+    sourceProperties = getLeafProperties(leafColDef);
+  } else {
+    sourceProperties = getGroupingCriteriaProperties(groupedByColDef, true);
+  } // The properties that can't be overridden with `colDefOverride`
+
+
+  const forcedProperties = _extends({
+    field: getRowGroupingFieldFromGroupingCriteria(groupingCriteria)
+  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+
+  return _extends({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
+};
+
+/**
+ * Creates the `GridColDef` for a grouping column that takes care of all the grouping criteria
+ */
+export const createGroupingColDefForAllGroupingCriteria = ({
+  apiRef,
+  columnsLookup,
+  rowGroupingModel,
+  colDefOverride
+}) => {
+  var _leafColDef$width2;
+
+  const _ref2 = colDefOverride != null ? colDefOverride : {},
+        {
+    leafField,
+    mainGroupingCriteria,
+    hideDescendantCount
+  } = _ref2,
+        colDefOverrideProperties = _objectWithoutPropertiesLoose(_ref2, _excluded2);
+
+  const leafColDef = leafField ? columnsLookup[leafField] : null; // The properties that do not depend on the presence of a `leafColDef` and that can be overridden by `colDefOverride`
+
+  const commonProperties = {
+    headerName: apiRef.current.getLocaleText('groupingColumnHeaderName'),
+    width: Math.max(...rowGroupingModel.map(field => {
+      var _columnsLookup$field$;
+
+      return ((_columnsLookup$field$ = columnsLookup[field].width) != null ? _columnsLookup$field$ : GRID_STRING_COL_DEF.width) + 40;
+    }), (_leafColDef$width2 = leafColDef == null ? void 0 : leafColDef.width) != null ? _leafColDef$width2 : 0),
+    renderCell: params => {
+      // Render the leaves
+      if (params.rowNode.groupingField == null) {
+        if (leafColDef) {
+          const leafParams = _extends({}, params.api.getCellParams(params.id, leafField), {
+            api: params.api
+          });
+
+          if (leafColDef.renderCell) {
+            return leafColDef.renderCell(leafParams);
+          }
+
+          return /*#__PURE__*/_jsx(GridGroupingColumnLeafCell, _extends({}, leafParams));
+        }
+
+        return '';
+      } // Render the groups
+
+
+      return /*#__PURE__*/_jsx(GridGroupingCriteriaCell, _extends({}, params, {
+        hideDescendantCount: hideDescendantCount
+      }));
+    },
+    valueGetter: params => {
+      if (!params.rowNode) {
+        return undefined;
+      }
+
+      if (params.rowNode.groupingField == null) {
+        if (leafColDef) {
+          return params.api.getCellValue(params.id, leafField);
+        }
+
+        return undefined;
+      }
+
+      return params.rowNode.groupingKey;
+    }
+  }; // If we have a `mainGroupingCriteria` defined and matching one of the `orderedGroupedByFields`
+  // Then we apply the sorting / filtering on the groups of this column's grouping criteria based on the properties of `columnsLookup[mainGroupingCriteria]`.
+  // It can be useful to use another grouping criteria than the top level one for the sorting / filtering
+  //
+  // If we have a `leafField` defined and matching an existing column
+  // Then we apply the sorting / filtering on the leaves based on the properties of `leavesColDef`
+  //
+  // By default, we apply the sorting / filtering on the groups of the top level grouping criteria based on the properties of `columnsLookup[orderedGroupedByFields[0]]`.
+
+  let sourceProperties;
+
+  if (mainGroupingCriteria && rowGroupingModel.includes(mainGroupingCriteria)) {
+    sourceProperties = getGroupingCriteriaProperties(columnsLookup[mainGroupingCriteria], true);
+  } else if (leafColDef) {
+    sourceProperties = getLeafProperties(leafColDef);
+  } else {
+    sourceProperties = getGroupingCriteriaProperties(columnsLookup[rowGroupingModel[0]], rowGroupingModel.length === 1);
+  } // The properties that can't be overridden with `colDefOverride`
+
+
+  const forcedProperties = _extends({
+    field: GRID_ROW_GROUPING_SINGLE_GROUPING_FIELD
+  }, GROUPING_COL_DEF_FORCED_PROPERTIES);
+
+  return _extends({}, GROUPING_COL_DEF_DEFAULT_PROPERTIES, commonProperties, sourceProperties, colDefOverrideProperties, forcedProperties);
+};