material-react-table 0.7.0-alpha.9 → 0.7.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, useEffect } from 'react';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
@@ -20,14 +20,15 @@ import FullscreenIcon from '@mui/icons-material/Fullscreen';
 import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
 import MoreVertIcon from '@mui/icons-material/MoreVert';
 import PushPinIcon from '@mui/icons-material/PushPin';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
 import SaveIcon from '@mui/icons-material/Save';
 import SearchIcon from '@mui/icons-material/Search';
 import SearchOffIcon from '@mui/icons-material/SearchOff';
 import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import { createTable, useTable, columnFilterRowsFn, expandRowsFn, globalFilterRowsFn, groupRowsFn, functionalUpdate, paginateRowsFn, sortRowsFn } from '@tanstack/react-table';
-import { IconButton, Menu, MenuItem, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, Tooltip, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, alpha, TableCell, TableSortLabel, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper } from '@mui/material';
+import { createTable, useTableInstance, getColumnFilteredRowModelSync, getCoreRowModelSync, getExpandedRowModel, getGlobalFilteredRowModelSync, getGroupedRowModelSync, getPaginationRowModel, getSortedRowModelSync, functionalUpdate } from '@tanstack/react-table';
+import { IconButton, Menu, MenuItem, FormControlLabel, Switch, Box, Button, Divider, ListItemIcon, Tooltip, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, alpha, TableCell, TableSortLabel, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
 import { matchSorter } from 'match-sorter';
 
 function _extends() {
@@ -97,6 +98,7 @@ var MRT_DefaultLocalization_EN = {
   hideColumn: 'Hide {column} column',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
+  resetColumnSize: 'Reset column size',
   rowActions: 'Row Actions',
   rowNumber: '#',
   rowNumbers: 'Row Numbers',
@@ -111,13 +113,16 @@ var MRT_DefaultLocalization_EN = {
   showHideSearch: 'Show/Hide search',
   sortByColumnAsc: 'Sort by {column} ascending',
   sortByColumnDesc: 'Sort by {column} descending',
+  sortedByColumnAsc: 'Sorted by {column} ascending',
+  sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
   toggleDensePadding: 'Toggle dense padding',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
   toggleSelectRow: 'Toggle select row',
   ungroupByColumn: 'Ungroup by {column}',
-  unpin: 'Unpin'
+  unpin: 'Unpin',
+  unsorted: 'Unsorted'
 };
 
 var MRT_Default_Icons = {
@@ -142,6 +147,7 @@ var MRT_Default_Icons = {
   MoreHorizIcon: MoreHorizIcon,
   MoreVertIcon: MoreVertIcon,
   PushPinIcon: PushPinIcon,
+  RestartAltIcon: RestartAltIcon,
   SaveIcon: SaveIcon,
   SearchIcon: SearchIcon,
   SearchOffIcon: SearchOffIcon,
@@ -384,8 +390,8 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       _tableInstance$option = tableInstance.options,
       enabledGlobalFilterTypes = _tableInstance$option.enabledGlobalFilterTypes,
       localization = _tableInstance$option.localization,
-      setCurrentFilterTypes = _tableInstance$option.setCurrentFilterTypes,
-      setCurrentGlobalFilterType = _tableInstance$option.setCurrentGlobalFilterType;
+      setCurrentFilterTypes = tableInstance.setCurrentFilterTypes,
+      setCurrentGlobalFilterType = tableInstance.setCurrentGlobalFilterType;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding,
@@ -449,7 +455,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       divider: false,
       fn: notEmpty
     }].filter(function (filterType) {
-      return header ? !header.column.enabledFilterTypes || header.column.enabledFilterTypes.includes(filterType.type) : (!enabledGlobalFilterTypes || enabledGlobalFilterTypes.includes(filterType.type)) && [MRT_FILTER_TYPE.BEST_MATCH_FIRST, MRT_FILTER_TYPE.BEST_MATCH].includes(filterType.type);
+      return header ? !header.column.enabledColumnFilterTypes || header.column.enabledColumnFilterTypes.includes(filterType.type) : (!enabledGlobalFilterTypes || enabledGlobalFilterTypes.includes(filterType.type)) && [MRT_FILTER_TYPE.BEST_MATCH_FIRST, MRT_FILTER_TYPE.BEST_MATCH].includes(filterType.type);
     });
   }, []);
 
@@ -511,7 +517,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       isSubMenu = _ref.isSubMenu,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
-      onColumnHide = tableInstance.options.onColumnHide;
+      onToggleColumnVisibility = tableInstance.options.onToggleColumnVisibility;
 
   var _getState = getState(),
       columnVisibility = _getState.columnVisibility;
@@ -531,7 +537,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       column.toggleVisibility();
     }
 
