material-react-table 0.21.0 → 0.22.2

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_CopyButton.tsx

@@ -50,7 +50,6 @@ export const MRT_CopyButton: FC<Props> = ({ cell, children, table }) => {
       title={copied ? localization.copiedToClipboard : localization.clickToCopy}
     >
       <Button
-        aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.getValue())}
         size="small"
         type="button"

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/buttons/MRT_ToggleFiltersButton.tsx

@@ -15,10 +15,10 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
     },
     setShowFilters,
   } = table;
-  const { showFilters } = getState();
+  const { showColumnFilters } = getState();
 
   const handleToggleShowFilters = () => {
-    setShowFilters(!showFilters);
+    setShowFilters(!showColumnFilters);
   };
 
   return (
@@ -28,7 +28,7 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
         onClick={handleToggleShowFilters}
         {...rest}
       >
-        {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}
+        {showColumnFilters ? <FilterListOffIcon /> : <FilterListIcon />}
       </IconButton>
     </Tooltip>
   );

package/src/filtersFns.ts

@@ -1,13 +1,13 @@
 import { rankItem, rankings, RankingInfo } from '@tanstack/match-sorter-utils';
 import { filterFns, Row } from '@tanstack/react-table';
 
-export const fuzzy = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const fuzzy = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   columnId: string,
-  filterValue: string,
+  filterValue: string | number,
   addMeta: (item: RankingInfo) => void,
 ) => {
-  const itemRank = rankItem(row.getValue(columnId), filterValue, {
+  const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
     threshold: rankings.MATCHES,
   });
   addMeta(itemRank);
@@ -16,8 +16,8 @@ export const fuzzy = <D extends Record<string, any> = {}>(
 
 fuzzy.autoRemove = (val: any) => !val;
 
-export const contains = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const contains = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -30,8 +30,8 @@ export const contains = <D extends Record<string, any> = {}>(
 
 contains.autoRemove = (val: any) => !val;
 
-export const startsWith = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const startsWith = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -44,8 +44,8 @@ export const startsWith = <D extends Record<string, any> = {}>(
 
 startsWith.autoRemove = (val: any) => !val;
 
-export const endsWith = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const endsWith = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -58,8 +58,8 @@ export const endsWith = <D extends Record<string, any> = {}>(
 
 endsWith.autoRemove = (val: any) => !val;
 
-export const equals = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const equals = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -68,8 +68,8 @@ export const equals = <D extends Record<string, any> = {}>(
 
 equals.autoRemove = (val: any) => !val;
 
-export const notEquals = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const notEquals = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -78,8 +78,8 @@ export const notEquals = <D extends Record<string, any> = {}>(
 
 notEquals.autoRemove = (val: any) => !val;
 
-export const greaterThan = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const greaterThan = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -90,8 +90,8 @@ export const greaterThan = <D extends Record<string, any> = {}>(
 
 greaterThan.autoRemove = (val: any) => !val;
 
-export const lessThan = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const lessThan = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValue: string | number,
 ) =>
@@ -102,8 +102,8 @@ export const lessThan = <D extends Record<string, any> = {}>(
 
 lessThan.autoRemove = (val: any) => !val;
 
-export const between = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const between = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   filterValues: [string | number, string | number],
 ) =>
@@ -117,16 +117,16 @@ export const between = <D extends Record<string, any> = {}>(
 
 between.autoRemove = (val: any) => !val;
 
-export const empty = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const empty = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   _filterValue: string | number,
 ) => !row.getValue(id).toString().trim();
 
 empty.autoRemove = (val: any) => !val;
 
-export const notEmpty = <D extends Record<string, any> = {}>(
-  row: Row<D>,
+export const notEmpty = <TData extends Record<string, any> = {}>(
+  row: Row<TData>,
   id: string,
   _filterValue: string | number,
 ) => !!row.getValue(id).toString().trim();

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_TableHeadCellFilterContainer.tsx

@@ -14,11 +14,11 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
   table,
 }) => {
   const { getState } = table;
-  const { currentFilterFns, showFilters } = getState();
+  const { currentFilterFns, showColumnFilters } = getState();
   const { column } = header;
 
   return (
-    <Collapse in={showFilters} mountOnEnter unmountOnExit>
+    <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
       {currentFilterFns[column.id] === 'between' ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -12,7 +12,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
     getState,
     options: { columnResizeMode },
   } = table;
-  const { density, showFilters } = getState();
+  const { density, showColumnFilters } = getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -26,7 +26,7 @@ export const MRT_TableHeadCellResizeHandle: FC<Props> = ({ header, table }) => {
         borderRadius: '2px',
         borderRightWidth: '2px',
         cursor: 'col-resize',
-        height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
+        height: showColumnFilters && columnDefType === 'data' ? '4rem' : '2rem',
         mr: density === 'compact' ? '-0.5rem' : '-1rem',
         opacity: 0.8,
         position: 'absolute',

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}
         />
       ))}