@mui/x-data-grid-pro 5.4.0 → 5.6.0

package/hooks/features/detailPanel/useGridDetailPanel.js

@@ -0,0 +1,109 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { GridEvents, useGridSelector, useGridApiEventHandler, useGridApiMethod } from '@mui/x-data-grid';
+import { useGridStateInit, useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD } from './gridDetailPanelToggleColDef';
+import { gridDetailPanelExpandedRowIdsSelector, gridDetailPanelExpandedRowsContentCacheSelector, gridDetailPanelExpandedRowsHeightCacheSelector } from './gridDetailPanelSelector';
+export const useGridDetailPanel = (apiRef, props) => {
+  useGridStateInit(apiRef, state => {
+    var _ref, _props$detailPanelExp, _props$initialState, _props$initialState$d;
+
+    return _extends({}, state, {
+      detailPanel: {
+        expandedRowIds: (_ref = (_props$detailPanelExp = props.detailPanelExpandedRowIds) != null ? _props$detailPanelExp : (_props$initialState = props.initialState) == null ? void 0 : (_props$initialState$d = _props$initialState.detailPanel) == null ? void 0 : _props$initialState$d.expandedRowIds) != null ? _ref : []
+      }
+    });
+  });
+  const expandedRowIds = useGridSelector(apiRef, gridDetailPanelExpandedRowIdsSelector);
+  const contentCache = useGridSelector(apiRef, gridDetailPanelExpandedRowsContentCacheSelector);
+  const handleCellClick = React.useCallback((params, event) => {
+    if (params.field !== GRID_DETAIL_PANEL_TOGGLE_FIELD || props.getDetailPanelContent == null) {
+      return;
+    }
+
+    const content = contentCache[params.id];
+
+    if (! /*#__PURE__*/React.isValidElement(content)) {
+      return;
+    } // Ignore if the user didn't click specifically in the "i" button
+
+
+    if (event.target === event.currentTarget) {
+      return;
+    }
+
+    apiRef.current.toggleDetailPanel(params.id);
+  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  const handleCellKeyDown = React.useCallback((params, event) => {
+    if (!event.ctrlKey || event.key !== 'Enter' || props.getDetailPanelContent == null) {
+      return;
+    }
+
+    apiRef.current.toggleDetailPanel(params.id);
+  }, [apiRef, props.getDetailPanelContent]);
+  useGridApiEventHandler(apiRef, GridEvents.cellClick, handleCellClick);
+  useGridApiEventHandler(apiRef, GridEvents.cellKeyDown, handleCellKeyDown);
+  const addDetailHeight = React.useCallback((initialValue, row) => {
+    var _heightCache$row$id;
+
+    if (expandedRowIds.length === 0 || !expandedRowIds.includes(row.id)) {
+      return _extends({}, initialValue, {
+        detail: 0
+      });
+    }
+
+    const heightCache = gridDetailPanelExpandedRowsHeightCacheSelector(apiRef.current.state);
+    return _extends({}, initialValue, {
+      detail: (_heightCache$row$id = heightCache[row.id]) != null ? _heightCache$row$id : 0 // Fallback to zero because the cache might not be ready yet (e.g. page was changed)
+
+    });
+  }, [apiRef, expandedRowIds]);
+  useGridRegisterPreProcessor(apiRef, 'rowHeight', addDetailHeight);
+  apiRef.current.unstable_updateControlState({
+    stateId: 'detailPanels',
+    propModel: props.detailPanelExpandedRowIds,
+    propOnChange: props.onDetailPanelExpandedRowIdsChange,
+    stateSelector: gridDetailPanelExpandedRowIdsSelector,
+    changeEvent: GridEvents.detailPanelsExpandedRowIdsChange
+  });
+  const toggleDetailPanel = React.useCallback(id => {
+    if (props.getDetailPanelContent == null) {
+      return;
+    }
+
+    const content = contentCache[id];
+
+    if (! /*#__PURE__*/React.isValidElement(content)) {
+      return;
+    }
+
+    const ids = apiRef.current.getExpandedDetailPanels();
+    apiRef.current.setExpandedDetailPanels(ids.includes(id) ? ids.filter(rowId => rowId !== id) : [...ids, id]);
+  }, [apiRef, contentCache, props.getDetailPanelContent]);
+  const getExpandedDetailPanels = React.useCallback(() => gridDetailPanelExpandedRowIdsSelector(apiRef.current.state), [apiRef]);
+  const setExpandedDetailPanels = React.useCallback(ids => {
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        detailPanel: _extends({}, state.detailPanel, {
+          expandedRowIds: ids
+        })
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef]);
+  const detailPanelApi = {
+    toggleDetailPanel,
+    getExpandedDetailPanels,
+    setExpandedDetailPanels
+  };
+  useGridApiMethod(apiRef, detailPanelApi, 'detailPanelApi');
+  React.useEffect(() => {
+    if (props.detailPanelExpandedRowIds) {
+      const currentModel = gridDetailPanelExpandedRowIdsSelector(apiRef.current.state);
+
+      if (currentModel !== props.detailPanelExpandedRowIds) {
+        apiRef.current.setExpandedDetailPanels(props.detailPanelExpandedRowIds);
+      }
+    }
+  }, [apiRef, props.detailPanelExpandedRowIds]);
+};

package/hooks/features/detailPanel/useGridDetailPanelCache.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+export declare const useGridDetailPanelCache: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'getDetailPanelContent' | 'getDetailPanelHeight'>) => void;

package/hooks/features/detailPanel/useGridDetailPanelCache.js

@@ -0,0 +1,57 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { useGridApiEventHandler, gridRowIdsSelector, GridEvents } from '@mui/x-data-grid';
+
+function cacheContentAndHeight(apiRef, getDetailPanelContent, getDetailPanelHeight) {
+  if (typeof getDetailPanelContent !== 'function') {
+    return {};
+  } // TODO change to lazy approach using a Proxy
+  // only call getDetailPanelContent when asked for an id
+
+
+  const rowIds = gridRowIdsSelector(apiRef);
+  const contentCache = rowIds.reduce((acc, id) => {
+    const params = apiRef.current.getRowParams(id);
+    acc[id] = getDetailPanelContent(params);
+    return acc;
+  }, {});
+  const heightCache = rowIds.reduce((acc, id) => {
+    if (contentCache[id] == null) {
+      return acc;
+    }
+
+    const params = apiRef.current.getRowParams(id);
+    acc[id] = getDetailPanelHeight(params);
+    return acc;
+  }, {});
+  return {
+    contentCache,
+    heightCache
+  };
+}
+
+export const useGridDetailPanelCache = (apiRef, props) => {
+  const updateCaches = React.useCallback(() => {
+    apiRef.current.setState(state => {
+      return _extends({}, state, {
+        detailPanel: _extends({}, state.detailPanel, cacheContentAndHeight(apiRef, props.getDetailPanelContent, props.getDetailPanelHeight))
+      });
+    });
+    apiRef.current.forceUpdate();
+  }, [apiRef, props.getDetailPanelContent, props.getDetailPanelHeight]);
+  useGridApiEventHandler(apiRef, GridEvents.visibleRowsSet, updateCaches);
+  const isFirstRender = React.useRef(true);
+
+  if (isFirstRender.current) {
+    isFirstRender.current = false;
+    updateCaches();
+  }
+
+  React.useEffect(() => {
+    if (isFirstRender.current) {
+      return;
+    }
+
+    updateCaches();
+  }, [updateCaches]);
+};

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+import { GridApiPro } from '../../../models/gridApiPro';
+export declare const useGridDetailPanelPreProcessors: (apiRef: React.MutableRefObject<GridApiPro>, props: DataGridProProcessedProps) => void;

package/hooks/features/detailPanel/useGridDetailPanelPreProcessors.js

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { useGridRegisterPreProcessor } from '@mui/x-data-grid/internals';
+import { GRID_DETAIL_PANEL_TOGGLE_FIELD, GRID_DETAIL_PANEL_TOGGLE_COL_DEF } from './gridDetailPanelToggleColDef';
+export const useGridDetailPanelPreProcessors = (apiRef, props) => {
+  const addToggleColumn = React.useCallback(columnsState => {
+    if (props.getDetailPanelContent == null) {
+      // Remove the toggle column, when it exists
+      if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
+        delete columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD];
+        columnsState.all = columnsState.all.filter(field => field !== GRID_DETAIL_PANEL_TOGGLE_FIELD);
+      }
+
+      return columnsState;
+    } // Don't add the toggle column if there's already one
+    // The user might have manually added it to have it in a custom position
+
+
+    if (columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD]) {
+      return columnsState;
+    } // Othewise, add the toggle column at the beginning
+
+
+    columnsState.all = [GRID_DETAIL_PANEL_TOGGLE_FIELD, ...columnsState.all];
+    columnsState.lookup[GRID_DETAIL_PANEL_TOGGLE_FIELD] = GRID_DETAIL_PANEL_TOGGLE_COL_DEF;
+    return columnsState;
+  }, [props.getDetailPanelContent]);
+  useGridRegisterPreProcessor(apiRef, 'hydrateColumns', addToggleColumn);
+};