-    onColumnHide == null ? void 0 : onColumnHide({
+    onToggleColumnVisibility == null ? void 0 : onToggleColumnVisibility({
       column: column,
       columnVisibility: columnVisibility,
       tableInstance: tableInstance
@@ -672,9 +678,10 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       setColumnOrder = tableInstance.setColumnOrder,
       _tableInstance$option = tableInstance.options,
       enableColumnFilters = _tableInstance$option.enableColumnFilters,
-      enableColumnPinning = _tableInstance$option.enableColumnPinning,
+      enableColumnResizing = _tableInstance$option.enableColumnResizing,
       enableGrouping = _tableInstance$option.enableGrouping,
       enableHiding = _tableInstance$option.enableHiding,
+      enablePinning = _tableInstance$option.enablePinning,
       enableSorting = _tableInstance$option.enableSorting,
       _tableInstance$option2 = _tableInstance$option.icons,
       ArrowRightIcon = _tableInstance$option2.ArrowRightIcon,
@@ -685,15 +692,17 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
       PushPinIcon = _tableInstance$option2.PushPinIcon,
       SortIcon = _tableInstance$option2.SortIcon,
+      RestartAltIcon = _tableInstance$option2.RestartAltIcon,
       VisibilityOffIcon = _tableInstance$option2.VisibilityOffIcon,
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
-      setShowFilters = _tableInstance$option.setShowFilters;
+      setShowFilters = tableInstance.setShowFilters;
   var column = header.column;
 
   var _getState = getState(),
-      isDensePadding = _getState.isDensePadding,
-      columnVisibility = _getState.columnVisibility;
+      columnSizing = _getState.columnSizing,
+      columnVisibility = _getState.columnVisibility,
+      isDensePadding = _getState.isDensePadding;
 
   var _useState = useState(null),
       filterMenuAnchorEl = _useState[0],
@@ -718,6 +727,11 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setAnchorEl(null);
   };
 
+  var handleResetColumnSize = function handleResetColumnSize() {
+    column.resetSize();
+    setAnchorEl(null);
+  };
+
   var handleHideColumn = function handleHideColumn() {
     column.toggleVisibility(false);
     setAnchorEl(null);
@@ -830,14 +844,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setAnchorEl: setFilterMenuAnchorEl,
     tableInstance: tableInstance
   })], enableGrouping && column.getCanGroup() && [React.createElement(MenuItem, {
-    divider: enableColumnPinning,
+    divider: enablePinning,
     key: 0,
     onClick: handleGroupByColumn,
     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))))], enableColumnPinning && column.getCanPin() && [React.createElement(MenuItem, {
-    disabled: column.getIsPinned() === 'left',
+  }, 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, {
+    disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
       return handlePinColumn('left');
@@ -850,7 +864,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       transform: 'rotate(90deg)'
     }
   })), localization.pinToLeft)), React.createElement(MenuItem, {
-    disabled: column.getIsPinned() === 'right',
+    disabled: column.getIsPinned() === 'right' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
       return handlePinColumn('right');
@@ -872,7 +886,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, null)), localization.unpin))], enableHiding && [React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && [React.createElement(MenuItem, {
+    disabled: !column.getCanResize() || !columnSizing[column.id],
+    key: 0,
+    onClick: handleResetColumnSize,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(ListItemIcon, null, React.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React.createElement(MenuItem, {
     disabled: column.enableHiding === false,
     key: 0,
     onClick: handleHideColumn,
@@ -953,7 +974,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
       SaveIcon = _tableInstance$option2.SaveIcon,
       localization = _tableInstance$option.localization,
       onEditSubmit = _tableInstance$option.onEditSubmit,
-      setCurrentEditingRow = _tableInstance$option.setCurrentEditingRow;
+      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
   var _getState = getState(),
       currentEditingRow = _getState.currentEditingRow;
@@ -1016,7 +1037,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
       localization = _tableInstance$option.localization,
       renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems,
       renderRowActions = _tableInstance$option.renderRowActions,
-      setCurrentEditingRow = _tableInstance$option.setCurrentEditingRow;
+      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
   var _getState = getState(),
       currentEditingRow = _getState.currentEditingRow;
@@ -1152,11 +1173,11 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
       muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onGlobalFilterChange = _tableInstance$option.onGlobalFilterChange;
+      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
-      showSearch = _getState.showSearch;
+      showGlobalFilter = _getState.showGlobalFilter;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -1170,7 +1191,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     var _event$target$value;
 
     setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalFilterChange == null ? void 0 : onGlobalFilterChange({
+    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
       event: event,
       tableInstance: tableInstance
     });
@@ -1189,7 +1210,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     tableInstance: tableInstance
   }) : muiSearchTextFieldProps;
   return React.createElement(Collapse, {
-    "in": showSearch,
+    "in": showGlobalFilter,
     orientation: "horizontal"
   }, React.createElement(TextField, Object.assign({
     id: "mrt-" + idPrefix + "-search-text-field",
@@ -1214,9 +1235,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React.createElement(SearchIcon, {
-        fontSize: "small"
-      }))))),
+      }, React.createElement(SearchIcon, null))))),
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(IconButton, {
@@ -1225,9 +1244,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
         onClick: handleClear,
         size: "small",
         title: localization.clearSearch
-      }, React.createElement(CloseIcon, {
-        fontSize: "small"
-      })))
+      }, React.createElement(CloseIcon, null)))
     }
   }, textFieldProps, {
     sx: _extends({
@@ -1251,20 +1268,27 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
       FullscreenExitIcon = _tableInstance$option2.FullscreenExitIcon,
       FullscreenIcon = _tableInstance$option2.FullscreenIcon,
       localization = _tableInstance$option.localization,
-      setIsFullScreen = _tableInstance$option.setIsFullScreen;
+      onToggleFullScreen = _tableInstance$option.onToggleFullScreen,
+      setIsFullScreen = tableInstance.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
+  var handleToggleFullScreen = function handleToggleFullScreen(event) {
+    onToggleFullScreen == null ? void 0 : onToggleFullScreen({
+      event: event,
+      isFullScreen: !isFullScreen,
+      tableInstance: tableInstance
+    });
+    setIsFullScreen(!isFullScreen);
+  };
+
   return React.createElement(Tooltip, {
     arrow: true,
     title: localization.toggleFullScreen
   }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.showHideFilters,
-    onClick: function onClick() {
-      return setIsFullScreen(!isFullScreen);
-    },
-    size: "small"
+    onClick: handleToggleFullScreen
   }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
 };
 
@@ -1290,8 +1314,7 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
     title: localization.showHideColumns
   }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.showHideColumns,
-    onClick: handleClick,
-    size: "small"
+    onClick: handleClick
   }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
     anchorEl: anchorEl,
     setAnchorEl: setAnchorEl,
