material-react-table 0.23.3 → 0.24.0

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
+import React, { useMemo, useState, useCallback, Fragment, useRef, 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, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
@@ -73,6 +73,7 @@ var MRT_DefaultLocalization_EN = {
   hideColumn: 'Hide {column} column',
   max: 'Max',
   min: 'Min',
+  move: 'Move',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
@@ -414,8 +415,9 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
 };
 
 var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
-  var handleDragStart = _ref.handleDragStart,
-      handleDragEnd = _ref.handleDragEnd,
+  var iconButtonProps = _ref.iconButtonProps,
+      onDragEnd = _ref.onDragEnd,
+      onDragStart = _ref.onDragStart,
       table = _ref.table;
   var _table$options = table.options,
       DragHandleIcon = _table$options.icons.DragHandleIcon,
@@ -425,14 +427,15 @@ var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
     enterDelay: 1000,
     enterNextDelay: 1000,
     placement: "top",
-    title: localization.grab
-  }, React.createElement(IconButton, {
+    title: localization.move
+  }, React.createElement(IconButton, Object.assign({
     disableRipple: true,
     draggable: "true",
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd,
-    size: "small",
-    sx: {
+    onDragStart: onDragStart,
+    onDragEnd: onDragEnd,
+    size: "small"
+  }, iconButtonProps, {
+    sx: _extends({
       cursor: 'grab',
       m: 0,
       opacity: 0.5,
@@ -445,8 +448,8 @@ var MRT_GrabHandleButton = function MRT_GrabHandleButton(_ref) {
       '&:active': {
         cursor: 'grabbing'
       }
-    }
-  }, React.createElement(DragHandleIcon, null)));
+    }, iconButtonProps == null ? void 0 : iconButtonProps.sx)
+  }), React.createElement(DragHandleIcon, null)));
 };
 
 var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
@@ -642,16 +645,16 @@ var prepareColumns = function prepareColumns(columnDefs, currentFilterFns) {
     return columnDef;
   });
 };
-var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder) {
-  if (movingColumn.getCanPin()) {
-    movingColumn.pin(receivingColumn.getIsPinned());
+var reorderColumn = function reorderColumn(draggedColumn, targetColumn, columnOrder) {
+  if (draggedColumn.getCanPin()) {
+    draggedColumn.pin(targetColumn.getIsPinned());
   }
 
-  columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
+  columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
   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 || props.renderDetailPanel) && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].filter(Boolean);
+  return [(props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag', (props.positionActionsColumn === 'first' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions', (props.enableExpanding || props.enableGrouping || props.renderDetailPanel) && 'mrt-row-expand', props.enableRowSelection && 'mrt-row-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'];
@@ -727,7 +730,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   };
 
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
-    disableRipple: enableColumnOrdering,
+    disableRipple: true,
     ref: menuItemRef,
     onDragEnter: handleDragEnter,
     sx: function sx(theme) {
@@ -750,8 +753,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   }, !isSubMenu && columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
     return col.columnDef.columnDefType === 'group';
   }) && (columnDef.enableColumnOrdering !== false ? React.createElement(MRT_GrabHandleButton, {
-    handleDragEnd: handleDragEnd,
-    handleDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    onDragStart: handleDragStart,
     table: table
   }) : React.createElement(Box, {
     sx: {
@@ -993,7 +996,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var handleGroupByColumn = function handleGroupByColumn() {
     column.toggleGrouping();
     setColumnOrder(function (old) {
-      return ['mrt-expand'].concat(old);
+      return ['mrt-row-expand'].concat(old);
     });
     setAnchorEl(null);
   };
@@ -1807,7 +1810,7 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
 };
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
-  var alignTo = _ref.alignTo,
+  var isTopToolbar = _ref.isTopToolbar,
       table = _ref.table;
   var muiLinearProgressProps = table.options.muiLinearProgressProps,
       getState = table.getState;
@@ -1817,6 +1820,7 @@ var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
       showProgressBars = _getState.showProgressBars;
 
   var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
+    isTopToolbar: isTopToolbar,
     table: table
   }) : muiLinearProgressProps;
   return React.createElement(Collapse, {
@@ -1824,9 +1828,9 @@ var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
     mountOnEnter: true,
     unmountOnExit: true,
     sx: {
-      bottom: alignTo === 'bottom' ? 0 : undefined,
+      bottom: isTopToolbar ? 0 : undefined,
       position: 'absolute',
-      top: alignTo === 'top' ? 0 : undefined,
+      top: !isTopToolbar ? 0 : undefined,
       width: '100%'
     }
   }, React.createElement(LinearProgress, Object.assign({
@@ -1915,7 +1919,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
     table: table,
     position: "top"
   }), React.createElement(MRT_LinearProgressBar, {
-    alignTo: "bottom",
+    isTopToolbar: true,
     table: table
   }));
 };
@@ -1955,7 +1959,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), React.createElement(MRT_LinearProgressBar, {
-    alignTo: "top",
+    isTopToolbar: false,
     table: table
   }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
     table: table
@@ -1985,6 +1989,66 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   }))));
 };
 
