material-react-table 0.22.2 → 0.23.2

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

@@ -1,7 +1,7 @@
 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 { 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, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { useVirtual } from 'react-virtual';
 
@@ -651,7 +651,7 @@ var reorderColumn = function reorderColumn(movingColumn, receivingColumn, column
   return [].concat(columnOrder);
 };
 var getLeadingDisplayColumnIds = function getLeadingDisplayColumnIds(props) {
-  return [(props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping) && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
+  return [(props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping || props.renderDetailPanel) && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
 };
 var getTrailingDisplayColumnIds = function getTrailingDisplayColumnIds(props) {
   return [(props.positionActionsColumn === 'last' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions'];
@@ -2417,10 +2417,9 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var _ref2, _columnDef$header$len, _columnDef$header;
 
-  var currentHoveredColumn = _ref.currentHoveredColumn,
-      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
-      header = _ref.header,
+  var header = _ref.header,
       table = _ref.table;
+  var theme = useTheme();
   var getState = table.getState,
       _table$options = table.options,
       enableColumnActions = _table$options.enableColumnActions,
@@ -2429,11 +2428,15 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       enableGrouping = _table$options.enableGrouping,
       enableMultiSort = _table$options.enableMultiSort,
       muiTableHeadCellProps = _table$options.muiTableHeadCellProps,
-      setColumnOrder = table.setColumnOrder;
+      setColumnOrder = table.setColumnOrder,
+      setCurrentDraggingColumn = table.setCurrentDraggingColumn,
+      setCurrentHoveredColumn = table.setCurrentHoveredColumn;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder,
-      density = _getState.density;
+      density = _getState.density,
+      currentDraggingColumn = _getState.currentDraggingColumn,
+      currentHoveredColumn = _getState.currentHoveredColumn;
 
   var column = header.column;
   var columnDef = column.columnDef;
@@ -2468,28 +2471,32 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableHeadCellRef = React.useRef(null);
 
-  var _useState = useState(false),
-      isDragging = _useState[0],
-      setIsDragging = _useState[1];
-
   var handleDragStart = function handleDragStart(e) {
-    setIsDragging(true);
+    setCurrentDraggingColumn(column);
     e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
   };
 
   var handleDragEnd = function handleDragEnd(_e) {
-    setIsDragging(false);
+    setCurrentDraggingColumn(null);
     setCurrentHoveredColumn(null);
 
-    if (currentHoveredColumn) {
+    if (currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
       setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
     }
   };
 
   var handleDragEnter = function handleDragEnter(_e) {
-    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+    if (currentDraggingColumn) {
+      setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+    }
   };
 
+  var draggingBorder = (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined;
+  var draggingBorders = draggingBorder ? {
+    borderLeft: draggingBorder,
+    borderRight: draggingBorder,
+    borderTop: draggingBorder
+  } : undefined;
   return React.createElement(TableCell, Object.assign({
     align: columnDefType === 'group' ? 'center' : 'left',
     colSpan: header.colSpan,
@@ -2502,12 +2509,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       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',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'visible',
-        opacity: isDragging ? 0.5 : 1,
+        opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 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,
@@ -2516,8 +2522,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'text-top',
-        zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
-      }, tableCellProps == null ? void 0 : tableCellProps.sx, {
+        zIndex: column.getIsResizing() || (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
+      }, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
         minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
         width: header.getSize()
@@ -2528,7 +2534,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       alignItems: 'flex-start',
       display: 'flex',
       justifyContent: columnDefType === 'group' ? 'center' : 'space-between',
-      opacity: isDragging ? 0.5 : 1,
       position: 'relative',
       width: '100%'
     }
@@ -2568,9 +2573,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
-  var currentHoveredColumn = _ref.currentHoveredColumn,
-      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
-      headerGroup = _ref.headerGroup,
+  var headerGroup = _ref.headerGroup,
       table = _ref.table;
   var muiTableHeadRowProps = table.options.muiTableHeadRowProps;
   var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
@@ -2586,8 +2589,6 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     }
   }), headerGroup.headers.map(function (header, index) {
     return React.createElement(MRT_TableHeadCell, {
-      currentHoveredColumn: currentHoveredColumn,
-      setCurrentHoveredColumn: setCurrentHoveredColumn,
       header: header,
       key: header.id || index,
       table: table
@@ -2596,9 +2597,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 };
 
 var MRT_TableHead = function MRT_TableHead(_ref) {
-  var currentHoveredColumn = _ref.currentHoveredColumn,
-      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
-      table = _ref.table;
+  var table = _ref.table;
   var getHeaderGroups = table.getHeaderGroups,
       muiTableHeadProps = table.options.muiTableHeadProps;
   var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps({
@@ -2606,8 +2605,6 @@ 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
@@ -2770,8 +2767,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
       rowIndex = _ref.rowIndex,
-      setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
       table = _ref.table;
+  var theme = useTheme();
   var getState = table.getState,
       _table$options = table.options,
       editingMode = _table$options.editingMode,
@@ -2782,11 +2779,14 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
       rowNumberMode = _table$options.rowNumberMode,
       tableId = _table$options.tableId,
-      setCurrentEditingCell = table.setCurrentEditingCell;
+      setCurrentEditingCell = table.setCurrentEditingCell,
+      setCurrentHoveredColumn = table.setCurrentHoveredColumn;
 
   var _getState = getState(),
+      currentDraggingColumn = _getState.currentDraggingColumn,
       currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
+      currentHoveredColumn = _getState.currentHoveredColumn,
       density = _getState.density,
       isLoading = _getState.isLoading,
       showSkeletons = _getState.showSkeletons;
@@ -2839,9 +2839,16 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   var handleDragEnter = function handleDragEnter(_e) {
-    setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+    if (currentDraggingColumn) {
+      setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
+    }
   };
 
+  var draggingBorder = (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? "1px dashed " + theme.palette.divider : (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? "2px dashed " + theme.palette.primary.main : undefined;
+  var draggingBorders = draggingBorder ? {
+    borderLeft: draggingBorder,
+    borderRight: draggingBorder
+  } : undefined;
   return React.createElement(TableCell, Object.assign({
     onDoubleClick: handleDoubleClick,
     onDragEnter: handleDragEnter
@@ -2854,6 +2861,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         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,
         cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
+        opacity: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id || (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) === column.id ? 0.5 : 1,
         overflow: 'hidden',
         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',
         pl: column.id === 'mrt-expand' ? row.depth + (density === 'compact' ? 0.5 : density === 'comfortable' ? 0.75 : 1.25) + "rem" : undefined,
@@ -2862,11 +2870,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
-        zIndex: column.getIsPinned() ? 1 : undefined,
+        zIndex: (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? theme.palette.mode === 'dark' ? lighten(theme.palette.background["default"], 0.13) + " !important" : darken(theme.palette.background["default"], 0.07) + " !important" : undefined
         }
-      }, tableCellProps == null ? void 0 : tableCellProps.sx, {
+      }, tableCellProps == null ? void 0 : tableCellProps.sx, draggingBorders, {
         maxWidth: "min(" + column.getSize() + "px, fit-content)",
         minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
         width: column.getSize()
@@ -2933,7 +2941,6 @@ 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,
@@ -2962,7 +2969,6 @@ 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, {
@@ -2972,8 +2978,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 };
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
-  var setCurrentHoveredColumn = _ref.setCurrentHoveredColumn,
-      table = _ref.table,
+  var table = _ref.table,
       tableContainerRef = _ref.tableContainerRef;
   var getRowModel = table.getRowModel,
       getPrePaginationRowModel = table.getPrePaginationRowModel,
@@ -3039,7 +3044,6 @@ 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", {
@@ -3157,11 +3161,6 @@ 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, {
@@ -3169,11 +3168,8 @@ 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, {
@@ -3273,7 +3269,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  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 _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$onCurrentDragg, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = useState(props.tableId),
       tableId = _useState[0],
@@ -3304,39 +3300,47 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentEditingRow = _useState4[0],
       setCurrentEditingRow = _useState4[1];
 
-  var _useState5 = useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
-      density = _useState5[0],
-      setDensity = _useState5[1];
+  var _useState5 = useState(null),
+      currentDraggingColumn = _useState5[0],
+      setCurrentDraggingColumn = _useState5[1];
+
+  var _useState6 = useState(null),
+      currentHoveredColumn = _useState6[0],
+      setCurrentHoveredColumn = _useState6[1];
+
+  var _useState7 = useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
+      density = _useState7[0],
+      setDensity = _useState7[1];
 
-  var _useState6 = useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
-      isFullScreen = _useState6[0],
-      setIsFullScreen = _useState6[1];
+  var _useState8 = useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
+      isFullScreen = _useState8[0],
+      setIsFullScreen = _useState8[1];
 
-  var _useState7 = useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
-      showAlertBanner = _useState7[0],
-      setShowAlertBanner = _useState7[1];
+  var _useState9 = useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
+      showAlertBanner = _useState9[0],
+      setShowAlertBanner = _useState9[1];
 
-  var _useState8 = useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
-      showColumnFilters = _useState8[0],
-      setShowFilters = _useState8[1];
+  var _useState10 = useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
+      showColumnFilters = _useState10[0],
+      setShowFilters = _useState10[1];
 
-  var _useState9 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
-      showGlobalFilter = _useState9[0],
-      setShowGlobalFilter = _useState9[1];
+  var _useState11 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState11[0],
+      setShowGlobalFilter = _useState11[1];
 
-  var _useState10 = useState(function () {
+  var _useState12 = useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
       var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current3, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _col$filterSelectOpti, _ref4;
 
       return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : !!((_col$filterSelectOpti = col.filterSelectOptions) != null && _col$filterSelectOpti.length) ? 'equals' : 'fuzzy', _ref4;
     })));
   }),
-      currentFilterFns = _useState10[0],
-      setCurrentFilterFns = _useState10[1];
+      currentFilterFns = _useState12[0],
+      setCurrentFilterFns = _useState12[1];
 
-  var _useState11 = useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
-      currentGlobalFilterFn = _useState11[0],
-      setCurrentGlobalFilterFn = _useState11[1];
+  var _useState13 = useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
+      currentGlobalFilterFn = _useState13[0],
+      setCurrentGlobalFilterFn = _useState13[1];
 
   var displayColumns = useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
@@ -3448,10 +3452,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     initialState: initialState,
     state: _extends({
       columnOrder: columnOrder,
+      currentDraggingColumn: currentDraggingColumn,
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
       currentGlobalFilterFn: currentGlobalFilterFn,
+      currentHoveredColumn: currentHoveredColumn,
       density: density,
       isFullScreen: isFullScreen,
       showAlertBanner: showAlertBanner,
@@ -3460,10 +3466,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     }, props.state),
     tableId: tableId
   })), {
+    setCurrentDraggingColumn: (_props$onCurrentDragg = props.onCurrentDraggingColumnChange) != null ? _props$onCurrentDragg : setCurrentDraggingColumn,
     setCurrentEditingCell: (_props$onCurrentEditi = props.onCurrentEditingCellChange) != null ? _props$onCurrentEditi : setCurrentEditingCell,
     setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
     setCurrentFilterFns: (_props$onCurrentFilte = props.onCurrentFilterFnsChange) != null ? _props$onCurrentFilte : setCurrentFilterFns,
     setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
+    setCurrentHoveredColumn: (_props$onCurrentHover = props.onCurrentHoveredColumnChange) != null ? _props$onCurrentHover : setCurrentHoveredColumn,
     setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
     setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
     setShowAlertBanner: (_props$onShowAlertBan = props.onShowAlertBannerChange) != null ? _props$onShowAlertBan : setShowAlertBanner,
@@ -3490,6 +3498,16 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 };
 
 var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "rowNumberMode", "selectAllMode"];
+/**
+ * `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
+ */
+
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,