material-react-table 0.23.4 → 0.24.1

package/dist/toolbar/MRT_LinearProgressBar.d.ts

@@ -1,7 +1,7 @@
 import { FC } from 'react';
 import { MRT_TableInstance } from '..';
 interface Props {
-    alignTo: 'bottom' | 'top';
+    isTopToolbar: boolean;
     table: MRT_TableInstance;
 }
 export declare const MRT_LinearProgressBar: FC<Props>;

package/dist/utils.d.ts

@@ -4,7 +4,7 @@ export declare const getAllLeafColumnDefs: <TData extends Record<string, any> =
 export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs: MRT_ColumnDef<TData>[], currentFilterFns: {
     [key: string]: "between" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "lessThan" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange";
 }) => MRT_DefinedColumnDef<TData>[];
-export declare const reorderColumn: <TData extends Record<string, any> = {}>(movingColumn: MRT_Column<TData>, receivingColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
+export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];
 export declare const getTrailingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => (string | false | undefined)[];
 export declare const getDefaultColumnOrderIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => string[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.23.4",
+  "version": "0.24.1",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -1,12 +1,13 @@
 import React, {
   ChangeEvent,
   Dispatch,
+  DragEvent,
   FC,
   FocusEvent,
   ReactNode,
   SetStateAction,
 } from 'react';
-import {
+import type {
   AlertProps,
   ButtonProps,
   CheckboxProps,
@@ -25,7 +26,7 @@ import {
   TextFieldProps,
   ToolbarProps,
 } from '@mui/material';
-import {
+import type {
   Cell,
   Column,
   ColumnDef,
@@ -39,7 +40,7 @@ import {
   TableOptions,
   TableState,
 } from '@tanstack/react-table';
-import { Options as VirtualizerOptions } from 'react-virtual';
+import type { Options as VirtualizerOptions } from 'react-virtual';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_TableRoot } from './table/MRT_TableRoot';
@@ -107,6 +108,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
     localization: MRT_Localization;
   };
   setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+  setCurrentDraggingRow: Dispatch<SetStateAction<MRT_Row<TData> | null>>;
   setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
   setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
   setCurrentFilterFns: Dispatch<
@@ -116,6 +118,7 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
   >;
   setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
   setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
+  setCurrentHoveredRow: Dispatch<SetStateAction<MRT_Row | null>>;
   setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
   setIsFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
@@ -126,11 +129,13 @@ export type MRT_TableInstance<TData extends Record<string, any> = {}> = Omit<
 export type MRT_TableState<TData extends Record<string, any> = {}> =
   TableState & {
     currentDraggingColumn: MRT_Column<TData> | null;
+    currentDraggingRow: MRT_Row<TData> | null;
     currentEditingCell: MRT_Cell<TData> | null;
     currentEditingRow: MRT_Row<TData> | null;
     currentFilterFns: Record<string, MRT_FilterOption>;
     currentGlobalFilterFn: Record<string, MRT_FilterOption>;
     currentHoveredColumn: MRT_Column<TData> | null;
+    currentHoveredRow: MRT_Row<TData> | null;
     density: 'comfortable' | 'compact' | 'spacious';
     isFullScreen: boolean;
     isLoading: boolean;
@@ -226,6 +231,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   columns?: MRT_ColumnDef<TData>[];
   enableClickToCopy?: boolean;
   enableColumnActions?: boolean;
+  enableColumnDragging?: boolean;
   enableColumnFilterChangeMode?: boolean;
   enableColumnOrdering?: boolean;
   enableEditing?: boolean;
@@ -295,6 +301,15 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
       }) => IconButtonProps);
+  muiTableHeadCellDragHandleProps?:
+    | IconButtonProps
+    | (({
+        table,
+        column,
+      }: {
+        table: MRT_TableInstance<TData>;
+        column: MRT_Column<TData>;
+      }) => IconButtonProps);
   muiTableHeadCellFilterTextFieldProps?:
     | TextFieldProps
     | (({
@@ -368,12 +383,11 @@ export type MRT_HeaderGroup<TData extends Record<string, any> = {}> = Omit<
 
 export type MRT_Row<TData extends Record<string, any> = {}> = Omit<
   Row<TData>,
-  'getVisibleCells' | 'getAllCells' | 'subRows' | 'original' | '_valuesCache'
+  'getVisibleCells' | 'getAllCells' | 'subRows' | '_valuesCache'
 > & {
   getAllCells: () => MRT_Cell<TData>[];
   getVisibleCells: () => MRT_Cell<TData>[];
   subRows?: MRT_Row<TData>[];
-  original: TData;
   _valuesCache?: TData;
 };
 
@@ -397,11 +411,21 @@ export type MRT_FilterFn<TData extends Record<string, any> = {}> =
   | FilterFn<TData>
   | MRT_FilterOption;
 
+/**
+ * `columns` and `data` props are the only required props, but there are over 150 other optional props.
+ *
+ * See more info on creating columns and data on the official docs site:
+ * @link https://www.material-react-table.com/docs/usage
+ *
+ * See the full props list on the official docs site:
+ * @link https://www.material-react-table.com/docs/api/props
+ */
 export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
   MRT_TableOptions<TData> & {
     editingMode?: 'table' | 'row' | 'cell';
     enableClickToCopy?: boolean;
     enableColumnActions?: boolean;
+    enableColumnDragging?: boolean;
     enableColumnFilterChangeMode?: boolean;
     enableColumnOrdering?: boolean;
     enableDensityToggle?: boolean;
@@ -412,7 +436,9 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     enableGlobalFilterRankedResults?: boolean;
     enablePagination?: boolean;
     enableRowActions?: boolean;
+    enableRowDragging?: boolean;
     enableRowNumbers?: boolean;
+    enableRowOrdering?: boolean;
     enableRowVirtualization?: boolean;
     enableSelectAll?: boolean;
     enableStickyHeader?: boolean;
@@ -439,8 +465,10 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     muiLinearProgressProps?:
       | LinearProgressProps
       | (({
+          isTopToolbar,
           table,
         }: {
+          isTopToolbar: boolean;
           table: MRT_TableInstance<TData>;
         }) => LinearProgressProps);
     muiSearchTextFieldProps?:
@@ -494,6 +522,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
           table: MRT_TableInstance<TData>;
           cell: MRT_Cell<TData>;
         }) => SkeletonProps);
+    muiTableBodyRowDragHandleProps?:
+      | IconButtonProps
+      | (({
+          table,
+          row,
+        }: {
+          table: MRT_TableInstance<TData>;
+          row: MRT_Row<TData>;
+        }) => IconButtonProps);
     muiTableBodyProps?:
       | TableBodyProps
       | (({ table }: { table: MRT_TableInstance<TData> }) => TableBodyProps);
@@ -552,6 +589,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
           table: MRT_TableInstance<TData>;
           column: MRT_Column<TData>;
         }) => IconButtonProps);