+var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActionsButton(_ref) {
+  var header = _ref.header,
+      table = _ref.table;
+  var _table$options = table.options,
+      MoreVertIcon = _table$options.icons.MoreVertIcon,
+      localization = _table$options.localization,
+      muiTableHeadCellColumnActionsButtonProps = _table$options.muiTableHeadCellColumnActionsButtonProps;
+  var column = header.column;
+  var columnDef = column.columnDef;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps({
+    column: column,
+    table: table
+  }) : muiTableHeadCellColumnActionsButtonProps;
+  var mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? columnDef.muiTableHeadCellColumnActionsButtonProps({
+    column: column,
+    table: table
+  }) : columnDef.muiTableHeadCellColumnActionsButtonProps;
+
+  var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
+
+  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
+    title: localization.columnActions
+  }, React.createElement(IconButton, Object.assign({
+    "aria-label": localization.columnActions,
+    onClick: handleClick,
+    size: "small"
+  }, iconButtonProps, {
+    sx: _extends({
+      height: '2rem',
+      mt: '-0.2rem',
+      opacity: 0.5,
+      transition: 'opacity 0.2s',
+      width: '2rem',
+      '&:hover': {
+        opacity: 1
+      }
+    }, iconButtonProps.sx)
+  }), React.createElement(MoreVertIcon, null))), React.createElement(MRT_ColumnActionMenu, {
+    anchorEl: anchorEl,
+    header: header,
+    setAnchorEl: setAnchorEl,
+    table: table
+  }));
+};
+
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var _localization$filterB, _columnDef$enabledCol, _localization$clearFi, _columnDef$filterSele;
 
@@ -2283,6 +2347,64 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
   }, React.createElement(FilterAltIcon, null)))));
 };
 
