[docs] Add styling row group recipe

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

@@ -0,0 +1,95 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+const EXPECTED_GROSS = 2000000000;
+
+export default function RowGroupingStyling() {
+  const apiRef = useGridApiRef();
+  const data = useMovieData();
+
+  const getRowClassName = (params) => {
+    const node = apiRef.current?.getRowNode(params.id);
+
+    if (!node) {
+      return '';
+    }
+
+    if (node.type === 'group') {
+      const childIds = node.children || [];
+
+      let hasExpectedGross = false;
+
+      for (const childId of childIds) {
+        const childNode = apiRef.current?.getRowNode(childId);
+        if (childNode && childNode.type === 'leaf') {
+          const childRow = apiRef.current?.getRow(childId);
+          if (childRow?.gross && childRow.gross > EXPECTED_GROSS) {
+            hasExpectedGross = true;
+          }
+        }
+      }
+
+      if (hasExpectedGross) {
+        return 'highlighted-group';
+      }
+      return '';
+    }
+
+    if (node.parent) {
+      const row = params.row;
+
+      if (row.gross > EXPECTED_GROSS) {
+        return 'highlighted-child';
+      }
+    }
+
+    return '';
+  };
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      rowGrouping: {
+        model: ['company'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        initialState={initialState}
+        getRowClassName={getRowClassName}
+        sx={(theme) => ({
+          '& .highlighted-group': {
+            '&::before': {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              left: 0,
+              width: 4,
+              height: 'calc(var(--height) * 0.8)',
+              marginTop: 'calc(var(--height) * 0.1)',
+              backgroundColor: 'success.main',
+              borderTopRightRadius: 4,
+              borderBottomRightRadius: 4,
+            },
+          },
+          '& .highlighted-child': {
+            backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.success.main} 8%, transparent)`,
+            '&:hover': {
+              backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.success.main} 12%, transparent)`,
+            },
+          },
+        })}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,98 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  useKeepGroupedColumnsHidden,
+  GridRowClassNameParams,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+type Movie = ReturnType<typeof useMovieData>['rows'][number];
+
+const EXPECTED_GROSS = 2000000000;
+
+export default function RowGroupingStyling() {
+  const apiRef = useGridApiRef();
+  const data = useMovieData();
+
+  const getRowClassName = (params: GridRowClassNameParams<Movie>) => {
+    const node = apiRef.current?.getRowNode(params.id);
+
+    if (!node) {
+      return '';
+    }
+
+    if (node.type === 'group') {
+      const childIds = node.children || [];
+
+      let hasExpectedGross = false;
+
+      for (const childId of childIds) {
+        const childNode = apiRef.current?.getRowNode(childId);
+        if (childNode && childNode.type === 'leaf') {
+          const childRow = apiRef.current?.getRow<Movie>(childId);
+          if (childRow?.gross && childRow.gross > EXPECTED_GROSS) {
+            hasExpectedGross = true;
+          }
+        }
+      }
+
+      if (hasExpectedGross) {
+        return 'highlighted-group';
+      }
+      return '';
+    }
+
+    if (node.parent) {
+      const row = params.row;
+
+      if (row.gross > EXPECTED_GROSS) {
+        return 'highlighted-child';
+      }
+    }
+
+    return '';
+  };
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      rowGrouping: {
+        model: ['company'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        apiRef={apiRef}
+        initialState={initialState}
+        getRowClassName={getRowClassName}
+        sx={(theme) => ({
+          '& .highlighted-group': {
+            '&::before': {
+              content: '""',
+              display: 'block',
+              position: 'absolute',
+              left: 0,
+              width: 4,
+              height: 'calc(var(--height) * 0.8)',
+              marginTop: 'calc(var(--height) * 0.1)',
+              backgroundColor: 'success.main',
+              borderTopRightRadius: 4,
+              borderBottomRightRadius: 4,
+            },
+          },
+          '& .highlighted-child': {
+            backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.success.main} 8%, transparent)`,
+            '&:hover': {
+              backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.success.main} 12%, transparent)`,
+            },
+          },
+        })}
+      />
+    </div>
+  );
+}

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

@@ -37,3 +37,17 @@ By default, the row count in the footer is the number of top level rows that are
 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}}
+
+## Styling row groups based on child conditions
+
+Use `getRowClassName` to add a custom class to the row group and then write CSS to style it.
+
+To write a condition, use [`apiRef.current.getRowNode`](/x/api/data-grid/grid-api/#grid-api-prop-getRowNode) to check for the targeted row type and use [`apiRef.current.getRow`](/x/api/data-grid/grid-api/#grid-api-prop-getRow) to get the row data.
+
+The example below demonstrates how to style a row group when any of the child rows has a "Gross" value greater than a specific value:
+
+{{"demo": "RowGroupingStyling.js", "bg": "inline", "defaultCodeOpen": false}}
+
+:::success
+The styling method is not limited to the [`sx` prop](/x/react-data-grid/style/#using-the-sx-prop). You can use other styling solutions like plain CSS files or CSS modules.
+:::