[DataGridPro] Add new option hideDescendantCount to Tree Data

docs/next-env.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="next" />
-/// <reference types="next/types/global" />
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited

packages/grid/_modules_/grid/components/cell/GridTreeDataGroupingCell.tsx

@@ -26,8 +26,12 @@ const useUtilityClasses = (ownerState: OwnerState) => {
   return composeClasses(slots, getDataGridUtilityClass, classes);
 };
 
-const GridTreeDataGroupingCell = (props: GridRenderCellParams) => {
-  const { id, field, rowNode } = props;
+interface GridTreeDataGroupingCellProps extends GridRenderCellParams {
+  hideDescendantCount?: boolean;
+}
+
+const GridTreeDataGroupingCell = (props: GridTreeDataGroupingCellProps) => {
+  const { id, field, rowNode, hideDescendantCount } = props;
 
   const rootProps = useGridRootProps();
   const apiRef = useGridApiContext();
@@ -80,7 +84,7 @@ const GridTreeDataGroupingCell = (props: GridRenderCellParams) => {
       </div>
       <span>
         {rowNode.groupingKey}
-        {filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : ''}
+        {!hideDescendantCount && filteredDescendantCount > 0 ? ` (${filteredDescendantCount})` : ''}
       </span>
     </Box>
   );
@@ -122,6 +126,7 @@ GridTreeDataGroupingCell.propTypes = {
    * If true, the cell is the active element.
    */
   hasFocus: PropTypes.bool.isRequired,
+  hideDescendantCount: PropTypes.bool,
   /**
    * The grid row id.
    */

packages/grid/_modules_/grid/hooks/features/treeData/gridTreeDataGroupColDef.tsx → packages/grid/_modules_/grid/hooks/features/treeData/gridTreeDataGroupColDef.ts

@@ -1,6 +1,4 @@
-import * as React from 'react';
 import { GridColDef } from '../../../models/colDef/gridColDef';
-import { GridTreeDataGroupingCell } from '../../../components/cell/GridTreeDataGroupingCell';
 import { GRID_STRING_COL_DEF } from '../../../models/colDef/gridStringColDef';
 import { GridValueGetterFullParams } from '../../../models';
 
@@ -17,10 +15,12 @@ export const GRID_TREE_DATA_GROUP_COL_DEF: Omit<GridColDef, 'field' | 'editable'
   align: 'left',
   width: 200,
   valueGetter: (params) => (params as GridValueGetterFullParams).rowNode.groupingKey,
-  renderCell: (params) => <GridTreeDataGroupingCell {...params} />,
 };
 
-export const GRID_TREE_DATA_GROUP_COL_DEF_FORCED_FIELDS: Pick<GridColDef, 'field' | 'editable'> = {
+export const GRID_TREE_DATA_GROUP_COL_DEF_FORCED_PROPERTIES: Pick<
+  GridColDef,
+  'field' | 'editable'
+> = {
   field: '__tree_data_group__',
   editable: false,
 };

packages/grid/_modules_/grid/hooks/features/treeData/useGridTreeData.ts → packages/grid/_modules_/grid/hooks/features/treeData/useGridTreeData.tsx

@@ -3,18 +3,23 @@ import { GridApiRef } from '../../../models/api/gridApiRef';
 import { GridComponentProps } from '../../../GridComponentProps';
 import {
   GRID_TREE_DATA_GROUP_COL_DEF,
-  GRID_TREE_DATA_GROUP_COL_DEF_FORCED_FIELDS,
+  GRID_TREE_DATA_GROUP_COL_DEF_FORCED_PROPERTIES,
 } from './gridTreeDataGroupColDef';
 import { useGridApiEventHandler } from '../../utils/useGridApiEventHandler';
 import { GridEvents, GridEventListener } from '../../../models/events';
-import { GridColDef, GridGroupingColDefOverrideParams } from '../../../models';
+import {
+  GridColDef,
+  GridGroupingColDefOverride,
+  GridGroupingColDefOverrideParams,
+} from '../../../models';
 import { isSpaceKey } from '../../../utils/keyboardUtils';
 import { useFirstRender } from '../../utils/useFirstRender';
 import { buildRowTree, BuildRowTreeGroupingCriteria } from '../../../utils/tree/buildRowTree';
 import { GridRowGroupingPreProcessing } from '../../core/rowGroupsPerProcessing';
 import { gridFilteredDescendantCountLookupSelector } from '../filter';
 import { GridPreProcessingGroup, useGridRegisterPreProcessor } from '../../core/preProcessing';
 import { GridColumnsRawState } from '../columns/gridColumnsState';
+import { GridTreeDataGroupingCell } from '../../../components';
 
 const TREE_DATA_GROUPING_NAME = 'tree-data';
 
@@ -33,12 +38,7 @@ export const useGridTreeData = (
   const groupingColDef = React.useMemo<GridColDef>(() => {
     const propGroupingColDef = props.groupingColDef;
 
-    const baseColDef: GridColDef = {
-      ...GRID_TREE_DATA_GROUP_COL_DEF,
-      headerName: apiRef.current.getLocaleText('treeDataGroupingHeaderName'),
-      ...GRID_TREE_DATA_GROUP_COL_DEF_FORCED_FIELDS,
-    };
-    let colDefOverride: Partial<GridColDef> | null | undefined;
+    let colDefOverride: GridGroupingColDefOverride | null | undefined;
 
     if (typeof propGroupingColDef === 'function') {
       const params: GridGroupingColDefOverrideParams = {
@@ -51,9 +51,20 @@ export const useGridTreeData = (
       colDefOverride = propGroupingColDef;
     }
 
+    const { hideDescendantCount, ...colDefOverrideProperties } = colDefOverride ?? {};
+
+    const commonProperties: Omit<GridColDef, 'field' | 'editable'> = {
+      ...GRID_TREE_DATA_GROUP_COL_DEF,
+      renderCell: (params) => (
+        <GridTreeDataGroupingCell {...params} hideDescendantCount={hideDescendantCount} />
+      ),
+      headerName: apiRef.current.getLocaleText('treeDataGroupingHeaderName'),
+    };
+
     return {
-      ...baseColDef,
-      ...colDefOverride,
+      ...commonProperties,
+      ...colDefOverrideProperties,
+      ...GRID_TREE_DATA_GROUP_COL_DEF_FORCED_PROPERTIES,
     };
   }, [apiRef, props.groupingColDef]);
 

packages/grid/_modules_/grid/models/colDef/gridColDef.ts

@@ -230,7 +230,13 @@ export interface GridGroupingColDefOverride
   extends Omit<
     GridColDef,
     'editable' | 'valueSetter' | 'field' | 'preProcessEditCellProps' | 'renderEditCell'
-  > {}
+  > {
+  /**
+   * If `true`, the grouping cells will not render the amount of descendants.
+   * @default: false
+   */
+  hideDescendantCount?: boolean;
+}
 
 export interface GridGroupingColDefOverrideParams {
   /**

packages/grid/x-data-grid-pro/src/tests/treeData.DataGridPro.test.tsx

@@ -222,6 +222,30 @@ describe('<DataGridPro /> - Tree Data', () => {
       render(<Test groupingColDef={{ headerName: 'Custom header name' }} />);
       expect(getColumnHeadersTextContent()).to.deep.equal(['Custom header name', 'name']);
     });
+
+    it('should render descendant count when hideDescendantCount = false', () => {
+      render(
+        <Test groupingColDef={{ hideDescendantCount: false }} defaultGroupingExpansionDepth={-1} />,
+      );
+      expect(getColumnValues(0)).to.deep.equal([
+        'A (2)',
+        'A',
+        'B',
+        'B (4)',
+        'A',
+        'B (2)',
+        'A (1)',
+        'A',
+        'C',
+      ]);
+    });
+
+    it('should not render descendant count when hideDescendantCount = true', () => {
+      render(
+        <Test groupingColDef={{ hideDescendantCount: true }} defaultGroupingExpansionDepth={-1} />,
+      );
+      expect(getColumnValues(0)).to.deep.equal(['A', 'A', 'B', 'B', 'A', 'B', 'A', 'A', 'C']);
+    });
   });
 
   describe('row grouping column', () => {