[DataGridPro] Tree data row reordering

docs/data/data-grid/row-ordering/RowReorderingDisabled.js

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const isRowReorderable = (params) => {
+  return params.row.quantity < 50000;
+};
+
+export default function RowReorderingDisabled() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 20,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        loading={loading}
+        rowReordering
+        isRowReorderable={isRowReorderable}
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-ordering/RowReorderingDisabled.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import { DataGridPro, type IsRowReorderableParams } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const isRowReorderable = (params: IsRowReorderableParams) => {
+  return params.row.quantity < 50000;
+};
+
+export default function RowReorderingDisabled() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 20,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        loading={loading}
+        rowReordering
+        isRowReorderable={isRowReorderable}
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-ordering/RowReorderingDisabled.tsx.preview

@@ -0,0 +1,6 @@
+<DataGridPro
+  {...data}
+  loading={loading}
+  rowReordering
+  isRowReorderable={isRowReorderable}
+/>

docs/data/data-grid/row-ordering/RowReorderingValidation.js

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const isValidRowReorder = (context) => {
+  if (context.sourceNode.type === 'group') {
+    return true;
+  }
+  if (context.targetNode.type === 'leaf') {
+    return context.sourceNode.parent !== context.targetNode.parent;
+  }
+  return false;
+};
+
+const getTreeDataPath = (row) => {
+  return row.path;
+};
+
+const setTreeDataPath = (path, row) => {
+  return { ...row, path };
+};
+
+export default function RowReorderingValidation() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 100,
+    treeData: { maxDepth: 2, groupingField: 'name', averageChildren: 4 },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        setTreeDataPath={setTreeDataPath}
+        getTreeDataPath={getTreeDataPath}
+        loading={loading}
+        rowReordering
+        isValidRowReorder={isValidRowReorder}
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-ordering/RowReorderingValidation.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import {
+  DataGridPro,
+  GridValidRowModel,
+  ReorderValidationContext,
+} from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const isValidRowReorder = (context: ReorderValidationContext) => {
+  if (context.sourceNode.type === 'group') {
+    return true;
+  }
+  if (context.targetNode.type === 'leaf') {
+    return context.sourceNode.parent !== context.targetNode.parent;
+  }
+  return false;
+};
+
+const getTreeDataPath = (row: GridValidRowModel) => {
+  return row.path;
+};
+
+const setTreeDataPath = (path: string[], row: GridValidRowModel) => {
+  return { ...row, path };
+};
+
+export default function RowReorderingValidation() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 100,
+    treeData: { maxDepth: 2, groupingField: 'name', averageChildren: 4 },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        setTreeDataPath={setTreeDataPath}
+        getTreeDataPath={getTreeDataPath}
+        loading={loading}
+        rowReordering
+        isValidRowReorder={isValidRowReorder}
+      />
+    </div>
+  );
+}

docs/data/data-grid/row-ordering/RowReorderingValidation.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPro
+  {...data}
+  setTreeDataPath={setTreeDataPath}
+  getTreeDataPath={getTreeDataPath}
+  loading={loading}
+  rowReordering
+  isValidRowReorder={isValidRowReorder}
+/>

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

@@ -85,14 +85,45 @@ This approach can also be used to change the location of the toggle column.
 For now, row reordering is disabled if sorting is applied to the Data Grid.
 :::
 
-## Row reordering with tree data 🚧
+## Disable reordering of specific rows
+
+To disable reordering of specific rows, you can pass a callback to the `isRowReorderable()` prop.
+This callback is called with `row` and `rowNode` objects to allow disabling rows based on multiple criteria.
+
+```tsx
+<DataGridPro isRowReorderable={isRowReorderable} />
+```
+
+The demo below shows how to disable reordering of specific rows based on the row model.
+
+{{"demo": "RowReorderingDisabled.js", "bg": "inline"}}
+
+## Disable specific reorder operations
+
+Sometimes, the information provided by the source row isn't enough to determine if a reorder operation is valid.
+In these cases, you can pass a callback to the `isValidRowReorder()` prop.
+
+This callback is fired _during_ the drag operation so it provides information about the dragged row and potential row where it is being dropped.
+It is called with a `ReorderValidationContext` object to allow disabling specific reorder operations based on the context.
+
+The demo below prohibits reordering leaf rows under the same parent and only allows cross-parent operations.
+
+{{"demo": "RowReorderingValidation.js", "bg": "inline"}}
 
 :::warning
-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.
+The row reorder feature has an internal validation ruleset that makes sure that only the supported use-cases are allowed.
+`isValidRowReorder()` should only be used to omit some of the supported use-cases, not add new ones.
 :::
 
-With this feature, users would be able to reorder rows in use cases that also involve tree data and/or row grouping.
+:::info
+The above demo uses row grouping to demonstrate the concept. You can check more about this in the [Tree data—Drag-and-drop tree data reordering](/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering) documentation section.
+:::
+
+## Row reordering with tree data
+
+Users can drag and drop rows to move between parents, or convert leaf nodes into parent groups.
+
+For more details, see [Tree data—Drag-and-drop tree data reordering](/x/react-data-grid/tree-data/#drag-and-drop-tree-data-reordering).
 
 ## Row reordering with row grouping [<span class="plan-premium"></span>](/x/introduction/licensing/#premium-plan 'Premium plan')
 

docs/data/data-grid/tree-data/TreeDataReordering.js

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { DataGridPro } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const getTreeDataPath = (row) => {
+  return row.path;
+};
+
+const setTreeDataPath = (path, row) => {
+  return {
+    ...row,
+    path,
+  };
+};
+
+export default function TreeDataReordering() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 100,
+    treeData: { maxDepth: 3, groupingField: 'name', averageChildren: 2 },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        loading={loading}
+        rowReordering
+        disableRowSelectionOnClick
+        getTreeDataPath={getTreeDataPath}
+        setTreeDataPath={setTreeDataPath}
+      />
+    </div>
+  );
+}

docs/data/data-grid/tree-data/TreeDataReordering.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { DataGridPro, type DataGridProProps } from '@mui/x-data-grid-pro';
+import { useDemoData } from '@mui/x-data-grid-generator';
+
+const getTreeDataPath: DataGridProProps['getTreeDataPath'] = (row) => {
+  return row.path;
+};
+
+const setTreeDataPath: DataGridProProps['setTreeDataPath'] = (path, row) => {
+  return {
+    ...row,
+    path,
+  };
+};
+
+export default function TreeDataReordering() {
+  const { data, loading } = useDemoData({
+    dataSet: 'Employee',
+    rowLength: 100,
+    treeData: { maxDepth: 3, groupingField: 'name', averageChildren: 2 },
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <DataGridPro
+        {...data}
+        loading={loading}
+        rowReordering
+        disableRowSelectionOnClick
+        getTreeDataPath={getTreeDataPath}
+        setTreeDataPath={setTreeDataPath}
+      />
+    </div>
+  );
+}

docs/data/data-grid/tree-data/TreeDataReordering.tsx.preview

@@ -0,0 +1,8 @@
+<DataGridPro
+  {...data}
+  loading={loading}
+  rowReordering
+  disableRowSelectionOnClick
+  getTreeDataPath={getTreeDataPath}
+  setTreeDataPath={setTreeDataPath}
+/>