@@ -1310,20 +1333,27 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
       DensityMediumIcon = _tableInstance$option2.DensityMediumIcon,
       DensitySmallIcon = _tableInstance$option2.DensitySmallIcon,
       localization = _tableInstance$option.localization,
-      setIsDensePadding = _tableInstance$option.setIsDensePadding;
+      onToggleDensePadding = _tableInstance$option.onToggleDensePadding,
+      setIsDensePadding = tableInstance.setIsDensePadding;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
 
+  var handleToggleDensePadding = function handleToggleDensePadding(event) {
+    onToggleDensePadding == null ? void 0 : onToggleDensePadding({
+      event: event,
+      isDensePadding: !isDensePadding,
+      tableInstance: tableInstance
+    });
+    setIsDensePadding(!isDensePadding);
+  };
+
   return React.createElement(Tooltip, {
     arrow: true,
     title: localization.toggleDensePadding
   }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.toggleDensePadding,
-    onClick: function onClick() {
-      return setIsDensePadding(!isDensePadding);
-    },
-    size: "small"
+    onClick: handleToggleDensePadding
   }, rest), isDensePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
 };
 
@@ -1338,25 +1368,32 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
       FilterListIcon = _tableInstance$option2.FilterListIcon,
       FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
       localization = _tableInstance$option.localization,
-      setShowFilters = _tableInstance$option.setShowFilters;
+      onToggleShowFilters = _tableInstance$option.onToggleShowFilters,
+      setShowFilters = tableInstance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
 
+  var handleToggleShowFilters = function handleToggleShowFilters(event) {
+    onToggleShowFilters == null ? void 0 : onToggleShowFilters({
+      event: event,
+      showFilters: !showFilters,
+      tableInstance: tableInstance
+    });
+    setShowFilters(!showFilters);
+  };
+
   return React.createElement(Tooltip, {
     arrow: true,
     title: localization.showHideFilters
   }, React.createElement(IconButton, Object.assign({
     "aria-label": localization.showHideFilters,
-    onClick: function onClick() {
-      return setShowFilters(!showFilters);
-    },
-    size: "small"
+    onClick: handleToggleShowFilters
   }, rest), showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
 };
 
 var _excluded$4 = ["tableInstance"];
-var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
+var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   var tableInstance = _ref.tableInstance,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
@@ -1368,17 +1405,23 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
       muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      setShowSearch = _tableInstance$option.setShowSearch;
+      onToggleShowGlobalFilter = _tableInstance$option.onToggleShowGlobalFilter,
+      setShowGlobalFilter = tableInstance.setShowGlobalFilter;
 
   var _getState = getState(),
-      showSearch = _getState.showSearch;
+      showGlobalFilter = _getState.showGlobalFilter;
 
   var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
     tableInstance: tableInstance
   }) : muiSearchTextFieldProps;
 
-  var handleToggleSearch = function handleToggleSearch() {
-    setShowSearch(!showSearch);
+  var handleToggleSearch = function handleToggleSearch(event) {
+    onToggleShowGlobalFilter == null ? void 0 : onToggleShowGlobalFilter({
+      event: event,
+      showGlobalFilter: !showGlobalFilter,
+      tableInstance: tableInstance
+    });
+    setShowGlobalFilter(!showGlobalFilter);
     setTimeout(function () {
       var _document$getElementB, _textFieldProps$id;
 
@@ -1390,19 +1433,19 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
     arrow: true,
     title: localization.showHideSearch
   }, React.createElement(IconButton, Object.assign({
-    size: "small",
     onClick: handleToggleSearch
-  }, rest), showSearch ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
+  }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
 };
 
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   var tableInstance = _ref.tableInstance;
   var _tableInstance$option = tableInstance.options,
       enableColumnFilters = _tableInstance$option.enableColumnFilters,
-      enableHiding = _tableInstance$option.enableHiding,
       enableDensePaddingToggle = _tableInstance$option.enableDensePaddingToggle,
-      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
+      enableFilters = _tableInstance$option.enableFilters,
       enableFullScreenToggle = _tableInstance$option.enableFullScreenToggle,
+      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
+      enableHiding = _tableInstance$option.enableHiding,
       renderToolbarInternalActions = _tableInstance$option.renderToolbarInternalActions;
 
   if (renderToolbarInternalActions) {
@@ -1411,7 +1454,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
       MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
       MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
-      MRT_ToggleSearchButton: MRT_ToggleSearchButton,
+      MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
       tableInstance: tableInstance
     }));
   }
@@ -1419,13 +1462,11 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   return React.createElement(Box, {
     sx: {
       display: 'flex',
-      gap: '0.5rem',
-      alignItems: 'center',
-      p: '0 0.5rem'
+      alignItems: 'center'
     }
-  }, enableGlobalFilter && React.createElement(MRT_ToggleSearchButton, {
+  }, enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
     tableInstance: tableInstance
-  }), enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
+  }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
     tableInstance: tableInstance
   }), enableHiding && React.createElement(MRT_ShowHideColumnsButton, {
     tableInstance: tableInstance
@@ -1592,7 +1633,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       _tableInstance$option = tableInstance.options,
       enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enablePagination = _tableInstance$option.enablePagination,
-      hideToolbarInternalActions = _tableInstance$option.hideToolbarInternalActions,
+      enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
       idPrefix = _tableInstance$option.idPrefix,
       muiTableToolbarTopProps = _tableInstance$option.muiTableToolbarTopProps,
       positionPagination = _tableInstance$option.positionPagination,
@@ -1637,7 +1678,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
     }
   }, enableGlobalFilter && React.createElement(MRT_SearchTextField, {
     tableInstance: tableInstance
-  }), !hideToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
+  }), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
   }))), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