+var MRT_TableHeadCellGrabHandle = function MRT_TableHeadCellGrabHandle(_ref) {
+  var column = _ref.column,
+      table = _ref.table,
+      tableHeadCellRef = _ref.tableHeadCellRef;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableColumnOrdering = _table$options.enableColumnOrdering,
+      muiTableHeadCellDragHandleProps = _table$options.muiTableHeadCellDragHandleProps,
+      onColumnDrop = _table$options.onColumnDrop,
+      setColumnOrder = table.setColumnOrder,
+      setCurrentDraggingColumn = table.setCurrentDraggingColumn,
+      setCurrentHoveredColumn = table.setCurrentHoveredColumn;
+  var columnDef = column.columnDef;
+
+  var _getState = getState(),
+      currentHoveredColumn = _getState.currentHoveredColumn,
+      currentDraggingColumn = _getState.currentDraggingColumn,
+      columnOrder = _getState.columnOrder;
+
+  var mIconButtonProps = muiTableHeadCellDragHandleProps instanceof Function ? muiTableHeadCellDragHandleProps({
+    column: column,
+    table: table
+  }) : muiTableHeadCellDragHandleProps;
+  var mcIconButtonProps = columnDef.muiTableHeadCellDragHandleProps instanceof Function ? columnDef.muiTableHeadCellDragHandleProps({
+    column: column,
+    table: table
+  }) : columnDef.muiTableHeadCellDragHandleProps;
+
+  var iconButtonProps = _extends({}, mIconButtonProps, mcIconButtonProps);
+
+  var handleDragStart = function handleDragStart(e) {
+    setCurrentDraggingColumn(column);
+    e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+  };
+
+  var handleDragEnd = function handleDragEnd(event) {
+    onColumnDrop == null ? void 0 : onColumnDrop({
+      event: event,
+      draggedColumn: column,
+      targetColumn: currentHoveredColumn
+    });
+
+    if (enableColumnOrdering && currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
+      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+    }
+
+    setCurrentDraggingColumn(null);
+    setCurrentHoveredColumn(null);
+  };
+
+  return React.createElement(MRT_GrabHandleButton, {
+    iconButtonProps: iconButtonProps,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    table: table
+  });
+};
+
 var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
   var _getState$columnSizin;
 
@@ -2354,66 +2476,6 @@ var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
   }));
 };
 
-var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActionsButton(_ref) {
-  var header = _ref.header,
-      table = _ref.table;
-  var _table$options = table.options,
-      MoreVertIcon = _table$options.icons.MoreVertIcon,
-      localization = _table$options.localization,
-      muiTableHeadCellColumnActionsButtonProps = _table$options.muiTableHeadCellColumnActionsButtonProps;
-  var column = header.column;
-  var columnDef = column.columnDef;
-
-  var _useState = useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
-
-  var handleClick = function handleClick(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    setAnchorEl(event.currentTarget);
-  };
-
-  var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps({
-    column: column,
-    table: table
-  }) : muiTableHeadCellColumnActionsButtonProps;
-  var mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? columnDef.muiTableHeadCellColumnActionsButtonProps({
-    column: column,
-    table: table
-  }) : columnDef.muiTableHeadCellColumnActionsButtonProps;
-
-  var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
-
-  return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    placement: "top",
-    title: localization.columnActions
-  }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.columnActions,
-    onClick: handleClick,
-    size: "small"
-  }, iconButtonProps, {
-    sx: _extends({
-      height: '2rem',
-      mt: '-0.2rem',
-      opacity: 0.5,
-      transition: 'opacity 0.2s',
-      width: '2rem',
-      '&:hover': {
-        opacity: 1
-      }
-    }, iconButtonProps.sx)
-  }), React.createElement(MoreVertIcon, null))), React.createElement(MRT_ColumnActionMenu, {
-    anchorEl: anchorEl,
-    header: header,
-    setAnchorEl: setAnchorEl,
-    table: table
-  }));
-};
-
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var _ref2, _columnDef$header$len, _columnDef$header;
 
@@ -2423,17 +2485,15 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var getState = table.getState,
       _table$options = table.options,
       enableColumnActions = _table$options.enableColumnActions,
+      enableColumnDragging = _table$options.enableColumnDragging,
       enableColumnOrdering = _table$options.enableColumnOrdering,
       enableColumnResizing = _table$options.enableColumnResizing,
       enableGrouping = _table$options.enableGrouping,
       enableMultiSort = _table$options.enableMultiSort,
       muiTableHeadCellProps = _table$options.muiTableHeadCellProps,
-      setColumnOrder = table.setColumnOrder,
-      setCurrentDraggingColumn = table.setCurrentDraggingColumn,
       setCurrentHoveredColumn = table.setCurrentHoveredColumn;
 
   var _getState = getState(),