+    muiTableHeadCellDragHandleProps?:
+      | IconButtonProps
+      | (({
+          table,
+          column,
+        }: {
+          table: MRT_TableInstance<TData>;
+          column: MRT_Column<TData>;
+        }) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
       | (({
@@ -622,12 +668,23 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       cell: MRT_Cell<TData>;
       table: MRT_TableInstance<TData>;
     }) => void;
+    onColumnDrop?: ({
+      event,
+      draggedColumn,
+      targetColumn,
+    }: {
+      event: DragEvent<HTMLButtonElement>;
+      draggedColumn: MRT_Column<TData>;
+      targetColumn: MRT_Column<TData> | null;
+    }) => void;
     onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onCurrentDraggingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
     onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onCurrentFilterFnsChange?: OnChangeFn<{ [key: string]: MRT_FilterOption }>;
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
     onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onCurrentHoveredRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onEditRowSubmit?: ({
       row,
       table,
@@ -637,6 +694,15 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     }) => Promise<void> | void;
     onDensityChange?: OnChangeFn<boolean>;
     onIsFullScreenChange?: OnChangeFn<boolean>;
+    onRowDrop?: ({
+      event,
+      draggedRow,
+      targetRow,
+    }: {
+      event: DragEvent<HTMLButtonElement>;
+      draggedRow: MRT_Row<TData>;
+      targetRow: MRT_Row<TData> | null;
+    }) => void;
     onShowAlertBannerChange?: OnChangeFn<boolean>;
     onShowFiltersChange?: OnChangeFn<boolean>;
     onShowGlobalFilterChange?: OnChangeFn<boolean>;
@@ -709,15 +775,6 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
   };
 
-/**
- * `columns` and `data` props are the only required props, but there are over 150 other optional props.
- *
- * See more info on creating columns and data on the official docs site:
- * @link https://www.material-react-table.com/docs/usage
- *
- * See the full props list on the official docs site:
- * @link https://www.material-react-table.com/docs/api/props
- */
 export default <TData extends Record<string, any> = {}>({
   autoResetExpanded = false,
   columnResizeMode = 'onEnd',

package/src/body/MRT_TableBodyCell.tsx

@@ -1,4 +1,4 @@
-import React, { DragEvent, FC, MouseEvent, useMemo } from 'react';
+import React, { DragEvent, FC, MouseEvent, RefObject, useMemo } from 'react';
 import {
   alpha,
   darken,
@@ -10,11 +10,13 @@ import {
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import type { MRT_Cell, MRT_TableInstance } from '..';
+import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 
 interface Props {
   cell: MRT_Cell;
   enableHover?: boolean;
   rowIndex: number;
+  rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance;
 }
 
@@ -22,6 +24,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
   rowIndex,
+  rowRef,
   table,
 }) => {
   const theme = useTheme();
@@ -30,6 +33,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
     options: {
       editingMode,
       enableClickToCopy,
+      enableColumnOrdering,
       enableEditing,
       enableRowNumbers,
       muiTableBodyCellProps,
@@ -124,7 +128,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   };
 
   const handleDragEnter = (_e: DragEvent) => {
-    if (currentDraggingColumn) {
+    if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
     }
   };
@@ -140,6 +144,10 @@ export const MRT_TableBodyCell: FC<Props> = ({
     ? {
         borderLeft: draggingBorder,
         borderRight: draggingBorder,
+        borderBottom:
+          row.index === table.getRowModel().rows.length - 1
+            ? draggingBorder
+            : undefined,
       }
     : undefined;
 
@@ -181,7 +189,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
             ? '1rem 1.25rem'
             : '1.5rem',
         pl:
-          column.id === 'mrt-expand'
+          column.id === 'mrt-row-expand'
             ? `${
                 row.depth +
                 (density === 'compact'
@@ -233,6 +241,12 @@ export const MRT_TableBodyCell: FC<Props> = ({
           rowNumberMode === 'static' &&
           column.id === 'mrt-row-numbers' ? (
           rowIndex + 1
+        ) : column.id === 'mrt-row-drag' ? (
+          <MRT_TableBodyRowGrabHandle
+            cell={cell}
+            rowRef={rowRef}
+            table={table}
+          />
         ) : columnDefType === 'display' ? (
           columnDef.Cell?.({ cell, table })
         ) : isEditing ? (

package/src/body/MRT_TableBodyRow.tsx

@@ -1,5 +1,5 @@
-import React, { FC } from 'react';
-import { darken, lighten, TableRow } from '@mui/material';
+import React, { DragEvent, FC, useRef } from 'react';
+import { darken, lighten, TableRow, useTheme } from '@mui/material';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import type { MRT_Row, MRT_TableInstance } from '..';
@@ -11,24 +11,56 @@ interface Props {
 }
 
 export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
+  const theme = useTheme();
   const {
     getIsSomeColumnsPinned,
-    options: { muiTableBodyRowProps, renderDetailPanel },
+    getState,
+    options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel },
+    setCurrentHoveredRow,
   } = table;
+  const { currentDraggingRow, currentHoveredRow } = getState();
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
       ? muiTableBodyRowProps({ row, table })
       : muiTableBodyRowProps;
 
+  const handleDragEnter = (_e: DragEvent) => {
+    if (enableRowOrdering && currentDraggingRow) {
+      setCurrentHoveredRow(row);
+    }
+  };
+
+  const rowRef = useRef<HTMLTableRowElement>(null);
+
+  const draggingBorder =
+    currentDraggingRow?.id === row.id
+      ? `1px dashed ${theme.palette.divider}`
+      : currentHoveredRow?.id === row.id
+      ? `2px dashed ${theme.palette.primary.main}`
+      : undefined;
+
+  const draggingBorders = draggingBorder
+    ? {
+        border: draggingBorder,
+      }
+    : undefined;
+
   return (
     <>
       <TableRow
+        onDragEnter={handleDragEnter}
         hover
         selected={row.getIsSelected()}
+        ref={rowRef}
         {...tableRowProps}
         sx={(theme) => ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),
+          opacity:
+            currentDraggingRow?.id === row.id ||
+            currentHoveredRow?.id === row.id
+              ? 0.5
+              : 1,
           transition: 'all 0.2s ease-in-out',
           '&:hover td': {
             backgroundColor:
@@ -39,6 +71,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
                 : undefined,
           },
           ...(tableRowProps?.sx as any),
+          ...draggingBorders,
         })}
       >
         {row?.getVisibleCells()?.map?.((cell) => (
@@ -47,6 +80,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
             key={cell.id}
             enableHover={tableRowProps?.hover !== false}
             rowIndex={rowIndex}
+            rowRef={rowRef}
             table={table}
           />
         ))}

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -0,0 +1,48 @@
+import React, { DragEvent, FC, RefObject } from 'react';
+import { MRT_Cell, MRT_TableInstance } from '..';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+
+interface Props {
+  cell: MRT_Cell;
+  rowRef: RefObject<HTMLTableRowElement>;
+  table: MRT_TableInstance;
+}
+
+export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
+  cell,
+  rowRef,
+  table,
+}) => {
+  const {
+    options: { muiTableBodyRowDragHandleProps, onRowDrop },
+  } = table;
+
+  const iconButtonProps =
+    muiTableBodyRowDragHandleProps instanceof Function
+      ? muiTableBodyRowDragHandleProps({ row: cell.row, table })
+      : muiTableBodyRowDragHandleProps;
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    e.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
+    table.setCurrentDraggingRow(cell.row as any);
+  };
+
+  const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    onRowDrop?.({
+      event,
+      draggedRow: table.getState().currentDraggingRow as any,
+      targetRow: table.getState().currentHoveredRow as any,
+    });
+    table.setCurrentDraggingRow(null);
+    table.setCurrentHoveredRow(null);
+  };
+
+  return (
+    <MRT_GrabHandleButton
+      iconButtonProps={iconButtonProps}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      table={table}
+    />
+  );
+};

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,16 +1,18 @@
-import { IconButton, Tooltip } from '@mui/material';
+import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import React, { DragEventHandler, FC } from 'react';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  handleDragStart: DragEventHandler<HTMLButtonElement>;
-  handleDragEnd: DragEventHandler<HTMLButtonElement>;
+  iconButtonProps?: IconButtonProps;
+  onDragStart: DragEventHandler<HTMLButtonElement>;
+  onDragEnd: DragEventHandler<HTMLButtonElement>;
   table: MRT_TableInstance;
 }
 
 export const MRT_GrabHandleButton: FC<Props> = ({
-  handleDragStart,
-  handleDragEnd,
+  iconButtonProps,
+  onDragEnd,
+  onDragStart,
   table,
 }) => {
   const {
@@ -26,14 +28,15 @@ export const MRT_GrabHandleButton: FC<Props> = ({
       enterDelay={1000}
       enterNextDelay={1000}
       placement="top"
-      title={localization.grab}
+      title={localization.move}
     >
       <IconButton
         disableRipple
         draggable="true"
-        onDragStart={handleDragStart}
-        onDragEnd={handleDragEnd}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
         size="small"
+        {...iconButtonProps}
         sx={{
           cursor: 'grab',
           m: 0,
@@ -47,6 +50,7 @@ export const MRT_GrabHandleButton: FC<Props> = ({
           '&:active': {
             cursor: 'grabbing',
           },
+          ...iconButtonProps?.sx,
         }}
       >
         <DragHandleIcon />

package/src/head/MRT_TableHeadCell.tsx

@@ -1,12 +1,11 @@
 import React, { DragEvent, FC, ReactNode } from 'react';
 import { Box, TableCell, Theme, alpha, lighten, useTheme } from '@mui/material';
+import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
-import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
-import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
-import { reorderColumn } from '../utils';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -20,18 +19,16 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     getState,
     options: {
       enableColumnActions,
+      enableColumnDragging,
       enableColumnOrdering,
       enableColumnResizing,
       enableGrouping,
       enableMultiSort,
       muiTableHeadCellProps,
     },
-    setColumnOrder,
-    setCurrentDraggingColumn,
     setCurrentHoveredColumn,
   } = table;
-  const { columnOrder, density, currentDraggingColumn, currentHoveredColumn } =
-    getState();
+  const { density, currentDraggingColumn, currentHoveredColumn } = getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -75,30 +72,14 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     );
   };
 
-  const tableHeadCellRef = React.useRef<HTMLElement>(null);
-
-  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
-    setCurrentDraggingColumn(column);
-    e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
-  };
-
-  const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
-    setCurrentDraggingColumn(null);
-    setCurrentHoveredColumn(null);
-    if (
-      currentHoveredColumn &&
-      currentHoveredColumn?.id !== currentDraggingColumn?.id
-    ) {
-      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
-    }
-  };
-
   const handleDragEnter = (_e: DragEvent) => {
-    if (currentDraggingColumn) {
+    if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
     }
   };
 
+  const tableHeadCellRef = React.useRef<HTMLTableCellElement>(null);
+
   const draggingBorder =
     currentDraggingColumn?.id === column.id
       ? `1px dashed ${theme.palette.divider}`
@@ -223,13 +204,15 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
           </Box>
           <Box sx={{ whiteSpace: 'nowrap' }}>
             {columnDefType === 'data' &&
-              ((enableColumnOrdering &&
-                columnDef.enableColumnOrdering !== false) ||
+              ((enableColumnDragging &&
+                columnDef.enableColumnDragging !== false) ||
+                (enableColumnOrdering &&
+                  columnDef.enableColumnOrdering !== false) ||
                 (enableGrouping && columnDef.enableGrouping !== false)) && (
-                <MRT_GrabHandleButton
-                  handleDragStart={handleDragStart}
-                  handleDragEnd={handleDragEnd}
+                <MRT_TableHeadCellGrabHandle
+                  column={column}
                   table={table}
+                  tableHeadCellRef={tableHeadCellRef}
                 />
               )}
             {(enableColumnActions || columnDef.enableColumnActions) &&

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -0,0 +1,77 @@
+import React, { DragEvent, FC, RefObject } from 'react';
+import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
+import { reorderColumn } from '../utils';
+import type { MRT_Column, MRT_TableInstance } from '..';
+
+interface Props {
+  column: MRT_Column;
+  table: MRT_TableInstance;
+  tableHeadCellRef: RefObject<HTMLTableCellElement>;
+}
+
+export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
+  column,
+  table,
+  tableHeadCellRef,
+}) => {
+  const {
+    getState,
+    options: {
+      enableColumnOrdering,
+      muiTableHeadCellDragHandleProps,
+      onColumnDrop,
+    },
+    setColumnOrder,
+    setCurrentDraggingColumn,
+    setCurrentHoveredColumn,
+  } = table;
+  const { columnDef } = column;
+  const { currentHoveredColumn, currentDraggingColumn, columnOrder } =
+    getState();
+
+  const mIconButtonProps =
+    muiTableHeadCellDragHandleProps instanceof Function
+      ? muiTableHeadCellDragHandleProps({ column, table })
+      : muiTableHeadCellDragHandleProps;
+
+  const mcIconButtonProps =
+    columnDef.muiTableHeadCellDragHandleProps instanceof Function
+      ? columnDef.muiTableHeadCellDragHandleProps({ column, table })
+      : columnDef.muiTableHeadCellDragHandleProps;
+
+  const iconButtonProps = {
+    ...mIconButtonProps,
+    ...mcIconButtonProps,
+  };
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    setCurrentDraggingColumn(column);
+    e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
+  };
+
+  const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
+    onColumnDrop?.({
+      event,
+      draggedColumn: column,
+      targetColumn: currentHoveredColumn,
+    });
+    if (
+      enableColumnOrdering &&
+      currentHoveredColumn &&
+      currentHoveredColumn?.id !== currentDraggingColumn?.id
+    ) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+    setCurrentDraggingColumn(null);
+    setCurrentHoveredColumn(null);
+  };
+
+  return (
+    <MRT_GrabHandleButton
+      iconButtonProps={iconButtonProps}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      table={table}
+    />
+  );
+};