material-react-table 0.8.10 → 0.8.13

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

@@ -1,6 +1,6 @@
-import React, { useMemo, useState, useCallback, Fragment, forwardRef, useLayoutEffect, useEffect } from 'react';
+import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityMedium, DensitySmall, KeyboardDoubleArrowDown, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
-import { createTable, useTableInstance, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, functionalUpdate } from '@tanstack/react-table';
+import { createTable, useTableInstance, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { rankItem, rankings } from '@tanstack/match-sorter-utils';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
@@ -81,6 +81,7 @@ var MRT_DefaultLocalization_EN = {
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
+  resetOrder: 'Reset order',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',
@@ -502,7 +503,7 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
 
   return React.createElement(Box, {
     sx: {
-      mr: '8px'
+      mr: '4px'
     }
   }, column.getIsPinned() ? React.createElement(Tooltip, {
     arrow: true,
@@ -539,24 +540,95 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
   })))));
 };
 
+var MRT_GrabHandleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      DragHandleIcon = _tableInstance$option.icons.DragHandleIcon,
+      localization = _tableInstance$option.localization;
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
+    title: localization.grab
+  }, React.createElement(IconButton, {
+    disableRipple: true,
+    ref: ref,
+    size: "small",
+    sx: {
+      cursor: 'grab',
+      m: 0,
+      opacity: 0.5,
+      p: '2px',
+      transition: 'all 0.2s ease-in-out',
+      '&:hover': {
+        backgroundColor: 'transparent',
+        opacity: 1
+      },
+      '&:active': {
+        cursor: 'grabbing'
+      }
+    }
+  }, React.createElement(DragHandleIcon, null)));
+});
+
 var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var _column$columns2;
 
-  var column = _ref.column,
+  var allColumns = _ref.allColumns,
+      column = _ref.column,
       isSubMenu = _ref.isSubMenu,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
-      onToggleColumnVisibility = tableInstance.options.onToggleColumnVisibility;
+      _tableInstance$option = tableInstance.options,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
+      onToggleColumnVisibility = _tableInstance$option.onToggleColumnVisibility,
+      setColumnOrder = tableInstance.setColumnOrder;
 
   var _getState = getState(),
+      columnOrder = _getState.columnOrder,
       columnVisibility = _getState.columnVisibility;
 
