[data grid] Add selectors to support showing child row count in footer (

#13725)

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}}

docs/pages/x/api/data-grid/selectors.json

@@ -194,6 +194,20 @@
     "description": "Get the filterable columns as a lookup (an object containing the field for keys and the definition for values).",
     "supportsApiRef": true
   },
+  {
+    "name": "gridFilteredDescendantRowCountSelector",
+    "returnType": "number",
+    "category": "Filtering",
+    "description": "Get the amount of descendant rows accessible after the filtering process.",
+    "supportsApiRef": true
+  },
+  {
+    "name": "gridFilteredRowCountSelector",
+    "returnType": "number",
+    "category": "Filtering",
+    "description": "Get the amount of rows accessible after the filtering process.\nIncludes top level and descendant rows.",
+    "supportsApiRef": true
+  },
   {
     "name": "gridFilteredSortedRowEntriesSelector",
     "returnType": "GridRowEntry<GridValidRowModel>[]",

packages/x-data-grid/src/hooks/features/filter/gridFilterSelector.ts

@@ -131,6 +131,26 @@ export const gridFilteredTopLevelRowCountSelector = createSelector(
   (visibleSortedTopLevelRows) => visibleSortedTopLevelRows.length,
 );
 
+/**
+ * Get the amount of rows accessible after the filtering process.
+ * Includes top level and descendant rows.
+ * @category Filtering
+ */
+export const gridFilteredRowCountSelector = createSelector(
+  gridFilteredSortedRowEntriesSelector,
+  (filteredSortedRowEntries) => filteredSortedRowEntries.length,
+);
+
+/**
+ * Get the amount of descendant rows accessible after the filtering process.
+ * @category Filtering
+ */
+export const gridFilteredDescendantRowCountSelector = createSelector(
+  gridFilteredRowCountSelector,
+  gridFilteredTopLevelRowCountSelector,
+  (totalRowCount, topLevelRowCount) => totalRowCount - topLevelRowCount,
+);
+
 /**
  * @category Filtering
  * @ignore - do not document.

scripts/x-data-grid-premium.exports.json

@@ -324,6 +324,8 @@
   { "name": "GridFilterAltIcon", "kind": "Variable" },
   { "name": "GridFilterApi", "kind": "Interface" },
   { "name": "gridFilteredDescendantCountLookupSelector", "kind": "Variable" },
+  { "name": "gridFilteredDescendantRowCountSelector", "kind": "Variable" },
+  { "name": "gridFilteredRowCountSelector", "kind": "Variable" },
   { "name": "gridFilteredRowsLookupSelector", "kind": "Variable" },
   { "name": "gridFilteredSortedRowEntriesSelector", "kind": "Variable" },
   { "name": "gridFilteredSortedRowIdsSelector", "kind": "Variable" },

scripts/x-data-grid-pro.exports.json

@@ -293,6 +293,8 @@
   { "name": "GridFilterAltIcon", "kind": "Variable" },
   { "name": "GridFilterApi", "kind": "Interface" },
   { "name": "gridFilteredDescendantCountLookupSelector", "kind": "Variable" },
+  { "name": "gridFilteredDescendantRowCountSelector", "kind": "Variable" },
+  { "name": "gridFilteredRowCountSelector", "kind": "Variable" },
   { "name": "gridFilteredRowsLookupSelector", "kind": "Variable" },
   { "name": "gridFilteredSortedRowEntriesSelector", "kind": "Variable" },
   { "name": "gridFilteredSortedRowIdsSelector", "kind": "Variable" },

scripts/x-data-grid.exports.json

@@ -263,6 +263,8 @@
   { "name": "GridFilterAltIcon", "kind": "Variable" },
   { "name": "GridFilterApi", "kind": "Interface" },
   { "name": "gridFilteredDescendantCountLookupSelector", "kind": "Variable" },
+  { "name": "gridFilteredDescendantRowCountSelector", "kind": "Variable" },
+  { "name": "gridFilteredRowCountSelector", "kind": "Variable" },
   { "name": "gridFilteredRowsLookupSelector", "kind": "Variable" },
   { "name": "gridFilteredSortedRowEntriesSelector", "kind": "Variable" },
   { "name": "gridFilteredSortedRowIdsSelector", "kind": "Variable" },