@mui/x-data-grid-pro 5.9.0 → 5.10.0

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## v5.10.0
+
+_Apr 25, 2022_
+
+We'd like to offer a big thanks to the 6 contributors who made this release possible. Here are some highlights ✨:
+
+- 🎁 Introduce [Row reorder](https://mui.com/x/react-data-grid/rows/#row-reorder) (#4034) @DanailH
+
+  <img src="https://user-images.githubusercontent.com/5858539/165091263-23472fbb-a989-44b8-849a-d2185adfe13b.gif" width="800">
+
+- 🐞 Bug fixes
+
+### `@mui/x-data-grid@v5.10.0` / `@mui/x-data-grid-pro@v5.10.0`
+
+- [DataGrid] Don't close column menu when updating rows (#4498) @m4theushw
+- [DataGridPro] Introduce row reorder (#4034) @DanailH
+
+### `@mui/x-date-pickers@5.0.0-alpha.2` / `@mui/x-date-pickers-pro@5.0.0-alpha.2`
+
+- [pickers] Pass `PaperProps` to `DesktopWrapper` component (#4584) @alexfauquette
+- [TimePicker] Fix bug when time picker clear value (#4582) @alexfauquette
+- [DateRangePicker] Fix missing `clearable` and `clearText` props (#4511) @zigang93
+
+### Docs
+
+- [docs] Add plan in the nav bar for pro-only and premium-only pages (#4591) @flaviendelangle
+- [docs] Clarify where to install the license (#4452) @oliviertassinari
+- [docs] Fix CodeSandbox links for demo with pickers (#4570) @alexfauquette
+- [docs] Include date-fns dependency when opening demos in CodeSandbox (#4508) @m4theushw
+- [docs] Split the 'Group & Pivot' page (#4441) @flaviendelangle
+
+### Core
+
+- [core] Fix the README of the X packages (#4590) @flaviendelangle
+- [test] Fix test to not depend on screen resolution (#4587) @m4theushw
+
 ## v5.9.0
 
 _Apr 14, 2022_

package/DataGridPro/DataGridPro.js

@@ -740,6 +740,14 @@ DataGridProRaw.propTypes = {
    */
   onRowGroupingModelChange: PropTypes.func,
 
+  /**
+   * Callback fired when a row is being reordered.
+   * @param {GridRowOrderChangeParams} params With all properties from [[GridRowOrderChangeParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowOrderChange: PropTypes.func,
+
   /**
    * Callback fired when scrolling to the bottom of the grid viewport.
    * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
@@ -846,6 +854,12 @@ DataGridProRaw.propTypes = {
    */
   rowHeight: PropTypes.number,
 
+  /**
+   * If `true`, the reordering of rows is enabled.
+   * @default false
+   */
+  rowReordering: PropTypes.bool,
+
   /**
    * Set of rows of type [[GridRowsProp]].
    */

package/DataGridPro/useDataGridProComponent.js

@@ -12,6 +12,8 @@ import { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinni
 import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
 import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
+import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
+import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
 export const useDataGridProComponent = (inputApiRef, props) => {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -21,6 +23,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
    */
 
   useGridSelectionPreProcessors(apiRef, props);
+  useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
   useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
@@ -71,6 +74,7 @@ export const useDataGridProComponent = (inputApiRef, props) => {
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);
+  useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
   useGridColumnMenu(apiRef);

package/DataGridPro/useDataGridProProps.js

@@ -15,6 +15,7 @@ export const DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_D
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowGroupingColumnMode: 'single',
+  rowReordering: false,
   getDetailPanelHeight: () => 500
 });
 export const useDataGridProProps = inProps => {

package/README.md

@@ -15,12 +15,14 @@ npm install @mui/x-data-grid-pro
 yarn add @mui/x-data-grid-pro
 ```
 
-This component has three peer dependencies that you will need to install as well.
+This component has the following peer dependencies that you will need to install as well.
 
 ```json
 "peerDependencies": {
-  "@mui/material": "^5.0.0",
-  "react": "^17.0.0"
+  "@mui/material": "^5.2.8",
+  "@mui/system": "^5.2.8",
+  "react": "^17.0.2 || ^18.0.0",
+  "react-dom": "^17.0.2 || ^18.0.0"
 },
 ```
 

package/components/DataGridProVirtualScroller.js

@@ -175,6 +175,7 @@ const DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGr
   }, [renderContext, updateRenderZonePosition]);
   useGridApiEventHandler(apiRef, GridEvents.columnWidthChange, refreshRenderZonePosition);
   useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, GridEvents.rowOrderChange, refreshRenderZonePosition);
   const leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? _extends({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length

package/components/GridRowReorderCell.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { GridRenderCellParams } from '@mui/x-data-grid';
+declare const GridRowReorderCell: (params: GridRenderCellParams) => JSX.Element;
+export { GridRowReorderCell };
+export declare const renderRowReorderCell: (params: GridRenderCellParams) => JSX.Element;

package/components/GridRowReorderCell.js

@@ -0,0 +1,72 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { GridEvents, gridRowTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridEditRowsStateSelector } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+const useUtilityClasses = ownerState => {
+  const {
+    isDraggable,
+    classes
+  } = ownerState;
+  const slots = {
+    root: ['rowReorderCell', isDraggable && 'rowReorderCell--draggable'],
+    placeholder: ['rowReorderCellPlaceholder']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+const GridRowReorderCell = params => {
+  const apiRef = useGridApiContext();
+  const rootProps = useGridRootProps();
+  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector); // eslint-disable-next-line no-underscore-dangle
+
+  const cellValue = params.row.__reorder__ || params.id; // TODO: remove sortModel and treeDepth checks once row reorder is compatible
+
+  const isDraggable = !!rootProps.rowReordering && !sortModel.length && treeDepth === 1 && Object.keys(editRowsState).length === 0;
+  const ownerState = {
+    isDraggable,
+    classes: rootProps.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const publish = React.useCallback((eventName, propHandler) => event => {
+    // Ignore portal
+    // The target is not an element when triggered by a Select inside the cell
+    // See https://github.com/mui/material-ui/issues/10534
+    if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
+      return;
+    } // The row might have been deleted
+
+
+    if (!apiRef.current.getRow(params.row.id)) {
+      return;
+    }
+
+    apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.row.id), event);
+
+    if (propHandler) {
+      propHandler(event);
+    }
+  }, [apiRef, params.row.id]);
+  const draggableEventHandlers = {
+    onDragStart: publish(GridEvents.rowDragStart),
+    onDragOver: publish(GridEvents.rowDragOver),
+    onDragEnd: publish(GridEvents.rowDragEnd)
+  };
+  return /*#__PURE__*/_jsxs("div", _extends({
+    className: classes.root,
+    draggable: isDraggable
+  }, draggableEventHandlers, {
+    children: [/*#__PURE__*/_jsx(rootProps.components.RowReorderIcon, {}), /*#__PURE__*/_jsx("div", {
+      className: classes.placeholder,
+      children: cellValue
+    })]
+  }));
+};
+
+export { GridRowReorderCell };
+export const renderRowReorderCell = params => /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));

package/hooks/features/columnReorder/useGridColumnReorder.js

@@ -50,7 +50,7 @@ export const useGridColumnReorder = (apiRef, props) => {
       clearTimeout(removeDnDStylesTimeout.current);
     };
   }, []);
-  const handleColumnHeaderDragStart = React.useCallback((params, event) => {
+  const handleDragStart = React.useCallback((params, event) => {
     if (props.disableColumnReorder || params.colDef.disableReorder) {
       return;
     }
@@ -156,7 +156,7 @@ export const useGridColumnReorder = (apiRef, props) => {
     }));
     apiRef.current.forceUpdate();
   }, [props.disableColumnReorder, logger, apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleDragStart);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnter, handleDragEnter);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragOver, handleDragOver);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleDragEnd);

package/hooks/features/index.d.ts

@@ -2,5 +2,6 @@ export * from './columnPinning';
 export * from './columnReorder';
 export * from './columnResize';
 export * from './rowGrouping';
+export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';

package/hooks/features/index.js

@@ -3,5 +3,6 @@ export * from './columnPinning';
 export * from './columnReorder';
 export * from './columnResize';
 export * from './rowGrouping';
+export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';

package/hooks/features/rowReorder/gridRowReorderColDef.d.ts

@@ -0,0 +1,2 @@
+import { GridColDef } from '@mui/x-data-grid';
+export declare const GRID_REORDER_COL_DEF: GridColDef;

package/hooks/features/rowReorder/gridRowReorderColDef.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { GRID_STRING_COL_DEF } from '@mui/x-data-grid';
+import { renderRowReorderCell } from '../../../components/GridRowReorderCell';
+export const GRID_REORDER_COL_DEF = _extends({}, GRID_STRING_COL_DEF, {
+  field: '__reorder__',
+  type: 'reorder',
+  sortable: false,
+  filterable: false,
+  width: 50,
+  align: 'center',
+  headerAlign: 'center',
+  disableColumnMenu: true,
+  disableExport: true,
+  disableReorder: true,
+  resizable: false,
+  renderHeader: () => ' ',
+  renderCell: renderRowReorderCell
+});

package/hooks/features/rowReorder/index.d.ts

@@ -0,0 +1 @@
+export * from './gridRowReorderColDef';

package/hooks/features/rowReorder/index.js

@@ -0,0 +1 @@
+export * from './gridRowReorderColDef';

package/hooks/features/rowReorder/useGridRowReorder.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { GridApiPro } from '../../../models/gridApiPro';
+import { DataGridProProcessedProps } from '../../../models/dataGridProProps';
+/**
+ * Only available in DataGridPro
+ * @requires useGridRows (method)
+ */
+export declare const useGridRowReorder: (apiRef: React.MutableRefObject<GridApiPro>, props: Pick<DataGridProProcessedProps, 'rowReordering' | 'onRowOrderChange' | 'classes'>) => void;

package/hooks/features/rowReorder/useGridRowReorder.js

@@ -0,0 +1,111 @@
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { useGridLogger, GridEvents, useGridApiEventHandler, getDataGridUtilityClass, useGridSelector, gridSortModelSelector, gridRowTreeDepthSelector, useGridApiOptionHandler, gridEditRowsStateSelector } from '@mui/x-data-grid';
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  const slots = {
+    rowDragging: ['row--dragging']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+/**
+ * Only available in DataGridPro
+ * @requires useGridRows (method)
+ */
+
+
+export const useGridRowReorder = (apiRef, props) => {
+  const logger = useGridLogger(apiRef, 'useGridRowReorder');
+  const sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  const treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  const dragRowNode = React.useRef(null);
+  const originRowIndex = React.useRef(null);
+  const removeDnDStylesTimeout = React.useRef();
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const [dragRowId, setDragRowId] = React.useState('');
+  React.useEffect(() => {
+    return () => {
+      clearTimeout(removeDnDStylesTimeout.current);
+    };
+  }, []); // TODO: remove sortModel check once row reorder is sorting compatible
+  // remove treeDepth once row reorder is tree compatible
+
+  const isRowReorderDisabled = React.useMemo(() => {
+    return !props.rowReordering || !!sortModel.length || treeDepth !== 1;
+  }, [props.rowReordering, sortModel, treeDepth]);
+  const handleDragStart = React.useCallback((params, event) => {
+    // Call the gridEditRowsStateSelector directly to avoid infnite loop
+    const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
+      return;
+    }
+
+    logger.debug(`Start dragging row ${params.id}`); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    dragRowNode.current = event.currentTarget;
+    dragRowNode.current.classList.add(classes.rowDragging);
+    setDragRowId(params.id);
+    removeDnDStylesTimeout.current = setTimeout(() => {
+      dragRowNode.current.classList.remove(classes.rowDragging);
+    });
+    originRowIndex.current = apiRef.current.getRowIndex(params.id);
+  }, [isRowReorderDisabled, classes.rowDragging, logger, apiRef]);
+  const handleDragOver = React.useCallback((params, event) => {
+    logger.debug(`Dragging over row ${params.id}`);
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+
+    if (params.id !== dragRowId) {
+      const targetRowIndex = apiRef.current.getRowIndex(params.id);
+      apiRef.current.setRowIndex(dragRowId, targetRowIndex);
+    }
+  }, [apiRef, logger, dragRowId]);
+  const handleDragEnd = React.useCallback((params, event) => {
+    // Call the gridEditRowsStateSelector directly to avoid infnite loop
+    const editRowsState = gridEditRowsStateSelector(apiRef.current.state);
+
+    if (isRowReorderDisabled || Object.keys(editRowsState).length !== 0) {
+      return;
+    }
+
+    logger.debug('End dragging row');
+    event.preventDefault(); // Prevent drag events propagation.
+    // For more information check here https://github.com/mui/mui-x/issues/2680.
+
+    event.stopPropagation();
+    clearTimeout(removeDnDStylesTimeout.current);
+    dragRowNode.current = null; // Check if the row was dropped outside the grid.
+
+    if (event.dataTransfer.dropEffect === 'none') {
+      // Accessing params.field may contain the wrong field as header elements are reused
+      apiRef.current.setRowIndex(dragRowId, originRowIndex.current);
+      originRowIndex.current = null;
+    } else {
+      // Emit the rowOrderChange event only once when the reordering stops.
+      const rowOrderChangeParams = {
+        row: apiRef.current.getRow(dragRowId),
+        targetIndex: apiRef.current.getRowIndex(params.id),
+        oldIndex: originRowIndex.current
+      };
+      apiRef.current.publishEvent(GridEvents.rowOrderChange, rowOrderChangeParams);
+    }
+
+    setDragRowId('');
+  }, [isRowReorderDisabled, logger, apiRef, dragRowId]);
+  useGridApiEventHandler(apiRef, GridEvents.rowDragStart, handleDragStart);
+  useGridApiEventHandler(apiRef, GridEvents.rowDragOver, handleDragOver);
+  useGridApiEventHandler(apiRef, GridEvents.rowDragEnd, handleDragEnd);
+  useGridApiEventHandler(apiRef, GridEvents.cellDragOver, handleDragOver);
+  useGridApiOptionHandler(apiRef, GridEvents.rowOrderChange, props.onRowOrderChange);
+};

package/hooks/features/rowReorder/useGridRowReorderPreProcessors.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import { GridApiCommunity } from '@mui/x-data-grid/internals';
+import { DataGridProProcessedProps } from '@mui/x-data-grid-pro/models/dataGridProProps';
+export declare const useGridRowReorderPreProcessors: (apiRef: React.MutableRefObject<GridApiCommunity>, props: DataGridProProcessedProps) => void;

package/hooks/features/rowReorder/useGridRowReorderPreProcessors.js

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { getDataGridUtilityClass } from '@mui/x-data-grid';
+import { useGridRegisterPipeProcessor } from '@mui/x-data-grid/internals';
+import { GRID_REORDER_COL_DEF } from './gridRowReorderColDef';
+
+const useUtilityClasses = ownerState => {
+  const {
+    classes
+  } = ownerState;
+  return React.useMemo(() => {
+    const slots = {
+      rowReorderCellContainer: ['rowReorderCellContainer'],
+      columnHeaderReorder: ['columnHeaderReorder']
+    };
+    return composeClasses(slots, getDataGridUtilityClass, classes);
+  }, [classes]);
+};
+
+export const useGridRowReorderPreProcessors = (apiRef, props) => {
+  const ownerState = {
+    classes: props.classes
+  };
+  const classes = useUtilityClasses(ownerState);
+  const updateReorderColumn = React.useCallback(columnsState => {
+    const reorderColumn = _extends({}, GRID_REORDER_COL_DEF, {
+      cellClassName: classes.rowReorderCellContainer,
+      headerClassName: classes.columnHeaderReorder,
+      headerName: apiRef.current.getLocaleText('rowReorderingHeaderName')
+    });
+
+    const shouldHaveReorderColumn = props.rowReordering;
+    const haveReorderColumn = columnsState.lookup[reorderColumn.field] != null;
+
+    if (shouldHaveReorderColumn && haveReorderColumn) {
+      return columnsState;
+    }
+
+    if (shouldHaveReorderColumn && !haveReorderColumn) {
+      columnsState.lookup[reorderColumn.field] = reorderColumn;
+      columnsState.all = [reorderColumn.field, ...columnsState.all];
+    } else if (!shouldHaveReorderColumn && haveReorderColumn) {
+      delete columnsState.lookup[reorderColumn.field];
+      columnsState.all = columnsState.all.filter(field => field !== reorderColumn.field);
+    }
+
+    return columnsState;
+  }, [apiRef, classes, props.rowReordering]);
+  useGridRegisterPipeProcessor(apiRef, 'hydrateColumns', updateReorderColumn);
+};

package/index.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.9.0
+/** @license MUI v5.10.0
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/legacy/DataGridPro/DataGridPro.js

@@ -740,6 +740,14 @@ DataGridProRaw.propTypes = {
    */
   onRowGroupingModelChange: PropTypes.func,
 
+  /**
+   * Callback fired when a row is being reordered.
+   * @param {GridRowOrderChangeParams} params With all properties from [[GridRowOrderChangeParams]].
+   * @param {MuiEvent<{}>} event The event object.
+   * @param {GridCallbackDetails} details Additional details for this callback.
+   */
+  onRowOrderChange: PropTypes.func,
+
   /**
    * Callback fired when scrolling to the bottom of the grid viewport.
    * @param {GridRowScrollEndParams} params With all properties from [[GridRowScrollEndParams]].
@@ -846,6 +854,12 @@ DataGridProRaw.propTypes = {
    */
   rowHeight: PropTypes.number,
 
+  /**
+   * If `true`, the reordering of rows is enabled.
+   * @default false
+   */
+  rowReordering: PropTypes.bool,
+
   /**
    * Set of rows of type [[GridRowsProp]].
    */

package/legacy/DataGridPro/useDataGridProComponent.js

@@ -12,6 +12,8 @@ import { useGridColumnPinningPreProcessors } from '../hooks/features/columnPinni
 import { useGridDetailPanel, detailPanelStateInitializer } from '../hooks/features/detailPanel/useGridDetailPanel';
 import { useGridDetailPanelCache } from '../hooks/features/detailPanel/useGridDetailPanelCache';
 import { useGridDetailPanelPreProcessors } from '../hooks/features/detailPanel/useGridDetailPanelPreProcessors';
+import { useGridRowReorder } from '../hooks/features/rowReorder/useGridRowReorder';
+import { useGridRowReorderPreProcessors } from '../hooks/features/rowReorder/useGridRowReorderPreProcessors';
 export var useDataGridProComponent = function useDataGridProComponent(inputApiRef, props) {
   var _props$experimentalFe, _props$experimentalFe2;
 
@@ -21,6 +23,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
    */
 
   useGridSelectionPreProcessors(apiRef, props);
+  useGridRowReorderPreProcessors(apiRef, props);
   useGridRowGroupingPreProcessors(apiRef, props);
   useGridTreeDataPreProcessors(apiRef, props);
   useGridDetailPanelPreProcessors(apiRef, props); // The column pinning `hydrateColumns` pre-processor must be after every other `hydrateColumns` pre-processors
@@ -71,6 +74,7 @@ export var useDataGridProComponent = function useDataGridProComponent(inputApiRe
   useGridColumnResize(apiRef, props);
   useGridPagination(apiRef, props);
   useGridRowsMeta(apiRef, props);
+  useGridRowReorder(apiRef, props);
   useGridScroll(apiRef, props);
   useGridInfiniteLoader(apiRef, props);
   useGridColumnMenu(apiRef);

package/legacy/DataGridPro/useDataGridProProps.js

@@ -16,6 +16,7 @@ export var DATA_GRID_PRO_PROPS_DEFAULT_VALUES = _extends({}, DATA_GRID_PROPS_DEF
   disableChildrenFiltering: false,
   disableChildrenSorting: false,
   rowGroupingColumnMode: 'single',
+  rowReordering: false,
   getDetailPanelHeight: function getDetailPanelHeight() {
     return 500;
   }

package/legacy/components/DataGridProVirtualScroller.js

@@ -192,6 +192,7 @@ var DataGridProVirtualScroller = /*#__PURE__*/React.forwardRef(function DataGrid
   }, [renderContext, updateRenderZonePosition]);
   useGridApiEventHandler(apiRef, GridEvents.columnWidthChange, refreshRenderZonePosition);
   useGridApiEventHandler(apiRef, GridEvents.columnOrderChange, refreshRenderZonePosition);
+  useGridApiEventHandler(apiRef, GridEvents.rowOrderChange, refreshRenderZonePosition);
   var leftRenderContext = renderContext && leftPinnedColumns.length > 0 ? _extends({}, renderContext, {
     firstColumnIndex: 0,
     lastColumnIndex: leftPinnedColumns.length

package/legacy/components/GridRowReorderCell.js

@@ -0,0 +1,74 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import * as React from 'react';
+import { unstable_composeClasses as composeClasses } from '@mui/material';
+import { GridEvents, gridRowTreeDepthSelector, gridSortModelSelector, useGridApiContext, useGridSelector, getDataGridUtilityClass, gridEditRowsStateSelector } from '@mui/x-data-grid';
+import { useGridRootProps } from '../hooks/utils/useGridRootProps';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
+
+var useUtilityClasses = function useUtilityClasses(ownerState) {
+  var isDraggable = ownerState.isDraggable,
+      classes = ownerState.classes;
+  var slots = {
+    root: ['rowReorderCell', isDraggable && 'rowReorderCell--draggable'],
+    placeholder: ['rowReorderCellPlaceholder']
+  };
+  return composeClasses(slots, getDataGridUtilityClass, classes);
+};
+
+var GridRowReorderCell = function GridRowReorderCell(params) {
+  var apiRef = useGridApiContext();
+  var rootProps = useGridRootProps();
+  var sortModel = useGridSelector(apiRef, gridSortModelSelector);
+  var treeDepth = useGridSelector(apiRef, gridRowTreeDepthSelector);
+  var editRowsState = useGridSelector(apiRef, gridEditRowsStateSelector); // eslint-disable-next-line no-underscore-dangle
+
+  var cellValue = params.row.__reorder__ || params.id; // TODO: remove sortModel and treeDepth checks once row reorder is compatible
+
+  var isDraggable = !!rootProps.rowReordering && !sortModel.length && treeDepth === 1 && Object.keys(editRowsState).length === 0;
+  var ownerState = {
+    isDraggable: isDraggable,
+    classes: rootProps.classes
+  };
+  var classes = useUtilityClasses(ownerState);
+  var publish = React.useCallback(function (eventName, propHandler) {
+    return function (event) {
+      // Ignore portal
+      // The target is not an element when triggered by a Select inside the cell
+      // See https://github.com/mui/material-ui/issues/10534
+      if (event.target.nodeType === 1 && !event.currentTarget.contains(event.target)) {
+        return;
+      } // The row might have been deleted
+
+
+      if (!apiRef.current.getRow(params.row.id)) {
+        return;
+      }
+
+      apiRef.current.publishEvent(eventName, apiRef.current.getRowParams(params.row.id), event);
+
+      if (propHandler) {
+        propHandler(event);
+      }
+    };
+  }, [apiRef, params.row.id]);
+  var draggableEventHandlers = {
+    onDragStart: publish(GridEvents.rowDragStart),
+    onDragOver: publish(GridEvents.rowDragOver),
+    onDragEnd: publish(GridEvents.rowDragEnd)
+  };
+  return /*#__PURE__*/_jsxs("div", _extends({
+    className: classes.root,
+    draggable: isDraggable
+  }, draggableEventHandlers, {
+    children: [/*#__PURE__*/_jsx(rootProps.components.RowReorderIcon, {}), /*#__PURE__*/_jsx("div", {
+      className: classes.placeholder,
+      children: cellValue
+    })]
+  }));
+};
+
+export { GridRowReorderCell };
+export var renderRowReorderCell = function renderRowReorderCell(params) {
+  return /*#__PURE__*/_jsx(GridRowReorderCell, _extends({}, params));
+};

package/legacy/hooks/features/columnReorder/useGridColumnReorder.js

@@ -52,7 +52,7 @@ export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
       clearTimeout(removeDnDStylesTimeout.current);
     };
   }, []);
-  var handleColumnHeaderDragStart = React.useCallback(function (params, event) {
+  var handleDragStart = React.useCallback(function (params, event) {
     if (props.disableColumnReorder || params.colDef.disableReorder) {
       return;
     }
@@ -162,7 +162,7 @@ export var useGridColumnReorder = function useGridColumnReorder(apiRef, props) {
     });
     apiRef.current.forceUpdate();
   }, [props.disableColumnReorder, logger, apiRef]);
-  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleColumnHeaderDragStart);
+  useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragStart, handleDragStart);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnter, handleDragEnter);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragOver, handleDragOver);
   useGridApiEventHandler(apiRef, GridEvents.columnHeaderDragEnd, handleDragEnd);

package/legacy/hooks/features/index.js

@@ -3,5 +3,6 @@ export * from './columnPinning';
 export * from './columnReorder';
 export * from './columnResize';
 export * from './rowGrouping';
+export * from './rowReorder';
 export * from './treeData';
 export * from './detailPanel';