@@ -1650,7 +1691,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
   var tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      hideToolbarInternalActions = _tableInstance$option.hideToolbarInternalActions,
+      enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
       idPrefix = _tableInstance$option.idPrefix,
       enablePagination = _tableInstance$option.enablePagination,
       muiTableToolbarBottomProps = _tableInstance$option.muiTableToolbarBottomProps,
@@ -1685,7 +1726,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       justifyContent: 'space-between',
       width: '100%'
     }
-  }, !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, {
+  }, enableToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
   }) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
     tableInstance: tableInstance
@@ -1707,7 +1748,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       idPrefix = _tableInstance$option.idPrefix,
       localization = _tableInstance$option.localization,
       muiTableHeadCellFilterTextFieldProps = _tableInstance$option.muiTableHeadCellFilterTextFieldProps,
-      setCurrentFilterTypes = _tableInstance$option.setCurrentFilterTypes;
+      setCurrentFilterTypes = tableInstance.setCurrentFilterTypes;
   var column = header.column;
 
   var _getState = getState(),
@@ -1839,9 +1880,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React.createElement(CloseIcon, {
-        fontSize: "small"
-      })))))
+      }, React.createElement(CloseIcon, null)))))
     }
   }, textFieldProps, {
     sx: _extends({
@@ -1957,7 +1996,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       FilterAltOff = _tableInstance$option2.FilterAltOff,
       localization = _tableInstance$option.localization,
       muiTableHeadCellProps = _tableInstance$option.muiTableHeadCellProps,
-      setShowFilters = _tableInstance$option.setShowFilters;
+      setShowFilters = tableInstance.setShowFilters;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding,
@@ -1975,7 +2014,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
 
   var tableCellProps = _extends({}, header.getHeaderProps(), mTableHeadCellProps, mcTableHeadCellProps);
 
-  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.clearSort : localization.sortByColumnDesc.replace('{column}', column.header) : localization.sortByColumnAsc.replace('{column}', column.header);
+  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.header) : localization.sortedByColumnAsc.replace('{column}', column.header) : localization.unsorted;
   var filterType = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterTypes) == null ? void 0 : _getState2$currentFil[header.id];
   var filterTooltip = !!column.getColumnFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.header)).replace('{filterType}', filterType instanceof Function ? '' : // @ts-ignore
   localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]).replace('{filterValue}', column.getColumnFilterValue()).replace('" "', '') : localization.showHideFilters;
@@ -1991,16 +2030,18 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       return _extends({
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
-        boxShadow: "3px 0 6px " + alpha(theme.palette.common.black, 0.1),
         fontWeight: 'bold',
         height: '100%',
-        minWidth: "max(" + header.getWidth() + ", 100px)",
+        maxWidth: "min(" + column.getWidth() + "px, " + column.maxWidth + "px)",
+        minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
         p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
         pt: column.columnDefType === 'display' ? 0 : isDensePadding ? '0.75rem' : '1.25rem',
         pb: column.columnDefType === 'display' ? 0 : undefined,
+        overflow: 'visible',
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
-        width: header.getWidth()
+        width: header.getWidth(),
+        zIndex: column.getIsResizing() ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
   }), header.isPlaceholder ? null : column.columnDefType === 'display' ? headerElement : React.createElement(Box, {
@@ -2010,16 +2051,18 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       justifyContent: column.columnDefType === 'group' ? 'center' : 'space-between',
       width: '100%'
     }
-  }, React.createElement(Box, Object.assign({}, column.getToggleSortingProps(), {
+  }, React.createElement(Box, {
+    onClick: function onClick() {
+      return column.toggleSorting();
+    },
     sx: {
       alignItems: 'center',
       cursor: column.getCanSort() && column.columnDefType !== 'group' ? 'pointer' : undefined,
       display: 'flex',
       flexWrap: 'nowrap',
-      whiteSpace: column.header.length < 15 ? 'nowrap' : 'normal'
-    },
-    title: undefined
-  }), headerElement, column.columnDefType !== 'group' && column.getCanSort() && React.createElement(Tooltip, {
+      whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal'
+    }
+  }, headerElement, column.columnDefType === 'data' && column.getCanSort() && React.createElement(Tooltip, {
     arrow: true,
     placement: "top",
     title: sortTooltip
@@ -2027,7 +2070,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     "aria-label": sortTooltip,
     active: !!column.getIsSorted(),
     direction: column.getIsSorted() ? column.getIsSorted() : undefined
-  })), column.columnDefType !== 'group' && enableColumnFilters && !!column.getCanColumnFilter() && React.createElement(Tooltip, {
+  })), column.columnDefType === 'data' && enableColumnFilters && !!column.getCanColumnFilter() && React.createElement(Tooltip, {
     arrow: true,
     placement: "top",
     title: filterTooltip
@@ -2048,20 +2091,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         opacity: 0.8
       }
     }
-  }, showFilters && !column.getColumnFilterValue() ? React.createElement(FilterAltOff, {
-    fontSize: "small"
-  }) : React.createElement(FilterAltIcon, {
-    fontSize: "small"
-  })))), React.createElement(Box, {
-    sx: {
-      alignItems: 'center',
-      display: 'flex',
-      flexWrap: 'nowrap'
-    }
-  }, (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
+  }, showFilters && !column.getColumnFilterValue() ? React.createElement(FilterAltOff, null) : React.createElement(FilterAltIcon, null)))), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
     header: header,
     tableInstance: tableInstance
