material-react-table 0.8.0-alpha.1 → 0.8.1

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 { IconButton, Menu, MenuItem, Box, Tooltip, 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,20 +173,25 @@ 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(),
-      isDensePadding = _getState.isDensePadding,
-      isLoading = _getState.isLoading;
+      isDensePadding = _getState.isDensePadding;
 
-  return React.createElement(IconButton, {
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.expandAll
+  }, React.createElement(IconButton, {
     "aria-label": localization.expandAll,
-    disabled: isLoading,
-    title: localization.expandAll,
+    disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
     onClick: function onClick() {
       return toggleAllRowsExpanded(!getIsAllRowsExpanded());
     },
@@ -190,7 +204,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  }));
+  })));
 };
 
 var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
@@ -215,10 +229,14 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     });
   };
 
-  return React.createElement(IconButton, {
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.expand
+  }, React.createElement(IconButton, {
     "aria-label": localization.expand,
     disabled: !row.getCanExpand() && !renderDetailPanel,
-    title: localization.expand,
     onClick: handleToggleExpand,
     sx: {
       height: isDensePadding ? '1.75rem' : '2.25rem',
@@ -229,7 +247,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  }));
+  })));
 };
 
 var MRT_FILTER_OPTION;
@@ -599,7 +617,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     checked: switchChecked,
     control: React.createElement(Switch, null),
     disabled: isSubMenu && switchChecked || !column.getCanHide(),
-    label: column.header,
+    label: column.columnDef.header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
     }
@@ -853,7 +871,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.columnDef.header)))), React.createElement(MenuItem, {
     divider: enableColumnFilters || enableGrouping || enableHiding,
     key: 2,
     disabled: column.getIsSorted() === 'desc',
@@ -865,7 +883,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.header))))], enableColumnFilters && column.getCanFilter() && [React.createElement(MenuItem, {
+  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.columnDef.header))))], enableColumnFilters && column.getCanFilter() && [React.createElement(MenuItem, {
     disabled: !column.getFilterValue(),
     key: 0,
     onClick: handleClearFilter,
@@ -879,7 +897,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.header))), !column.filterSelectOptions && React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.columnDef.header))), !column.filterSelectOptions && React.createElement(IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
@@ -900,7 +918,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.columnDef.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
     disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
@@ -950,7 +968,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.columnDef.header)))), React.createElement(MenuItem, {
     disabled: !Object.values(columnVisibility).filter(function (visible) {
       return !visible;
     }).length,
@@ -959,7 +977,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.header))), React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.columnDef.header))), React.createElement(IconButton, {
     onClick: handleOpenShowHideColumnsMenu,
     onMouseEnter: handleOpenShowHideColumnsMenu,
     size: "small",
@@ -1153,8 +1171,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       onSelectAllChange = _tableInstance$option.onSelectAllChange;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
-      isLoading = _getState.isLoading;
+      isDensePadding = _getState.isDensePadding;
 
   var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
@@ -1189,7 +1206,6 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
   }, React.createElement(Checkbox, Object.assign({
     checked: selectAll ? tableInstance.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
-    disabled: isLoading,
     indeterminate: selectAll ? tableInstance.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
     inputProps: {
       'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
@@ -1204,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,
@@ -1479,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,
@@ -1489,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
@@ -1516,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) {
@@ -1577,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,
@@ -1623,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
@@ -1634,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) {
@@ -1665,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%',
@@ -1677,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,
@@ -1690,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"
@@ -1706,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
@@ -1743,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"
@@ -1766,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
   })));
 };
@@ -1874,7 +1886,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   var isSelectFilter = !!column.filterSelectOptions;
   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(column.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
+  var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -1986,12 +1998,196 @@ 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,
+  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;
 
@@ -2046,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$Header;
+  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({
@@ -2106,14 +2275,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.header) : localization.sortedByColumnAsc.replace('{column}', column.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.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$Header = column == null ? void 0 : column.Header == null ? void 0 : column.Header({
+  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
-  })) != null ? _column$Header : column.header;
+  })) != null ? _column$columnDef$Hea : header.renderHeader();
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
     return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
