material-react-table 0.21.0 → 0.22.2

package/dist/material-react-table.esm.js

@@ -1,10 +1,8 @@
-import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
+import React, { useMemo, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
 import { filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, AlertTitle, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
-import { useDrop, useDrag, DndProvider } from 'react-dnd';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useVirtual } from 'react-virtual';
 
 function _extends() {
@@ -415,8 +413,10 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
   })))));
 };
 
-var MRT_GrabHandleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var table = _ref.table;
+var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
+  var handleDragStart = _ref.handleDragStart,
+      handleDragEnd = _ref.handleDragEnd,
+      table = _ref.table;
   var _table$options = table.options,
       DragHandleIcon = _table$options.icons.DragHandleIcon,
       localization = _table$options.localization;
@@ -428,7 +428,9 @@ var MRT_GrabHandleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
     title: localization.grab
   }, React.createElement(IconButton, {
     disableRipple: true,
-    ref: ref,
+    draggable: "true",
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
     size: "small",
     sx: {
       cursor: 'grab',
@@ -445,7 +447,7 @@ var MRT_GrabHandleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
       }
     }
   }, React.createElement(DragHandleIcon, null)));
-});
+};
 
 var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
   var itemRank = rankItem(row.getValue(columnId), filterValue, {
@@ -664,6 +666,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
 
   var allColumns = _ref.allColumns,
+      currentHoveredColumn = _ref.currentHoveredColumn,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
       column = _ref.column,
       isSubMenu = _ref.isSubMenu,
       table = _ref.table;
@@ -680,30 +684,6 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
 
   var columnDef = column.columnDef;
   var columnDefType = columnDef.columnDefType;
-
-  var _useDrop = useDrop({
-    accept: 'column',
-    drop: function drop(movingColumn) {
-      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    }
-  }),
-      dropRef = _useDrop[1];
-
-  var _useDrag = useDrag({
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    },
-    item: function item() {
-      return column;
-    },
-    type: 'column'
-  }),
-      dragRef = _useDrag[1],
-      previewRef = _useDrag[2];
-
   var switchChecked = columnDefType !== 'group' && column.getIsVisible() || columnDefType === 'group' && column.getLeafColumns().some(function (col) {
     return col.getIsVisible();
   });
@@ -720,32 +700,64 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     }
   };
 
+  var menuItemRef = React.useRef(null);
+
+  var _useState = useState(false),
+      isDragging = _useState[0],
+      setIsDragging = _useState[1];
+
+  var handleDragStart = function handleDragStart(e) {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
+  };
+
+  var handleDragEnd = function handleDragEnd(_e) {
+    setIsDragging(false);
+    setCurrentHoveredColumn(null);
+
+    if (currentHoveredColumn) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+  };
+
+  var handleDragEnter = function handleDragEnter(_e) {
+    if (!isDragging) {
+      setCurrentHoveredColumn(column);
+    }
+  };
+
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
-    ref: columnDefType === 'data' ? dropRef : undefined,
-    sx: {
-      alignItems: 'center',
-      justifyContent: 'flex-start',
-      my: 0,
-      pl: (column.depth + 0.5) * 2 + "rem",
-      py: '6px'
+    disableRipple: enableColumnOrdering,
+    ref: menuItemRef,
+    onDragEnter: handleDragEnter,
+    sx: function sx(theme) {
+      return {
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        my: 0,
+        opacity: isDragging ? 0.5 : 1,
+        outline: isDragging ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : 'none',
+        pl: (column.depth + 0.5) * 2 + "rem",
+        py: '6px'
+      };
     }
   }, React.createElement(Box, {
-    ref: previewRef,
     sx: {
       display: 'flex',
       flexWrap: 'nowrap',
       gap: '8px'
     }
-  }, columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
+  }, !isSubMenu && columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
     return col.columnDef.columnDefType === 'group';
   }) && (columnDef.enableColumnOrdering !== false ? React.createElement(MRT_GrabHandleButton, {
-    ref: dragRef,
+    handleDragEnd: handleDragEnd,
+    handleDragStart: handleDragStart,
     table: table
   }) : React.createElement(Box, {
     sx: {
       width: '28px'
     }
-  })), enablePinning && !isSubMenu && (column.getCanPin() ? React.createElement(MRT_ColumnPinningButtons, {
+  })), !isSubMenu && enablePinning && (column.getCanPin() ? React.createElement(MRT_ColumnPinningButtons, {
     column: column,
     table: table
   }) : React.createElement(Box, {
@@ -780,9 +792,11 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   }, columnDef.header))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
       allColumns: allColumns,
-      key: i + "-" + c.id,
       column: c,
