material-react-table 0.8.0-alpha.2 → 0.8.2

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, forwardRef, useLayoutEffect, useEffect } from 'react';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
@@ -7,6 +7,7 @@ import CloseIcon from '@mui/icons-material/Close';
 import DensityMediumIcon from '@mui/icons-material/DensityMedium';
 import DensitySmallIcon from '@mui/icons-material/DensitySmall';
 import DoubleArrowDownIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import DragHandleIcon from '@mui/icons-material/DragHandle';
 import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 import EditIcon from '@mui/icons-material/Edit';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
@@ -28,8 +29,10 @@ import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import { createTable, useTableInstance, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, functionalUpdate } from '@tanstack/react-table';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, lighten, alpha, TableCell, TableSortLabel, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
+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';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -48,6 +51,10 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
+function _objectDestructuringEmpty(obj) {
+  if (obj == null) throw new TypeError("Cannot destructure undefined");
+}
+
 function _objectWithoutPropertiesLoose(source, excluded) {
   if (source == null) return {};
   var target = {};
@@ -92,6 +99,7 @@ var MRT_DefaultLocalization_EN = {
   filterNotEquals: 'Not Equals',
   filterStartsWith: 'Starts With',
   filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+  grab: 'Grab',
   groupByColumn: 'Group by {column}',
   groupedBy: 'Grouped by ',
   hideAll: 'Hide all',
@@ -138,6 +146,7 @@ var MRT_Default_Icons = {
   DensityMediumIcon: DensityMediumIcon,
   DensitySmallIcon: DensitySmallIcon,
   DoubleArrowDownIcon: DoubleArrowDownIcon,
+  DragHandleIcon: DragHandleIcon,
   DynamicFeedIcon: DynamicFeedIcon,
   EditIcon: EditIcon,
   ExpandLessIcon: ExpandLessIcon,
@@ -164,10 +173,12 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
   var tableInstance = _ref.tableInstance;
   var getIsAllRowsExpanded = tableInstance.getIsAllRowsExpanded,
       getIsSomeRowsExpanded = tableInstance.getIsSomeRowsExpanded,
+      getCanSomeRowsExpand = tableInstance.getCanSomeRowsExpand,
       getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       DoubleArrowDownIcon = _tableInstance$option.icons.DoubleArrowDownIcon,
       localization = _tableInstance$option.localization,
+      renderDetailPanel = _tableInstance$option.renderDetailPanel,
       toggleAllRowsExpanded = tableInstance.toggleAllRowsExpanded;
 
   var _getState = getState(),
@@ -180,6 +191,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
     title: localization.expandAll
   }, React.createElement(IconButton, {
     "aria-label": localization.expandAll,
+    disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
     onClick: function onClick() {
       return toggleAllRowsExpanded(!getIsAllRowsExpanded());
     },
@@ -1208,101 +1220,6 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   })));
 };
 
-var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
-  var tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      setGlobalFilter = tableInstance.setGlobalFilter,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      SearchIcon = _tableInstance$option2.SearchIcon,
-      CloseIcon = _tableInstance$option2.CloseIcon,
-      idPrefix = _tableInstance$option.idPrefix,
-      localization = _tableInstance$option.localization,
-      muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
-
-  var _getState = getState(),
-      globalFilter = _getState.globalFilter,
-      showGlobalFilter = _getState.showGlobalFilter;
-
-  var _useState = useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
-
-  var _useState2 = useState(globalFilter != null ? globalFilter : ''),
-      searchValue = _useState2[0],
-      setSearchValue = _useState2[1];
-
-  var handleChange = useCallback(debounce(function (event) {
-    var _event$target$value;
-
-    setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
-      event: event,
-      tableInstance: tableInstance
-    });
-  }, 200), []);
-
-  var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
-    setAnchorEl(event.currentTarget);
-  };
-
-  var handleClear = function handleClear() {
-    setSearchValue('');
-    setGlobalFilter(undefined);
-  };
-
-  var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
-    tableInstance: tableInstance
-  }) : muiSearchTextFieldProps;
-  return React.createElement(Collapse, {
-    "in": showGlobalFilter,
-    orientation: "horizontal"
-  }, React.createElement(TextField, Object.assign({
-    id: "mrt-" + idPrefix + "-search-text-field",
-    placeholder: localization.search,
-    onChange: function onChange(event) {
-      setSearchValue(event.target.value);
-      handleChange(event);
-    },
-    value: searchValue != null ? searchValue : '',
-    variant: "standard",
-    InputProps: {
-      startAdornment: React.createElement(InputAdornment, {
-        position: "start"
-      }, React.createElement(Tooltip, {
-        arrow: true,
-        title: localization.changeSearchMode
-      }, React.createElement("span", null, React.createElement(IconButton, {
-        "aria-label": localization.changeSearchMode,
-        onClick: handleGlobalFilterMenuOpen,
-        size: "small",
-        sx: {
-          height: '1.75rem',
-          width: '1.75rem'
-        }
-      }, React.createElement(SearchIcon, null))))),
-      endAdornment: React.createElement(InputAdornment, {
-        position: "end"
-      }, React.createElement(IconButton, {
-        "aria-label": localization.clearSearch,
-        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
-        onClick: handleClear,
-        size: "small",
-        title: localization.clearSearch
-      }, React.createElement(CloseIcon, null)))
-    }
-  }, textFieldProps, {
-    sx: _extends({
-      justifySelf: 'end'
-    }, textFieldProps == null ? void 0 : textFieldProps.sx)
-  })), React.createElement(MRT_FilterOptionMenu, {
-    anchorEl: anchorEl,
-    setAnchorEl: setAnchorEl,
-    tableInstance: tableInstance
-  }));
-};
-
 var _excluded = ["tableInstance"];
 var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   var tableInstance = _ref.tableInstance,