-  var switchChecked = column.columnDefType !== 'group' && column.getIsVisible() || column.columnDefType === 'group' && column.getLeafColumns().some(function (col) {
+  var columnDef = column.columnDef,
+      columnDefType = column.columnDefType;
+
+  var reorder = function reorder(movingColumn, receivingColumn) {
+    if (movingColumn.getCanPin()) {
+      movingColumn.pin(receivingColumn.getIsPinned());
+    }
+
+    columnOrder.splice(columnOrder.indexOf(receivingColumn.id), 0, columnOrder.splice(columnOrder.indexOf(movingColumn.id), 1)[0]);
+    setColumnOrder([].concat(columnOrder));
+  };
+
+  var _useDrop = useDrop({
+    accept: 'column',
+    drop: function drop(movingColumn) {
+      return reorder(movingColumn, column);
+    }
+  }),
+      dropRef = _useDrop[1];
+
+  var _useDrag = useDrag({
+    collect: function collect(monitor) {
+      return {
+        isDragging: monitor.isDragging()
+      };
+    },
+    item: function item() {
+      return column;
+    },
+    type: 'column'
+  }),
+      dragRef = _useDrag[1],
+      previewRef = _useDrag[2];
+
+  var switchChecked = columnDefType !== 'group' && column.getIsVisible() || columnDefType === 'group' && column.getLeafColumns().some(function (col) {
     return col.getIsVisible();
   });
 
   var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
-    if (column.columnDefType === 'group') {
+    if (columnDefType === 'group') {
       var _column$columns;
 
       column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.forEach == null ? void 0 : _column$columns.forEach(function (childColumn) {
@@ -574,6 +646,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   };
 
   return React.createElement(React.Fragment, null, React.createElement(MenuItem, {
+    ref: columnDefType === 'data' ? dropRef : undefined,
     sx: {
       alignItems: 'center',
       justifyContent: 'flex-start',
@@ -581,26 +654,42 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       pl: (column.depth + 0.5) * 2 + "rem",
       py: '6px'
     }
-  }, !isSubMenu && column.getCanPin() && React.createElement(MRT_ColumnPinningButtons, {
+  }, React.createElement(Box, {
+    ref: previewRef,
+    sx: {
+      display: 'flex',
+      flexWrap: 'nowrap'
+    }
+  }, columnDefType !== 'group' && enableColumnOrdering && columnDef.enableColumnOrdering !== false && !allColumns.some(function (col) {
+    return col.columnDefType === 'group';
+  }) && React.createElement(MRT_GrabHandleButton, {
+    ref: dragRef,
+    tableInstance: tableInstance
+  }), !isSubMenu && column.getCanPin() && React.createElement(MRT_ColumnPinningButtons, {
     column: column,
     tableInstance: tableInstance
   }), React.createElement(FormControlLabel, {
     componentsProps: {
       typography: {
         sx: {
-          marginBottom: 0
+          mb: 0,
+          opacity: columnDefType !== 'display' ? 1 : 0.5
         }
       }
     },
     checked: switchChecked,
     control: React.createElement(Switch, null),
     disabled: isSubMenu && switchChecked || !column.getCanHide(),
-    label: column.columnDef.header,
+    label: columnDef.header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
+    },
+    sx: {
+      ml: '4px'
     }
-  })), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
+  }))), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
+      allColumns: allColumns,
       key: i + "-" + c.id,
       column: c,
       isSubMenu: isSubMenu,
@@ -615,18 +704,21 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       setAnchorEl = _ref.setAnchorEl,
       tableInstance = _ref.tableInstance;
   var getAllColumns = tableInstance.getAllColumns,
+      getAllLeafColumns = tableInstance.getAllLeafColumns,
       getIsAllColumnsVisible = tableInstance.getIsAllColumnsVisible,
-      getIsSomeColumnsVisible = tableInstance.getIsSomeColumnsVisible,
       getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
+      getIsSomeColumnsVisible = tableInstance.getIsSomeColumnsVisible,
       getState = tableInstance.getState,
       toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
-      getAllLeafColumns = tableInstance.getAllLeafColumns,
       _tableInstance$option = tableInstance.options,
       localization = _tableInstance$option.localization,
-      enablePinning = _tableInstance$option.enablePinning;
+      enablePinning = _tableInstance$option.enablePinning,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding;
+      isDensePadding = _getState.isDensePadding,
+      columnOrder = _getState.columnOrder,
+      columnPinning = _getState.columnPinning;
 
   var hideAllColumns = function hideAllColumns() {
     getAllLeafColumns().filter(function (col) {
@@ -636,23 +728,23 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     });
   };
 
-  var allDisplayColumns = useMemo(function () {
-    return getAllColumns().filter(function (col) {
-      return col.columnDefType === 'display';
-    });
-  }, [getAllColumns()]);
-  var allDataColumns = useMemo(function () {
-    var dataColumns = getAllColumns().filter(function (col) {
-      return col.columnDefType !== 'display';
-    });
-    return getIsSomeColumnsPinned() ? [].concat(dataColumns.filter(function (c) {
-      return c.getIsPinned() === 'left';
-    }), [null], dataColumns.filter(function (c) {
-      return c.getIsPinned() === false;
-    }), [null], dataColumns.filter(function (c) {
-      return c.getIsPinned() === 'right';
-    })) : dataColumns;
-  }, [getAllColumns(), getState().columnPinning, getIsSomeColumnsPinned()]);
+  var allColumns = useMemo(function () {
+    var columns = getAllColumns();
+
+    if (columnOrder.length > 0 && !columns.some(function (col) {
+      return col.columnDefType === 'group';
+    })) {
+      var _columnOrder$map;
+
+      return (_columnOrder$map = columnOrder.map(function (colId) {
+        return columns.find(function (col) {
+          return col.id === colId;
+        });
+      })) != null ? _columnOrder$map : columns;
+    }
+
+    return columns;
+  }, [getAllColumns(), columnOrder, columnPinning]);
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -672,7 +764,11 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }, !isSubMenu && React.createElement(Button, {
     disabled: !getIsSomeColumnsVisible(),
     onClick: hideAllColumns
-  }, localization.hideAll), !isSubMenu && enablePinning && React.createElement(Button, {
+  }, localization.hideAll), !isSubMenu && enableColumnOrdering && React.createElement(Button, {
+    onClick: function onClick() {
+      return tableInstance.resetColumnOrder();
+    }
+  }, localization.resetOrder), !isSubMenu && enablePinning && React.createElement(Button, {
     disabled: !getIsSomeColumnsPinned(),
     onClick: function onClick() {
       return tableInstance.resetColumnPinning(true);
@@ -682,22 +778,14 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     onClick: function onClick() {
       return toggleAllColumnsVisible(true);
     }
-  }, localization.showAll)), React.createElement(Divider, null), allDisplayColumns.map(function (column, index) {
+  }, localization.showAll)), React.createElement(Divider, null), allColumns.map(function (column, index) {
     return React.createElement(MRT_ShowHideColumnsMenuItems, {
+      allColumns: allColumns,
       column: column,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
       tableInstance: tableInstance
     });
-  }), React.createElement(Divider, null), allDataColumns.map(function (column, index) {
-    return column ? React.createElement(MRT_ShowHideColumnsMenuItems, {
-      column: column,
-      isSubMenu: isSubMenu,
-      key: index + "-" + column.id,
-      tableInstance: tableInstance
-    }) : React.createElement(Divider, {
-      key: index + "-divider"
-    });
   }));
 };
 