+      currentHoveredColumn: currentHoveredColumn,
       isSubMenu: isSubMenu,
+      key: i + "-" + c.id,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       table: table
     });
   }));
@@ -836,6 +850,11 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
 
     return columns;
   }, [columnOrder, columnPinning, getAllColumns(), getCenterLeafColumns(), getLeftLeafColumns(), getRightLeafColumns()]);
+
+  var _useState = useState(null),
+      currentHoveredColumn = _useState[0],
+      setCurrentHoveredColumn = _useState[1];
+
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -873,8 +892,10 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
       allColumns: allColumns,
       column: column,
+      currentHoveredColumn: currentHoveredColumn,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       table: table
     });
   }));
@@ -1477,10 +1498,10 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
       setShowFilters = table.setShowFilters;
 
   var _getState = getState(),
-      showFilters = _getState.showFilters;
+      showColumnFilters = _getState.showColumnFilters;
 
   var handleToggleShowFilters = function handleToggleShowFilters() {
-    setShowFilters(!showFilters);
+    setShowFilters(!showColumnFilters);
   };
 
   return React.createElement(Tooltip, {
@@ -1489,7 +1510,7 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
   }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.showHideFilters,
     onClick: handleToggleShowFilters
-  }, rest), showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
+  }, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
 };
 
 var _excluded$4 = ["table"];
@@ -2204,11 +2225,11 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
 
   var _getState = getState(),
       currentFilterFns = _getState.currentFilterFns,