-      columnOrder = _getState.columnOrder,
       density = _getState.density,
       currentDraggingColumn = _getState.currentDraggingColumn,
       currentHoveredColumn = _getState.currentHoveredColumn;
@@ -2469,28 +2529,13 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
-  var tableHeadCellRef = React.useRef(null);
-
-  var handleDragStart = function handleDragStart(e) {
-    setCurrentDraggingColumn(column);
-    e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
-  };
-
-  var handleDragEnd = function handleDragEnd(_e) {
-    setCurrentDraggingColumn(null);
-    setCurrentHoveredColumn(null);
-
-    if (currentHoveredColumn && (currentHoveredColumn == null ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn == null ? void 0 : currentDraggingColumn.id)) {
-      setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
-    }
-  };
-
   var handleDragEnter = function handleDragEnter(_e) {
-    if (currentDraggingColumn) {
+    if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
     }
   };
 
+  var tableHeadCellRef = React.useRef(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,
@@ -2556,10 +2601,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     sx: {
       whiteSpace: 'nowrap'
     }
-  }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_GrabHandleButton, {
-    handleDragStart: handleDragStart,
-    handleDragEnd: handleDragEnd,
-    table: table
+  }, columnDefType === 'data' && (enableColumnDragging && columnDef.enableColumnDragging !== false || enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_TableHeadCellGrabHandle, {
+    column: column,
+    table: table,
+    tableHeadCellRef: tableHeadCellRef
   }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React.createElement(MRT_TableHeadCellColumnActionsButton, {
     header: header,
     table: table
@@ -2761,18 +2806,55 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
   }), children));
 };
 
+var MRT_TableBodyRowGrabHandle = function MRT_TableBodyRowGrabHandle(_ref) {
+  var cell = _ref.cell,
+      rowRef = _ref.rowRef,
+      table = _ref.table;
+  var _table$options = table.options,
+      muiTableBodyRowDragHandleProps = _table$options.muiTableBodyRowDragHandleProps,
+      onRowDrop = _table$options.onRowDrop;
+  var iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function ? muiTableBodyRowDragHandleProps({
+    row: cell.row,
+    table: table
+  }) : muiTableBodyRowDragHandleProps;
+
+  var handleDragStart = function handleDragStart(e) {
+    e.dataTransfer.setDragImage(rowRef.current, 0, 0);
+    table.setCurrentDraggingRow(cell.row);
+  };
+
+  var handleDragEnd = function handleDragEnd(event) {
+    onRowDrop == null ? void 0 : onRowDrop({
+      event: event,
+      draggedRow: table.getState().currentDraggingRow,
+      targetRow: table.getState().currentHoveredRow
+    });
+    table.setCurrentDraggingRow(null);
+    table.setCurrentHoveredRow(null);
+  };
+
+  return React.createElement(MRT_GrabHandleButton, {
+    iconButtonProps: iconButtonProps,
+    onDragStart: handleDragStart,
+    onDragEnd: handleDragEnd,
+    table: table
+  });
+};
+
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
       rowIndex = _ref.rowIndex,
+      rowRef = _ref.rowRef,
       table = _ref.table;
   var theme = useTheme();
   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,