package/hooks/features/index.d.ts

@@ -0,0 +1,6 @@
+export * from './columnPinning';
+export * from './columnReorder';
+export * from './columnResize';
+export * from './rowGrouping';
+export * from './treeData';
+export * from './detailPanel';

package/hooks/features/index.js

@@ -0,0 +1,7 @@
+// Only export the variable and types that should be publicly exposed and re-exported from `@mui/x-data-grid-pro`
+export * from './columnPinning';
+export * from './columnReorder';
+export * from './columnResize';
+export * from './rowGrouping';
+export * from './treeData';
+export * from './detailPanel';

package/hooks/features/infiniteLoader/useGridInfiniteLoader.d.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (state)
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridScroll (method
+ */
+export declare const useGridInfiniteLoader: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'onRowsScrollEnd' | 'scrollEndThreshold' | 'pagination' | 'paginationMode'>) => void;

package/hooks/features/infiniteLoader/useGridInfiniteLoader.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { useGridSelector, GridEvents, useGridApiEventHandler, useGridApiOptionHandler, gridVisibleColumnDefinitionsSelector, gridRowsMetaSelector } from '@mui/x-data-grid';
+import { useCurrentPageRows } from '@mui/x-data-grid/internals';
+
+/**
+ * Only available in DataGridPro
+ * @requires useGridColumns (state)
+ * @requires useGridDimensions (method) - can be after
+ * @requires useGridScroll (method
+ */
+export const useGridInfiniteLoader = (apiRef, props) => {
+  const visibleColumns = useGridSelector(apiRef, gridVisibleColumnDefinitionsSelector);
+  const currentPage = useCurrentPageRows(apiRef, props);
+  const rowsMeta = useGridSelector(apiRef, gridRowsMetaSelector);
+  const contentHeight = Math.max(rowsMeta.currentPageTotalHeight, 1);
+  const isInScrollBottomArea = React.useRef(false);
+  const handleRowsScrollEnd = React.useCallback(scrollPosition => {
+    const dimensions = apiRef.current.getRootDimensions();
+
+    if (!dimensions) {
+      return;
+    }
+
+    const scrollPositionBottom = scrollPosition.top + dimensions.viewportOuterSize.height;
+    const viewportPageSize = apiRef.current.unstable_getViewportPageSize();
+
+    if (scrollPositionBottom < contentHeight - props.scrollEndThreshold) {
+      isInScrollBottomArea.current = false;
+    }
+
+    if (scrollPositionBottom >= contentHeight - props.scrollEndThreshold && !isInScrollBottomArea.current) {
+      const rowScrollEndParam = {
+        visibleColumns,
+        viewportPageSize,
+        virtualRowsCount: currentPage.rows.length
+      };
+      apiRef.current.publishEvent(GridEvents.rowsScrollEnd, rowScrollEndParam);
+      isInScrollBottomArea.current = true;
+    }
+  }, [contentHeight, props.scrollEndThreshold, visibleColumns, apiRef, currentPage.rows.length]);
+  const handleGridScroll = React.useCallback(({
+    left,
+    top
+  }) => {
+    handleRowsScrollEnd({
+      left,
+      top
+    });
+  }, [handleRowsScrollEnd]);
+  useGridApiEventHandler(apiRef, GridEvents.rowsScroll, handleGridScroll);
+  useGridApiOptionHandler(apiRef, GridEvents.rowsScrollEnd, props.onRowsScrollEnd);
+};

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

