[DataGrid] Add column reorder support

docs/src/pages/components/data-grid/columns/ColumnOrderingGrid.js

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { XGrid } from '@material-ui/x-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function ColumnOrderingGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 20,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <XGrid {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/columns/ColumnOrderingGrid.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { XGrid } from '@material-ui/x-grid';
+import { useDemoData } from '@material-ui/x-grid-data-generator';
+
+export default function ColumnOrderingGrid() {
+  const { data } = useDemoData({
+    dataSet: 'Commodity',
+    rowLength: 20,
+    maxColumns: 20,
+  });
+
+  return (
+    <div style={{ height: 400, width: '100%' }}>
+      <XGrid {...data} />
+    </div>
+  );
+}

docs/src/pages/components/data-grid/columns/columns.md

@@ -103,21 +103,29 @@ const usdPrice: ColTypeDef = {
 
 {{"demo": "pages/components/data-grid/columns/CustomColumnTypesGrid.js", "bg": "inline"}}
 
-## 🚧 Column groups
+## Column reorder [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
 
-> ⚠️ This feature isn't implemented yet. It's coming.
->
-> 👍 Upvote [issue #195](https://github.com/mui-org/material-ui-x/issues/195) if you want to see it land faster.
+By default, `XGrid` allows all column reordering by dragging the header cells and moving them left or right.
 
-Grouping columns allows you to have multiple levels of columns in your header and the ability, if needed, to 'open and close' column groups to show and hide additional columns.
+To disable column reordering, set the prop `disableColumnReorder={true}`.
+
+In addition, column reordering emits the following events that can be imported:
 
-## 🚧 Column reorder [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
+- `COL_REORDER_START`: emitted when dragging of a header cell starts.
+- `COL_REORDER_DRAG_ENTER`: emitted when the cursor enters another header cell while dragging.
+- `COL_REORDER_DRAG_OVER`: emitted when dragging a header cell over another header cell.
+- `COL_REORDER_DRAG_OVER_HEADER`: emitted when dragging a header cell over the `ColumnsHeader` component.
+- `COL_REORDER_STOP`: emitted when dragging of a header cell stops.
+
+{{"demo": "pages/components/data-grid/columns/ColumnOrderingGrid.js", "disableAd": true, "bg": "inline"}}
+
+## 🚧 Column groups
 
 > ⚠️ This feature isn't implemented yet. It's coming.
 >
-> 👍 Upvote [issue #194](https://github.com/mui-org/material-ui-x/issues/194) if you want to see it land faster.
+> 👍 Upvote [issue #195](https://github.com/mui-org/material-ui-x/issues/195) if you want to see it land faster.
 
-Column reordering enables reordering the columns by dragging the header cells.
+Grouping columns allows you to have multiple levels of columns in your header and the ability, if needed, to 'open and close' column groups to show and hide additional columns.
 
 ## 🚧 Column pinning [<span role="img" title="Enterprise">⚡️</span>](https://material-ui.com/store/items/material-ui-x/)
 

packages/grid/_modules_/grid/GridComponent.tsx

@@ -3,6 +3,7 @@ import { useForkRef } from '@material-ui/core/utils';
 import { GridComponentProps } from './GridComponentProps';
 import {
   useApiRef,
+  useColumnReorder,
   useColumnResize,
   useComponents,
   usePagination,
@@ -92,6 +93,7 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
     apiRef,
   );
 
+  const onColumnReorder = useColumnReorder(columnsHeaderRef, apiRef);
   const onResizeColumn = useColumnResize(columnsHeaderRef, apiRef, internalOptions.headerHeight);
   const paginationProps = usePagination(internalRows, internalColumns, internalOptions, apiRef);
 
@@ -209,6 +211,10 @@ export const GridComponent = React.forwardRef<HTMLDivElement, GridComponentProps
                       columns={internalColumns.visible || []}
                       hasScrollX={!!renderCtx?.hasScrollX}
                       onResizeColumn={onResizeColumn}
+                      onColumnHeaderDragOver={onColumnReorder.handleColumnHeaderDragOver}
+                      onColumnDragStart={onColumnReorder.handleDragStart}
+                      onColumnDragEnter={onColumnReorder.handleDragEnter}
+                      onColumnDragOver={onColumnReorder.handleDragOver}
                       renderCtx={renderCtx}
                     />
                   </GridColumnsContainer>

packages/grid/_modules_/grid/components/AutoSizer.tsx

@@ -70,8 +70,8 @@ export const AutoSizer = React.forwardRef<HTMLDivElement, AutoSizerProps>(functi
     width: defaultWidth,
   });
 
-  const rootRef = React.useRef<HTMLDivElement>(null);
-  const parentElement = React.useRef(null) as React.MutableRefObject<HTMLElement | null>;
+  const rootRef = React.useRef<HTMLDivElement | null>(null);
+  const parentElement = React.useRef<HTMLElement | null>(null);
 
   const handleResize = useEventCallback(() => {
     // Guard against AutoSizer component being removed from the DOM immediately after being added.

packages/grid/_modules_/grid/components/ScrollArea.tsx

@@ -0,0 +1,80 @@
+import * as React from 'react';
+import { COL_REORDER_START, COL_REORDER_STOP, SCROLLING } from '../constants/eventsConstants';
+import { ScrollParams, useApiEventHandler } from '../hooks';
+import { ApiRef } from '../models';
+import { classnames } from '../utils';
+import { ApiContext } from './api-context';
+
+interface ScrollAreaProps {
+  scrollDirection: 'left' | 'right';
+}
+
+export const ScrollArea = React.memo(function ScrollArea(props: ScrollAreaProps) {
+  const { scrollDirection } = props;
+  const rootRef = React.useRef<HTMLDivElement>(null);
+  const api = React.useContext(ApiContext);
+  const rafRef = React.useRef(0);
+  const timeout = React.useRef<number>();
+  const [dragging, setDragging] = React.useState<boolean>(false);
+  const scrollPosition = React.useRef<ScrollParams>({
+    left: 0,
+    top: 0,
+  });
+
+  const handleScrolling = React.useCallback((newScrollPosition) => {
+    scrollPosition.current = newScrollPosition;
+  }, []);
+
+  const handleDragOver = React.useCallback(
+    (event) => {
+      let diff;
+
+      if (scrollDirection === 'left') {
+        diff = event.clientX - rootRef.current!.getBoundingClientRect().right;
+      } else if (scrollDirection === 'right') {
+        diff = Math.max(1, event.clientX - rootRef.current!.getBoundingClientRect().left);
+      } else {
+        throw new Error('wrong dir');
+      }
+
+      diff = (diff - 1) * 1.5 + 1;
+
+      // Throttle, max 60 Hz
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = requestAnimationFrame(() => {
+        // Wait for the frame to pain before updating the scroll position
+        clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+          api!.current.scroll({
+            left: scrollPosition.current.left + diff,
+            top: scrollPosition.current.top,
+          });
+        });
+      });
+    },
+    [scrollDirection, api],
+  );
+
+  React.useEffect(() => {
+    return () => {
+      cancelAnimationFrame(rafRef.current);
+      clearTimeout(timeout.current);
+    };
+  }, []);
+
+  const toggleDragging = React.useCallback(() => {
+    setDragging((prevdragging) => !prevdragging);
+  }, []);
+
+  useApiEventHandler(api as ApiRef, SCROLLING, handleScrolling);
+  useApiEventHandler(api as ApiRef, COL_REORDER_START, toggleDragging);
+  useApiEventHandler(api as ApiRef, COL_REORDER_STOP, toggleDragging);
+
+  return dragging ? (
+    <div
+      ref={rootRef}
+      className={classnames('MuiDataGrid-scrollArea', `MuiDataGrid-scrollArea-${scrollDirection}`)}
+      onDragOver={handleDragOver}
+    />
+  ) : null;
+});

packages/grid/_modules_/grid/components/column-header-item.tsx

@@ -7,33 +7,31 @@ import { ColumnHeaderSortIcon } from './column-header-sort-icon';
 import { ColumnHeaderTitle } from './column-header-title';
 import { ColumnHeaderSeparator } from './column-header-separator';
 import { OptionsContext } from './options-context';
+import { CursorCoordinates } from '../hooks/features/useColumnReorder';
 
 interface ColumnHeaderItemProps {
   column: ColDef;
   colIndex: number;
   onResizeColumn?: (c: any) => void;
+  onColumnDragStart?: (col: ColDef, currentTarget: HTMLElement) => void;
+  onColumnDragEnter?: (event: Event) => void;
+  onColumnDragOver?: (col: ColDef, coordinates: CursorCoordinates) => void;
 }
-const headerAlignPropToCss = {
-  center: 'MuiDataGrid-colCellCenter',
-  right: 'MuiDataGrid-colCellRight',
-};
+
 export const ColumnHeaderItem = React.memo(
-  ({ column, colIndex, onResizeColumn }: ColumnHeaderItemProps) => {
+  ({
+    column,
+    colIndex,
+    onResizeColumn,
+    onColumnDragStart,
+    onColumnDragEnter,
+    onColumnDragOver,
+  }: ColumnHeaderItemProps) => {
     const api = React.useContext(ApiContext);
-    const { headerHeight, showColumnRightBorder, disableColumnResize } = React.useContext(
+    const { showColumnRightBorder, disableColumnResize, disableColumnReorder } = React.useContext(
       OptionsContext,
     );
 
-    const cssClass = classnames(
-      HEADER_CELL_CSS_CLASS,
-      showColumnRightBorder ? 'MuiDataGrid-withBorder' : '',
-      column.headerClassName,
-      column.headerAlign &&
-        column.headerAlign !== 'left' &&
-        headerAlignPropToCss[column.headerAlign],
-      { 'MuiDataGrid-colCellSortable': column.sortable },
-    );
-
     let headerComponent: React.ReactElement | null = null;
     if (column.renderHeader) {
       headerComponent = column.renderHeader({
@@ -44,7 +42,21 @@ export const ColumnHeaderItem = React.memo(
       });
     }
 
-    const handleResize = onResizeColumn ? () => onResizeColumn(column) : undefined;
+    const handleResize =
+      onResizeColumn && !disableColumnReorder ? () => onResizeColumn(column) : undefined;
+    const handleDragStart =
+      onColumnDragStart && !disableColumnReorder
+        ? (event) => onColumnDragStart(column, event.currentTarget)
+        : undefined;
+    const handleDragEnter = onColumnDragEnter ? (event) => onColumnDragEnter(event) : undefined;
+    const handleDragOver = onColumnDragOver
+      ? (event) => {
+          onColumnDragOver(column, {
+            x: event.clientX,
+            y: event.clientY,
+          });
+        }
+      : undefined;
 
     const width = column.width!;
 
@@ -55,42 +67,57 @@ export const ColumnHeaderItem = React.memo(
 
     return (
       <div
-        className={cssClass}
+        className={classnames(
+          HEADER_CELL_CSS_CLASS,
+          showColumnRightBorder ? 'MuiDataGrid-withBorder' : '',
+          column.headerClassName,
+          column.headerAlign === 'center' && 'MuiDataGrid-colCellCenter',
+          column.headerAlign === 'right' && 'MuiDataGrid-colCellRight',
+          { 'MuiDataGrid-colCellSortable': column.sortable },
+        )}
         key={column.field}
         data-field={column.field}
         style={{
           width,
           minWidth: width,
           maxWidth: width,
-          maxHeight: headerHeight,
-          minHeight: headerHeight,
         }}
         role="columnheader"
         tabIndex={-1}
         aria-colindex={colIndex + 1}
         {...ariaSort}
       >
-        {column.type === 'number' && (
-          <ColumnHeaderSortIcon
-            direction={column.sortDirection}
-            index={column.sortIndex}
-            hide={column.hideSortIcons}
-          />
-        )}
-        {headerComponent || (
-          <ColumnHeaderTitle
-            label={column.headerName || column.field}
-            description={column.description}
-            columnWidth={width}
-          />
-        )}
-        {column.type !== 'number' && (
-          <ColumnHeaderSortIcon
-            direction={column.sortDirection}
-            index={column.sortIndex}
-            hide={column.hideSortIcons}
-          />
-        )}
+        <div
+          className="MuiDataGrid-colCell-draggable"
+          draggable={
+            !disableColumnReorder && !!handleDragStart && !!handleDragEnter && !!handleDragOver
+          }
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnter={handleDragEnter}
+        >
+          {column.type === 'number' && (
+            <ColumnHeaderSortIcon
+              direction={column.sortDirection}
+              index={column.sortIndex}
+              hide={column.hideSortIcons}
+            />
+          )}
+          {headerComponent || (
+            <ColumnHeaderTitle
+              label={column.headerName || column.field}
+              description={column.description}
+              columnWidth={width}
+            />
+          )}
+          {column.type !== 'number' && (
+            <ColumnHeaderSortIcon
+              direction={column.sortDirection}
+              index={column.sortIndex}
+              hide={column.hideSortIcons}
+            />
+          )}
+        </div>
         <ColumnHeaderSeparator
           resizable={!disableColumnResize && column.resizable}
           onResize={handleResize}