[data grid][docs] add recipe for displaying child row count in footer

docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.js

@@ -0,0 +1,55 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  useGridSelector,
+  useKeepGroupedColumnsHidden,
+  useGridApiContext,
+  gridFilteredDescendantRowCountSelector,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+import { Box } from '@mui/material';
+
+function CustomFooterRowCount(props) {
+  const { visibleRowCount: topLevelRowCount } = props;
+  const apiRef = useGridApiContext();
+  const descendantRowCount = useGridSelector(
+    apiRef,
+    gridFilteredDescendantRowCountSelector,
+  );
+
+  return (
+    <Box sx={{ mx: 2 }}>
+      {descendantRowCount} row{descendantRowCount > 1 ? 's' : ''} in{' '}
+      {topLevelRowCount} group
+      {topLevelRowCount > 1 ? 's' : ''}
+    </Box>
+  );
+}
+
+export default function RowGroupingChildRowCount() {
+  const data = useMovieData();
+  const apiRef = useGridApiRef();
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      rowGrouping: {
+        model: ['company'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        initialState={initialState}
+        slots={{
+          footerRowCount: CustomFooterRowCount,
+        }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.tsx

@@ -0,0 +1,56 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  GridRowCountProps,
+  useGridApiRef,
+  useGridSelector,
+  useKeepGroupedColumnsHidden,
+  useGridApiContext,
+  gridFilteredDescendantRowCountSelector,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+import { Box } from '@mui/material';
+
+function CustomFooterRowCount(props: GridRowCountProps) {
+  const { visibleRowCount: topLevelRowCount } = props;
+  const apiRef = useGridApiContext();
+  const descendantRowCount = useGridSelector(
+    apiRef,
+    gridFilteredDescendantRowCountSelector,
+  );
+
+  return (
+    <Box sx={{ mx: 2 }}>
+      {descendantRowCount} row{descendantRowCount > 1 ? 's' : ''} in{' '}
+      {topLevelRowCount} group
+      {topLevelRowCount > 1 ? 's' : ''}
+    </Box>
+  );
+}
+
+export default function RowGroupingChildRowCount() {
+  const data = useMovieData();
+  const apiRef = useGridApiRef();
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      rowGrouping: {
+        model: ['company'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        initialState={initialState}
+        slots={{
+          footerRowCount: CustomFooterRowCount,
+        }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPremium
+  {...data}
+  apiRef={apiRef}
+  initialState={initialState}
+  slots={{
+    footerRowCount: CustomFooterRowCount,
+  }}
+/>

docs/data/data-grid/recipes-row-grouping/recipes-row-grouping.md

@@ -25,3 +25,11 @@ By default, the row grouping column uses `sortComparator` of the grouping column
 To sort the row groups by the number of child rows, you can override it using `groupingColDef.sortComparator`:
 
 {{"demo": "RowGroupingSortByChildRows.js", "bg": "inline", "defaultCodeOpen": false}}
+
+## Dispaying child row count in footer
+
+By default, the row count in the footer is the number of top level rows that are visible after filtering.
+
+In the demo below, a `CustomFooterRowCount` component is added to the `footerRowCount` slot. This component uses the `gridFilteredDescendantRowCountSelector` to get the number of child rows and display it alongside the number of groups.
+
+{{"demo": "RowGroupingChildRowCount.js", "bg": "inline", "defaultCodeOpen": false}}