@@ -0,0 +1,43 @@
+import * as React from 'react';
+import { GridColDef, GridStateColDef } from '@mui/x-data-grid';
+import { GridColumnRawLookup } from '@mui/x-data-grid/internals';
+import { GridGroupingColDefOverride } from '../../../models';
+import { GridApiPro } from '../../../models/gridApiPro';
+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<GridApiPro>;
+    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';
+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);
+};

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

@@ -0,0 +1,31 @@
+export declare type GridRowGroupingModel = string[];
+export interface GridRowGroupingState {
+    model: GridRowGroupingModel;
+}
+export interface GridRowGroupingInitialState {
+    model?: GridRowGroupingModel;
+}
+export interface GridRowGroupingApi {
+    /**
+     * Sets the columns to use as grouping criteria.
+     * @param {GridRowGroupingModel} model The columns to use as grouping criteria.
+     */
+    setRowGroupingModel: (model: GridRowGroupingModel) => void;
+    /**
+     * Adds the field to the row grouping model.
+     * @param {string} groupingCriteriaField The field from which we want to group the rows.
+     * @param {number | undefined} groupingIndex The grouping index at which we want to insert the new grouping criteria. By default, it will be inserted at the end of the model.
+     */
+    addRowGroupingCriteria: (groupingCriteriaField: string, groupingIndex?: number) => void;
+    /**
+     * sRemove the field from the row grouping model.
+     * @param {string} groupingCriteriaField The field from which we want to stop grouping the rows.
+     */
+    removeRowGroupingCriteria: (groupingCriteriaField: string) => void;
+    /**
+     * Sets the grouping index of a grouping criteria.
+     * @param {string} groupingCriteriaField The field of the grouping criteria from which we want to change the grouping index.
+     * @param {number} groupingIndex The new grouping index of this grouping criteria.
+     */
+    setRowGroupingCriteriaIndex: (groupingCriteriaField: string, groupingIndex: number) => void;
+}