material-react-table 0.19.0 → 0.22.0

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>
   );

package/src/table/MRT_TableContainer.tsx

@@ -49,8 +49,8 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
 
   return (
     <TableContainer
-      {...tableContainerProps}
       ref={tableContainerRef}
+      {...tableContainerProps}
       sx={{
         maxWidth: '100%',
         maxHeight:

package/src/table/MRT_TablePaper.tsx

@@ -1,7 +1,5 @@
 import React, { FC, useEffect } from 'react';
 import { Paper } from '@mui/material';
-import { DndProvider } from 'react-dnd';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { MRT_ToolbarTop } from '../toolbar/MRT_ToolbarTop';
 import { MRT_ToolbarBottom } from '../toolbar/MRT_ToolbarBottom';
 import { MRT_TableContainer } from './MRT_TableContainer';
@@ -34,28 +32,26 @@ export const MRT_TablePaper: FC<Props> = ({ table }) => {
       : muiTablePaperProps;
 
   return (
-    <DndProvider backend={HTML5Backend}>
-      <Paper
-        elevation={2}
-        {...tablePaperProps}
-        sx={{
-          transition: 'all 0.2s ease-in-out',
-          ...tablePaperProps?.sx,
-        }}
-        style={{
-          ...tablePaperProps?.style,
-          height: isFullScreen ? '100vh' : undefined,
-          margin: isFullScreen ? '0' : undefined,
-          maxHeight: isFullScreen ? '100vh' : undefined,
-          maxWidth: isFullScreen ? '100vw' : undefined,
-          padding: isFullScreen ? '0' : undefined,
-          width: isFullScreen ? '100vw' : undefined,
-        }}
-      >
-        {enableToolbarTop && <MRT_ToolbarTop table={table} />}
-        <MRT_TableContainer table={table} />
-        {enableToolbarBottom && <MRT_ToolbarBottom table={table} />}
-      </Paper>
-    </DndProvider>
+    <Paper
+      elevation={2}
+      {...tablePaperProps}
+      sx={{
+        transition: 'all 0.2s ease-in-out',
+        ...tablePaperProps?.sx,
+      }}
+      style={{
+        ...tablePaperProps?.style,
+        height: isFullScreen ? '100vh' : undefined,
+        margin: isFullScreen ? '0' : undefined,
+        maxHeight: isFullScreen ? '100vh' : undefined,
+        maxWidth: isFullScreen ? '100vw' : undefined,
+        padding: isFullScreen ? '0' : undefined,
+        width: isFullScreen ? '100vw' : undefined,
+      }}
+    >
+      {enableToolbarTop && <MRT_ToolbarTop table={table} />}
+      <MRT_TableContainer table={table} />
+      {enableToolbarBottom && <MRT_ToolbarBottom table={table} />}
+    </Paper>
   );
 };

package/dist/head/MRT_DraggableTableHeadCell.d.ts

@@ -1,8 +0,0 @@
-import { FC } from 'react';
-import type { MRT_Header, MRT_TableInstance } from '..';
-interface Props {
-    header: MRT_Header;
-    table: MRT_TableInstance;
-}
-export declare const MRT_DraggableTableHeadCell: FC<Props>;
-export {};

package/src/head/MRT_DraggableTableHeadCell.tsx

@@ -1,43 +0,0 @@
-import React, { FC } from 'react';
-import { useDrag, useDrop } from 'react-dnd';
-import { MRT_TableHeadCell } from './MRT_TableHeadCell';
-import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
-import { reorderColumn } from '../utils';
-
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
-}
-
-export const MRT_DraggableTableHeadCell: FC<Props> = ({ header, table }) => {
-  const { getState, setColumnOrder } = table;
-  const { columnOrder } = getState();
-  const { column } = header;
-
-  const [, dropRef] = useDrop({
-    accept: 'column',
-    drop: (movingColumn: MRT_Column) => {
-      const newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    },
-  });
-
-  const [{ isDragging }, dragRef, previewRef] = useDrag({
-    collect: (monitor) => ({
-      isDragging: monitor.isDragging(),
-    }),
-    item: () => column,
-    type: 'column',
-  });
-
-  return (
-    <MRT_TableHeadCell
-      dragRef={dragRef}
-      dropRef={dropRef}
-      header={header}
-      isDragging={isDragging}
-      previewRef={previewRef}
-      table={table}
-    />
-  );
-};