material-react-table 0.21.0 → 0.22.0

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -1,9 +1,11 @@
-import { FC } from 'react';
+import { Dispatch, FC, SetStateAction } from 'react';
 import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
     allColumns: MRT_Column[];
     column: MRT_Column;
+    currentHoveredColumn: MRT_Column | null;
     isSubMenu?: boolean;
+    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
     table: MRT_TableInstance;
 }
 export declare const MRT_ShowHideColumnsMenuItems: FC<Props>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.21.0",
+  "version": "0.22.0",
   "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.",
@@ -99,8 +99,6 @@
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.1.1",
     "@tanstack/react-table": "8.1.3",
-    "react-dnd": "^16.0.1",
-    "react-dnd-html5-backend": "^16.0.1",
     "react-virtual": "^2.10.4"
   }
 }

package/src/body/MRT_TableBody.tsx

@@ -1,16 +1,21 @@
-import React, { FC, RefObject, useMemo } from 'react';
+import React, { Dispatch, FC, RefObject, SetStateAction, useMemo } from 'react';
 import { useVirtual } from 'react-virtual';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { rankGlobalFuzzy } from '../sortingFns';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   table: MRT_TableInstance;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   tableContainerRef: RefObject<HTMLDivElement>;
 }
 
-export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
+export const MRT_TableBody: FC<Props> = ({
+  setCurrentHoveredColumn,
+  table,
+  tableContainerRef,
+}) => {
   const {
     getRowModel,
     getPrePaginationRowModel,
@@ -103,6 +108,7 @@ export const MRT_TableBody: FC<Props> = ({ table, tableContainerRef }) => {
               rowIndex={
                 enableRowVirtualization ? rowOrVirtualRow.index : rowIndex
               }
+              setCurrentHoveredColumn={setCurrentHoveredColumn}
               table={table}
             />
           );

package/src/body/MRT_TableBodyCell.tsx

@@ -1,15 +1,21 @@
-import React, { FC, MouseEvent, useMemo } from 'react';
-import { useDrop } from 'react-dnd';
+import React, {
+  Dispatch,
+  DragEvent,
+  FC,
+  MouseEvent,
+  SetStateAction,
+  useMemo,
+} from 'react';
 import { alpha, darken, lighten, Skeleton, TableCell } from '@mui/material';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
-import { reorderColumn } from '../utils';
 import type { MRT_Cell, MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   cell: MRT_Cell;
   enableHover?: boolean;
   rowIndex: number;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
@@ -17,6 +23,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
   cell,
   enableHover,
   rowIndex,
+  setCurrentHoveredColumn,
   table,
 }) => {
   const {
@@ -24,7 +31,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
     options: {
       editingMode,
       enableClickToCopy,
-      enableColumnOrdering,
       enableEditing,
       enableRowNumbers,
       muiTableBodyCellProps,
@@ -32,11 +38,9 @@ export const MRT_TableBodyCell: FC<Props> = ({
       rowNumberMode,
       tableId,
     },
-    setColumnOrder,
     setCurrentEditingCell,
   } = table;
   const {
-    columnOrder,
     currentEditingCell,
     currentEditingRow,
     density,
@@ -47,14 +51,6 @@ export const MRT_TableBodyCell: FC<Props> = ({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const [, dropRef] = useDrop({
-    accept: 'column',
-    drop: (movingColumn: MRT_Column) => {
-      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    },
-  });
-
   const mTableCellBodyProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps({ cell, table })
@@ -125,13 +121,15 @@ export const MRT_TableBodyCell: FC<Props> = ({
     );
   };
 
+  const handleDragEnter = (_e: DragEvent) => {
+    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+  };
+
   return (
     <TableCell
       onDoubleClick={handleDoubleClick}
+      onDragEnter={handleDragEnter}
       {...tableCellProps}
-      ref={
-        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
-      }
       sx={(theme) => ({
         backgroundColor: column.getIsPinned()
           ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)

package/src/body/MRT_TableBodyRow.tsx

@@ -1,16 +1,22 @@
-import React, { FC } from 'react';
+import React, { Dispatch, FC, SetStateAction } from 'react';
 import { darken, lighten, TableRow } from '@mui/material';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import type { MRT_Row, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_Row, MRT_TableInstance } from '..';
 
 interface Props {
   row: MRT_Row;
   rowIndex: number;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
-export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
+export const MRT_TableBodyRow: FC<Props> = ({
+  row,
+  rowIndex,
+  setCurrentHoveredColumn,
+  table,
+}) => {
   const {
     getIsSomeColumnsPinned,
     options: { muiTableBodyRowProps, renderDetailPanel },
@@ -47,6 +53,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
             key={cell.id}
             enableHover={tableRowProps?.hover !== false}
             rowIndex={rowIndex}
+            setCurrentHoveredColumn={setCurrentHoveredColumn}
             table={table}
           />
         ))}

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,13 +1,18 @@
 import { IconButton, Tooltip } from '@mui/material';
-import React, { FC, forwardRef, Ref } from 'react';
+import React, { DragEventHandler, FC } from 'react';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  ref: Ref<HTMLButtonElement>;
+  handleDragStart: DragEventHandler<HTMLButtonElement>;
+  handleDragEnd: DragEventHandler<HTMLButtonElement>;
   table: MRT_TableInstance;
 }
 
-export const MRT_GrabHandleButton: FC<Props> = forwardRef(({ table }, ref) => {
+export const MRT_GrabHandleButton: FC<Props> = ({
+  handleDragStart,
+  handleDragEnd,
+  table,
+}) => {
   const {
     options: {
       icons: { DragHandleIcon },
@@ -25,7 +30,9 @@ export const MRT_GrabHandleButton: FC<Props> = forwardRef(({ table }, ref) => {
     >
       <IconButton
         disableRipple
-        ref={ref}
+        draggable="true"
+        onDragStart={handleDragStart}
+        onDragEnd={handleDragEnd}
         size="small"
         sx={{
           cursor: 'grab',
@@ -46,4 +53,4 @@ export const MRT_GrabHandleButton: FC<Props> = forwardRef(({ table }, ref) => {
       </IconButton>
     </Tooltip>
   );
-});
+};

package/src/head/MRT_TableHead.tsx

@@ -1,13 +1,19 @@
-import React, { FC } from 'react';
+import React, { Dispatch, FC, SetStateAction } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import type { MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
+  currentHoveredColumn: MRT_Column | null;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
-export const MRT_TableHead: FC<Props> = ({ table }) => {
+export const MRT_TableHead: FC<Props> = ({
+  currentHoveredColumn,
+  setCurrentHoveredColumn,
+  table,
+}) => {
   const {
     getHeaderGroups,
     options: { muiTableHeadProps },
@@ -22,6 +28,8 @@ export const MRT_TableHead: FC<Props> = ({ table }) => {
     <TableHead {...tableHeadProps}>
       {getHeaderGroups().map((headerGroup) => (
         <MRT_TableHeadRow
+          currentHoveredColumn={currentHoveredColumn}
+          setCurrentHoveredColumn={setCurrentHoveredColumn}
           headerGroup={headerGroup as any}
           key={headerGroup.id}
           table={table}

package/src/head/MRT_TableHeadCell.tsx

@@ -1,4 +1,11 @@
-import React, { FC, ReactNode, Ref } from 'react';
+import React, {
+  Dispatch,
+  DragEvent,
+  FC,
+  ReactNode,
+  SetStateAction,
+  useState,
+} from 'react';
 import { Box, TableCell, Theme, alpha, lighten } from '@mui/material';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
@@ -6,24 +13,21 @@ import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
-import type { MRT_Header, MRT_TableInstance } from '..';
+import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
+import { reorderColumn } from '../utils';
 
 interface Props {
-  dragRef?: Ref<HTMLButtonElement>;
-  dropRef?: Ref<HTMLDivElement>;
+  currentHoveredColumn: MRT_Column | null;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   header: MRT_Header;
   table: MRT_TableInstance;
-  isDragging?: boolean;
-  previewRef?: Ref<HTMLTableCellElement>;
 }
 
 export const MRT_TableHeadCell: FC<Props> = ({
-  dragRef,
-  dropRef,
+  currentHoveredColumn,
+  setCurrentHoveredColumn,
   header,
   table,
-  isDragging,
-  previewRef,
 }) => {
   const {
     getState,
@@ -35,8 +39,9 @@ export const MRT_TableHeadCell: FC<Props> = ({
       enableMultiSort,
       muiTableHeadCellProps,
     },
+    setColumnOrder,
   } = table;
-  const { density, showFilters } = getState();
+  const { columnOrder, density } = getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -80,32 +85,57 @@ export const MRT_TableHeadCell: FC<Props> = ({
     );
   };
 
+  const tableHeadCellRef = React.useRef<HTMLElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
+  };
+
+  const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(false);
+    setCurrentHoveredColumn(null);
+    if (currentHoveredColumn) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+  };
+
+  const handleDragEnter = (_e: DragEvent) => {
+    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+  };
+
   return (
     <TableCell
       align={columnDefType === 'group' ? 'center' : 'left'}
       colSpan={header.colSpan}
+      onDragEnter={handleDragEnter}
+      ref={tableHeadCellRef}
       {...tableCellProps}
-      ref={
-        columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined
-      }
       sx={(theme: Theme) => ({
         backgroundColor:
           column.getIsPinned() && columnDefType !== 'group'
             ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
             : 'inherit',
         backgroundImage: 'inherit',
+        border: isDragging
+          ? `2px dashed ${theme.palette.divider}`
+          : currentHoveredColumn?.id === column.id
+          ? `2px dashed ${theme.palette.primary.main}`
+          : undefined,
         boxShadow: getIsLastLeftPinnedColumn()
           ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
           : getIsFirstRightPinnedColumn()
           ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
           : undefined,
         fontWeight: 'bold',
-        height: '100%',
         left:
           column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined,
         overflow: 'visible',
+        opacity: isDragging ? 0.5 : 1,
         p:
           density === 'compact'
             ? columnDefType === 'display'
@@ -124,7 +154,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
             ? 'sticky'
             : undefined,
         pt:
-          columnDefType !== 'data'
+          columnDefType === 'group'
             ? 0
             : density === 'compact'
             ? '0.25'
@@ -135,8 +165,7 @@ export const MRT_TableHeadCell: FC<Props> = ({
           column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
         transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
-        verticalAlign:
-          columnDefType === 'display' && showFilters ? 'center' : 'text-top',
+        verticalAlign: 'text-top',
         zIndex: column.getIsResizing()
           ? 3
           : column.getIsPinned() && columnDefType !== 'group'
@@ -152,7 +181,6 @@ export const MRT_TableHeadCell: FC<Props> = ({
         headerElement
       ) : (
         <Box
-          ref={previewRef}
           sx={{
             alignItems: 'flex-start',
             display: 'flex',
@@ -191,7 +219,8 @@ export const MRT_TableHeadCell: FC<Props> = ({
                 columnDef.enableColumnOrdering !== false) ||
                 (enableGrouping && columnDef.enableGrouping !== false)) && (
                 <MRT_GrabHandleButton
-                  ref={dragRef as Ref<HTMLButtonElement>}
+                  handleDragStart={handleDragStart}
+                  handleDragEnd={handleDragEnd}
                   table={table}
                 />
               )}

package/src/head/MRT_TableHeadRow.tsx

@@ -1,17 +1,28 @@
-import React, { FC } from 'react';
+import React, { Dispatch, FC, SetStateAction } from 'react';
 import { alpha, lighten, TableRow } from '@mui/material';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import { MRT_DraggableTableHeadCell } from './MRT_DraggableTableHeadCell';
-import type { MRT_Header, MRT_HeaderGroup, MRT_TableInstance } from '..';
+import type {
+  MRT_Column,
+  MRT_Header,
+  MRT_HeaderGroup,
+  MRT_TableInstance,
+} from '..';
 
 interface Props {
+  currentHoveredColumn: MRT_Column | null;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   headerGroup: MRT_HeaderGroup;
   table: MRT_TableInstance;
 }
 
-export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
+export const MRT_TableHeadRow: FC<Props> = ({
+  currentHoveredColumn,
+  setCurrentHoveredColumn,
+  headerGroup,
+  table,
+}) => {
   const {
-    options: { enableColumnOrdering, enableGrouping, muiTableHeadRowProps },
+    options: { muiTableHeadRowProps },
   } = table;
 
   const tableRowProps =
@@ -28,21 +39,15 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup, table }) => {
         ...(tableRowProps?.sx as any),
       })}
     >
-      {headerGroup.headers.map((header: MRT_Header, index) =>
-        enableColumnOrdering || enableGrouping ? (
-          <MRT_DraggableTableHeadCell
-            header={header}
-            key={header.id || index}
-            table={table}
-          />
-        ) : (
-          <MRT_TableHeadCell
-            header={header}
-            key={header.id || index}
-            table={table}
-          />
-        ),
-      )}
+      {headerGroup.headers.map((header: MRT_Header, index) => (
+        <MRT_TableHeadCell
+          currentHoveredColumn={currentHoveredColumn}
+          setCurrentHoveredColumn={setCurrentHoveredColumn}
+          header={header}
+          key={header.id || index}
+          table={table}
+        />
+      ))}
     </TableRow>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { FC, useMemo, useState } from 'react';
 import { Button, Menu, Divider, Box } from '@mui/material';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import type { MRT_Column, MRT_TableInstance } from '..';
@@ -62,6 +62,9 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
     getRightLeafColumns(),
   ]) as MRT_Column[];
 
+  const [currentHoveredColumn, setCurrentHoveredColumn] =
+    useState<MRT_Column | null>(null);
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -118,8 +121,10 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
         <MRT_ShowHideColumnsMenuItems
           allColumns={allColumns}
           column={column}
+          currentHoveredColumn={currentHoveredColumn}
           isSubMenu={isSubMenu}
           key={`${index}-${column.id}`}
+          setCurrentHoveredColumn={setCurrentHoveredColumn}
           table={table}
         />
       ))}

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -1,5 +1,10 @@
-import React, { FC, Ref } from 'react';
-import { useDrag, useDrop } from 'react-dnd';
+import React, {
+  Dispatch,
+  DragEvent,
+  FC,
+  SetStateAction,
+  useState,
+} from 'react';
 import {
   Box,
   FormControlLabel,
@@ -16,12 +21,16 @@ import type { MRT_Column, MRT_TableInstance } from '..';
 interface Props {
   allColumns: MRT_Column[];
   column: MRT_Column;
+  currentHoveredColumn: MRT_Column | null;
   isSubMenu?: boolean;
+  setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
   table: MRT_TableInstance;
 }
 
 export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   allColumns,
+  currentHoveredColumn,
+  setCurrentHoveredColumn,
   column,
   isSubMenu,
   table,
@@ -40,22 +49,6 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const [, dropRef] = useDrop({
-    accept: 'column',
-    drop: (movingColumn: MRT_Column) => {
-      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    },
-  });
-
-  const [, dragRef, previewRef] = useDrag({
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-    item: () => column,
-    type: 'column',
-  });
-
   const switchChecked =
     (columnDefType !== 'group' && column.getIsVisible()) ||
     (columnDefType === 'group' &&
@@ -71,41 +64,73 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
     }
   };
 
+  const menuItemRef = React.useRef<HTMLElement>(null);
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(menuItemRef.current as HTMLElement, 0, 0);
+  };
+
+  const handleDragEnd = (_e: DragEvent<HTMLButtonElement>) => {
+    setIsDragging(false);
+    setCurrentHoveredColumn(null);
+    if (currentHoveredColumn) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+  };
+
+  const handleDragEnter = (_e: DragEvent) => {
+    if (!isDragging) {
+      setCurrentHoveredColumn(column);
+    }
+  };
+
   return (
     <>
       <MenuItem
-        ref={columnDefType === 'data' ? dropRef : undefined}
-        sx={{
+        disableRipple={enableColumnOrdering}
+        ref={menuItemRef as any}
+        onDragEnter={handleDragEnter}
+        sx={(theme) => ({
           alignItems: 'center',
           justifyContent: 'flex-start',
           my: 0,
+          opacity: isDragging ? 0.5 : 1,
+          outline: isDragging
+            ? `1px dashed ${theme.palette.divider}`
+            : currentHoveredColumn?.id === column.id
+            ? `2px dashed ${theme.palette.primary.main}`
+            : 'none',
           pl: `${(column.depth + 0.5) * 2}rem`,
           py: '6px',
-        }}
+        })}
       >
         <Box
-          ref={previewRef}
           sx={{
             display: 'flex',
             flexWrap: 'nowrap',
             gap: '8px',
           }}
         >
-          {columnDefType !== 'group' &&
+          {!isSubMenu &&
+            columnDefType !== 'group' &&
             enableColumnOrdering &&
             !allColumns.some(
               (col) => col.columnDef.columnDefType === 'group',
             ) &&
             (columnDef.enableColumnOrdering !== false ? (
               <MRT_GrabHandleButton
-                ref={dragRef as Ref<HTMLButtonElement>}
+                handleDragEnd={handleDragEnd}
+                handleDragStart={handleDragStart}
                 table={table}
               />
             ) : (
               <Box sx={{ width: '28px' }} />
             ))}
-          {enablePinning &&
-            !isSubMenu &&
+          {!isSubMenu &&
+            enablePinning &&
             (column.getCanPin() ? (
               <MRT_ColumnPinningButtons column={column} table={table} />
             ) : (
@@ -150,9 +175,11 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
       {column.columns?.map((c: MRT_Column, i) => (
         <MRT_ShowHideColumnsMenuItems
           allColumns={allColumns}
-          key={`${i}-${c.id}`}
           column={c}
+          currentHoveredColumn={currentHoveredColumn}
           isSubMenu={isSubMenu}
+          key={`${i}-${c.id}`}
+          setCurrentHoveredColumn={setCurrentHoveredColumn}
           table={table}
         />
       ))}

package/src/table/MRT_Table.tsx

@@ -1,9 +1,9 @@
-import React, { FC, RefObject } from 'react';
+import React, { FC, RefObject, useState } from 'react';
 import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
-import { MRT_TableInstance } from '..';
+import { MRT_Column, MRT_TableInstance } from '..';
 
 interface Props {
   tableContainerRef: RefObject<HTMLDivElement>;
@@ -29,6 +29,9 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
       ? muiTableProps({ table })
       : muiTableProps;
 
+  const [currentHoveredColumn, setCurrentHoveredColumn] =
+    useState<MRT_Column | null>(null);
+
   return (
     <Table
       stickyHeader={
@@ -41,8 +44,18 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
         ...tableProps?.sx,
       }}
     >
-      {enableTableHead && <MRT_TableHead table={table} />}
-      <MRT_TableBody tableContainerRef={tableContainerRef} table={table} />
+      {enableTableHead && (
+        <MRT_TableHead
+          currentHoveredColumn={currentHoveredColumn}
+          setCurrentHoveredColumn={setCurrentHoveredColumn}
+          table={table}
+        />
+      )}
+      <MRT_TableBody
+        setCurrentHoveredColumn={setCurrentHoveredColumn}
+        tableContainerRef={tableContainerRef}
+        table={table}
+      />
       {enableTableFooter && <MRT_TableFooter table={table} />}
     </Table>
   );