@@ -1867,9 +1955,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var filterChipLabel = !(filterFn instanceof Function) && [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(filterFn) ? //@ts-ignore
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
   var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
-  console.log({
-    textFieldProps: textFieldProps
-  });
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -2047,8 +2132,9 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
       showFilters = _getState.showFilters;
 
   var column = header.column;
+  var columnDef = column.columnDef;
   var filterFn = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterFns) == null ? void 0 : _getState2$currentFil[header.id];
-  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
+  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '') : localization.showHideFilters;
   return React.createElement(Tooltip, {
     arrow: true,
@@ -2074,38 +2160,6 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
   }, showFilters && !column.getFilterValue() ? React.createElement(FilterAltOffIcon, null) : React.createElement(FilterAltIcon, null)));
 };
 
-var MRT_TableHeadCellGrabHandle = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      DragHandleIcon = _tableInstance$option.icons.DragHandleIcon,
-      localization = _tableInstance$option.localization;
-  return React.createElement(Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    placement: "top",
-    title: localization.grab
-  }, React.createElement(IconButton, {
-    disableRipple: true,
-    ref: ref,
-    size: "small",
-    sx: {
-      cursor: 'grab',
-      m: 0,
-      opacity: 0.5,
-      p: '2px',
-      transition: 'all 0.2s ease-in-out',
-      '&:hover': {
-        backgroundColor: 'transparent',
-        opacity: 1
-      },
-      '&:active': {
-        cursor: 'grabbing'
-      }
-    }
-  }, React.createElement(DragHandleIcon, null)));
-});
-
 var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
   var header = _ref.header,
       tableInstance = _ref.tableInstance;
@@ -2115,6 +2169,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
       showFilters = _getState.showFilters;
 
   var column = header.column;
