[DataGrid] Recipe for grouped rows autosizing

docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.js

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+export default function ColumnAutosizingGroupedRows() {
+  const data = useMovieData();
+  const apiRef = useGridApiRef();
+
+  const columns = React.useMemo(() => {
+    return data.columns.map((col) => ({ ...col, width: 50 }));
+  }, [data.columns]);
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: { rowGrouping: { model: ['company'] } },
+  });
+
+  React.useEffect(() => {
+    apiRef.current.subscribeEvent('rowExpansionChange', (params) => {
+      if (params.childrenExpanded) {
+        apiRef.current.autosizeColumns({ includeOutliers: true });
+      }
+    });
+  }, [apiRef]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        columns={columns}
+        apiRef={apiRef}
+        initialState={initialState}
+        groupingColDef={{ width: 250 }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMovieData } from '@mui/x-data-grid-generator';
+
+export default function ColumnAutosizingGroupedRows() {
+  const data = useMovieData();
+  const apiRef = useGridApiRef();
+
+  const columns = React.useMemo(() => {
+    return data.columns.map((col) => ({ ...col, width: 50 }));
+  }, [data.columns]);
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: { rowGrouping: { model: ['company'] } },
+  });
+
+  React.useEffect(() => {
+    apiRef.current.subscribeEvent('rowExpansionChange', (params) => {
+      if (params.childrenExpanded) {
+        apiRef.current.autosizeColumns({ includeOutliers: true });
+      }
+    });
+  }, [apiRef]);
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        columns={columns}
+        apiRef={apiRef}
+        initialState={initialState}
+        groupingColDef={{ width: 250 }}
+      />
+    </div>
+  );
+}

docs/data/data-grid/column-dimensions/ColumnAutosizingGroupedRows.tsx.preview

@@ -0,0 +1,7 @@
+<DataGridPremium
+  {...data}
+  columns={columns}
+  apiRef={apiRef}
+  initialState={initialState}
+  groupingColDef={{ width: 250 }}
+/>

docs/data/data-grid/column-dimensions/column-dimensions.md

@@ -113,6 +113,13 @@ Column autosizing is compatible with the [Dynamic row height](/x/react-data-grid
 When autosizing columns with long content, consider setting the `maxWidth` for the column to avoid it becoming too wide.
 :::
 
+### Autosizing with grouped rows [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
+
+When using [row grouping](/x/react-data-grid/row-grouping/) you can utilize the `autosizeColumns` method to adjust the column width of the expanded rows dynamically.
+The demo below shows how you can subscribe to the `rowExpansionChange` event. The provided handler function then calls the `autosizeColumns` method from the gridApi.
+
+{{"demo": "ColumnAutosizingGroupedRows.js", "disableAd": true, "bg": "inline"}}
+
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)