[DataGridPremium] Reordering support for row grouping

.gitignore

@@ -2,6 +2,7 @@
 # However, in order to prevent issues, editor files are ignored here.
 .idea
 .vscode
+.cursor
 
 __diff_output__
 .DS_STORE
@@ -26,3 +27,4 @@ performance-snapshot.json
 # vale downloaded config
 .github/styles/
 test-results
+CLAUDE.md

docs/data/data-grid/row-grouping/RowGroupingGroupingValueSetter.js

@@ -0,0 +1,71 @@
+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 RowGroupingGroupingValueSetter() {
+  const data = useMovieData();
+  const apiRef = useGridApiRef();
+
+  const columnsWithComposer = React.useMemo(
+    () => [
+      ...data.columns,
+      {
+        field: 'composer',
+        headerName: 'Composer',
+        valueGetter: (value) => value.name,
+        groupingValueGetter: (value) => value.name,
+        groupingValueSetter: (value, row) => {
+          return {
+            ...row,
+            composer: { name: value },
+          };
+        },
+        width: 200,
+      },
+      {
+        field: 'decade',
+        headerName: 'Decade',
+        valueGetter: (value, row) => Math.floor(row.year / 10) * 10,
+        groupingValueGetter: (value, row) => Math.floor(row.year / 10) * 10,
+        groupingValueSetter: (value, row) => ({
+          ...row,
+          // Since converting to decade is a lossy operation, directly using the decade value should be sufficient here
+          year: value,
+        }),
+        renderCell: (params) => {
+          if (params.value == null) {
+            return '';
+          }
+
+          return `${params.value.toString().slice(-2)}'s`;
+        },
+      },
+    ],
+    [data.columns],
+  );
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      rowGrouping: {
+        model: ['composer', 'decade'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        columns={columnsWithComposer}
+        apiRef={apiRef}
+        initialState={initialState}
+        rowReordering
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-grouping/RowGroupingGroupingValueSetter.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import {
+  DataGridPremium,
+  useGridApiRef,
+  GridColDef,
+  useKeepGroupedColumnsHidden,
+} from '@mui/x-data-grid-premium';
+import { useMovieData, Movie } from '@mui/x-data-grid-generator';
+
+export default function RowGroupingGroupingValueSetter() {
+  const data = useMovieData();
+  const apiRef = useGridApiRef();
+
+  const columnsWithComposer = React.useMemo(
+    () => [
+      ...data.columns,
+      {
+        field: 'composer',
+        headerName: 'Composer',
+        valueGetter: (value: { name: string }) => value.name,
+        groupingValueGetter: (value: { name: string }) => value.name,
+        groupingValueSetter: (value, row) => {
+          return {
+            ...row,
+            composer: { name: value },
+          };
+        },
+        width: 200,
+      } as GridColDef<Movie, string>,
+      {
+        field: 'decade',
+        headerName: 'Decade',
+        valueGetter: (value, row) => Math.floor(row.year / 10) * 10,
+        groupingValueGetter: (value, row) => Math.floor(row.year / 10) * 10,
+        groupingValueSetter: (value, row) => ({
+          ...row,
+          // Since converting to decade is a lossy operation, directly using the decade value should be sufficient here
+          year: value,
+        }),
+        renderCell: (params) => {
+          if (params.value == null) {
+            return '';
+          }
+
+          return `${params.value.toString().slice(-2)}'s`;
+        },
+      } as GridColDef<Movie, number>,
+    ],
+    [data.columns],
+  );
+
+  const initialState = useKeepGroupedColumnsHidden({
+    apiRef,
+    initialState: {
+      rowGrouping: {
+        model: ['composer', 'decade'],
+      },
+    },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPremium
+        {...data}
+        columns={columnsWithComposer}
+        apiRef={apiRef}
+        initialState={initialState}
+        rowReordering
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-grouping/RowGroupingGroupingValueSetter.tsx.preview

@@ -0,0 +1,7 @@
+<DataGridPremium
+  {...data}
+  columns={columnsWithComposer}
+  apiRef={apiRef}
+  initialState={initialState}
+  rowReordering
+/>

docs/data/data-grid/row-grouping/RowGroupingReordering.js

@@ -0,0 +1,32 @@
+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 RowGroupingReordering() {
+  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}
+        rowReordering
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-grouping/RowGroupingReordering.tsx

@@ -0,0 +1,32 @@
+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 RowGroupingReordering() {
+  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}
+        rowReordering
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-grouping/RowGroupingReordering.tsx.preview

@@ -0,0 +1,6 @@
+<DataGridPremium
+  {...data}
+  apiRef={apiRef}
+  initialState={initialState}
+  rowReordering
+/>

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

@@ -215,10 +215,10 @@
 
 {{"demo": "RowGroupingReadOnly.js", "bg": "inline", "defaultCodeOpen": false}}
 
-## Using groupingValueGetter for complex grouping value
+## Using groupingValueGetter() for complex grouping value
 
 The grouping value must be either a string, a number, `null`, or `undefined`.
-If your cell value is more complex, pass a `groupingValueGetter` property to the column definition to convert it into a valid value.
+If your cell value is more complex, pass a `groupingValueGetter()` property to the column definition to convert it into a valid value.
 
 ```ts
 const columns: GridColDef[] = [
@@ -377,6 +377,78 @@
 
 :::
 
+## Reorder groups with drag and drop
+
+Row reordering allows the users to reorder row groups, or move rows from one group to another.
+To enable this feature with the row grouping, pass the `rowReordering` prop to the Data Grid Premium component:
+
+```tsx
+<DataGridPremium rowGroupingModel={['category']} rowReordering />
+```
+
+{{"demo": "RowGroupingReordering.js", "bg": "inline", "defaultCodeOpen": false}}
+
+### Reacting to group updates
+
+Whenever a row is moved from one group to another, it warrants a row update, the row data value that was used to group this row must now be updated to maintain the row grouping data integrity.
+
+For example, on a Data Grid having movies grouped by companies, if a row "Avatar" is moved from "20th Century Fox" to "Disney Studios" group, apart from the row being updated in the row tree, the row data must be updated to reflect this change.
+
+```diff
+ // "Avatar" row
+ {
+  title: 'Avatar',
+- company: '20th Century Fox',
++ company: 'Disney Studios',
+  ...
+ }
+```
+
+The Data Grid updates the internal row data, but to persist the change on the server, the [`processRowUpdate()`](/x/react-data-grid/editing/persistence/#the-processrowupdate-callback) callback must be used.
+
+### Usage with groupingValueSetter()
+
+If you use [`colDef.groupingValueGetter()`](#using-groupingvaluegetter-for-complex-grouping-value) to handle complex grouping values, in order for grouping across rows to work, you must use the `colDef.groupingValueSetter()` to properly convert back the simple value to the complex one.
+
+It should return the updated row based on the groupKey (`value`) corresponding to the target group.
+
+```ts
+const columns: GridColDef[] = [
+  {
+    field: 'composer',
+    groupingValueGetter: (value) => value.name,
+    groupingValueSetter: (value, row) => ({
+      ...row,
+      composer: { name: value },
+    }),
+  },
+  // ...
+];
+```
+
+{{"demo": "RowGroupingGroupingValueSetter.js", "bg": "inline", "defaultCodeOpen": false}}
+
+:::warning
+
+There are some limitations when reordering grouped rows:
+
+- Leaf rows (the lowest level) can only be moved within their current group or another group at the same level—they cannot become parents.
+- Parent rows can only be reordered among other parents at the same level; they cannot be moved to a different level or group.
+
+**For single-level grouping**: You can move leaf rows between any parent, and parents can be reordered like regular rows.
+
+**For multi-level grouping**: Top-level groups can be reordered freely, but lower-level parents can only be reordered within their own parent group.
+
+For example, in movies grouped by "Company" and "Director":
+
+⛔️ You can not move a director parent row from one company to another, because it would mean multiple rows being updated i.e. multiple `processRowUpdate()` calls.
+
+✅ You can reorder leaf rows from one director to another or move directors around within same company.
+
+Please open a [new issue](https://github.com/mui/mui-x/issues/new/choose) if that is a use-case you are interested in.
+
+:::
+
 ## Get all rows in a group
 
 Use the `apiRef.current.getRowGroupChildren()` method to get the IDs of all rows in a group.

docs/data/data-grid/row-ordering/row-ordering.md

@@ -85,15 +85,21 @@
 For now, row reordering is disabled if sorting is applied to the Data Grid.
 :::
 
-## Row reordering with tree data and grouping 🚧
+## Row reordering with tree data 🚧
 
 :::warning
-This feature isn't available yet, but it is planned—you can 👍 upvote [this GitHub issue](https://github.com/mui/mui-x/issues/4821) to help us prioritize it.
+This feature isn't available yet, but it is planned—you can 👍 upvote [this GitHub issue](https://github.com/mui/mui-x/issues/7774) to help us prioritize it.
 Please don't hesitate to leave a comment there to describe your needs, especially if you have a use case we should address or you're facing specific pain points with your current solution.
 :::
 
 With this feature, users would be able to reorder rows in use cases that also involve tree data and/or row grouping.
 
+## Row reordering with row grouping [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
+
+This feature allows users to reorder rows within grouped data, making it easy to adjust the order of groups and their contents directly in the grid.
+
+For more details, see the documentation section [Row grouping—Reorder groups with drag and drop](/x/react-data-grid/row-grouping/#reorder-groups-with-drag-and-drop).
+
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)

docs/data/data-grid/server-side-data/row-grouping.md

@@ -104,6 +104,12 @@
 
 {{"demo": "ServerSideRowGroupingGroupExpansion.js", "bg": "inline"}}
 
+## Reorder row grouping rows
+
+:::warning
+This feature isn't available yet, but it is planned—you can 👍 upvote [this GitHub issue](https://github.com/mui/mui-x/issues/18947) to help us prioritize it. Please don't hesitate to leave a comment or add some additional information.
+:::
+
 ## API
 
 - [DataGrid](/x/api/data-grid/data-grid/)

docs/pages/x/api/data-grid/grid-actions-col-def.json

@@ -53,6 +53,10 @@
       "type": { "description": "GridGroupingValueGetter<R>" },
       "isPremiumPlan": true
     },
+    "groupingValueSetter": {
+      "type": { "description": "GridGroupingValueSetter<R>" },
+      "isPremiumPlan": true
+    },
     "headerAlign": { "type": { "description": "GridAlignment" } },
     "headerClassName": { "type": { "description": "GridColumnHeaderClassNamePropType" } },
     "headerName": { "type": { "description": "string" } },

docs/pages/x/api/data-grid/grid-col-def.json

@@ -46,6 +46,10 @@
       "type": { "description": "GridGroupingValueGetter<R>" },
       "isPremiumPlan": true
     },
+    "groupingValueSetter": {
+      "type": { "description": "GridGroupingValueSetter<R>" },
+      "isPremiumPlan": true
+    },
     "headerAlign": { "type": { "description": "GridAlignment" } },
     "headerClassName": { "type": { "description": "GridColumnHeaderClassNamePropType" } },
     "headerName": { "type": { "description": "string" } },