+  var columnDefType = column.columnDefType;
   return React.createElement(Divider, {
     flexItem: true,
     orientation: "vertical",
@@ -2126,7 +2181,7 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
         borderRadius: '2px',
         borderRightWidth: '2px',
         cursor: 'col-resize',
-        height: showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
+        height: showFilters && columnDefType === 'data' ? '4rem' : '2rem',
         opacity: 0.8,
         position: 'absolute',
         right: '1px',
@@ -2153,7 +2208,8 @@ var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
       tableInstance = _ref.tableInstance;
   var localization = tableInstance.options.localization;
   var column = header.column;
-  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.columnDef.header) : localization.sortedByColumnAsc.replace('{column}', column.columnDef.header) : localization.unsorted;
+  var columnDef = column.columnDef;
+  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', columnDef.header) : localization.sortedByColumnAsc.replace('{column}', columnDef.header) : localization.unsorted;
   return React.createElement(Tooltip, {
     arrow: true,
     placement: "top",
@@ -2173,6 +2229,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
       localization = _tableInstance$option.localization,
       muiTableHeadCellColumnActionsButtonProps = _tableInstance$option.muiTableHeadCellColumnActionsButtonProps;
   var column = header.column;
+  var columnDef = column.columnDef;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -2188,10 +2245,10 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     column: column,
     tableInstance: tableInstance
   }) : muiTableHeadCellColumnActionsButtonProps;
-  var mcTableHeadCellColumnActionsButtonProps = column.columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? column.columnDef.muiTableHeadCellColumnActionsButtonProps({
+  var mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? columnDef.muiTableHeadCellColumnActionsButtonProps({
     column: column,
     tableInstance: tableInstance
-  }) : column.columnDef.muiTableHeadCellColumnActionsButtonProps;
+  }) : columnDef.muiTableHeadCellColumnActionsButtonProps;
 
   var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
 
@@ -2226,7 +2283,7 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _column$columnDef, _column$columnDef2, _column$columnDef$Hea, _column$columnDef3, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
+  var _columnDef$Header, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
 
   var dragRef = _ref.dragRef,
       dropRef = _ref.dropRef,
@@ -2260,10 +2317,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var headerElement = ((_column$columnDef = column.columnDef) == null ? void 0 : _column$columnDef.Header) instanceof Function ? (_column$columnDef2 = column.columnDef) == null ? void 0 : _column$columnDef2.Header == null ? void 0 : _column$columnDef2.Header({
+  var headerElement = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
     header: header,
     tableInstance: tableInstance
-  }) : (_column$columnDef$Hea = (_column$columnDef3 = column.columnDef) == null ? void 0 : _column$columnDef3.Header) != null ? _column$columnDef$Hea : header.renderHeader();
+  }) : (_columnDef$Header = columnDef == null ? void 0 : columnDef.Header) != null ? _columnDef$Header : header.renderHeader();
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
     return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
@@ -2294,7 +2351,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pb: columnDefType === 'display' ? 0 : undefined,
         position: column.getIsPinned() && columnDefType !== 'group' ? 'sticky' : undefined,
-        pt: columnDefType === 'display' ? 0 : isDensePadding ? '0.75rem' : '1.25rem',
+        pt: columnDefType !== 'data' ? 0 : isDensePadding ? '0.25' : '.5rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
@@ -2336,8 +2393,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     sx: {
       whiteSpace: 'nowrap'
     }
-  }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_TableHeadCellGrabHandle, {
-    header: header,
+  }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
     tableInstance: tableInstance
   }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
@@ -2364,19 +2420,22 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
 