@@ -1483,7 +1400,104 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
 };
 
+var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      setGlobalFilter = tableInstance.setGlobalFilter,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      SearchIcon = _tableInstance$option2.SearchIcon,
+      CloseIcon = _tableInstance$option2.CloseIcon,
+      idPrefix = _tableInstance$option.idPrefix,
+      localization = _tableInstance$option.localization,
+      muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
+      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
+
+  var _getState = getState(),
+      globalFilter = _getState.globalFilter,
+      showGlobalFilter = _getState.showGlobalFilter;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var _useState2 = useState(globalFilter != null ? globalFilter : ''),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var handleChange = useCallback(debounce(function (event) {
+    var _event$target$value;
+
+    setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
+      event: event,
+      tableInstance: tableInstance
+    });
+  }, 200), []);
+
+  var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClear = function handleClear() {
+    setSearchValue('');
+    setGlobalFilter(undefined);
+  };
+
+  var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
+    tableInstance: tableInstance
+  }) : muiSearchTextFieldProps;
+  return React.createElement(Collapse, {
+    "in": showGlobalFilter,
+    orientation: "horizontal"
+  }, React.createElement(TextField, Object.assign({
+    id: "mrt-" + idPrefix + "-search-text-field",
+    placeholder: localization.search,
+    onChange: function onChange(event) {
+      setSearchValue(event.target.value);
+      handleChange(event);
+    },
+    value: searchValue != null ? searchValue : '',
+    variant: "standard",
+    InputProps: {
+      startAdornment: React.createElement(InputAdornment, {
+        position: "start"
+      }, React.createElement(Tooltip, {
+        arrow: true,
+        title: localization.changeSearchMode
+      }, React.createElement("span", null, React.createElement(IconButton, {
+        "aria-label": localization.changeSearchMode,
+        onClick: handleGlobalFilterMenuOpen,
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
+      }, React.createElement(SearchIcon, null))))),
+      endAdornment: React.createElement(InputAdornment, {
+        position: "end"
+      }, React.createElement(IconButton, {
+        "aria-label": localization.clearSearch,
+        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
+        onClick: handleClear,
+        size: "small",
+        title: localization.clearSearch
+      }, React.createElement(CloseIcon, null)))
+    }
+  }, textFieldProps, {
+    sx: _extends({
+      justifySelf: 'end'
+    }, textFieldProps == null ? void 0 : textFieldProps.sx)
+  })), React.createElement(MRT_FilterOptionMenu, {
+    anchorEl: anchorEl,
+    setAnchorEl: setAnchorEl,
+    tableInstance: tableInstance
+  }));
+};
+
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
+  var _renderToolbarInterna;
+
   var tableInstance = _ref.tableInstance;
   var _tableInstance$option = tableInstance.options,
       enableColumnFilters = _tableInstance$option.enableColumnFilters,
@@ -1493,24 +1507,22 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enableHiding = _tableInstance$option.enableHiding,
       renderToolbarInternalActions = _tableInstance$option.renderToolbarInternalActions;
-
-  if (renderToolbarInternalActions) {
-    return React.createElement(React.Fragment, null, renderToolbarInternalActions({
-      MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
-      MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
-      MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
-      MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
-      MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
-      tableInstance: tableInstance
-    }));
-  }
-
   return React.createElement(Box, {
     sx: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      zIndex: 3
     }
-  }, enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
+  }, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
+    MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
+    MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
+    MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
+    MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
+    MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
+    tableInstance: tableInstance
+  })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && React.createElement(MRT_SearchTextField, {
+    tableInstance: tableInstance
+  }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
     tableInstance: tableInstance
   }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
     tableInstance: tableInstance