-      showFilters = _getState.showFilters;
+      showColumnFilters = _getState.showColumnFilters;
 
   var column = header.column;
   return React.createElement(Collapse, {
-    "in": showFilters,
+    "in": showColumnFilters,
     mountOnEnter: true,
     unmountOnExit: true
   }, currentFilterFns[column.id] === 'between' ? React.createElement(MRT_FilterRangeFields, {
@@ -2272,7 +2293,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
 
   var _getState = getState(),
       density = _getState.density,
-      showFilters = _getState.showFilters;
+      showColumnFilters = _getState.showColumnFilters;
 
   var column = header.column;
   var columnDef = column.columnDef;
@@ -2288,7 +2309,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
         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',
@@ -2396,12 +2417,10 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var _ref2, _columnDef$header$len, _columnDef$header;
 
-  var dragRef = _ref.dragRef,
-      dropRef = _ref.dropRef,
+  var currentHoveredColumn = _ref.currentHoveredColumn,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
       header = _ref.header,
-      table = _ref.table,
-      isDragging = _ref.isDragging,
-      previewRef = _ref.previewRef;
+      table = _ref.table;
   var getState = table.getState,
       _table$options = table.options,
       enableColumnActions = _table$options.enableColumnActions,
@@ -2409,11 +2428,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       enableColumnResizing = _table$options.enableColumnResizing,
       enableGrouping = _table$options.enableGrouping,
       enableMultiSort = _table$options.enableMultiSort,
-      muiTableHeadCellProps = _table$options.muiTableHeadCellProps;
+      muiTableHeadCellProps = _table$options.muiTableHeadCellProps,
+      setColumnOrder = table.setColumnOrder;
 
   var _getState = getState(),
-      density = _getState.density,
-      showFilters = _getState.showFilters;
+      columnOrder = _getState.columnOrder,
+      density = _getState.density;
 
   var column = header.column;
   var columnDef = column.columnDef;
@@ -2446,30 +2466,56 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
+  var tableHeadCellRef = React.useRef(null);
+
+  var _useState = useState(false),
+      isDragging = _useState[0],
+      setIsDragging = _useState[1];
+
+  var handleDragStart = function handleDragStart(e) {
+    setIsDragging(true);
+    e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+  };
+
+  var handleDragEnd = function handleDragEnd(_e) {
+    setIsDragging(false);
+    setCurrentHoveredColumn(null);
+
+    if (currentHoveredColumn) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+  };
+
+  var handleDragEnter = function handleDragEnter(_e) {
+    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+  };
+
   return React.createElement(TableCell, Object.assign({
     align: columnDefType === 'group' ? 'center' : 'left',
-    colSpan: header.colSpan
+    colSpan: header.colSpan,
+    onDragEnter: handleDragEnter,
+    ref: tableHeadCellRef
   }, tableCellProps, {
-    ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
       var _columnDef$minSize;
 
       return _extends({
         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 == null ? void 0 : 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' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
         pb: columnDefType === 'display' ? 0 : undefined,
         position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
-        pt: columnDefType !== 'data' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
+        pt: columnDefType === 'group' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
         right: 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' ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
@@ -2478,7 +2524,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       });
     }
   }), header.isPlaceholder ? null : columnDefType === 'display' ? headerElement : React.createElement(Box, {
-    ref: previewRef,
     sx: {
       alignItems: 'flex-start',
       display: 'flex',
@@ -2507,7 +2552,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       whiteSpace: 'nowrap'
     }
   }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_GrabHandleButton, {
-    ref: dragRef,
+    handleDragStart: handleDragStart,
+    handleDragEnd: handleDragEnd,
     table: table
   }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React.createElement(MRT_TableHeadCellColumnActionsButton, {
     header: header,
@@ -2521,58 +2567,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }));
 };
 
-var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
-  var header = _ref.header,
-      table = _ref.table;
-  var getState = table.getState,
-      setColumnOrder = table.setColumnOrder;
-
-  var _getState = getState(),
-      columnOrder = _getState.columnOrder;
-
-  var column = header.column;
-
-  var _useDrop = useDrop({
-    accept: 'column',
-    drop: function drop(movingColumn) {
-      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    }
-  }),
-      dropRef = _useDrop[1];
-
-  var _useDrag = useDrag({
-    collect: function collect(monitor) {
-      return {
-        isDragging: monitor.isDragging()
-      };
-    },
-    item: function item() {
-      return column;
-    },
-    type: 'column'
-  }),
-      isDragging = _useDrag[0].isDragging,
-      dragRef = _useDrag[1],
-      previewRef = _useDrag[2];
-
-  return React.createElement(MRT_TableHeadCell, {
-    dragRef: dragRef,
-    dropRef: dropRef,
-    header: header,
-    isDragging: isDragging,
-    previewRef: previewRef,
-    table: table
-  });
-};
-
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
-  var headerGroup = _ref.headerGroup,
+  var currentHoveredColumn = _ref.currentHoveredColumn,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
+      headerGroup = _ref.headerGroup,
       table = _ref.table;
-  var _table$options = table.options,
-      enableColumnOrdering = _table$options.enableColumnOrdering,
-      enableGrouping = _table$options.enableGrouping,
-      muiTableHeadRowProps = _table$options.muiTableHeadRowProps;
+  var muiTableHeadRowProps = table.options.muiTableHeadRowProps;
   var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
     headerGroup: headerGroup,
     table: table
@@ -2585,11 +2585,9 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
       }, tableRowProps == null ? void 0 : tableRowProps.sx);
     }
   }), headerGroup.headers.map(function (header, index) {
-    return enableColumnOrdering || enableGrouping ? React.createElement(MRT_DraggableTableHeadCell, {
-      header: header,
-      key: header.id || index,
-      table: table
-    }) : React.createElement(MRT_TableHeadCell, {
+    return React.createElement(MRT_TableHeadCell, {
+      currentHoveredColumn: currentHoveredColumn,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       header: header,
       key: header.id || index,
       table: table
@@ -2598,7 +2596,9 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 };
 
 var MRT_TableHead = function MRT_TableHead(_ref) {
-  var table = _ref.table;
+  var currentHoveredColumn = _ref.currentHoveredColumn,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
+      table = _ref.table;
   var getHeaderGroups = table.getHeaderGroups,
       muiTableHeadProps = table.options.muiTableHeadProps;
   var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps({
@@ -2606,6 +2606,8 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
   }) : muiTableHeadProps;
   return React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
     return React.createElement(MRT_TableHeadRow, {
+      currentHoveredColumn: currentHoveredColumn,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       headerGroup: headerGroup,
       key: headerGroup.id,
       table: table
@@ -2739,7 +2741,6 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
     placement: "top",
     title: copied ? localization.copiedToClipboard : localization.clickToCopy
   }, React.createElement(Button, Object.assign({
-    "aria-label": localization.clickToCopy,
     onClick: function onClick() {
       return handleCopy(cell.getValue());
     },
@@ -2769,23 +2770,21 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
       rowIndex = _ref.rowIndex,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
       table = _ref.table;
   var getState = table.getState,
       _table$options = table.options,
       editingMode = _table$options.editingMode,
       enableClickToCopy = _table$options.enableClickToCopy,
-      enableColumnOrdering = _table$options.enableColumnOrdering,
       enableEditing = _table$options.enableEditing,
       enableRowNumbers = _table$options.enableRowNumbers,
       muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
       rowNumberMode = _table$options.rowNumberMode,
       tableId = _table$options.tableId,
-      setColumnOrder = table.setColumnOrder,
       setCurrentEditingCell = table.setCurrentEditingCell;
 
   var _getState = getState(),
-      columnOrder = _getState.columnOrder,
       currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
       density = _getState.density,
@@ -2796,16 +2795,6 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       row = cell.row;
   var columnDef = column.columnDef;
   var columnDefType = columnDef.columnDefType;
-
-  var _useDrop = useDrop({
-    accept: 'column',
-    drop: function drop(movingColumn) {
-      var newColumnOrder = reorderColumn(movingColumn, column, columnOrder);
-      setColumnOrder(newColumnOrder);
-    }
-  }),
-      dropRef = _useDrop[1];
-
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
     cell: cell,
     table: table
@@ -2849,10 +2838,14 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
+  var handleDragEnter = function handleDragEnter(_e) {
+    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+  };
+
   return React.createElement(TableCell, Object.assign({
-    onDoubleClick: handleDoubleClick
+    onDoubleClick: handleDoubleClick,
+    onDragEnter: handleDragEnter
   }, tableCellProps, {
-    ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
       var _columnDef$minSize;
 
@@ -2940,6 +2933,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 
   var row = _ref.row,
       rowIndex = _ref.rowIndex,
+      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
       table = _ref.table;
   var getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
       _table$options = table.options,
@@ -2968,6 +2962,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       key: cell.id,
       enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
       rowIndex: rowIndex,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       table: table
     });
   })), renderDetailPanel && !row.getIsGrouped() && React.createElement(MRT_TableDetailPanel, {
@@ -2977,7 +2972,8 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 };
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
-  var table = _ref.table,
+  var setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
+      table = _ref.table,
       tableContainerRef = _ref.tableContainerRef;
   var getRowModel = table.getRowModel,
       getPrePaginationRowModel = table.getPrePaginationRowModel,
@@ -3043,6 +3039,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       key: row.id,
       row: row,
       rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
+      setCurrentHoveredColumn: setCurrentHoveredColumn,
       table: table
     });
   }), enableRowVirtualization && paddingBottom > 0 && React.createElement("tr", null, React.createElement("td", {
@@ -3160,6 +3157,11 @@ var MRT_Table = function MRT_Table(_ref) {
   var tableProps = muiTableProps instanceof Function ? muiTableProps({
     table: table
   }) : muiTableProps;
+
+  var _useState = useState(null),
+      currentHoveredColumn = _useState[0],
+      setCurrentHoveredColumn = _useState[1];
+
   return React.createElement(Table, Object.assign({
     stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
   }, tableProps, {
@@ -3167,8 +3169,11 @@ var MRT_Table = function MRT_Table(_ref) {
       tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
     }, tableProps == null ? void 0 : tableProps.sx)
   }), enableTableHead && React.createElement(MRT_TableHead, {
+    currentHoveredColumn: currentHoveredColumn,
+    setCurrentHoveredColumn: setCurrentHoveredColumn,
     table: table
   }), React.createElement(MRT_TableBody, {
+    setCurrentHoveredColumn: setCurrentHoveredColumn,
     tableContainerRef: tableContainerRef,
     table: table
   }), enableTableFooter && React.createElement(MRT_TableFooter, {
@@ -3204,8 +3209,9 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
   var tableContainerRef = React.useRef(null);
-  return React.createElement(TableContainer, Object.assign({}, tableContainerProps, {
-    ref: tableContainerRef,
+  return React.createElement(TableContainer, Object.assign({
+    ref: tableContainerRef
+  }, tableContainerProps, {
     sx: _extends({
       maxWidth: '100%',
       maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
@@ -3243,9 +3249,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps({
     table: table
   }) : muiTablePaperProps;
-  return React.createElement(DndProvider, {
-    backend: HTML5Backend
-  }, React.createElement(Paper, Object.assign({
+  return React.createElement(Paper, Object.assign({
     elevation: 2
   }, tablePaperProps, {
     sx: _extends({
@@ -3265,11 +3269,11 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
     table: table
   }), enableToolbarBottom && React.createElement(MRT_ToolbarBottom, {
     table: table
-  })));
+  }));
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showFil, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
+  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showCol, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = useState(props.tableId),
       tableId = _useState[0],
@@ -3312,8 +3316,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showAlertBanner = _useState7[0],
       setShowAlertBanner = _useState7[1];
 
-  var _useState8 = useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
-      showFilters = _useState8[0],
+  var _useState8 = useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
+      showColumnFilters = _useState8[0],
       setShowFilters = _useState8[1];
 
   var _useState9 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
@@ -3451,7 +3455,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       density: density,
       isFullScreen: isFullScreen,
       showAlertBanner: showAlertBanner,
-      showFilters: showFilters,
+      showColumnFilters: showColumnFilters,
       showGlobalFilter: showGlobalFilter
     }, props.state),
     tableId: tableId