-  var reorder = function reorder(item, newIndex) {
-    var currentIndex = item.index;
-    columnOrder.splice(newIndex, 0, columnOrder.splice(currentIndex, 1)[0]);
+  var reorder = function reorder(movingHeader, receivingHeader) {
+    if (movingHeader.column.getCanPin()) {
+      movingHeader.column.pin(receivingHeader.column.getIsPinned());
+    }
+
+    columnOrder.splice(receivingHeader.index, 0, columnOrder.splice(movingHeader.index, 1)[0]);
     setColumnOrder([].concat(columnOrder));
   };
 
   var _useDrop = useDrop({
     accept: 'header',
-    drop: function drop(item) {
-      return reorder(item, header.index);
+    drop: function drop(movingHeader) {
+      return reorder(movingHeader, header);
     }
   }),
-      drop = _useDrop[1];
+      dropRef = _useDrop[1];
 
   var _useDrag = useDrag({
     collect: function collect(monitor) {
@@ -2390,15 +2449,15 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
     type: 'header'
   }),
       isDragging = _useDrag[0].isDragging,
-      drag = _useDrag[1],
-      preview = _useDrag[2];
+      dragRef = _useDrag[1],
+      previewRef = _useDrag[2];
 
   return React.createElement(MRT_TableHeadCell, {
-    dragRef: drag,
-    dropRef: drop,
+    dragRef: dragRef,
+    dropRef: dropRef,
     header: header,
     isDragging: isDragging,
-    previewRef: preview,
+    previewRef: previewRef,
     tableInstance: tableInstance
   });
 };
@@ -2544,6 +2603,8 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
   var _tableInstance$option = tableInstance.options,
       localization = _tableInstance$option.localization,
       muiTableBodyCellCopyButtonProps = _tableInstance$option.muiTableBodyCellCopyButtonProps;
+  var column = cell.column;
+  var columnDef = column.columnDef;
 
   var _useState = useState(false),
       copied = _useState[0],
@@ -2561,10 +2622,10 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
     cell: cell,
     tableInstance: tableInstance
   }) : muiTableBodyCellCopyButtonProps;
-  var mcTableBodyCellCopyButtonProps = cell.column.columnDef.muiTableBodyCellCopyButtonProps instanceof Function ? cell.column.columnDef.muiTableBodyCellCopyButtonProps({
+  var mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function ? columnDef.muiTableBodyCellCopyButtonProps({
     cell: cell,
     tableInstance: tableInstance
-  }) : cell.column.columnDef.muiTableBodyCellCopyButtonProps;
+  }) : columnDef.muiTableBodyCellCopyButtonProps;
 
   var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
 
@@ -2600,7 +2661,7 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _columnDef$minSize, _cell$column$columnDe, _cell$column$columnDe2, _row$subRows, _cell$column$columnDe3, _cell$column$columnDe4, _row$subRows$length, _row$subRows2;
+  var _columnDef$minSize, _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
@@ -2625,7 +2686,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   var column = cell.column,
       row = cell.row;
-  var columnDef = column.columnDef;
+  var columnDef = column.columnDef,
+      columnDefType = column.columnDefType;
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
     cell: cell,
     tableInstance: tableInstance
@@ -2638,8 +2700,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps);
 
   var skeletonWidth = useMemo(function () {
-    return column.columnDefType === 'display' ? column.getSize() / 2 : Math.random() * (column.getSize() - column.getSize() / 3) + column.getSize() / 3;
-  }, [column.columnDefType, column.getSize()]);
+    return columnDefType === 'display' ? column.getSize() / 2 : Math.random() * (column.getSize() - column.getSize() / 3) + column.getSize() / 3;
+  }, [columnDefType, column.getSize()]);
   var isEditable = (enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false;
   var isEditing = isEditable && (editingMode === 'table' || (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id || (currentEditingCell == null ? void 0 : currentEditingCell.id) === cell.id);
 
@@ -2685,7 +2747,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,
-        p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
+        p: isDensePadding ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
         position: column.getIsPinned() ? 'sticky' : 'relative',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
@@ -2706,7 +2768,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     animation: "wave",
     height: 20,
     width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
+  }, muiTableBodyCellSkeletonProps)) : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
   }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React.createElement(MRT_EditCellTextField, {
@@ -2715,13 +2777,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   }) : (enableClickToCopy || columnDef.enableClickToCopy) && columnDef.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
     cell: cell,
     tableInstance: tableInstance
-  }, React.createElement(React.Fragment, null, (_cell$column$columnDe = (_cell$column$columnDe2 = cell.column.columnDef) == null ? void 0 : _cell$column$columnDe2.Cell == null ? void 0 : _cell$column$columnDe2.Cell({
+  }, React.createElement(React.Fragment, null, (_columnDef$Cell = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$columnDe : cell.renderCell())), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_cell$column$columnDe3 = (_cell$column$columnDe4 = cell.column.columnDef) == null ? void 0 : _cell$column$columnDe4.Cell == null ? void 0 : _cell$column$columnDe4.Cell({
+  })) != null ? _columnDef$Cell : cell.renderCell())), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$columnDe3 : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
+  })) != null ? _columnDef$Cell2 : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
@@ -2843,7 +2905,8 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
       isDensePadding = _getState.isDensePadding;
 
   var column = footer.column;