@@ -1520,7 +1532,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     tableInstance: tableInstance
   }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
     tableInstance: tableInstance
-  }));
+  })));
 };
 
 var MRT_TablePagination = function MRT_TablePagination(_ref) {
@@ -1581,44 +1593,36 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
 var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
   var _localization$selecte, _localization$selecte2;
 
-  var tableInstance = _ref.tableInstance;
+  var stackAlertBanner = _ref.stackAlertBanner,
+      tableInstance = _ref.tableInstance;
   var getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
       getSelectedRowModel = tableInstance.getSelectedRowModel,
       getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       localization = _tableInstance$option.localization,
-      muiTableToolbarAlertBannerProps = _tableInstance$option.muiTableToolbarAlertBannerProps,
-      positionToolbarActions = _tableInstance$option.positionToolbarActions,
-      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
-      renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
+      muiTableToolbarAlertBannerProps = _tableInstance$option.muiTableToolbarAlertBannerProps;
 
   var _getState = getState(),
       grouping = _getState.grouping;
 
-  var isMobile = useMediaQuery('(max-width:720px)');
   var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps({
     tableInstance: tableInstance
   }) : muiTableToolbarAlertBannerProps;
   var selectMessage = getSelectedRowModel().rows.length > 0 ? (_localization$selecte = localization.selectedCountOfRowCountRowsSelected) == null ? void 0 : (_localization$selecte2 = _localization$selecte.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) == null ? void 0 : _localization$selecte2.replace('{rowCount}', getPrePaginationRowModel().rows.length.toString()) : null;
   var groupedByMessage = grouping.length > 0 ? React.createElement("span", null, localization.groupedBy, ' ', grouping.map(function (columnId, index) {
-    var _tableInstance$getAll;
-
     return React.createElement(Fragment, {
       key: index + "-" + columnId
     }, index > 0 ? localization.thenBy : '', React.createElement(Chip, {
       color: "secondary",
-      label: (_tableInstance$getAll = tableInstance.getAllColumns().find(function (column) {
-        return column.id === columnId;
-      })) == null ? void 0 : _tableInstance$getAll.header,
+      label: tableInstance.getColumn(columnId).columnDef.header,
       onDelete: function onDelete() {
         return tableInstance.getColumn(columnId).toggleGrouping();
       }
     }));
   })) : null;
-  var displayAbsolute = !(isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
   return React.createElement(Collapse, {
     "in": !!selectMessage || !!groupedByMessage,
-    timeout: displayAbsolute ? 0 : 200
+    timeout: stackAlertBanner ? 200 : 0
   }, React.createElement(Alert, Object.assign({
     color: "info",
     icon: false,
@@ -1627,9 +1631,8 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       fontSize: '1rem',
       left: 0,
       p: 0,
-      position: displayAbsolute ? 'absolute' : 'relative',
+      position: 'relative',
       right: 0,
-      minHeight: '3.5rem',
       top: 0,
       width: '100%',
       zIndex: 2
@@ -1638,7 +1641,7 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
     sx: {
       p: '0.5rem 1rem'
     }
-  }, selectMessage, React.createElement("br", null), groupedByMessage)));
+  }, selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
 };
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
@@ -1669,6 +1672,8 @@ var commonToolbarStyles = function commonToolbarStyles(_ref) {
     backgroundColor: lighten(theme.palette.background["default"], 0.04),
     backgroundImage: 'none',
     display: 'grid',
+    minHeight: '3.5rem',
+    overflow: 'hidden',
     p: '0 !important',
     transition: 'all 0.2s ease-in-out',
     width: '100%',
@@ -1681,7 +1686,6 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var tableInstance = _ref2.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enablePagination = _tableInstance$option.enablePagination,
       enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
       idPrefix = _tableInstance$option.idPrefix,
@@ -1694,9 +1698,11 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
+  var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
     tableInstance: tableInstance
   }) : muiTableToolbarTopProps;
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions;
   return React.createElement(Toolbar, Object.assign({
     id: "mrt-" + idPrefix + "-toolbar-top",
     variant: "dense"
@@ -1710,27 +1716,23 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       }), toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, {
+    stackAlertBanner: stackAlertBanner,
     tableInstance: tableInstance
   }), React.createElement(Box, {
     sx: {
-      p: '0.5rem',
       display: 'flex',
-      justifyContent: 'space-between'
+      justifyContent: 'space-between',
+      p: '0.5rem',
+      position: stackAlertBanner ? 'relative' : 'absolute',
+      right: 0,
+      top: 0,
+      width: 'calc(100% - 1rem)'
     }
   }, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions({
     tableInstance: tableInstance
-  })) != null ? _renderToolbarCustomA : React.createElement("span", null), React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      gap: '0.5rem',
-      position: 'relative',
-      zIndex: 3
-    }
-  }, enableGlobalFilter && React.createElement(MRT_SearchTextField, {
-    tableInstance: tableInstance
-  }), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
+  })) != null ? _renderToolbarCustomA : React.createElement("span", null), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
-  }))), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
+  })), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
   })), React.createElement(MRT_LinearProgressBar, {
     tableInstance: tableInstance
@@ -1747,14 +1749,17 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       muiTableToolbarBottomProps = _tableInstance$option.muiTableToolbarBottomProps,
       positionPagination = _tableInstance$option.positionPagination,
       positionToolbarActions = _tableInstance$option.positionToolbarActions,
-      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner;
+      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
+      renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
+  var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
     tableInstance: tableInstance
   }) : muiTableToolbarBottomProps;
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'bottom' && !!renderToolbarCustomActions && positionToolbarActions === 'bottom';
   return React.createElement(Toolbar, Object.assign({
     id: "mrt-" + idPrefix + "-toolbar-bottom",
     variant: "dense"
@@ -1770,17 +1775,20 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
     }
   }), React.createElement(MRT_LinearProgressBar, {
     tableInstance: tableInstance
+  }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
+    tableInstance: tableInstance
   }), React.createElement(Box, {
     sx: {
       display: 'flex',
       justifyContent: 'space-between',
-      width: '100%'
+      width: '100%',
+      position: stackAlertBanner ? 'relative' : 'absolute',
+      right: 0,
+      top: 0
     }
   }, enableToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
-  }) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
-    tableInstance: tableInstance
-  }), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
+  }) : React.createElement("span", null), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
   })));
 };
