From 00596e05b86492678c477bed6cb5868de556fdfe Mon Sep 17 00:00:00 2001
From: Kenan Yusuf <kenan.m.yusuf@gmail.com>
Date: Thu, 4 Jul 2024 11:35:15 +0100
Subject: [PATCH] [data grid][docs] add recipe for displaying child row count
 in footer

---
 .../RowGroupingChildRowCount.js               | 55 ++++++++++++++++++
 .../RowGroupingChildRowCount.tsx              | 56 +++++++++++++++++++
 .../RowGroupingChildRowCount.tsx.preview      |  8 +++
 .../recipes-row-grouping.md                   |  8 +++
 4 files changed, 127 insertions(+)
 create mode 100644 docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.js
 create mode 100644 docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.tsx
 create mode 100644 docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.tsx.preview

diff --git a/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.js b/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.js
new file mode 100644
index 0000000000000..837ea2546b6bb
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.tsx b/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.tsx
new file mode 100644
index 0000000000000..514aa8358b3cc
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.tsx.preview b/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.tsx.preview
new file mode 100644
index 0000000000000..f9d69b63cb0ae
--- /dev/null
+++ b/docs/data/data-grid/recipes-row-grouping/RowGroupingChildRowCount.tsx.preview
@@ -0,0 +1,8 @@
+<DataGridPremium
+  {...data}
+  apiRef={apiRef}
+  initialState={initialState}
+  slots={{
+    footerRowCount: CustomFooterRowCount,
+  }}
+/>
\ No newline at end of file
diff --git a/docs/data/data-grid/recipes-row-grouping/recipes-row-grouping.md b/docs/data/data-grid/recipes-row-grouping/recipes-row-grouping.md
index 014bbd94411a6..90067a6eb2715 100644
--- a/docs/data/data-grid/recipes-row-grouping/recipes-row-grouping.md
+++ b/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}}