@@ -2839,7 +2921,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   var handleDragEnter = function handleDragEnter(_e) {
-    if (currentDraggingColumn) {
+    if (enableColumnOrdering && currentDraggingColumn) {
       setCurrentHoveredColumn(columnDefType === 'data' ? column : null);
     }
   };
@@ -2847,7 +2929,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   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
+    borderRight: draggingBorder,
+    borderBottom: row.index === table.getRowModel().rows.length - 1 ? draggingBorder : undefined
   } : undefined;
   return React.createElement(TableCell, Object.assign({
     onDoubleClick: handleDoubleClick,
@@ -2864,7 +2947,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         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,
+        pl: column.id === 'mrt-row-expand' ? row.depth + (density === 'compact' ? 0.5 : density === 'comfortable' ? 0.75 : 1.25) + "rem" : undefined,
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
@@ -2884,7 +2967,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     animation: "wave",
     height: 20,
     width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : enableRowNumbers && rowNumberMode === 'static' && column.id === 'mrt-row-numbers' ? rowIndex + 1 : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
+  }, muiTableBodyCellSkeletonProps)) : enableRowNumbers && rowNumberMode === 'static' && column.id === 'mrt-row-numbers' ? rowIndex + 1 : column.id === 'mrt-row-drag' ? React.createElement(MRT_TableBodyRowGrabHandle, {
+    cell: cell,
+    rowRef: rowRef,
+    table: table
+  }) : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
     table: table
   }) : isEditing ? React.createElement(MRT_EditCellTextField, {
@@ -2942,26 +3029,50 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var row = _ref.row,
       rowIndex = _ref.rowIndex,
       table = _ref.table;
+  var theme = useTheme();
   var getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
+      getState = table.getState,
       _table$options = table.options,
+      enableRowOrdering = _table$options.enableRowOrdering,
       muiTableBodyRowProps = _table$options.muiTableBodyRowProps,
-      renderDetailPanel = _table$options.renderDetailPanel;
+      renderDetailPanel = _table$options.renderDetailPanel,
+      setCurrentHoveredRow = table.setCurrentHoveredRow;
+
+  var _getState = getState(),
+      currentDraggingRow = _getState.currentDraggingRow,
+      currentHoveredRow = _getState.currentHoveredRow;
+
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
     table: table
   }) : muiTableBodyRowProps;
+
+  var handleDragEnter = function handleDragEnter(_e) {
+    if (enableRowOrdering && currentDraggingRow) {
+      setCurrentHoveredRow(row);
+    }
+  };
+
+  var rowRef = useRef(null);
+  var draggingBorder = (currentDraggingRow == null ? void 0 : currentDraggingRow.id) === row.id ? "1px dashed " + theme.palette.divider : (currentHoveredRow == null ? void 0 : currentHoveredRow.id) === row.id ? "2px dashed " + theme.palette.primary.main : undefined;
+  var draggingBorders = draggingBorder ? {
+    border: draggingBorder
+  } : undefined;
   return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
+    onDragEnter: handleDragEnter,
     hover: true,