@@ -1990,30 +1998,214 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }));
 };
 
-var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
+var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
   var header = _ref.header,
       tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      MoreVertIcon = _tableInstance$option.icons.MoreVertIcon,
-      localization = _tableInstance$option.localization,
-      muiTableHeadCellColumnActionsButtonProps = _tableInstance$option.muiTableHeadCellColumnActionsButtonProps;
-  var column = header.column;
-
-  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,
-    tableInstance: tableInstance
-  }) : muiTableHeadCellColumnActionsButtonProps;
-  var mcTableHeadCellColumnActionsButtonProps = column.muiTableHeadCellColumnActionsButtonProps instanceof Function ? column.muiTableHeadCellColumnActionsButtonProps({
+  var localization = tableInstance.options.localization;
+  return React.createElement(Box, {
+    sx: {
+      display: 'grid',
+      gridTemplateColumns: '6fr auto 5fr'
+    }
+  }, React.createElement(MRT_FilterTextField, {
+    header: header,
+    inputIndex: 0,
+    tableInstance: tableInstance
+  }), React.createElement(Box, {
+    sx: {
+      width: '100%',
+      minWidth: '5ch',
+      textAlign: 'center'
+    }
+  }, localization.to), React.createElement(MRT_FilterTextField, {
+    header: header,
+    inputIndex: 1,
+    tableInstance: tableInstance
+  }));
+};
+
+var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer(_ref) {
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState;
+
+  var _getState = getState(),
+      currentFilterFns = _getState.currentFilterFns,
+      showFilters = _getState.showFilters;
+
+  var column = header.column;
+  return React.createElement(Collapse, {
+    "in": showFilters,
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? React.createElement(MRT_FilterRangeFields, {
+    header: header,
+    tableInstance: tableInstance
+  }) : React.createElement(MRT_FilterTextField, {
+    header: header,
+    tableInstance: tableInstance
+  }));
+};
+
+var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
+  var _getState2, _getState2$currentFil;
+
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      FilterAltIcon = _tableInstance$option2.FilterAltIcon,
+      FilterAltOff = _tableInstance$option2.FilterAltOff,
+      localization = _tableInstance$option.localization,
+      setShowFilters = tableInstance.setShowFilters;
+
+  var _getState = getState(),
+      showFilters = _getState.showFilters;
+
+  var column = header.column;
+  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
+  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,
+    placement: "top",
+    title: filterTooltip
+  }, React.createElement(IconButton, {
+    disableRipple: true,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      setShowFilters(!showFilters);
+    },
+    size: "small",
+    sx: {
+      m: 0,
+      opacity: !!column.getFilterValue() || showFilters ? 0.8 : 0,
+      p: '2px',
+      transition: 'all 0.2s ease-in-out',
+      '&:hover': {
+        backgroundColor: 'transparent',
+        opacity: 0.8
+      }
+    }
+  }, showFilters && !column.getFilterValue() ? React.createElement(FilterAltOff, 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;
+  var getState = tableInstance.getState;
+
+  var _getState = getState(),
+      showFilters = _getState.showFilters;
+
+  var column = header.column;
+  return React.createElement(Divider, {
+    flexItem: true,
+    orientation: "vertical",
+    onDoubleClick: function onDoubleClick() {
+      return column.resetSize();
+    },
+    sx: function sx(theme) {
+      return {
+        borderRadius: '2px',
+        borderRightWidth: '2px',
+        cursor: 'col-resize',
+        height: showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
+        opacity: 0.8,
+        position: 'absolute',
+        right: '1px',
+        touchAction: 'none',
+        transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
+        userSelect: 'none',
+        zIndex: 2000,
+        '&:active': {
+          backgroundColor: theme.palette.info.main,
+          opacity: 1
+        }
+      };
+    },
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler(),
+    style: {
+      transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : 'none'
+    }
+  });
+};
+
+var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
+  var header = _ref.header,
+      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;
+  return React.createElement(Tooltip, {
+    arrow: true,
+    placement: "top",
+    title: sortTooltip
+  }, React.createElement(TableSortLabel, {
+    "aria-label": sortTooltip,
+    active: !!column.getIsSorted(),
+    direction: column.getIsSorted() ? column.getIsSorted() : undefined
+  }));
+};
+
+var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      MoreVertIcon = _tableInstance$option.icons.MoreVertIcon,
+      localization = _tableInstance$option.localization,
+      muiTableHeadCellColumnActionsButtonProps = _tableInstance$option.muiTableHeadCellColumnActionsButtonProps;
+  var column = header.column;
+
+  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,
+    tableInstance: tableInstance
+  }) : muiTableHeadCellColumnActionsButtonProps;
+  var mcTableHeadCellColumnActionsButtonProps = column.muiTableHeadCellColumnActionsButtonProps instanceof Function ? column.muiTableHeadCellColumnActionsButtonProps({
     column: column,
     tableInstance: tableInstance
   }) : column.muiTableHeadCellColumnActionsButtonProps;