@@ -2127,10 +2292,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     return (tableInstance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
+  console.log(column.getCanGroup());
   return React.createElement(TableCell, Object.assign({
     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',
@@ -2139,8 +2306,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,
@@ -2149,15 +2314,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, {
@@ -2169,89 +2340,92 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       cursor: column.getCanSort() && column.columnDefType !== 'group' ? 'pointer' : undefined,
       display: 'flex',
       flexWrap: 'nowrap',
-      whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal'
+      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
@@ -2264,7 +2438,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
@@ -2367,7 +2545,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    placeholder: column.header,
+    placeholder: column.columnDef.header,
     value: value,
     variant: "standard"
   }, textFieldProps));
@@ -2415,7 +2593,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',
@@ -2429,13 +2609,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$Cell, _cell$column, _row$subRows, _cell$column$Cell2, _cell$column2, _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,
@@ -2519,26 +2698,28 @@ 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",
     height: 20,
     width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.Cell == null ? void 0 : column.Cell({
+  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.columnDef.Cell == null ? void 0 : column.columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
   }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React.createElement(MRT_EditCellTextField, {
@@ -2547,13 +2728,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
     cell: cell,
     tableInstance: tableInstance
-  }, React.createElement(React.Fragment, null, (_cell$column$Cell = (_cell$column = cell.column) == null ? void 0 : _cell$column.Cell == null ? void 0 : _cell$column.Cell({
+  }, 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({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$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, (_cell$column$Cell2 = (_cell$column2 = cell.column) == null ? void 0 : _cell$column2.Cell == null ? void 0 : _cell$column2.Cell({
+  })) != 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({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$Cell2 : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length, ")"))));
+  })) != 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 : '', ")"))));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
@@ -2662,7 +2843,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _ref2, _column$Footer;
+  var _ref2, _ref3, _column$columnDef$Foo;
 
   var footer = _ref.footer,
       tableInstance = _ref.tableInstance;
@@ -2704,10 +2885,10 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }), footer.isPlaceholder ? null : (_ref2 = (_column$Footer = column.Footer == null ? void 0 : column.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$Footer : column.footer) != null ? _ref2 : null);
+  })) != null ? _column$columnDef$Foo : column.columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
@@ -2718,7 +2899,7 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
   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.footer === 'string' && !!h.column.footer || h.column.Footer;
+    return typeof h.column.columnDef.footer === 'string' && !!h.column.columnDef.footer || h.column.columnDef.Footer;
   }))) return null;
   var tableRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps({
     footerGroup: footerGroup,
@@ -2835,7 +3016,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({
@@ -2855,7 +3038,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
     tableInstance: tableInstance
   }), enableToolbarBottom && React.createElement(MRT_ToolbarBottom, {
     tableInstance: tableInstance
-  }));
+  })));
 };
 
 var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
@@ -3070,30 +3253,34 @@ 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,
-    //@ts-ignore
     getCoreRowModel: getCoreRowModel(),
-    //@ts-ignore
     getExpandedRowModel: getExpandedRowModel(),
-    //@ts-ignore
     getFacetedRowModel: getFacetedRowModel(),
-    //@ts-ignore
     getFilteredRowModel: getFilteredRowModel(),
-    //@ts-ignore
     getGroupedRowModel: getGroupedRowModel(),
-    //@ts-ignore
     getPaginationRowModel: getPaginationRowModel(),
-    //@ts-ignore
     getSortedRowModel: getSortedRowModel(),
-    //@ts-ignore
     getSubRows: function getSubRows(row) {
       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);
@@ -3106,6 +3293,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     idPrefix: idPrefix,
     initialState: initialState,
     state: _extends({
+      columnOrder: columnOrder,
       currentEditingCell: currentEditingCell,
       currentEditingRow: currentEditingRow,
       currentFilterFns: currentFilterFns,
@@ -3168,18 +3356,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,
@@ -3192,6 +3388,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,
@@ -3233,15 +3431,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,