-  var columnDef = column.columnDef;
+  var columnDef = column.columnDef,
+      columnDefType = column.columnDefType;
   var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps({
     column: column,
     tableInstance: tableInstance
@@ -2856,7 +2919,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
   var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps);
 
   return React.createElement(TableCell, Object.assign({
-    align: column.columnDefType === 'group' ? 'center' : 'left',
+    align: columnDefType === 'group' ? 'center' : 'left',
     colSpan: footer.colSpan,
     variant: "head"
   }, tableCellProps, {
@@ -2886,8 +2949,8 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
       tableInstance = _ref.tableInstance;
   var muiTableFooterRowProps = tableInstance.options.muiTableFooterRowProps; // if no content in row, skip row
 
-  if (!((_footerGroup$headers = footerGroup.headers) != null && _footerGroup$headers.some(function (h) {
-    return typeof h.column.columnDef.footer === 'string' && !!h.column.columnDef.footer || h.column.columnDef.Footer;
+  if (!((_footerGroup$headers = footerGroup.headers) != null && _footerGroup$headers.some(function (header) {
+    return typeof header.column.columnDef.footer === 'string' && !!header.column.columnDef.footer || header.column.columnDef.Footer;
   }))) return null;
   var tableRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps({
     footerGroup: footerGroup,
@@ -3078,7 +3141,7 @@ var createDisplayColumn = function createDisplayColumn(table, column) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _initialState$paginat4, _initialState$paginat5, _props$globalFilterFn, _props$state3, _props$state4;
+  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4;
 
   var _useState = useState(props.idPrefix),
       idPrefix = _useState[0],
@@ -3089,9 +3152,18 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
     return setIdPrefix((_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9));
   }, [props.idPrefix]);
+  var showActionColumn = props.enableRowActions || props.enableEditing && props.editingMode === 'row';
+  var showExpandColumn = props.enableExpanding || props.enableGrouping;
   var initialState = useMemo(function () {
+    var _props$initialState, _initState$columnOrde;
+
+    var initState = (_props$initialState = props.initialState) != null ? _props$initialState : {};
+    initState.columnOrder = ((_initState$columnOrde = initState == null ? void 0 : initState.columnOrder) != null ? _initState$columnOrde : props.enableColumnOrdering) ? [showActionColumn && 'mrt-row-actions', showExpandColumn && 'mrt-expand', props.enableRowSelection && 'mrt-select', props.enableRowNumbers && 'mrt-row-numbers'].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
+      return c.id;
+    })).filter(Boolean) : [];
+
     if (!props.enablePersistentState || !props.idPrefix) {
-      return props.initialState;
+      return initState;
     }
 
     if (typeof window === 'undefined') {
@@ -3099,7 +3171,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         console.error('The MRT Persistent Table State feature is not supported if using SSR, but you can wrap your <MaterialReactTable /> in a MUI <NoSsr> tags to let it work');
       }
 
-      return props.initialState;
+      return initState;
     }
 
     var storedState = props.persistentStateMode === 'localStorage' ? localStorage.getItem("mrt-" + idPrefix + "-table-state") : props.persistentStateMode === 'sessionStorage' ? sessionStorage.getItem("mrt-" + idPrefix + "-table-state") : '{}';
@@ -3108,11 +3180,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       var parsedState = JSON.parse(storedState);
 
       if (parsedState) {
-        return _extends({}, props.initialState, parsedState);
+        return _extends({}, initState, parsedState);
       }
     }
 
-    return props.initialState;
+    return initState;
   }, []);
 
   var _useState2 = useState((_initialState$current = initialState == null ? void 0 : initialState.currentEditingCell) != null ? _initialState$current : null),
@@ -3139,27 +3211,19 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showGlobalFilter = _useState7[0],
       setShowGlobalFilter = _useState7[1];
 
-  var _useState8 = useState({
-    pageIndex: (_initialState$paginat = initialState == null ? void 0 : (_initialState$paginat2 = initialState.pagination) == null ? void 0 : _initialState$paginat2.pageIndex) != null ? _initialState$paginat : 0,
-    pageSize: (_initialState$paginat3 = initialState == null ? void 0 : (_initialState$paginat4 = initialState.pagination) == null ? void 0 : _initialState$paginat4.pageSize) != null ? _initialState$paginat3 : 10,
-    pageCount: initialState == null ? void 0 : (_initialState$paginat5 = initialState.pagination) == null ? void 0 : _initialState$paginat5.pageCount
-  }),
-      pagination = _useState8[0],
-      setPagination = _useState8[1];
-
-  var _useState9 = useState(function () {
+  var _useState8 = useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
 
       return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_OPTION.EQUALS : MRT_FILTER_OPTION.FUZZY, _ref2;
     })));
   }),