@@ -2050,53 +2242,26 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
-var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
-  var header = _ref.header,
-      tableInstance = _ref.tableInstance;
-  var localization = tableInstance.options.localization;
-  return React.createElement(Box, {
-    sx: {
-      display: 'grid',
-      gridTemplateColumns: '6fr auto 5fr'
-    }
-  }, React.createElement(MRT_FilterTextField, {
-    header: header,
-    inputIndex: 0,
-    tableInstance: tableInstance
-  }), React.createElement(Box, {
-    sx: {
-      width: '100%',
-      minWidth: '5ch',
-      textAlign: 'center'
-    }
-  }, localization.to), React.createElement(MRT_FilterTextField, {
-    header: header,
-    inputIndex: 1,
-    tableInstance: tableInstance
-  }));
-};
-
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _getState2, _getState2$currentFil, _column$columnDef$Hea, _column$columnDef, _column$columnDef$hea, _column$columnDef$hea2;
+  var _column$columnDef$Hea, _column$columnDef, _column$minSize, _column$columnDef$hea, _column$columnDef$hea2;
 
-  var header = _ref.header,
+  var dragRef = _ref.dragRef,
+      dropRef = _ref.dropRef,
+      header = _ref.header,
+      isDragging = _ref.isDragging,
+      previewRef = _ref.previewRef,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableColumnActions = _tableInstance$option.enableColumnActions,
       enableColumnFilters = _tableInstance$option.enableColumnFilters,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
       enableColumnResizing = _tableInstance$option.enableColumnResizing,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      FilterAltIcon = _tableInstance$option2.FilterAltIcon,
-      FilterAltOff = _tableInstance$option2.FilterAltOff,
-      localization = _tableInstance$option.localization,
-      muiTableHeadCellProps = _tableInstance$option.muiTableHeadCellProps,
-      setShowFilters = tableInstance.setShowFilters;
+      enableGrouping = _tableInstance$option.enableGrouping,
+      muiTableHeadCellProps = _tableInstance$option.muiTableHeadCellProps;
 
   var _getState = getState(),