-    selected: row.getIsSelected()
+    selected: row.getIsSelected(),
+    ref: rowRef
   }, tableRowProps, {
     sx: function sx(theme) {
       return _extends({
         backgroundColor: lighten(theme.palette.background["default"], 0.06),
+        opacity: (currentDraggingRow == null ? void 0 : currentDraggingRow.id) === row.id || (currentHoveredRow == null ? void 0 : currentHoveredRow.id) === row.id ? 0.5 : 1,
         transition: 'all 0.2s ease-in-out',
         '&:hover td': {
           backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned() ? theme.palette.mode === 'dark' ? "" + lighten(theme.palette.background["default"], 0.12) : "" + darken(theme.palette.background["default"], 0.05) : undefined
         }
-      }, tableRowProps == null ? void 0 : tableRowProps.sx);
+      }, tableRowProps == null ? void 0 : tableRowProps.sx, draggingBorders);
     }
   }), row == null ? void 0 : (_row$getVisibleCells = row.getVisibleCells()) == null ? void 0 : _row$getVisibleCells.map == null ? void 0 : _row$getVisibleCells.map(function (cell) {
     return React.createElement(MRT_TableBodyCell, {
@@ -2969,6 +3080,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       key: cell.id,
       enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
       rowIndex: rowIndex,
+      rowRef: rowRef,
       table: table
     });
   })), renderDetailPanel && !row.getIsGrouped() && React.createElement(MRT_TableDetailPanel, {
@@ -3269,7 +3381,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$onCurrentDragg, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _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$onCurrentDragg2, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onCurrentHover, _props$onCurrentHover2, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = useState(props.tableId),
       tableId = _useState[0],
@@ -3292,60 +3404,75 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       columnOrder = _useState2[0],
       setColumnOrder = _useState2[1];
 
-  var _useState3 = useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
-      currentEditingCell = _useState3[0],
-      setCurrentEditingCell = _useState3[1];
+  var _useState3 = useState(null),
+      currentDraggingColumn = _useState3[0],
+      setCurrentDraggingColumn = _useState3[1];
 
-  var _useState4 = useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
-      currentEditingRow = _useState4[0],
-      setCurrentEditingRow = _useState4[1];
+  var _useState4 = useState(null),
+      currentDraggingRow = _useState4[0],
+      setCurrentDraggingRow = _useState4[1];
 
-  var _useState5 = useState(null),
-      currentDraggingColumn = _useState5[0],
-      setCurrentDraggingColumn = _useState5[1];
+  var _useState5 = useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
+      currentEditingCell = _useState5[0],
+      setCurrentEditingCell = _useState5[1];
 
-  var _useState6 = useState(null),
-      currentHoveredColumn = _useState6[0],
-      setCurrentHoveredColumn = _useState6[1];
+  var _useState6 = useState((_initialState$current2 = initialState == null ? void 0 : initialState.currentEditingRow) != null ? _initialState$current2 : null),
+      currentEditingRow = _useState6[0],
+      setCurrentEditingRow = _useState6[1];
 
-  var _useState7 = useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
-      density = _useState7[0],
-      setDensity = _useState7[1];
+  var _useState7 = useState(null),
+      currentHoveredColumn = _useState7[0],
+      setCurrentHoveredColumn = _useState7[1];
 
-  var _useState8 = useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
-      isFullScreen = _useState8[0],
-      setIsFullScreen = _useState8[1];
+  var _useState8 = useState(null),
+      currentHoveredRow = _useState8[0],
+      setCurrentHoveredRow = _useState8[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 _useState9 = useState((_initialState$density = initialState == null ? void 0 : initialState.density) != null ? _initialState$density : 'comfortable'),
+      density = _useState9[0],
+      setDensity = _useState9[1];
 
-  var _useState10 = useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
-      showColumnFilters = _useState10[0],
-      setShowFilters = _useState10[1];
+  var _useState10 = useState((_initialState$isFullS = initialState == null ? void 0 : initialState.isFullScreen) != null ? _initialState$isFullS : false),
+      isFullScreen = _useState10[0],
+      setIsFullScreen = _useState10[1];
 
-  var _useState11 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
-      showGlobalFilter = _useState11[0],
-      setShowGlobalFilter = _useState11[1];
+  var _useState11 = useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
+      showAlertBanner = _useState11[0],
+      setShowAlertBanner = _useState11[1];
 
-  var _useState12 = useState(function () {
+  var _useState12 = useState((_initialState$showCol = initialState == null ? void 0 : initialState.showColumnFilters) != null ? _initialState$showCol : false),
+      showColumnFilters = _useState12[0],
+      setShowFilters = _useState12[1];
+
+  var _useState13 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState13[0],
+      setShowGlobalFilter = _useState13[1];
+
+  var _useState14 = 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 = _useState12[0],
-      setCurrentFilterFns = _useState12[1];
+      currentFilterFns = _useState14[0],
+      setCurrentFilterFns = _useState14[1];
 
-  var _useState13 = useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
-      currentGlobalFilterFn = _useState13[0],
-      setCurrentGlobalFilterFn = _useState13[1];
+  var _useState15 = useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
+      currentGlobalFilterFn = _useState15[0],
+      setCurrentGlobalFilterFn = _useState15[1];
 
   var displayColumns = useMemo(function () {
-    var _props$localization, _props$localization2, _props$localization3, _props$localization5;
+    var _props$localization, _props$localization2, _props$localization3, _props$localization4, _props$localization6;
 
-    return [columnOrder.includes('mrt-row-actions') && {
+    return [columnOrder.includes('mrt-row-drag') && {
+      columnDefType: 'display',
+      header: (_props$localization = props.localization) == null ? void 0 : _props$localization.move,
+      id: 'mrt-row-drag',
+      muiTableBodyCellProps: props.muiTableBodyCellProps,
+      muiTableHeadCellProps: props.muiTableHeadCellProps,
+      size: 60
+    }, columnOrder.includes('mrt-row-actions') && {
       Cell: function Cell(_ref5) {
         var cell = _ref5.cell;
         return React.createElement(MRT_ToggleRowActionMenuButton, {
@@ -3354,12 +3481,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         });
       },
       columnDefType: 'display',
-      header: (_props$localization = props.localization) == null ? void 0 : _props$localization.actions,
+      header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.actions,
       id: 'mrt-row-actions',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 70
-    }, columnOrder.includes('mrt-expand') && {
+    }, columnOrder.includes('mrt-row-expand') && {
       Cell: function Cell(_ref6) {
         var cell = _ref6.cell;
         return React.createElement(MRT_ExpandButton, {
@@ -3373,12 +3500,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         }) : null;
       },
       columnDefType: 'display',
-      header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.expand,
-      id: 'mrt-expand',
+      header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.expand,
+      id: 'mrt-row-expand',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
-    }, columnOrder.includes('mrt-select') && {
+    }, columnOrder.includes('mrt-row-select') && {
       Cell: function Cell(_ref7) {
         var cell = _ref7.cell;
         return React.createElement(MRT_SelectCheckbox, {
@@ -3393,8 +3520,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         }) : null;
       },
       columnDefType: 'display',
-      header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.select,
-      id: 'mrt-select',
+      header: (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.select,
+      id: 'mrt-row-select',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
@@ -3404,18 +3531,18 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         return cell.row.index + 1;
       },
       Header: function Header() {
-        var _props$localization4;
+        var _props$localization5;
 
-        return (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.rowNumber;
+        return (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumber;
       },
       columnDefType: 'display',
-      header: (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumbers,
+      header: (_props$localization6 = props.localization) == null ? void 0 : _props$localization6.rowNumbers,
       id: 'mrt-row-numbers',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
     }].filter(Boolean);
-  }, [columnOrder, props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn]);
+  }, [columnOrder, props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowOrdering, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn]);
   var columnDefs = useMemo(function () {
     return prepareColumns([].concat(displayColumns, props.columns), currentFilterFns);
   }, [currentFilterFns, displayColumns, props.columns]);
@@ -3453,11 +3580,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     state: _extends({
       columnOrder: columnOrder,
       currentDraggingColumn: currentDraggingColumn,
+      currentDraggingRow: currentDraggingRow,
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
       currentGlobalFilterFn: currentGlobalFilterFn,
       currentHoveredColumn: currentHoveredColumn,
+      currentHoveredRow: currentHoveredRow,
       density: density,
       isFullScreen: isFullScreen,
       showAlertBanner: showAlertBanner,
@@ -3467,11 +3596,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     tableId: tableId
   })), {
     setCurrentDraggingColumn: (_props$onCurrentDragg = props.onCurrentDraggingColumnChange) != null ? _props$onCurrentDragg : setCurrentDraggingColumn,
+    setCurrentDraggingRow: (_props$onCurrentDragg2 = props.onCurrentDraggingRowChange) != null ? _props$onCurrentDragg2 : setCurrentDraggingRow,
     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,
+    setCurrentHoveredRow: (_props$onCurrentHover2 = props.onCurrentHoveredRowChange) != null ? _props$onCurrentHover2 : setCurrentHoveredRow,
     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,
@@ -3498,16 +3629,6 @@ 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,