-      currentFilterFns = _useState9[0],
-      setCurrentFilterFns = _useState9[1];
+      currentFilterFns = _useState8[0],
+      setCurrentFilterFns = _useState8[1];
 
-  var _useState10 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : MRT_FILTER_OPTION.FUZZY),
-      currentGlobalFilterFn = _useState10[0],
-      setCurrentGlobalFilterFn = _useState10[1];
+  var _useState9 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : MRT_FILTER_OPTION.FUZZY),
+      currentGlobalFilterFn = _useState9[0],
+      setCurrentGlobalFilterFn = _useState9[1];
 
   var table = useMemo(function () {
     return createTable();
@@ -3167,7 +3231,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   var displayColumns = useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [(props.enableRowActions || props.enableEditing && props.editingMode === 'row') && createDisplayColumn(table, {
+    return [showActionColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref3) {
         var cell = _ref3.cell;
         return React.createElement(MRT_ToggleRowActionMenuButton, {
@@ -3178,7 +3242,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       header: (_props$localization = props.localization) == null ? void 0 : _props$localization.actions,
       id: 'mrt-row-actions',
       size: 60
-    }), (props.enableExpanding || props.enableGrouping) && createDisplayColumn(table, {
+    }), showExpandColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref4) {
         var cell = _ref4.cell;
         return React.createElement(MRT_ExpandButton, {
@@ -3241,18 +3305,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         return _ref7 = {}, _ref7[c.id] = null, _ref7;
       })));
     }) : props.data;
-  }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]);
-
-  var _useState11 = useState(function () {
-    var _initialState$columnO;
-
-    return ((_initialState$columnO = initialState == null ? void 0 : initialState.columnOrder) != null ? _initialState$columnO : props.enableColumnOrdering) ? getAllLeafColumnDefs(columns).map(function (c) {
-      return c.id;
-    }) : [];
-  }),
-      columnOrder = _useState11[0],
-      setColumnOrder = _useState11[1]; //@ts-ignore
-
+  }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]); //@ts-ignore
 
   var tableInstance = _extends({}, useTableInstance(table, _extends({
     filterFns: defaultFilterFNs,
@@ -3267,13 +3320,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       return row == null ? void 0 : row.subRows;
     },
     //@ts-ignore
-    globalFilterFn: currentGlobalFilterFn,
-    onColumnOrderChange: setColumnOrder,
-    onPaginationChange: function onPaginationChange(updater) {
-      return setPagination(function (old) {
-        return functionalUpdate(updater, old);
-      });
-    }
+    globalFilterFn: currentGlobalFilterFn
   }, props, {
     //@ts-ignore
     columns: columns,
@@ -3281,15 +3328,12 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     idPrefix: idPrefix,
     initialState: initialState,
     state: _extends({
-      columnOrder: columnOrder,
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
       currentGlobalFilterFn: currentGlobalFilterFn,
       isDensePadding: isDensePadding,
       isFullScreen: isFullScreen,
-      //@ts-ignore
-      pagination: pagination,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
     }, props.state)