-      currentFilterFns = _getState.currentFilterFns,
-      isDensePadding = _getState.isDensePadding,
-      showFilters = _getState.showFilters;
+      isDensePadding = _getState.isDensePadding;
 
   var column = header.column;
   var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps({
@@ -2110,10 +2275,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.columnDef.header) : localization.sortedByColumnAsc.replace('{column}', column.columnDef.header) : localization.unsorted;
-  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
-  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;
   var headerElement = (_column$columnDef$Hea = (_column$columnDef = column.columnDef) == null ? void 0 : _column$columnDef.Header == null ? void 0 : _column$columnDef.Header({
     header: header,
     tableInstance: tableInstance
@@ -2135,6 +2296,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     align: column.columnDefType === 'group' ? 'center' : 'left',
     colSpan: header.colSpan
   }, tableCellProps, {
+    ref: column.columnDefType === 'data' ? dropRef : undefined,
     sx: function sx(theme) {
       return _extends({
         backgroundColor: column.getIsPinned() && column.columnDefType !== 'group' ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
@@ -2143,8 +2305,6 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         fontWeight: 'bold',
         height: '100%',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
-        maxWidth: "min(" + column.getSize() + "px, fit-content)",
-        minWidth: "max(" + column.getSize() + "px, " + column.minSize + "px)",
         overflow: 'visible',
         p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pb: column.columnDefType === 'display' ? 0 : undefined,
@@ -2153,15 +2313,21 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
-        width: header.getSize(),
         zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && column.columnDefType !== 'group' ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
+    },
+    style: {
+      maxWidth: "min(" + column.getSize() + "px, fit-content)",
+      minWidth: "max(" + column.getSize() + "px, " + ((_column$minSize = column.minSize) != null ? _column$minSize : 30) + "px)",
+      width: header.getSize()
     }
   }), header.isPlaceholder ? null : column.columnDefType === 'display' ? headerElement : React.createElement(Box, {
+    ref: previewRef,
     sx: {
       alignItems: 'flex-start',
       display: 'flex',
       justifyContent: column.columnDefType === 'group' ? 'center' : 'space-between',
+      opacity: isDragging ? 0.5 : 1,
       width: '100%'
     }
   }, React.createElement(Box, {
@@ -2175,87 +2341,90 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       flexWrap: 'nowrap',
       whiteSpace: ((_column$columnDef$hea = (_column$columnDef$hea2 = column.columnDef.header) == null ? void 0 : _column$columnDef$hea2.length) != null ? _column$columnDef$hea : 0) < 24 ? 'nowrap' : 'normal'
     }
-  }, headerElement, column.columnDefType === 'data' && column.getCanSort() && React.createElement(Tooltip, {
-    arrow: true,
-    placement: "top",
-    title: sortTooltip
-  }, React.createElement(TableSortLabel, {
-    "aria-label": sortTooltip,
-    active: !!column.getIsSorted(),
-    direction: column.getIsSorted() ? column.getIsSorted() : undefined
-  })), column.columnDefType === 'data' && enableColumnFilters && !!column.getCanFilter() && React.createElement(Tooltip, {
-    arrow: true,
-    placement: "top",
-    title: filterTooltip
-  }, React.createElement(IconButton, {
-    disableRipple: true,
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      setShowFilters(!showFilters);
-    },
-    size: "small",
+  }, headerElement, column.columnDefType === 'data' && column.getCanSort() && React.createElement(MRT_TableHeadCellSortLabel, {
+    header: header,
+    tableInstance: tableInstance
+  }), column.columnDefType === 'data' && enableColumnFilters && column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterLabel, {
+    header: header,
+    tableInstance: tableInstance
+  })), React.createElement(Box, {
     sx: {
-      m: 0,
-      opacity: !!column.getFilterValue() ? 0.8 : 0,
-      p: '2px',
-      transition: 'all 0.2s ease-in-out',
-      '&:hover': {
-        backgroundColor: 'transparent',
-        opacity: 0.8
-      }
+      whiteSpace: 'nowrap'
     }
-  }, showFilters && !column.getFilterValue() ? React.createElement(FilterAltOff, null) : React.createElement(FilterAltIcon, null)))), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
+  }, column.columnDefType === 'data' && (enableColumnOrdering && column.enableColumnOrdering !== false || enableGrouping && column.enableGrouping !== false) && React.createElement(MRT_TableHeadCellGrabHandle, {
     header: header,
+    ref: dragRef,
     tableInstance: tableInstance
-  }), column.getCanResize() && React.createElement(Divider, Object.assign({
-    flexItem: true,
-    orientation: "vertical",
-    onDoubleClick: function onDoubleClick() {
-      return column.resetSize();
-    },
-    sx: function sx(theme) {
-      return {
-        borderRadius: '2px',
-        borderRightWidth: '2px',
-        cursor: 'col-resize',
-        height: showFilters && column.columnDefType === 'data' ? '4rem' : '2rem',
-        opacity: 0.8,
-        position: 'absolute',
-        right: '1px',
-        touchAction: 'none',
-        transition: 'all 0.2s ease-in-out',
-        userSelect: 'none',
-        zIndex: 2000,
-        '&:active': {
-          backgroundColor: theme.palette.info.main,
-          opacity: 1
-        }
-      };
-    }
-  }, {
-    onMouseDown: header.getResizeHandler,
-    onTouchStart: header.getResizeHandler
-  }, {
-    style: {
-      transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : 'none'
-    }
-  }))), column.columnDefType === 'data' && column.getCanFilter() && React.createElement(Collapse, {
-    "in": showFilters,
-    mountOnEnter: true,
-    unmountOnExit: true
-  }, currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? React.createElement(MRT_FilterRangeFields, {
+  }), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
     header: header,
     tableInstance: tableInstance
-  }) : React.createElement(MRT_FilterTextField, {
+  })), column.getCanResize() && React.createElement(MRT_TableHeadCellResizeHandle, {
     header: header,
     tableInstance: tableInstance
-  })));
+  })), column.columnDefType === 'data' && column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterContainer, {
+    header: header,
+    tableInstance: tableInstance
+  }));
+};
+
+var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState;
+
+  _objectDestructuringEmpty(tableInstance.options);
+
+  var setColumnOrder = tableInstance.setColumnOrder;
+
+  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]);
+    setColumnOrder([].concat(columnOrder));
+  };
+
+  var _useDrop = useDrop({
+    accept: 'header',
+    drop: function drop(item) {
+      return reorder(item, header.index);
+    }
+  }),
+      drop = _useDrop[1];
+
+  var _useDrag = useDrag({
+    collect: function collect(monitor) {
+      return {
+        isDragging: monitor.isDragging()
+      };
+    },
+    item: function item() {
+      return header;
+    },
+    type: 'header'
+  }),
+      isDragging = _useDrag[0].isDragging,
+      drag = _useDrag[1],
+      preview = _useDrag[2];
+
+  return React.createElement(MRT_TableHeadCell, {
+    dragRef: drag,
+    dropRef: drop,
+    header: header,
+    isDragging: isDragging,
+    previewRef: preview,
+    tableInstance: tableInstance
+  });
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var headerGroup = _ref.headerGroup,
       tableInstance = _ref.tableInstance;
