material-react-table 0.23.1 → 0.23.4

package/README.md

@@ -12,6 +12,9 @@
 <a href="https://github.com/KevinVandy/material-react-table" target="_blank_">
   <img alt="" src="https://img.shields.io/github/stars/KevinVandy/material-react-table.svg?style=social&label=Star" />
 </a>
+<a href="http://makeapullrequest.com" target="_blank_">
+  <img alt="" src="https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square" />
+</a>
 
 ---
 
@@ -108,7 +111,7 @@ npm install material-react-table
 > Read the full usage docs [here](https://www.material-react-table.com/docs/usage/)
 
 ```jsx
-import React, { useMemo } from 'react';
+import React, { useMemo, useState, useEffect } from 'react';
 import MaterialReactTable from 'material-react-table';
 
 export default function App() {
@@ -145,6 +148,13 @@ export default function App() {
     [],
   );
 
+  //optionally, you can manage any/all of the table state yourself
+  const [rowSelection, setRowSelection] = useState({});
+
+  useEffect(() => {
+    //do something when the row selection changes
+  }, [rowSelection]);
+
   return (
     <MaterialReactTable 
       columns={columns} 
@@ -152,6 +162,8 @@ export default function App() {
       enableColumnOrdering //enable some features
       enableRowSelection 
       enableStickyHeader
+      onRowSelectionChange={setRowSelection} //hoist internal state to your own state (optional)
+      state={{ rowSelection }} //manage your own state, pass it back to the table (optional)
    />
    );
 }

package/dist/MaterialReactTable.d.ts

@@ -42,12 +42,14 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
         tableId: string;
         localization: MRT_Localization;
     };
+    setCurrentDraggingColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
     setCurrentEditingCell: Dispatch<SetStateAction<MRT_Cell | null>>;
     setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row | null>>;
     setCurrentFilterFns: Dispatch<SetStateAction<{
         [key: string]: MRT_FilterOption;
     }>>;
     setCurrentGlobalFilterFn: Dispatch<SetStateAction<MRT_FilterOption>>;
+    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
     setDensity: Dispatch<SetStateAction<'comfortable' | 'compact' | 'spacious'>>;
     setIsFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowAlertBanner: Dispatch<SetStateAction<boolean>>;
@@ -55,13 +57,15 @@ export declare type MRT_TableInstance<TData extends Record<string, any> = {}> =
     setShowGlobalFilter: Dispatch<SetStateAction<boolean>>;
 };
 export declare type MRT_TableState<TData extends Record<string, any> = {}> = TableState & {
+    currentDraggingColumn: MRT_Column<TData> | null;
     currentEditingCell: MRT_Cell<TData> | null;
     currentEditingRow: MRT_Row<TData> | null;
     currentFilterFns: Record<string, MRT_FilterOption>;
     currentGlobalFilterFn: Record<string, MRT_FilterOption>;
+    currentHoveredColumn: MRT_Column<TData> | null;
     density: 'comfortable' | 'compact' | 'spacious';
-    isLoading: boolean;
     isFullScreen: boolean;
+    isLoading: boolean;
     showAlertBanner: boolean;
     showColumnFilters: boolean;
     showGlobalFilter: boolean;
@@ -352,12 +356,14 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
         cell: MRT_Cell<TData>;
         table: MRT_TableInstance<TData>;
     }) => void;
-    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell>;
-    onCurrentEditingRowChange?: OnChangeFn<MRT_Row>;
+    onCurrentDraggingColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
+    onCurrentEditingCellChange?: OnChangeFn<MRT_Cell<TData> | null>;
+    onCurrentEditingRowChange?: OnChangeFn<MRT_Row<TData> | null>;
     onCurrentFilterFnsChange?: OnChangeFn<{
         [key: string]: MRT_FilterOption;
     }>;
     onCurrentGlobalFilterFnChange?: OnChangeFn<MRT_FilterOption>;
+    onCurrentHoveredColumnChange?: OnChangeFn<MRT_Column<TData> | null>;
     onEditRowSubmit?: ({ row, table, }: {
         row: MRT_Row<TData>;
         table: MRT_TableInstance<TData>;
@@ -415,4 +421,13 @@ export declare type MaterialReactTableProps<TData extends Record<string, any> =
     virtualizerProps?: Partial<VirtualizerOptions<HTMLDivElement>>;
 };
 declare const _default: <TData extends Record<string, any> = {}>({ 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, ...rest }: MaterialReactTableProps<TData>) => JSX.Element;
+/**
+ * `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
+ */
 export default _default;

package/dist/body/MRT_TableBody.d.ts

@@ -1,8 +1,7 @@
-import { Dispatch, FC, RefObject, SetStateAction } from 'react';
-import type { MRT_Column, MRT_TableInstance } from '..';
+import { FC, RefObject } from 'react';
+import type { MRT_TableInstance } from '..';
 interface Props {
     table: MRT_TableInstance;
-    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
     tableContainerRef: RefObject<HTMLDivElement>;
 }
 export declare const MRT_TableBody: FC<Props>;

package/dist/body/MRT_TableBodyCell.d.ts

@@ -1,10 +1,9 @@
-import { Dispatch, FC, SetStateAction } from 'react';
-import type { MRT_Cell, MRT_Column, MRT_TableInstance } from '..';
+import { FC } from 'react';
+import type { MRT_Cell, MRT_TableInstance } from '..';
 interface Props {
     cell: MRT_Cell;
     enableHover?: boolean;
     rowIndex: number;
-    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
     table: MRT_TableInstance;
 }
 export declare const MRT_TableBodyCell: FC<Props>;

package/dist/body/MRT_TableBodyRow.d.ts

@@ -1,9 +1,8 @@
-import { Dispatch, FC, SetStateAction } from 'react';
-import type { MRT_Column, MRT_Row, MRT_TableInstance } from '..';
+import { FC } from 'react';
+import type { MRT_Row, MRT_TableInstance } from '..';
 interface Props {
     row: MRT_Row;
     rowIndex: number;
-    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
     table: MRT_TableInstance;
 }
 export declare const MRT_TableBodyRow: FC<Props>;

package/dist/head/MRT_TableHead.d.ts

@@ -1,8 +1,6 @@
-import { Dispatch, FC, SetStateAction } from 'react';
-import type { MRT_Column, MRT_TableInstance } from '..';
+import { FC } from 'react';
+import type { MRT_TableInstance } from '..';
 interface Props {
-    currentHoveredColumn: MRT_Column | null;
-    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
     table: MRT_TableInstance;
 }
 export declare const MRT_TableHead: FC<Props>;

package/dist/head/MRT_TableHeadCell.d.ts

@@ -1,8 +1,6 @@
-import { Dispatch, FC, SetStateAction } from 'react';
-import type { MRT_Column, MRT_Header, MRT_TableInstance } from '..';
+import { FC } from 'react';
+import type { MRT_Header, MRT_TableInstance } from '..';
 interface Props {
-    currentHoveredColumn: MRT_Column | null;
-    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
     header: MRT_Header;
     table: MRT_TableInstance;
 }

package/dist/head/MRT_TableHeadRow.d.ts

@@ -1,8 +1,6 @@
-import { Dispatch, FC, SetStateAction } from 'react';
-import type { MRT_Column, MRT_HeaderGroup, MRT_TableInstance } from '..';
+import { FC } from 'react';
+import type { MRT_HeaderGroup, MRT_TableInstance } from '..';
 interface Props {
-    currentHoveredColumn: MRT_Column | null;
-    setCurrentHoveredColumn: Dispatch<SetStateAction<MRT_Column | null>>;
     headerGroup: MRT_HeaderGroup;
     table: MRT_TableInstance;
 }

package/dist/material-react-table.cjs.development.js

@@ -2424,10 +2424,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 = material.useTheme();
   var getState = table.getState,
       _table$options = table.options,
       enableColumnActions = _table$options.enableColumnActions,
@@ -2436,11 +2435,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;
@@ -2475,28 +2478,32 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableHeadCellRef = React__default.useRef(null);
 
-  var _useState = React.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__default.createElement(material.TableCell, Object.assign({
     align: columnDefType === 'group' ? 'center' : 'left',
     colSpan: header.colSpan,
@@ -2509,12 +2516,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       return _extends({
         backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? material.alpha(material.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 " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.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,
@@ -2523,8 +2529,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()
@@ -2535,7 +2541,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%'
     }
@@ -2575,9 +2580,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({
@@ -2593,8 +2596,6 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     }
   }), headerGroup.headers.map(function (header, index) {
     return React__default.createElement(MRT_TableHeadCell, {
-      currentHoveredColumn: currentHoveredColumn,
-      setCurrentHoveredColumn: setCurrentHoveredColumn,
       header: header,
       key: header.id || index,
       table: table
@@ -2603,9 +2604,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({
@@ -2613,8 +2612,6 @@ var MRT_TableHead = function MRT_TableHead(_ref) {
   }) : muiTableHeadProps;
   return React__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
     return React__default.createElement(MRT_TableHeadRow, {
-      currentHoveredColumn: currentHoveredColumn,
-      setCurrentHoveredColumn: setCurrentHoveredColumn,
       headerGroup: headerGroup,
       key: headerGroup.id,
       table: table
@@ -2777,8 +2774,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 = material.useTheme();
   var getState = table.getState,
       _table$options = table.options,
       editingMode = _table$options.editingMode,
@@ -2789,11 +2786,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;
@@ -2846,9 +2846,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__default.createElement(material.TableCell, Object.assign({
     onDoubleClick: handleDoubleClick,
     onDragEnter: handleDragEnter
@@ -2861,6 +2868,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.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,
@@ -2869,11 +2877,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' ? material.lighten(theme.palette.background["default"], 0.13) + " !important" : material.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()
@@ -2940,7 +2948,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,
@@ -2969,7 +2976,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__default.createElement(MRT_TableDetailPanel, {
@@ -2979,8 +2985,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,
@@ -3046,7 +3051,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__default.createElement("tr", null, React__default.createElement("td", {
@@ -3164,11 +3168,6 @@ var MRT_Table = function MRT_Table(_ref) {
   var tableProps = muiTableProps instanceof Function ? muiTableProps({
     table: table
   }) : muiTableProps;
-
-  var _useState = React.useState(null),
-      currentHoveredColumn = _useState[0],
-      setCurrentHoveredColumn = _useState[1];
-
   return React__default.createElement(material.Table, Object.assign({
     stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
   }, tableProps, {
@@ -3176,11 +3175,8 @@ var MRT_Table = function MRT_Table(_ref) {
       tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
     }, tableProps == null ? void 0 : tableProps.sx)
   }), enableTableHead && React__default.createElement(MRT_TableHead, {
-    currentHoveredColumn: currentHoveredColumn,
-    setCurrentHoveredColumn: setCurrentHoveredColumn,
     table: table
   }), React__default.createElement(MRT_TableBody, {
-    setCurrentHoveredColumn: setCurrentHoveredColumn,
     tableContainerRef: tableContainerRef,
     table: table
   }), enableTableFooter && React__default.createElement(MRT_TableFooter, {
@@ -3280,7 +3276,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 = React.useState(props.tableId),
       tableId = _useState[0],
@@ -3311,39 +3307,47 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentEditingRow = _useState4[0],
       setCurrentEditingRow = _useState4[1];
 
-  var _useState5 = React.useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
-      density = _useState5[0],
-      setDensity = _useState5[1];
+  var _useState5 = React.useState(null),
+      currentDraggingColumn = _useState5[0],
+      setCurrentDraggingColumn = _useState5[1];
+
+  var _useState6 = React.useState(null),
+      currentHoveredColumn = _useState6[0],
+      setCurrentHoveredColumn = _useState6[1];
+
+  var _useState7 = React.useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
+      density = _useState7[0],
+      setDensity = _useState7[1];
 
-  var _useState6 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
-      isFullScreen = _useState6[0],
-      setIsFullScreen = _useState6[1];
+  var _useState8 = React.useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
+      isFullScreen = _useState8[0],
+      setIsFullScreen = _useState8[1];
 
-  var _useState7 = React.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 = React.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 = React.useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
-      showColumnFilters = _useState8[0],
-      setShowFilters = _useState8[1];
+  var _useState10 = React.useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
+      showColumnFilters = _useState10[0],
+      setShowFilters = _useState10[1];
 
-  var _useState9 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
-      showGlobalFilter = _useState9[0],
-      setShowGlobalFilter = _useState9[1];
+  var _useState11 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState11[0],
+      setShowGlobalFilter = _useState11[1];
 
-  var _useState10 = React.useState(function () {
+  var _useState12 = React.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 = React.useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
-      currentGlobalFilterFn = _useState11[0],
-      setCurrentGlobalFilterFn = _useState11[1];
+  var _useState13 = React.useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
+      currentGlobalFilterFn = _useState13[0],
+      setCurrentGlobalFilterFn = _useState13[1];
 
   var displayColumns = React.useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
@@ -3455,10 +3459,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,
@@ -3467,10 +3473,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,
@@ -3497,6 +3505,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,