-  }), enableColumnResizing && column.columnDefType !== 'group' && React.createElement(Divider, Object.assign({
+  }), column.getCanResize() && React.createElement(Divider, Object.assign({
     flexItem: true,
     orientation: "vertical",
     onDoubleClick: function onDoubleClick() {
@@ -2069,14 +2102,19 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     },
     sx: function sx(theme) {
       return {
-        borderRightWidth: '2px',
         borderRadius: '2px',
-        maxHeight: '2rem',
+        borderRightWidth: '2px',
         cursor: 'col-resize',
-        userSelect: 'none',
+        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.secondary.dark,
+          backgroundColor: theme.palette.info.main,
           opacity: 1
         }
       };
@@ -2087,7 +2125,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : ''
       }
     });
-  }))))), column.columnDefType === 'data' && enableColumnFilters && column.getCanColumnFilter() && React.createElement(Collapse, {
+  })))), column.columnDefType === 'data' && column.getCanColumnFilter() && React.createElement(Collapse, {
     "in": showFilters
   }, React.createElement(MRT_FilterTextField, {
     header: header,
@@ -2106,7 +2144,13 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 
   var tableRowProps = _extends({}, headerGroup == null ? void 0 : headerGroup.getHeaderGroupProps(), mTableHeadRowProps);
 
-  return React.createElement(TableRow, Object.assign({}, tableRowProps), headerGroup.headers.map(function (header, index) {
+  return React.createElement(TableRow, Object.assign({}, tableRowProps, {
+    sx: function sx(theme) {
+      return _extends({
+        boxShadow: "4px 0 8px " + alpha(theme.palette.common.black, 0.1)
+      }, tableRowProps == null ? void 0 : tableRowProps.sx);
+    }
+  }), headerGroup.headers.map(function (header, index) {
     return React.createElement(MRT_TableHeadCell, {
       header: header,
       key: header.id || index,
@@ -2148,7 +2192,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       _tableInstance$option = tableInstance.options,
       enableEditing = _tableInstance$option.enableEditing,
       muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow = _tableInstance$option.setCurrentEditingRow;
+      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
   var _useState = useState(cell.value),
       value = _useState[0],
@@ -2279,7 +2323,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
-      enableColumnPinning = _tableInstance$option.enableColumnPinning,
+      enablePinning = _tableInstance$option.enablePinning,
       enableEditing = _tableInstance$option.enableEditing,
       isLoading = _tableInstance$option.isLoading,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
@@ -2316,10 +2360,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     }
   }, tableCellProps, {
     sx: _extends({
+      maxWidth: "min(" + column.getWidth() + "px, fit-content)",
+      minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "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,
       transition: 'all 0.2s ease-in-out',
-      whiteSpace: isDensePadding || enableColumnPinning && getIsSomeColumnsPinned() ? 'nowrap' : 'normal'
+      whiteSpace: isDensePadding || enablePinning && getIsSomeColumnsPinned() ? 'nowrap' : 'normal',
+      width: column.getWidth()
     }, tableCellProps == null ? void 0 : tableCellProps.sx)
   }), isLoading ? React.createElement(Skeleton, Object.assign({
     animation: "wave",
@@ -2495,8 +2542,11 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
         fontWeight: 'bold',
+        maxWidth: "min(" + column.getWidth() + "px, " + column.maxWidth + "px)",
+        minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
         p: isDensePadding ? '0.5rem' : '1rem',
         transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
+        width: column.getWidth(),
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
@@ -2563,10 +2613,10 @@ var MRT_Table = function MRT_Table(_ref) {
       tableInstance = _ref.tableInstance;
   var getTableProps = tableInstance.getTableProps,
       _tableInstance$option = tableInstance.options,
-      enableStickyHeader = _tableInstance$option.enableStickyHeader,
-      hideTableFooter = _tableInstance$option.hideTableFooter,
-      hideTableHead = _tableInstance$option.hideTableHead,
-      muiTableProps = _tableInstance$option.muiTableProps;
+      muiTableProps = _tableInstance$option.muiTableProps,
+      enableTableHead = _tableInstance$option.enableTableHead,
+      enableTableFooter = _tableInstance$option.enableTableFooter,
+      enableStickyHeader = _tableInstance$option.enableStickyHeader;
   var mTableProps = muiTableProps instanceof Function ? muiTableProps({
     tableInstance: tableInstance
   }) : muiTableProps;
@@ -2575,13 +2625,13 @@ var MRT_Table = function MRT_Table(_ref) {
 
   return React.createElement(Table, Object.assign({
     stickyHeader: enableStickyHeader
-  }, tableProps), !hideTableHead && React.createElement(MRT_TableHead, {
+  }, tableProps), enableTableHead && React.createElement(MRT_TableHead, {
     pinned: pinned,
     tableInstance: tableInstance
   }), React.createElement(MRT_TableBody, {
     pinned: pinned,
     tableInstance: tableInstance
-  }), !hideTableFooter && React.createElement(MRT_TableFooter, {
+  }), enableTableFooter && React.createElement(MRT_TableFooter, {
     pinned: pinned,
     tableInstance: tableInstance
   }));
@@ -2594,7 +2644,7 @@ var commonBoxStyles = function commonBoxStyles(_ref) {
   return {
     display: 'grid',
     minWidth: visible ? '200px' : 0,
-    overflowX: 'auto',
+    overflowX: pinned ? 'scroll' : 'auto',
     boxShadow: pinned === 'left' ? "0 1px 12px " + alpha(theme.palette.common.black, 0.5) : pinned === 'right' ? "0 -1px 12px " + alpha(theme.palette.common.black, 0.5) : 'none'
   };
 };
@@ -2607,7 +2657,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
       getRightTableWidth = tableInstance.getRightTableWidth,
       getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enableColumnPinning = _tableInstance$option.enableColumnPinning,
+      enablePinning = _tableInstance$option.enablePinning,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
       idPrefix = _tableInstance$option.idPrefix,
       muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
@@ -2623,7 +2673,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
     tableInstance: tableInstance
   }) : muiTableContainerProps;
-  useLayoutEffect(function () {
+  useEffect(function () {
     var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
 
     var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + idPrefix + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
@@ -2639,7 +2689,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     style: {
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
-  }), enableColumnPinning && getIsSomeColumnsPinned() ? React.createElement(Box, {
+  }), enablePinning && getIsSomeColumnsPinned() ? React.createElement(Box, {
     sx: {
       display: 'grid',
       gridTemplateColumns: getLeftTableWidth() + "fr " + getCenterTableWidth() + "fr " + getRightTableWidth() + "fr"
@@ -2689,8 +2739,8 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   var tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      hideToolbarBottom = _tableInstance$option.hideToolbarBottom,
-      hideToolbarTop = _tableInstance$option.hideToolbarTop,
+      enableToolbarBottom = _tableInstance$option.enableToolbarBottom,
+      enableToolbarTop = _tableInstance$option.enableToolbarTop,
       muiTablePaperProps = _tableInstance$option.muiTablePaperProps;
 
   var _getState = getState(),
@@ -2700,8 +2750,10 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
     if (typeof window !== 'undefined') {
       if (isFullScreen) {
         document.body.style.overflow = 'hidden';
+        document.body.style.height = '100vh';
       } else {
         document.body.style.overflow = 'auto';
+        document.body.style.height = 'auto';
       }
     }
   }, [isFullScreen]);
@@ -2715,24 +2767,18 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
       transition: 'all 0.2s ease-in-out'
     }, tablePaperProps == null ? void 0 : tablePaperProps.sx),
     style: {
-      height: isFullScreen ? '100%' : undefined,
-      left: isFullScreen ? '0' : undefined,
+      height: isFullScreen ? '100vh' : undefined,
       margin: isFullScreen ? '0' : undefined,
-      maxHeight: isFullScreen ? '100%' : undefined,
-      maxWidth: isFullScreen ? '100%' : undefined,
-      overflowY: !isFullScreen ? 'hidden' : undefined,
-      position: isFullScreen ? 'fixed' : undefined,
-      right: isFullScreen ? '0' : undefined,
-      top: isFullScreen ? '0' : undefined,
-      width: isFullScreen ? '100vw' : undefined,
-      zIndex: isFullScreen ? 1200 : 1,
-      bottom: isFullScreen ? '0' : undefined
+      maxHeight: isFullScreen ? '100vh' : undefined,
+      maxWidth: isFullScreen ? '100vw' : undefined,
+      padding: isFullScreen ? '0' : undefined,
+      width: isFullScreen ? '100vw' : undefined
     }
-  }), !hideToolbarTop && React.createElement(MRT_ToolbarTop, {
+  }), enableToolbarTop && React.createElement(MRT_ToolbarTop, {
     tableInstance: tableInstance
   }), React.createElement(MRT_TableContainer, {
     tableInstance: tableInstance
-  }), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, {
+  }), enableToolbarBottom && React.createElement(MRT_ToolbarBottom, {
     tableInstance: tableInstance
   }));
 };
@@ -2777,7 +2823,7 @@ var createGroup = function createGroup(table, column, currentFilterTypes) {
 var createDataColumn = function createDataColumn(table, column, currentFilterTypes) {
   return (// @ts-ignore
     table.createDataColumn(column.id, _extends({
-      filterType: currentFilterTypes[column.id] || MRT_FILTER_TYPE.BEST_MATCH
+      filterFn: currentFilterTypes[column.id] instanceof Function ? currentFilterTypes[column.id] : defaultFilterFNs[currentFilterTypes[column.id]]
     }, column))
   );
 };
@@ -2786,55 +2832,61 @@ var createDisplayColumn = function createDisplayColumn(table, column) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _props$initialState$i, _props$initialState, _props$initialState$i2, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$initialState$p, _props$initialState5, _props$initialState5$, _props$initialState$p2, _props$initialState6, _props$initialState6$, _props$initialState$p3, _props$initialState7, _props$initialState7$, _props$globalFilterTy, _props$getSubRows;
+  var _props$initialState$i, _props$initialState, _props$initialState$i2, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$initialState$p, _props$initialState5, _props$initialState5$, _props$initialState$p2, _props$initialState6, _props$initialState6$, _props$initialState$p3, _props$initialState7, _props$initialState7$, _props$globalFilterTy;
 
-  var idPrefix = useMemo(function () {
+  var _useState = useState(props.idPrefix),
+      idPrefix = _useState[0],
+      setIdPrefix = _useState[1];
+
+  useEffect(function () {
     var _props$idPrefix;
 
-    return (_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9);
+    return setIdPrefix((_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9));
   }, [props.idPrefix]);
 
-  var _useState = useState(null),
-      currentEditingRow = _useState[0],
-      setCurrentEditingRow = _useState[1];
+  var _useState2 = useState(null),
+      currentEditingRow = _useState2[0],
+      setCurrentEditingRow = _useState2[1];
 
-  var _useState2 = useState((_props$initialState$i = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.isDensePadding) != null ? _props$initialState$i : false),
-      isDensePadding = _useState2[0],
-      setIsDensePadding = _useState2[1];
+  var _useState3 = useState((_props$initialState$i = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.isDensePadding) != null ? _props$initialState$i : false),
+      isDensePadding = _useState3[0],
+      setIsDensePadding = _useState3[1];
 
-  var _useState3 = useState((_props$initialState$i2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.isFullScreen) != null ? _props$initialState$i2 : false),
-      isFullScreen = _useState3[0],
-      setIsFullScreen = _useState3[1];
+  var _useState4 = useState((_props$initialState$i2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.isFullScreen) != null ? _props$initialState$i2 : false),
+      isFullScreen = _useState4[0],
+      setIsFullScreen = _useState4[1];
 
-  var _useState4 = useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
-      showFilters = _useState4[0],
-      setShowFilters = _useState4[1];
+  var _useState5 = useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
+      showFilters = _useState5[0],
+      setShowFilters = _useState5[1];
 
-  var _useState5 = useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearch) != null ? _props$initialState$s2 : false),
-      showSearch = _useState5[0],
-      setShowSearch = _useState5[1];
+  var _useState6 = useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showGlobalFilter) != null ? _props$initialState$s2 : false),
+      showGlobalFilter = _useState6[0],
+      setShowGlobalFilter = _useState6[1];
 
-  var _useState6 = useState({
+  var _useState7 = useState({
     pageIndex: (_props$initialState$p = (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.pagination) == null ? void 0 : _props$initialState5$.pageIndex) != null ? _props$initialState$p : 0,
     pageSize: (_props$initialState$p2 = (_props$initialState6 = props.initialState) == null ? void 0 : (_props$initialState6$ = _props$initialState6.pagination) == null ? void 0 : _props$initialState6$.pageSize) != null ? _props$initialState$p2 : 10,
     pageCount: (_props$initialState$p3 = (_props$initialState7 = props.initialState) == null ? void 0 : (_props$initialState7$ = _props$initialState7.pagination) == null ? void 0 : _props$initialState7$.pageCount) != null ? _props$initialState$p3 : -1
   }),
-      pagination = _useState6[0],
-      setPagination = _useState6[1];
+      pagination = _useState7[0],
+      setPagination = _useState7[1];
 
-  var _useState7 = useState(function () {
+  var _useState8 = useState(function () {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filter, _props$initialState8, _props$initialState8$, _c$filterSelectOption, _ref2;
 
-      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState8 = props.initialState) == null ? void 0 : (_props$initialState8$ = _props$initialState8.columnFilters) == null ? void 0 : _props$initialState8$[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
+      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState8 = props.initialState) == null ? void 0 : (_props$initialState8$ = _props$initialState8.columnFilters) == null ? void 0 : _props$initialState8$.find(function (cf) {
+        return cf.id === c.id;
+      })) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
     })));
   }),
-      currentFilterTypes = _useState7[0],
-      setCurrentFilterTypes = _useState7[1];
+      currentFilterTypes = _useState8[0],
+      setCurrentFilterTypes = _useState8[1];
 
-  var _useState8 = useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
-      currentGlobalFilterType = _useState8[0],
-      setCurrentGlobalFilterType = _useState8[1];
+  var _useState9 = useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
+      currentGlobalFilterType = _useState9[0],
+      setCurrentGlobalFilterType = _useState9[1];
 
   var table = useMemo(function () {
     return createTable();
@@ -2905,14 +2957,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       width: 40,
       minWidth: 40
     })].filter(Boolean);
-  }, [table, props.enableExpandAll, props.enableExpanded, props.enableRowActions, props.enableGrouping, props.enableEditing, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization]);
+  }, [props.enableEditing, props.enableExpandAll, props.enableExpanded, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
   var columns = useMemo(function () {
     return table.createColumns([].concat(displayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterTypes) : createDataColumn(table, column, currentFilterTypes);
     })));
   }, [table, props.columns, currentFilterTypes]);
   var data = useMemo(function () {
-    return props.isLoading && !props.data.length ? [].concat(Array(10).fill(null)).map(function (_) {
+    return props.isLoading && !props.data.length ? [].concat(Array(10).fill(null)).map(function () {
       return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
         var _ref7;
 
@@ -2921,36 +2973,30 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     }) : props.data;
   }, [props.data, props.isLoading]); //@ts-ignore
 
-  var tableInstance = useTable(table, _extends({}, props, {
-    columnFilterRowsFn: columnFilterRowsFn,
-    columns: columns,
-    data: data,
-    debugAll: false,
-    expandRowsFn: expandRowsFn,
+  var tableInstance = _extends({}, useTableInstance(table, _extends({
     //@ts-ignore
     filterTypes: defaultFilterFNs,
-    getSubRows: (_props$getSubRows = props.getSubRows) != null ? _props$getSubRows : function (originalRow) {
+    getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
+    getCoreRowModel: getCoreRowModelSync(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getGlobalFilteredRowModel: getGlobalFilteredRowModelSync(),
+    getGroupedRowModel: getGroupedRowModelSync(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: getSortedRowModelSync(),
+    getSubRows: function getSubRows(originalRow) {
       return originalRow.subRows;
     },
-    globalFilterRowsFn: globalFilterRowsFn,
     globalFilterType: currentGlobalFilterType,
-    groupRowsFn: groupRowsFn,
     idPrefix: idPrefix,
     onPaginationChange: function onPaginationChange(updater) {
       return setPagination(function (old) {
         return functionalUpdate(updater, old);
       });
-    },
-    paginateRowsFn: paginateRowsFn,
-    setCurrentEditingRow: setCurrentEditingRow,
-    setCurrentFilterTypes: setCurrentFilterTypes,
-    setCurrentGlobalFilterType: setCurrentGlobalFilterType,
-    setIsDensePadding: setIsDensePadding,
-    setIsFullScreen: setIsFullScreen,
-    setShowFilters: setShowFilters,
-    setShowSearch: setShowSearch,
-    sortRowsFn: sortRowsFn,
-    state: _extends({}, props.initialState, {
+    }
+  }, props, {
+    columns: columns,
+    data: data,
+    state: _extends({
       currentEditingRow: currentEditingRow,
       currentFilterTypes: currentFilterTypes,
       currentGlobalFilterType: currentGlobalFilterType,
@@ -2959,36 +3005,62 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       //@ts-ignore
       pagination: pagination,
       showFilters: showFilters,
-      showSearch: showSearch
+      showGlobalFilter: showGlobalFilter
     }, props.state)
-  }));
-  return React.createElement(MRT_TablePaper, {
-    tableInstance: tableInstance
+  })), {
+    setCurrentEditingRow: setCurrentEditingRow,
+    setCurrentFilterTypes: setCurrentFilterTypes,
+    setCurrentGlobalFilterType: setCurrentGlobalFilterType,
+    setIsDensePadding: setIsDensePadding,
+    setIsFullScreen: setIsFullScreen,
+    setShowFilters: setShowFilters,
+    setShowGlobalFilter: setShowGlobalFilter
   });
-};
-
-var _excluded$5 = ["enableColumnActions", "enableColumnFilters", "enableDensePaddingToggle", "enableExpandAll", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 
-global.performance = global.performance || {
-  now: function now() {
-    return new Date().getTime();
-  }
+  return React.createElement(React.Fragment, null, React.createElement(Dialog, {
+    TransitionComponent: Grow,
+    PaperComponent: Box,
+    disablePortal: true,
+    fullScreen: true,
+    keepMounted: false,
+    onClose: function onClose() {
+      return tableInstance.setIsFullScreen(false);
+    },
+    open: tableInstance.getState().isFullScreen,
+    transitionDuration: 400
+  }, React.createElement(MRT_TablePaper, {
+    tableInstance: tableInstance
+  })), !tableInstance.getState().isFullScreen && React.createElement(MRT_TablePaper, {
+    tableInstance: tableInstance
+  }));
 };
+
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
-  var _ref$enableColumnActi = _ref.enableColumnActions,
+  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$enableColumnActi = _ref.enableColumnActions,
       enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
       _ref$enableColumnFilt = _ref.enableColumnFilters,
       enableColumnFilters = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableColumnResi = _ref.enableColumnResizing,
+      enableColumnResizing = _ref$enableColumnResi === void 0 ? false : _ref$enableColumnResi,
       _ref$enableDensePaddi = _ref.enableDensePaddingToggle,
       enableDensePaddingToggle = _ref$enableDensePaddi === void 0 ? true : _ref$enableDensePaddi,
       _ref$enableExpandAll = _ref.enableExpandAll,
       enableExpandAll = _ref$enableExpandAll === void 0 ? true : _ref$enableExpandAll,
+      _ref$enableFilters = _ref.enableFilters,
+      enableFilters = _ref$enableFilters === void 0 ? true : _ref$enableFilters,
       _ref$enableFullScreen = _ref.enableFullScreenToggle,
       enableFullScreenToggle = _ref$enableFullScreen === void 0 ? true : _ref$enableFullScreen,
       _ref$enableGlobalFilt = _ref.enableGlobalFilter,
       enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
       _ref$enableHiding = _ref.enableHiding,
       enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
+      _ref$enableMultiRowSe = _ref.enableMultiRowSelection,
+      enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? true : _ref$enableMultiRowSe,
       _ref$enablePagination = _ref.enablePagination,
       enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
       _ref$enableSelectAll = _ref.enableSelectAll,
@@ -2997,6 +3069,16 @@ var MaterialReactTable = (function (_ref) {
       enableSorting = _ref$enableSorting === void 0 ? true : _ref$enableSorting,
       _ref$enableStickyHead = _ref.enableStickyHeader,
       enableStickyHeader = _ref$enableStickyHead === void 0 ? true : _ref$enableStickyHead,
+      _ref$enableTableFoote = _ref.enableTableFooter,
+      enableTableFooter = _ref$enableTableFoote === void 0 ? true : _ref$enableTableFoote,
+      _ref$enableTableHead = _ref.enableTableHead,
+      enableTableHead = _ref$enableTableHead === void 0 ? true : _ref$enableTableHead,
+      _ref$enableToolbarBot = _ref.enableToolbarBottom,
+      enableToolbarBottom = _ref$enableToolbarBot === void 0 ? true : _ref$enableToolbarBot,
+      _ref$enableToolbarInt = _ref.enableToolbarInternalActions,
+      enableToolbarInternalActions = _ref$enableToolbarInt === void 0 ? true : _ref$enableToolbarInt,
+      _ref$enableToolbarTop = _ref.enableToolbarTop,
+      enableToolbarTop = _ref$enableToolbarTop === void 0 ? true : _ref$enableToolbarTop,
       icons = _ref.icons,
       localization = _ref.localization,
       _ref$positionActionsC = _ref.positionActionsColumn,
@@ -3010,17 +3092,27 @@ var MaterialReactTable = (function (_ref) {
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
 
   return React.createElement(MRT_TableRoot, Object.assign({
+    autoResetExpanded: autoResetExpanded,
+    columnResizeMode: columnResizeMode,
     enableColumnActions: enableColumnActions,
+    enableColumnResizing: enableColumnResizing,
     enableColumnFilters: enableColumnFilters,
     enableDensePaddingToggle: enableDensePaddingToggle,
     enableExpandAll: enableExpandAll,
+    enableFilters: enableFilters,
     enableFullScreenToggle: enableFullScreenToggle,
     enableGlobalFilter: enableGlobalFilter,
     enableHiding: enableHiding,
+    enableMultiRowSelection: enableMultiRowSelection,
     enablePagination: enablePagination,
     enableSelectAll: enableSelectAll,
     enableSorting: enableSorting,
     enableStickyHeader: enableStickyHeader,
+    enableTableFooter: enableTableFooter,
+    enableTableHead: enableTableHead,
+    enableToolbarBottom: enableToolbarBottom,
+    enableToolbarInternalActions: enableToolbarInternalActions,
+    enableToolbarTop: enableToolbarTop,
     icons: _extends({}, MRT_Default_Icons, icons),
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
     positionActionsColumn: positionActionsColumn,