-  var muiTableHeadRowProps = tableInstance.options.muiTableHeadRowProps;
+  var _tableInstance$option = tableInstance.options,
+      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
+      enableGrouping = _tableInstance$option.enableGrouping,
+      muiTableHeadRowProps = _tableInstance$option.muiTableHeadRowProps;
   var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
     headerGroup: headerGroup,
     tableInstance: tableInstance
@@ -2268,7 +2437,11 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
       }, tableRowProps == null ? void 0 : tableRowProps.sx);
     }
   }), headerGroup.headers.map(function (header, index) {
-    return React.createElement(MRT_TableHeadCell, {
+    return enableColumnOrdering || enableGrouping ? React.createElement(MRT_DraggableTableHeadCell, {
+      header: header,
+      key: header.id || index,
+      tableInstance: tableInstance
+    }) : React.createElement(MRT_TableHeadCell, {
       header: header,
       key: header.id || index,
       tableInstance: tableInstance
@@ -2419,7 +2592,9 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
     onClick: function onClick() {
       return handleCopy(cell.getValue());
     },
-    size: "small"
+    size: "small",
+    type: "button",
+    variant: "text"
   }, buttonProps, {
     sx: _extends({
       backgroundColor: 'transparent',
@@ -2433,13 +2608,12 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
       minWidth: 'unset',
       textAlign: 'inherit',
       textTransform: 'inherit'
-    }, buttonProps == null ? void 0 : buttonProps.sx),
-    variant: "text"
+    }, buttonProps == null ? void 0 : buttonProps.sx)
   }), children));
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _cell$column$columnDe, _cell$column$columnDe2, _row$subRows, _cell$column$columnDe3, _cell$column$columnDe4, _row$subRows$length, _row$subRows2;
+  var _column$minSize, _cell$column$columnDe, _cell$column$columnDe2, _row$subRows, _cell$column$columnDe3, _cell$column$columnDe4, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
@@ -2523,20 +2697,22 @@ 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,
-        maxWidth: "min(" + column.getSize() + "px, fit-content)",
-        minWidth: "max" + column.getSize() + "px, " + column.minSize + "px",
         p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.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,
         transition: 'all 0.2s ease-in-out',
         whiteSpace: isDensePadding ? 'nowrap' : 'normal',
-        width: column.getSize(),
         zIndex: column.getIsPinned() ? 1 : undefined,
         '&:hover': {
           backgroundColor: enableHover ? theme.palette.mode === 'dark' ? lighten(theme.palette.background["default"], 0.13) + " !important" : darken(theme.palette.background["default"], 0.07) + " !important" : undefined
         }
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
+    },
+    style: {
+      maxWidth: "min(" + column.getSize() + "px, fit-content)",
+      minWidth: "max(" + column.getSize() + "px, " + ((_column$minSize = column.minSize) != null ? _column$minSize : 30) + "px)",
+      width: column.getSize()
     }
   }), React.createElement(React.Fragment, null, isLoading || showSkeletons ? React.createElement(Skeleton, Object.assign({
     animation: "wave",
@@ -2666,7 +2842,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _ref2, _column$columnDef$Foo;
+  var _ref2, _ref3, _column$columnDef$Foo;
 
   var footer = _ref.footer,
       tableInstance = _ref.tableInstance;
@@ -2708,10 +2884,10 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_column$columnDef$Foo = column.columnDef.Footer == null ? void 0 : column.columnDef.Footer({
+  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = (_column$columnDef$Foo = column.columnDef.Footer == null ? void 0 : column.columnDef.Footer({
     footer: footer,
     tableInstance: tableInstance
-  })) != null ? _column$columnDef$Foo : footer.renderFooter()) != null ? _ref2 : null));
+  })) != null ? _column$columnDef$Foo : column.columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
@@ -2839,7 +3015,9 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps({
     tableInstance: tableInstance
   }) : muiTablePaperProps;
-  return React.createElement(Paper, Object.assign({
+  return React.createElement(DndProvider, {
+    backend: HTML5Backend
+  }, React.createElement(Paper, Object.assign({
     elevation: 2
   }, tablePaperProps, {
     sx: _extends({
@@ -2859,7 +3037,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
     tableInstance: tableInstance
   }), enableToolbarBottom && React.createElement(MRT_ToolbarBottom, {
     tableInstance: tableInstance
-  }));
+  })));
 };
 
 var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
@@ -3074,7 +3252,18 @@ 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]); //@ts-ignore
+  }, [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
+
 
   var tableInstance = _extends({}, useTableInstance(table, _extends({
     filterFns: defaultFilterFNs,
@@ -3090,6 +3279,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     },
     //@ts-ignore
     globalFilterFn: currentGlobalFilterFn,
+    onColumnOrderChange: setColumnOrder,
     onPaginationChange: function onPaginationChange(updater) {
       return setPagination(function (old) {
         return functionalUpdate(updater, old);
@@ -3102,6 +3292,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     idPrefix: idPrefix,
     initialState: initialState,
     state: _extends({
+      columnOrder: columnOrder,
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
@@ -3164,18 +3355,26 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
       _ref$columnResizeMode = _ref.columnResizeMode,
       columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
+      _ref$defaultColumn = _ref.defaultColumn,
+      defaultColumn = _ref$defaultColumn === void 0 ? {
+    minSize: 50,
+    maxSize: 1000,
+    size: 150
+  } : _ref$defaultColumn,
       _ref$editingMode = _ref.editingMode,
       editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
       _ref$enableColumnActi = _ref.enableColumnActions,
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
       _ref$enableColumnFilt = _ref.enableColumnFilters,
       enableColumnFilters = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableColumnOrde = _ref.enableColumnOrdering,
+      enableColumnOrdering = _ref$enableColumnOrde === void 0 ? false : _ref$enableColumnOrde,
       _ref$enableColumnResi = _ref.enableColumnResizing,
       enableColumnResizing = _ref$enableColumnResi === void 0 ? false : _ref$enableColumnResi,
       _ref$enableDensePaddi = _ref.enableDensePaddingToggle,
@@ -3188,6 +3387,8 @@ var MaterialReactTable = (function (_ref) {
       enableFullScreenToggle = _ref$enableFullScreen === void 0 ? true : _ref$enableFullScreen,
       _ref$enableGlobalFilt = _ref.enableGlobalFilter,
       enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
+      _ref$enableGrouping = _ref.enableGrouping,
+      enableGrouping = _ref$enableGrouping === void 0 ? false : _ref$enableGrouping,
       _ref$enableHiding = _ref.enableHiding,
       enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
       _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
@@ -3229,15 +3430,18 @@ var MaterialReactTable = (function (_ref) {
   return React.createElement(MRT_TableRoot, Object.assign({
     autoResetExpanded: autoResetExpanded,
     columnResizeMode: columnResizeMode,
+    defaultColumn: defaultColumn,
     editingMode: editingMode,
     enableColumnActions: enableColumnActions,
     enableColumnFilters: enableColumnFilters,
+    enableColumnOrdering: enableColumnOrdering,
     enableColumnResizing: enableColumnResizing,
     enableDensePaddingToggle: enableDensePaddingToggle,
     enableExpandAll: enableExpandAll,
     enableFilters: enableFilters,
     enableFullScreenToggle: enableFullScreenToggle,
     enableGlobalFilter: enableGlobalFilter,
+    enableGrouping: enableGrouping,
     enableHiding: enableHiding,
     enableMultiRowSelection: enableMultiRowSelection,
     enablePagination: enablePagination,