material-react-table 0.9.5 → 0.10.0

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

@@ -144,16 +144,16 @@ var MRT_Default_Icons = {
 };
 
 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,
-      KeyboardDoubleArrowDownIcon = _tableInstance$option.icons.KeyboardDoubleArrowDownIcon,
-      localization = _tableInstance$option.localization,
-      renderDetailPanel = _tableInstance$option.renderDetailPanel,
-      toggleAllRowsExpanded = tableInstance.toggleAllRowsExpanded;
+  var instance = _ref.instance;
+  var getIsAllRowsExpanded = instance.getIsAllRowsExpanded,
+      getIsSomeRowsExpanded = instance.getIsSomeRowsExpanded,
+      getCanSomeRowsExpand = instance.getCanSomeRowsExpand,
+      getState = instance.getState,
+      _instance$options = instance.options,
+      KeyboardDoubleArrowDownIcon = _instance$options.icons.KeyboardDoubleArrowDownIcon,
+      localization = _instance$options.localization,
+      renderDetailPanel = _instance$options.renderDetailPanel,
+      toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -183,13 +183,13 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
 
 var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   var row = _ref.row,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      ExpandMoreIcon = _tableInstance$option.icons.ExpandMoreIcon,
-      localization = _tableInstance$option.localization,
-      onMrtRowExpandChange = _tableInstance$option.onMrtRowExpandChange,
-      renderDetailPanel = _tableInstance$option.renderDetailPanel;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      ExpandMoreIcon = _instance$options.icons.ExpandMoreIcon,
+      localization = _instance$options.localization,
+      onMrtRowExpandChange = _instance$options.onMrtRowExpandChange,
+      renderDetailPanel = _instance$options.renderDetailPanel;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -199,7 +199,7 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     onMrtRowExpandChange == null ? void 0 : onMrtRowExpandChange({
       event: event,
       row: row,
-      tableInstance: tableInstance
+      instance: instance
     });
   };
 
@@ -224,22 +224,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   })));
 };
 
-var MRT_FILTER_OPTION;
-
-(function (MRT_FILTER_OPTION) {
-  MRT_FILTER_OPTION["BETWEEN"] = "between";
-  MRT_FILTER_OPTION["CONTAINS"] = "contains";
-  MRT_FILTER_OPTION["EMPTY"] = "empty";
-  MRT_FILTER_OPTION["ENDS_WITH"] = "endsWith";
-  MRT_FILTER_OPTION["EQUALS"] = "equals";
-  MRT_FILTER_OPTION["FUZZY"] = "fuzzy";
-  MRT_FILTER_OPTION["GREATER_THAN"] = "greaterThan";
-  MRT_FILTER_OPTION["LESS_THAN"] = "lessThan";
-  MRT_FILTER_OPTION["NOT_EMPTY"] = "notEmpty";
-  MRT_FILTER_OPTION["NOT_EQUALS"] = "notEquals";
-  MRT_FILTER_OPTION["STARTS_WITH"] = "startsWith";
-})(MRT_FILTER_OPTION || (MRT_FILTER_OPTION = {}));
-
 var fuzzy = function fuzzy(row, columnId, value, addMeta) {
   var itemRank = rankItem(row.getValue(columnId), value, {
     threshold: rankings.MATCHES
@@ -356,13 +340,13 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
       header = _ref.header,
       onSelect = _ref.onSelect,
       setAnchorEl = _ref.setAnchorEl,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      enabledGlobalFilterOptions = _tableInstance$option.enabledGlobalFilterOptions,
-      localization = _tableInstance$option.localization,
-      setCurrentFilterFns = tableInstance.setCurrentFilterFns,
-      setCurrentGlobalFilterFn = tableInstance.setCurrentGlobalFilterFn;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      enabledGlobalFilterOptions = _instance$options.enabledGlobalFilterOptions,
+      localization = _instance$options.localization,
+      setCurrentFilterFns = instance.setCurrentFilterFns,
+      setCurrentGlobalFilterFn = instance.setCurrentGlobalFilterFn;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding,
@@ -377,62 +361,62 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
 
   var filterOptions = useMemo(function () {
     return [{
-      option: MRT_FILTER_OPTION.FUZZY,
+      option: 'fuzzy',
       label: localization.filterFuzzy,
       divider: false,
       fn: fuzzy
     }, {
-      option: MRT_FILTER_OPTION.CONTAINS,
+      option: 'contains',
       label: localization.filterContains,
       divider: false,
       fn: contains
     }, {
-      option: MRT_FILTER_OPTION.STARTS_WITH,
+      option: 'startsWith',
       label: localization.filterStartsWith,
       divider: false,
       fn: startsWith
     }, {
-      option: MRT_FILTER_OPTION.ENDS_WITH,
+      option: 'endsWith',
       label: localization.filterEndsWith,
       divider: true,
       fn: endsWith
     }, {
-      option: MRT_FILTER_OPTION.EQUALS,
+      option: 'equals',
       label: localization.filterEquals,
       divider: false,
       fn: equals
     }, {
-      option: MRT_FILTER_OPTION.NOT_EQUALS,
+      option: 'notEquals',
       label: localization.filterNotEquals,
       divider: true,
       fn: notEquals
     }, {
-      option: MRT_FILTER_OPTION.BETWEEN,
+      option: 'between',
       label: localization.filterBetween,
       divider: false,
       fn: between
     }, {
-      option: MRT_FILTER_OPTION.GREATER_THAN,
+      option: 'greaterThan',
       label: localization.filterGreaterThan,
       divider: false,
       fn: greaterThan
     }, {
-      option: MRT_FILTER_OPTION.LESS_THAN,
+      option: 'lessThan',
       label: localization.filterLessThan,
       divider: true,
       fn: lessThan
     }, {
-      option: MRT_FILTER_OPTION.EMPTY,
+      option: 'empty',
       label: localization.filterEmpty,
       divider: false,
       fn: empty
     }, {
-      option: MRT_FILTER_OPTION.NOT_EMPTY,
+      option: 'notEmpty',
       label: localization.filterNotEmpty,
       divider: false,
       fn: notEmpty
     }].filter(function (filterType) {
-      return columnDef ? !columnDef.enabledColumnFilterOptions || columnDef.enabledColumnFilterOptions.includes(filterType.option) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.option)) && [MRT_FILTER_OPTION.FUZZY, MRT_FILTER_OPTION.CONTAINS].includes(filterType.option);
+      return columnDef ? !columnDef.enabledColumnFilterOptions || columnDef.enabledColumnFilterOptions.includes(filterType.option) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.option)) && ['fuzzy', 'contains'].includes(filterType.option);
     });
   }, []);
 
@@ -444,9 +428,9 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
         return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = value, _extends2));
       });
 
-      if ([MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(value)) {
+      if (['empty', 'notEmpty'].includes(value)) {
         column.setFilterValue(' ');
-      } else if (value === MRT_FILTER_OPTION.BETWEEN) {
+      } else if (value === 'between') {
         column.setFilterValue(['', '']);
       } else {
         column.setFilterValue('');
@@ -493,10 +477,10 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
 
 var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
   var column = _ref.column,
-      tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      PushPinIcon = _tableInstance$option.icons.PushPinIcon,
-      localization = _tableInstance$option.localization;
+      instance = _ref.instance;
+  var _instance$options = instance.options,
+      PushPinIcon = _instance$options.icons.PushPinIcon,
+      localization = _instance$options.localization;
 
   var handlePinColumn = function handlePinColumn(pinDirection) {
     column.pin(pinDirection);
@@ -543,10 +527,10 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
 };
 
 var MRT_GrabHandleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      DragHandleIcon = _tableInstance$option.icons.DragHandleIcon,
-      localization = _tableInstance$option.localization;
+  var instance = _ref.instance;
+  var _instance$options = instance.options,
+      DragHandleIcon = _instance$options.icons.DragHandleIcon,
+      localization = _instance$options.localization;
   return React.createElement(Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -614,7 +598,8 @@ var createGroup = function createGroup(table, column, currentFilterFns) {
 var createDataColumn = function createDataColumn(table, column, currentFilterFns) {
   return (// @ts-ignore
     table.createDataColumn(column.id, _extends({
-      filterFn: currentFilterFns[column.id] instanceof Function ? currentFilterFns[column.id] : defaultFilterFNs[currentFilterFns[column.id]]
+      filterFn: currentFilterFns[column.id] instanceof Function ? currentFilterFns[column.id] : // @ts-ignore
+      defaultFilterFNs[currentFilterFns[column.id]]
     }, column))
   );
 };
@@ -636,12 +621,12 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var allColumns = _ref.allColumns,
       column = _ref.column,
       isSubMenu = _ref.isSubMenu,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
-      onMrtToggleColumnVisibility = _tableInstance$option.onMrtToggleColumnVisibility,
-      setColumnOrder = tableInstance.setColumnOrder;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      enableColumnOrdering = _instance$options.enableColumnOrdering,
+      onMrtToggleColumnVisibility = _instance$options.onMrtToggleColumnVisibility,
+      setColumnOrder = instance.setColumnOrder;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder,
@@ -690,7 +675,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     onMrtToggleColumnVisibility == null ? void 0 : onMrtToggleColumnVisibility({
       column: column,
       columnVisibility: columnVisibility,
-      tableInstance: tableInstance
+      instance: instance
     });
   };
 
@@ -714,10 +699,10 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     return col.columnDefType === 'group';
   }) && React.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
-    tableInstance: tableInstance
+    instance: instance
   }), !isSubMenu && column.getCanPin() && React.createElement(MRT_ColumnPinningButtons, {
     column: column,
-    tableInstance: tableInstance
+    instance: instance
   }), React.createElement(FormControlLabel, {
     componentsProps: {
       typography: {
@@ -740,7 +725,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       key: i + "-" + c.id,
       column: c,
       isSubMenu: isSubMenu,
-      tableInstance: tableInstance
+      instance: instance
     });
   }));
 };
@@ -749,21 +734,21 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   var anchorEl = _ref.anchorEl,
       isSubMenu = _ref.isSubMenu,
       setAnchorEl = _ref.setAnchorEl,
-      tableInstance = _ref.tableInstance;
-  var getAllColumns = tableInstance.getAllColumns,
-      getAllLeafColumns = tableInstance.getAllLeafColumns,
-      getCenterLeafColumns = tableInstance.getCenterLeafColumns,
-      getIsAllColumnsVisible = tableInstance.getIsAllColumnsVisible,
-      getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
-      getIsSomeColumnsVisible = tableInstance.getIsSomeColumnsVisible,
-      getLeftLeafColumns = tableInstance.getLeftLeafColumns,
-      getRightLeafColumns = tableInstance.getRightLeafColumns,
-      getState = tableInstance.getState,
-      toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
-      _tableInstance$option = tableInstance.options,
-      localization = _tableInstance$option.localization,
-      enablePinning = _tableInstance$option.enablePinning,
-      enableColumnOrdering = _tableInstance$option.enableColumnOrdering;
+      instance = _ref.instance;
+  var getAllColumns = instance.getAllColumns,
+      getAllLeafColumns = instance.getAllLeafColumns,
+      getCenterLeafColumns = instance.getCenterLeafColumns,
+      getIsAllColumnsVisible = instance.getIsAllColumnsVisible,
+      getIsSomeColumnsPinned = instance.getIsSomeColumnsPinned,
+      getIsSomeColumnsVisible = instance.getIsSomeColumnsVisible,
+      getLeftLeafColumns = instance.getLeftLeafColumns,
+      getRightLeafColumns = instance.getRightLeafColumns,
+      getState = instance.getState,
+      toggleAllColumnsVisible = instance.toggleAllColumnsVisible,
+      _instance$options = instance.options,
+      localization = _instance$options.localization,
+      enablePinning = _instance$options.enablePinning,
+      enableColumnOrdering = _instance$options.enableColumnOrdering;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding,
@@ -814,12 +799,12 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     onClick: hideAllColumns
   }, localization.hideAll), !isSubMenu && enableColumnOrdering && React.createElement(Button, {
     onClick: function onClick() {
-      return tableInstance.resetColumnOrder();
+      return instance.resetColumnOrder();
     }
   }, localization.resetOrder), !isSubMenu && enablePinning && React.createElement(Button, {
     disabled: !getIsSomeColumnsPinned(),
     onClick: function onClick() {
-      return tableInstance.resetColumnPinning(true);
+      return instance.resetColumnPinning(true);
     }
   }, localization.unpinAll), React.createElement(Button, {
     disabled: getIsAllColumnsVisible(),
@@ -832,7 +817,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       column: column,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
-      tableInstance: tableInstance
+      instance: instance
     });
   }));
 };
@@ -853,31 +838,31 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
       setAnchorEl = _ref.setAnchorEl,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
-      setColumnOrder = tableInstance.setColumnOrder,
-      _tableInstance$option = tableInstance.options,
-      enableColumnFilters = _tableInstance$option.enableColumnFilters,
-      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,
-      ClearAllIcon = _tableInstance$option2.ClearAllIcon,
-      ViewColumnIcon = _tableInstance$option2.ViewColumnIcon,
-      DynamicFeedIcon = _tableInstance$option2.DynamicFeedIcon,
-      FilterListIcon = _tableInstance$option2.FilterListIcon,
-      FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
-      PushPinIcon = _tableInstance$option2.PushPinIcon,
-      SortIcon = _tableInstance$option2.SortIcon,
-      RestartAltIcon = _tableInstance$option2.RestartAltIcon,
-      VisibilityOffIcon = _tableInstance$option2.VisibilityOffIcon,
-      tableId = _tableInstance$option.tableId,
-      localization = _tableInstance$option.localization,
-      setShowFilters = tableInstance.setShowFilters;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      toggleAllColumnsVisible = instance.toggleAllColumnsVisible,
+      setColumnOrder = instance.setColumnOrder,
+      _instance$options = instance.options,
+      enableColumnFilters = _instance$options.enableColumnFilters,
+      enableColumnResizing = _instance$options.enableColumnResizing,
+      enableGrouping = _instance$options.enableGrouping,
+      enableHiding = _instance$options.enableHiding,
+      enablePinning = _instance$options.enablePinning,
+      enableSorting = _instance$options.enableSorting,
+      _instance$options$ico = _instance$options.icons,
+      ArrowRightIcon = _instance$options$ico.ArrowRightIcon,
+      ClearAllIcon = _instance$options$ico.ClearAllIcon,
+      ViewColumnIcon = _instance$options$ico.ViewColumnIcon,
+      DynamicFeedIcon = _instance$options$ico.DynamicFeedIcon,
+      FilterListIcon = _instance$options$ico.FilterListIcon,
+      FilterListOffIcon = _instance$options$ico.FilterListOffIcon,
+      PushPinIcon = _instance$options$ico.PushPinIcon,
+      SortIcon = _instance$options$ico.SortIcon,
+      RestartAltIcon = _instance$options$ico.RestartAltIcon,
+      VisibilityOffIcon = _instance$options$ico.VisibilityOffIcon,
+      tableId = _instance$options.tableId,
+      localization = _instance$options.localization,
+      setShowFilters = instance.setShowFilters;
   var column = header.column;
   var columnDef = column.columnDef;
 
@@ -1025,7 +1010,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 2,
     onSelect: handleFilterByColumn,
     setAnchorEl: setFilterMenuAnchorEl,
-    tableInstance: tableInstance
+    instance: instance
   })], enableGrouping && column.getCanGroup() && [React.createElement(MenuItem, {
     divider: enablePinning,
     key: 0,
@@ -1104,7 +1089,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     isSubMenu: true,
     key: 2,
     setAnchorEl: setShowHideColumnsMenuAnchorEl,
-    tableInstance: tableInstance
+    instance: instance
   })]);
 };
 
@@ -1113,13 +1098,13 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       handleEdit = _ref.handleEdit,
       row = _ref.row,
       setAnchorEl = _ref.setAnchorEl,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      EditIcon = _tableInstance$option.icons.EditIcon,
-      enableEditing = _tableInstance$option.enableEditing,
-      localization = _tableInstance$option.localization,
-      renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      EditIcon = _instance$options.icons.EditIcon,
+      enableEditing = _instance$options.enableEditing,
+      localization = _instance$options.localization,
+      renderRowActionMenuItems = _instance$options.renderRowActionMenuItems;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -1140,7 +1125,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({
     row: row,
-    tableInstance: tableInstance,
+    instance: instance,
     closeMenu: function closeMenu() {
       return setAnchorEl(null);
     }
@@ -1149,15 +1134,15 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
 
 var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   var row = _ref.row,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      CancelIcon = _tableInstance$option2.CancelIcon,
-      SaveIcon = _tableInstance$option2.SaveIcon,
-      localization = _tableInstance$option.localization,
-      onMrtEditRowSubmit = _tableInstance$option.onMrtEditRowSubmit,
-      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      _instance$options$ico = _instance$options.icons,
+      CancelIcon = _instance$options$ico.CancelIcon,
+      SaveIcon = _instance$options$ico.SaveIcon,
+      localization = _instance$options.localization,
+      onMrtEditRowSubmit = _instance$options.onMrtEditRowSubmit,
+      setCurrentEditingRow = instance.setCurrentEditingRow;
 
   var _getState = getState(),
       currentEditingRow = _getState.currentEditingRow;
@@ -1172,7 +1157,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   var handleSave = function handleSave() {
     onMrtEditRowSubmit == null ? void 0 : onMrtEditRowSubmit({
       row: currentEditingRow != null ? currentEditingRow : row,
-      tableInstance: tableInstance
+      instance: instance
     });
     setCurrentEditingRow(null);
   };
@@ -1210,17 +1195,17 @@ var commonIconButtonStyles = {
 };
 var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
   var row = _ref.row,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      enableEditing = _tableInstance$option.enableEditing,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      EditIcon = _tableInstance$option2.EditIcon,
-      MoreHorizIcon = _tableInstance$option2.MoreHorizIcon,
-      localization = _tableInstance$option.localization,
-      renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems,
-      renderRowActions = _tableInstance$option.renderRowActions,
-      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      enableEditing = _instance$options.enableEditing,
+      _instance$options$ico = _instance$options.icons,
+      EditIcon = _instance$options$ico.EditIcon,
+      MoreHorizIcon = _instance$options$ico.MoreHorizIcon,
+      localization = _instance$options.localization,
+      renderRowActionMenuItems = _instance$options.renderRowActionMenuItems,
+      renderRowActions = _instance$options.renderRowActions,
+      setCurrentEditingRow = instance.setCurrentEditingRow;
 
   var _getState = getState(),
       currentEditingRow = _getState.currentEditingRow;
@@ -1242,10 +1227,10 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
 
   return React.createElement(React.Fragment, null, renderRowActions ? React.createElement(React.Fragment, null, renderRowActions({
     row: row,
-    tableInstance: tableInstance
+    instance: instance
   })) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React.createElement(MRT_EditActionButtons, {
     row: row,
-    tableInstance: tableInstance
+    instance: instance
   }) : !renderRowActionMenuItems && enableEditing ? React.createElement(Tooltip, {
     placement: "right",
     arrow: true,
@@ -1268,23 +1253,23 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     handleEdit: handleStartEditMode,
     row: row,
     setAnchorEl: setAnchorEl,
-    tableInstance: tableInstance
+    instance: instance
   })) : null);
 };
 
 var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row,
       selectAll = _ref.selectAll,
-      tableInstance = _ref.tableInstance;
-  var getRowModel = tableInstance.getRowModel,
-      getSelectedRowModel = tableInstance.getSelectedRowModel,
-      getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      localization = _tableInstance$option.localization,
-      muiSelectCheckboxProps = _tableInstance$option.muiSelectCheckboxProps,
-      onMrtSelectRowChange = _tableInstance$option.onMrtSelectRowChange,
-      onMrtSelectAllChange = _tableInstance$option.onMrtSelectAllChange,
-      selectAllMode = _tableInstance$option.selectAllMode;
+      instance = _ref.instance;
+  var getRowModel = instance.getRowModel,
+      getSelectedRowModel = instance.getSelectedRowModel,
+      getState = instance.getState,
+      _instance$options = instance.options,
+      localization = _instance$options.localization,
+      muiSelectCheckboxProps = _instance$options.muiSelectCheckboxProps,
+      onMrtSelectRowChange = _instance$options.onMrtSelectRowChange,
+      onMrtSelectAllChange = _instance$options.onMrtSelectAllChange,
+      selectAllMode = _instance$options.selectAllMode;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -1292,15 +1277,15 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
       if (selectAllMode === 'all') {
-        tableInstance.getToggleAllRowsSelectedHandler()(event);
+        instance.getToggleAllRowsSelectedHandler()(event);
       } else if (selectAllMode === 'page') {
-        tableInstance.getToggleAllPageRowsSelectedHandler()(event);
+        instance.getToggleAllPageRowsSelectedHandler()(event);
       }
 
       onMrtSelectAllChange == null ? void 0 : onMrtSelectAllChange({
         event: event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
-        tableInstance: tableInstance
+        instance: instance
       });
     } else if (row) {
       row == null ? void 0 : row.getToggleSelectedHandler()(event);
@@ -1310,7 +1295,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
         selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
           return selectedRow.id !== row.id;
         }),
-        tableInstance: tableInstance
+        instance: instance
       });
     }
   };
@@ -1318,7 +1303,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var checkboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
     isSelectAll: !!selectAll,
     row: row,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiSelectCheckboxProps;
   return React.createElement(Tooltip, {
     arrow: true,
@@ -1326,8 +1311,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     enterNextDelay: 1000,
     title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
   }, React.createElement(Checkbox, Object.assign({
-    checked: selectAll ? tableInstance.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
-    indeterminate: selectAll ? tableInstance.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
+    checked: selectAll ? instance.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
+    indeterminate: selectAll ? instance.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
     inputProps: {
       'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
     },
@@ -1341,19 +1326,19 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   })));
 };
 
-var _excluded = ["tableInstance"];
+var _excluded = ["instance"];
 var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
-  var tableInstance = _ref.tableInstance,
+  var instance = _ref.instance,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      FullscreenExitIcon = _tableInstance$option2.FullscreenExitIcon,
-      FullscreenIcon = _tableInstance$option2.FullscreenIcon,
-      localization = _tableInstance$option.localization,
-      onMrtToggleFullScreen = _tableInstance$option.onMrtToggleFullScreen,
-      setIsFullScreen = tableInstance.setIsFullScreen;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      _instance$options$ico = _instance$options.icons,
+      FullscreenExitIcon = _instance$options$ico.FullscreenExitIcon,
+      FullscreenIcon = _instance$options$ico.FullscreenIcon,
+      localization = _instance$options.localization,
+      onMrtToggleFullScreen = _instance$options.onMrtToggleFullScreen,
+      setIsFullScreen = instance.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -1362,7 +1347,7 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
     onMrtToggleFullScreen == null ? void 0 : onMrtToggleFullScreen({
       event: event,
       isFullScreen: !isFullScreen,
-      tableInstance: tableInstance
+      instance: instance
     });
     setIsFullScreen(!isFullScreen);
   };
@@ -1376,14 +1361,14 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null)));
 };
 
-var _excluded$1 = ["tableInstance"];
+var _excluded$1 = ["instance"];
 var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
-  var tableInstance = _ref.tableInstance,
+  var instance = _ref.instance,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  var _tableInstance$option = tableInstance.options,
-      ViewColumnIcon = _tableInstance$option.icons.ViewColumnIcon,
-      localization = _tableInstance$option.localization;
+  var _instance$options = instance.options,
+      ViewColumnIcon = _instance$options.icons.ViewColumnIcon,
+      localization = _instance$options.localization;
 
   var _useState = useState(null),
       anchorEl = _useState[0],
@@ -1402,23 +1387,23 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
   }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
     anchorEl: anchorEl,
     setAnchorEl: setAnchorEl,
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
-var _excluded$2 = ["tableInstance"];
+var _excluded$2 = ["instance"];
 var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
-  var tableInstance = _ref.tableInstance,
+  var instance = _ref.instance,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      DensityMediumIcon = _tableInstance$option2.DensityMediumIcon,
-      DensitySmallIcon = _tableInstance$option2.DensitySmallIcon,
-      localization = _tableInstance$option.localization,
-      onMrtToggleDensePadding = _tableInstance$option.onMrtToggleDensePadding,
-      setIsDensePadding = tableInstance.setIsDensePadding;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      _instance$options$ico = _instance$options.icons,
+      DensityMediumIcon = _instance$options$ico.DensityMediumIcon,
+      DensitySmallIcon = _instance$options$ico.DensitySmallIcon,
+      localization = _instance$options.localization,
+      onMrtToggleDensePadding = _instance$options.onMrtToggleDensePadding,
+      setIsDensePadding = instance.setIsDensePadding;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -1427,7 +1412,7 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
     onMrtToggleDensePadding == null ? void 0 : onMrtToggleDensePadding({
       event: event,
       isDensePadding: !isDensePadding,
-      tableInstance: tableInstance
+      instance: instance
     });
     setIsDensePadding(!isDensePadding);
   };
@@ -1441,19 +1426,19 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
   }, rest), isDensePadding ? React.createElement(DensitySmallIcon, null) : React.createElement(DensityMediumIcon, null)));
 };
 
-var _excluded$3 = ["tableInstance"];
+var _excluded$3 = ["instance"];
 var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
-  var tableInstance = _ref.tableInstance,
+  var instance = _ref.instance,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      FilterListIcon = _tableInstance$option2.FilterListIcon,
-      FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
-      localization = _tableInstance$option.localization,
-      onMrtToggleShowFilters = _tableInstance$option.onMrtToggleShowFilters,
-      setShowFilters = tableInstance.setShowFilters;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      _instance$options$ico = _instance$options.icons,
+      FilterListIcon = _instance$options$ico.FilterListIcon,
+      FilterListOffIcon = _instance$options$ico.FilterListOffIcon,
+      localization = _instance$options.localization,
+      onMrtToggleShowFilters = _instance$options.onMrtToggleShowFilters,
+      setShowFilters = instance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
@@ -1462,7 +1447,7 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
     onMrtToggleShowFilters == null ? void 0 : onMrtToggleShowFilters({
       event: event,
       showFilters: !showFilters,
-      tableInstance: tableInstance
+      instance: instance
     });
     setShowFilters(!showFilters);
   };
@@ -1476,34 +1461,34 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
   }, rest), showFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null)));
 };
 
-var _excluded$4 = ["tableInstance"];
+var _excluded$4 = ["instance"];
 var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
-  var tableInstance = _ref.tableInstance,
+  var instance = _ref.instance,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      SearchIcon = _tableInstance$option2.SearchIcon,
-      SearchOffIcon = _tableInstance$option2.SearchOffIcon,
-      tableId = _tableInstance$option.tableId,
-      localization = _tableInstance$option.localization,
-      muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onMrtToggleShowGlobalFilter = _tableInstance$option.onMrtToggleShowGlobalFilter,
-      setShowGlobalFilter = tableInstance.setShowGlobalFilter;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      _instance$options$ico = _instance$options.icons,
+      SearchIcon = _instance$options$ico.SearchIcon,
+      SearchOffIcon = _instance$options$ico.SearchOffIcon,
+      tableId = _instance$options.tableId,
+      localization = _instance$options.localization,
+      muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
+      onMrtToggleShowGlobalFilter = _instance$options.onMrtToggleShowGlobalFilter,
+      setShowGlobalFilter = instance.setShowGlobalFilter;
 
   var _getState = getState(),
       showGlobalFilter = _getState.showGlobalFilter;
 
   var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiSearchTextFieldProps;
 
   var handleToggleSearch = function handleToggleSearch(event) {
     onMrtToggleShowGlobalFilter == null ? void 0 : onMrtToggleShowGlobalFilter({
       event: event,
       showGlobalFilter: !showGlobalFilter,
-      tableInstance: tableInstance
+      instance: instance
     });
     setShowGlobalFilter(!showGlobalFilter);
     setTimeout(function () {
@@ -1522,17 +1507,17 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_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,
-      tableId = _tableInstance$option.tableId,
-      localization = _tableInstance$option.localization,
-      muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onMrtGlobalFilterValueChange = _tableInstance$option.onMrtGlobalFilterValueChange;
+  var instance = _ref.instance;
+  var getState = instance.getState,
+      setGlobalFilter = instance.setGlobalFilter,
+      _instance$options = instance.options,
+      _instance$options$ico = _instance$options.icons,
+      SearchIcon = _instance$options$ico.SearchIcon,
+      CloseIcon = _instance$options$ico.CloseIcon,
+      tableId = _instance$options.tableId,
+      localization = _instance$options.localization,
+      muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
+      onMrtGlobalFilterValueChange = _instance$options.onMrtGlobalFilterValueChange;
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
@@ -1552,7 +1537,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
     setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
     onMrtGlobalFilterValueChange == null ? void 0 : onMrtGlobalFilterValueChange({
       event: event,
-      tableInstance: tableInstance
+      instance: instance
     });
   }, 200), []);
 
@@ -1566,7 +1551,7 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
   };
 
   var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiSearchTextFieldProps;
   return React.createElement(Collapse, {
     "in": showGlobalFilter,
@@ -1612,23 +1597,23 @@ var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
   })), React.createElement(MRT_FilterOptionMenu, {
     anchorEl: anchorEl,
     setAnchorEl: setAnchorEl,
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   var _renderToolbarInterna;
 
-  var tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      enableColumnFilters = _tableInstance$option.enableColumnFilters,
-      enableDensePaddingToggle = _tableInstance$option.enableDensePaddingToggle,
-      enableFilters = _tableInstance$option.enableFilters,
-      enableFullScreenToggle = _tableInstance$option.enableFullScreenToggle,
-      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
-      enableHiding = _tableInstance$option.enableHiding,
-      positionGlobalFilter = _tableInstance$option.positionGlobalFilter,
-      renderToolbarInternalActions = _tableInstance$option.renderToolbarInternalActions;
+  var instance = _ref.instance;
+  var _instance$options = instance.options,
+      enableColumnFilters = _instance$options.enableColumnFilters,
+      enableDensePaddingToggle = _instance$options.enableDensePaddingToggle,
+      enableFilters = _instance$options.enableFilters,
+      enableFullScreenToggle = _instance$options.enableFullScreenToggle,
+      enableGlobalFilter = _instance$options.enableGlobalFilter,
+      enableHiding = _instance$options.enableHiding,
+      positionGlobalFilter = _instance$options.positionGlobalFilter,
+      renderToolbarInternalActions = _instance$options.renderToolbarInternalActions;
   return React.createElement(Box, {
     sx: {
       display: 'flex',
@@ -1641,29 +1626,29 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
     MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
     MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
-    tableInstance: tableInstance
+    instance: instance
   })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_SearchTextField, {
-    tableInstance: tableInstance
+    instance: instance
   }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
-    tableInstance: tableInstance
+    instance: instance
   }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
-    tableInstance: tableInstance
+    instance: instance
   }), enableHiding && React.createElement(MRT_ShowHideColumnsButton, {
-    tableInstance: tableInstance
+    instance: instance
   }), enableDensePaddingToggle && React.createElement(MRT_ToggleDensePaddingButton, {
-    tableInstance: tableInstance
+    instance: instance
   }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
-    tableInstance: tableInstance
+    instance: instance
   })));
 };
 
 var MRT_TablePagination = function MRT_TablePagination(_ref) {
-  var tableInstance = _ref.tableInstance;
-  var getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
-      getState = tableInstance.getState,
-      setPageIndex = tableInstance.setPageIndex,
-      setPageSize = tableInstance.setPageSize,
-      muiTablePaginationProps = tableInstance.options.muiTablePaginationProps;
+  var instance = _ref.instance;
+  var getPrePaginationRowModel = instance.getPrePaginationRowModel,
+      getState = instance.getState,
+      setPageIndex = instance.setPageIndex,
+      setPageSize = instance.setPageSize,
+      muiTablePaginationProps = instance.options.muiTablePaginationProps;
 
   var _getState = getState(),
       _getState$pagination = _getState.pagination,
@@ -1673,7 +1658,7 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
       pageIndex = _getState$pagination$2 === void 0 ? 0 : _getState$pagination$2;
 
   var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTablePaginationProps;
 
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
@@ -1716,19 +1701,19 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
   var _localization$selecte, _localization$selecte2;
 
   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;
+      instance = _ref.instance;
+  var getPrePaginationRowModel = instance.getPrePaginationRowModel,
+      getSelectedRowModel = instance.getSelectedRowModel,
+      getState = instance.getState,
+      _instance$options = instance.options,
+      localization = _instance$options.localization,
+      muiTableToolbarAlertBannerProps = _instance$options.muiTableToolbarAlertBannerProps;
 
   var _getState = getState(),
       grouping = _getState.grouping;
 
   var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : 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) {
@@ -1736,9 +1721,9 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       key: index + "-" + columnId
     }, index > 0 ? localization.thenBy : '', React.createElement(Chip, {
       color: "secondary",
-      label: tableInstance.getColumn(columnId).columnDef.header,
+      label: instance.getColumn(columnId).columnDef.header,
       onDelete: function onDelete() {
-        return tableInstance.getColumn(columnId).toggleGrouping();
+        return instance.getColumn(columnId).toggleGrouping();
       }
     }));
   })) : null;
@@ -1768,16 +1753,16 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
   var alignTo = _ref.alignTo,
-      tableInstance = _ref.tableInstance;
-  var muiLinearProgressProps = tableInstance.options.muiLinearProgressProps,
-      getState = tableInstance.getState;
+      instance = _ref.instance;
+  var muiLinearProgressProps = instance.options.muiLinearProgressProps,
+      getState = instance.getState;
 
   var _getState = getState(),
       isLoading = _getState.isLoading,
       showProgressBars = _getState.showProgressBars;
 
   var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiLinearProgressProps;
   return React.createElement(Collapse, {
     "in": isLoading || showProgressBars,
@@ -1815,19 +1800,19 @@ var commonToolbarStyles = function commonToolbarStyles(_ref) {
 var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var _renderToolbarCustomA;
 
-  var tableInstance = _ref2.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
-      enablePagination = _tableInstance$option.enablePagination,
-      enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
-      tableId = _tableInstance$option.tableId,
-      muiTableToolbarTopProps = _tableInstance$option.muiTableToolbarTopProps,
-      positionPagination = _tableInstance$option.positionPagination,
-      positionGlobalFilter = _tableInstance$option.positionGlobalFilter,
-      positionToolbarActions = _tableInstance$option.positionToolbarActions,
-      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
-      renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
+  var instance = _ref2.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      enableGlobalFilter = _instance$options.enableGlobalFilter,
+      enablePagination = _instance$options.enablePagination,
+      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
+      tableId = _instance$options.tableId,
+      muiTableToolbarTopProps = _instance$options.muiTableToolbarTopProps,
+      positionPagination = _instance$options.positionPagination,
+      positionGlobalFilter = _instance$options.positionGlobalFilter,
+      positionToolbarActions = _instance$options.positionToolbarActions,
+      positionToolbarAlertBanner = _instance$options.positionToolbarAlertBanner,
+      renderToolbarCustomActions = _instance$options.renderToolbarCustomActions;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen,
@@ -1835,7 +1820,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
 
   var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableToolbarTopProps;
   var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarCustomActions || showGlobalFilter);
   return React.createElement(Toolbar, Object.assign({
@@ -1852,9 +1837,10 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
     }
   }), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, {
     stackAlertBanner: stackAlertBanner,
-    tableInstance: tableInstance
+    instance: instance
   }), React.createElement(Box, {
     sx: {
+      alignItems: 'flex-start',
       display: 'flex',
       justifyContent: 'space-between',
       p: '0.5rem',
@@ -1864,38 +1850,38 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       width: renderToolbarCustomActions ? '100%' : undefined
     }
   }, enableGlobalFilter && positionGlobalFilter === 'left' && React.createElement(MRT_SearchTextField, {
-    tableInstance: tableInstance
+    instance: instance
   }), (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions({
-    tableInstance: tableInstance
+    instance: instance
   })) != null ? _renderToolbarCustomA : React.createElement("span", null), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
-    tableInstance: tableInstance
+    instance: instance
   })), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
-    tableInstance: tableInstance
+    instance: instance
   })), React.createElement(MRT_LinearProgressBar, {
     alignTo: "bottom",
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
 var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
-  var tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
-      tableId = _tableInstance$option.tableId,
-      enablePagination = _tableInstance$option.enablePagination,
-      muiTableToolbarBottomProps = _tableInstance$option.muiTableToolbarBottomProps,
-      positionPagination = _tableInstance$option.positionPagination,
-      positionToolbarActions = _tableInstance$option.positionToolbarActions,
-      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
-      renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
+  var instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
+      tableId = _instance$options.tableId,
+      enablePagination = _instance$options.enablePagination,
+      muiTableToolbarBottomProps = _instance$options.muiTableToolbarBottomProps,
+      positionPagination = _instance$options.positionPagination,
+      positionToolbarActions = _instance$options.positionToolbarActions,
+      positionToolbarAlertBanner = _instance$options.positionToolbarAlertBanner,
+      renderToolbarCustomActions = _instance$options.renderToolbarCustomActions;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
   var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableToolbarBottomProps;
   var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'bottom' && !!renderToolbarCustomActions && positionToolbarActions === 'bottom';
   return React.createElement(Toolbar, Object.assign({
@@ -1913,9 +1899,9 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
     }
   }), React.createElement(MRT_LinearProgressBar, {
     alignTo: "top",
-    tableInstance: tableInstance
+    instance: instance
   }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
-    tableInstance: tableInstance
+    instance: instance
   }), React.createElement(Box, {
     sx: {
       display: 'flex',
@@ -1926,9 +1912,9 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       top: 0
     }
   }, enableToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, {
-    tableInstance: tableInstance
+    instance: instance
   }) : React.createElement("span", null), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
-    tableInstance: tableInstance
+    instance: instance
   })));
 };
 
@@ -1937,16 +1923,16 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      FilterListIcon = _tableInstance$option2.FilterListIcon,
-      CloseIcon = _tableInstance$option2.CloseIcon,
-      tableId = _tableInstance$option.tableId,
-      localization = _tableInstance$option.localization,
-      muiTableHeadCellFilterTextFieldProps = _tableInstance$option.muiTableHeadCellFilterTextFieldProps,
-      setCurrentFilterFns = tableInstance.setCurrentFilterFns;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      _instance$options$ico = _instance$options.icons,
+      FilterListIcon = _instance$options$ico.FilterListIcon,
+      CloseIcon = _instance$options$ico.CloseIcon,
+      tableId = _instance$options.tableId,
+      localization = _instance$options.localization,
+      muiTableHeadCellFilterTextFieldProps = _instance$options.muiTableHeadCellFilterTextFieldProps,
+      setCurrentFilterFns = instance.setCurrentFilterFns;
   var column = header.column;
   var columnDef = column.columnDef;
 
@@ -1959,11 +1945,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 
   var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps({
     column: column,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableHeadCellFilterTextFieldProps;
   var mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function ? columnDef.muiTableHeadCellFilterTextFieldProps({
     column: column,
-    tableInstance: tableInstance
+    instance: instance
   }) : columnDef.muiTableHeadCellFilterTextFieldProps;
 
   var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
@@ -2010,21 +1996,21 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     setCurrentFilterFns(function (prev) {
       var _extends2;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = MRT_FILTER_OPTION.FUZZY, _extends2));
+      return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = 'fuzzy', _extends2));
     });
   };
 
   if (columnDef.Filter) {
     return React.createElement(React.Fragment, null, columnDef.Filter == null ? void 0 : columnDef.Filter({
       header: header,
-      tableInstance: tableInstance
+      instance: instance
     }));
   }
 
   var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
   var filterFn = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
   var isSelectFilter = !!columnDef.filterSelectOptions;
-  var filterChipLabel = !(filterFn instanceof Function) && [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(filterFn) ? //@ts-ignore
+  var filterChipLabel = !(filterFn instanceof Function) && ['empty', 'notEmpty'].includes(filterFn) ? //@ts-ignore
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
   var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
@@ -2134,14 +2120,14 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     anchorEl: anchorEl,
     header: header,
     setAnchorEl: setAnchorEl,
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
 var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
   var header = _ref.header,
-      tableInstance = _ref.tableInstance;
-  var localization = tableInstance.options.localization;
+      instance = _ref.instance;
+  var localization = instance.options.localization;
   return React.createElement(Box, {
     sx: {
       display: 'grid',
@@ -2150,7 +2136,7 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
   }, React.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 0,
-    tableInstance: tableInstance
+    instance: instance
   }), React.createElement(Box, {
     sx: {
       width: '100%',
@@ -2160,14 +2146,14 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
   }, localization.to), React.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 1,
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
 var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer(_ref) {
   var header = _ref.header,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState;
+      instance = _ref.instance;
+  var getState = instance.getState;
 
   var _getState = getState(),
       currentFilterFns = _getState.currentFilterFns,
@@ -2178,12 +2164,12 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
     "in": showFilters,
     mountOnEnter: true,
     unmountOnExit: true
-  }, currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? React.createElement(MRT_FilterRangeFields, {
+  }, currentFilterFns[column.id] === 'between' ? React.createElement(MRT_FilterRangeFields, {
     header: header,
-    tableInstance: tableInstance
+    instance: instance
   }) : React.createElement(MRT_FilterTextField, {
     header: header,
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
@@ -2191,14 +2177,14 @@ 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,
-      FilterAltOffIcon = _tableInstance$option2.FilterAltOffIcon,
-      localization = _tableInstance$option.localization,
-      setShowFilters = tableInstance.setShowFilters;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      _instance$options$ico = _instance$options.icons,
+      FilterAltIcon = _instance$options$ico.FilterAltIcon,
+      FilterAltOffIcon = _instance$options$ico.FilterAltOffIcon,
+      localization = _instance$options.localization,
+      setShowFilters = instance.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
@@ -2235,8 +2221,8 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
 
 var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
   var header = _ref.header,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState;
+      instance = _ref.instance;
+  var getState = instance.getState;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
@@ -2278,8 +2264,8 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
 
 var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
   var header = _ref.header,
-      tableInstance = _ref.tableInstance;
-  var localization = tableInstance.options.localization;
+      instance = _ref.instance;
+  var localization = instance.options.localization;
   var column = header.column;
   var columnDef = column.columnDef;
   var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', columnDef.header) : localization.sortedByColumnAsc.replace('{column}', columnDef.header) : localization.unsorted;
@@ -2296,11 +2282,11 @@ var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
 
 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;
+      instance = _ref.instance;
+  var _instance$options = instance.options,
+      MoreVertIcon = _instance$options.icons.MoreVertIcon,
+      localization = _instance$options.localization,
+      muiTableHeadCellColumnActionsButtonProps = _instance$options.muiTableHeadCellColumnActionsButtonProps;
   var column = header.column;
   var columnDef = column.columnDef;
 
@@ -2316,11 +2302,11 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
 
   var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps({
     column: column,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableHeadCellColumnActionsButtonProps;
   var mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? columnDef.muiTableHeadCellColumnActionsButtonProps({
     column: column,
-    tableInstance: tableInstance
+    instance: instance
   }) : columnDef.muiTableHeadCellColumnActionsButtonProps;
 
   var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
@@ -2351,27 +2337,27 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     anchorEl: anchorEl,
     header: header,
     setAnchorEl: setAnchorEl,
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _ref2, _ref3, _columnDef$minSize, _columnDef$header$len, _columnDef$header;
+  var _ref2, _ref3, _columnDef$header$len, _columnDef$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,
-      enableGrouping = _tableInstance$option.enableGrouping,
-      muiTableHeadCellProps = _tableInstance$option.muiTableHeadCellProps;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      enableColumnActions = _instance$options.enableColumnActions,
+      enableColumnFilters = _instance$options.enableColumnFilters,
+      enableColumnOrdering = _instance$options.enableColumnOrdering,
+      enableColumnResizing = _instance$options.enableColumnResizing,
+      enableGrouping = _instance$options.enableGrouping,
+      muiTableHeadCellProps = _instance$options.muiTableHeadCellProps;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -2381,22 +2367,22 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       columnDefType = column.columnDefType;
   var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps({
     column: column,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableHeadCellProps;
   var mcTableHeadCellProps = columnDef.muiTableHeadCellProps instanceof Function ? columnDef.muiTableHeadCellProps({
     column: column,
-    tableInstance: tableInstance
+    instance: instance
   }) : columnDef.muiTableHeadCellProps;
 
   var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
   var headerElement = (_ref2 = (_ref3 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
     header: header,
-    tableInstance: tableInstance
+    instance: instance
   }) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref3 : header.renderHeader()) != null ? _ref2 : columnDef.header;
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
-    return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
+    return column.getIsPinned() === 'left' && instance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
   };
 
   var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
@@ -2404,7 +2390,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   };
 
   var getTotalRight = function getTotalRight() {
-    return (tableInstance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
+    return (instance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
   return React.createElement(TableCell, Object.assign({
@@ -2413,6 +2399,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
+      var _columnDef$minSize;
+
       return _extends({
         backgroundColor: column.getIsPinned() && columnDefType !== 'group' ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
         backgroundImage: 'inherit',
@@ -2429,12 +2417,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
         zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
-      }, tableCellProps == null ? void 0 : tableCellProps.sx);
-    },
-    style: {
-      maxWidth: "min(" + column.getSize() + "px, fit-content)",
-      minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
-      width: header.getSize()
+      }, tableCellProps == null ? void 0 : tableCellProps.sx, {
+        maxWidth: "min(" + column.getSize() + "px, fit-content)",
+        minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
+        width: header.getSize()
+      });
     }
   }), header.isPlaceholder ? null : columnDefType === 'display' ? headerElement : React.createElement(Box, {
     ref: previewRef,
@@ -2458,37 +2445,37 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     }
   }, headerElement, columnDefType === 'data' && column.getCanSort() && React.createElement(MRT_TableHeadCellSortLabel, {
     header: header,
-    tableInstance: tableInstance
+    instance: instance
   }), columnDefType === 'data' && enableColumnFilters && column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterLabel, {
     header: header,
-    tableInstance: tableInstance
+    instance: instance
   })), React.createElement(Box, {
     sx: {
       whiteSpace: 'nowrap'
     }
   }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
-    tableInstance: tableInstance
+    instance: instance
   }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
     header: header,
-    tableInstance: tableInstance
+    instance: instance
   })), column.getCanResize() && React.createElement(MRT_TableHeadCellResizeHandle, {
     header: header,
-    tableInstance: tableInstance
+    instance: instance
   })), columnDefType === 'data' && column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterContainer, {
     header: header,
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
 var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var header = _ref.header,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState;
+      instance = _ref.instance;
+  var getState = instance.getState;
 
-  _objectDestructuringEmpty(tableInstance.options);
+  _objectDestructuringEmpty(instance.options);
 
-  var setColumnOrder = tableInstance.setColumnOrder;
+  var setColumnOrder = instance.setColumnOrder;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
@@ -2524,20 +2511,20 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
     header: header,
     isDragging: isDragging,
     previewRef: previewRef,
-    tableInstance: tableInstance
+    instance: instance
   });
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var headerGroup = _ref.headerGroup,
-      tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
-      enableGrouping = _tableInstance$option.enableGrouping,
-      muiTableHeadRowProps = _tableInstance$option.muiTableHeadRowProps;
+      instance = _ref.instance;
+  var _instance$options = instance.options,
+      enableColumnOrdering = _instance$options.enableColumnOrdering,
+      enableGrouping = _instance$options.enableGrouping,
+      muiTableHeadRowProps = _instance$options.muiTableHeadRowProps;
   var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
     headerGroup: headerGroup,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableHeadRowProps;
   return React.createElement(TableRow, Object.assign({}, tableRowProps, {
     sx: function sx(theme) {
@@ -2550,43 +2537,43 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     return enableColumnOrdering || enableGrouping ? React.createElement(MRT_DraggableTableHeadCell, {
       header: header,
       key: header.id || index,
-      tableInstance: tableInstance
+      instance: instance
     }) : React.createElement(MRT_TableHeadCell, {
       header: header,
       key: header.id || index,
-      tableInstance: tableInstance
+      instance: instance
     });
   }));
 };
 
 var MRT_TableHead = function MRT_TableHead(_ref) {
-  var tableInstance = _ref.tableInstance;
-  var getHeaderGroups = tableInstance.getHeaderGroups,
-      muiTableHeadProps = tableInstance.options.muiTableHeadProps;
+  var instance = _ref.instance;
+  var getHeaderGroups = instance.getHeaderGroups,
+      muiTableHeadProps = instance.options.muiTableHeadProps;
   var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableHeadProps;
   return React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
     return React.createElement(MRT_TableHeadRow, {
       headerGroup: headerGroup,
       key: headerGroup.id,
-      tableInstance: tableInstance
+      instance: instance
     });
   }));
 };
 
 var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   var cell = _ref.cell,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      tableId = _tableInstance$option.tableId,
-      enableEditing = _tableInstance$option.enableEditing,
-      muiTableBodyCellEditTextFieldProps = _tableInstance$option.muiTableBodyCellEditTextFieldProps,
-      onMrtCellEditBlur = _tableInstance$option.onMrtCellEditBlur,
-      onMrtCellEditChange = _tableInstance$option.onMrtCellEditChange,
-      setCurrentEditingCell = tableInstance.setCurrentEditingCell,
-      setCurrentEditingRow = tableInstance.setCurrentEditingRow;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      tableId = _instance$options.tableId,
+      enableEditing = _instance$options.enableEditing,
+      muiTableBodyCellEditTextFieldProps = _instance$options.muiTableBodyCellEditTextFieldProps,
+      onMrtCellEditBlur = _instance$options.onMrtCellEditBlur,
+      onMrtCellEditChange = _instance$options.onMrtCellEditChange,
+      setCurrentEditingCell = instance.setCurrentEditingCell,
+      setCurrentEditingRow = instance.setCurrentEditingRow;
 
   var _useState = useState(cell.getValue()),
       value = _useState[0],
@@ -2601,12 +2588,12 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     columnDef.onMrtCellEditChange == null ? void 0 : columnDef.onMrtCellEditChange({
       event: event,
       cell: cell,
-      tableInstance: tableInstance
+      instance: instance
     });
     onMrtCellEditChange == null ? void 0 : onMrtCellEditChange({
       event: event,
       cell: cell,
-      tableInstance: tableInstance
+      instance: instance
     });
   };
 
@@ -2621,22 +2608,22 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     columnDef.onMrtCellEditBlur == null ? void 0 : columnDef.onMrtCellEditBlur({
       event: event,
       cell: cell,
-      tableInstance: tableInstance
+      instance: instance
     });
     onMrtCellEditBlur == null ? void 0 : onMrtCellEditBlur({
       event: event,
       cell: cell,
-      tableInstance: tableInstance
+      instance: instance
     });
   };
 
   var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps({
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableBodyCellEditTextFieldProps;
   var mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function ? columnDef.muiTableBodyCellEditTextFieldProps({
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
   }) : columnDef.muiTableBodyCellEditTextFieldProps;
 
   var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
@@ -2644,7 +2631,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
     return React.createElement(React.Fragment, null, columnDef.Edit == null ? void 0 : columnDef.Edit({
       cell: cell,
-      tableInstance: tableInstance
+      instance: instance
     }));
   }
 
@@ -2665,10 +2652,10 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 var MRT_CopyButton = function MRT_CopyButton(_ref) {
   var cell = _ref.cell,
       children = _ref.children,
-      tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      localization = _tableInstance$option.localization,
-      muiTableBodyCellCopyButtonProps = _tableInstance$option.muiTableBodyCellCopyButtonProps;
+      instance = _ref.instance;
+  var _instance$options = instance.options,
+      localization = _instance$options.localization,
+      muiTableBodyCellCopyButtonProps = _instance$options.muiTableBodyCellCopyButtonProps;
   var column = cell.column;
   var columnDef = column.columnDef;
 
@@ -2686,11 +2673,11 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 
   var mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function ? muiTableBodyCellCopyButtonProps({
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableBodyCellCopyButtonProps;
   var mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function ? columnDef.muiTableBodyCellCopyButtonProps({
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
   }) : columnDef.muiTableBodyCellCopyButtonProps;
 
   var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
@@ -2727,26 +2714,26 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _columnDef$minSize, _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
+  var _columnDef$Aggregated, _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
       rowIndex = _ref.rowIndex,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      editingMode = _tableInstance$option.editingMode,
-      enableClickToCopy = _tableInstance$option.enableClickToCopy,
-      enableColumnOrdering = _tableInstance$option.enableColumnOrdering,
-      enableEditing = _tableInstance$option.enableEditing,
-      enableRowNumbers = _tableInstance$option.enableRowNumbers,
-      muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
-      muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
-      onMrtCellClick = _tableInstance$option.onMrtCellClick,
-      rowNumberMode = _tableInstance$option.rowNumberMode,
-      tableId = _tableInstance$option.tableId,
-      setColumnOrder = tableInstance.setColumnOrder,
-      setCurrentEditingCell = tableInstance.setCurrentEditingCell;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      editingMode = _instance$options.editingMode,
+      enableClickToCopy = _instance$options.enableClickToCopy,
+      enableColumnOrdering = _instance$options.enableColumnOrdering,
+      enableEditing = _instance$options.enableEditing,
+      enableRowNumbers = _instance$options.enableRowNumbers,
+      muiTableBodyCellProps = _instance$options.muiTableBodyCellProps,
+      muiTableBodyCellSkeletonProps = _instance$options.muiTableBodyCellSkeletonProps,
+      onMrtCellClick = _instance$options.onMrtCellClick,
+      rowNumberMode = _instance$options.rowNumberMode,
+      tableId = _instance$options.tableId,
+      setColumnOrder = instance.setColumnOrder,
+      setCurrentEditingCell = instance.setCurrentEditingCell;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder,
@@ -2771,11 +2758,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableBodyCellProps;
   var mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function ? columnDef.muiTableBodyCellProps({
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
   }) : columnDef.muiTableBodyCellProps;
 
   var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps);
@@ -2801,7 +2788,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
-    return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
+    return column.getIsPinned() === 'left' && instance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
   };
 
   var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
@@ -2809,7 +2796,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   var getTotalRight = function getTotalRight() {
-    return (tableInstance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
+    return (instance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
   return React.createElement(TableCell, Object.assign({
@@ -2817,13 +2804,15 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       return onMrtCellClick == null ? void 0 : onMrtCellClick({
         event: event,
         cell: cell,
-        tableInstance: tableInstance
+        instance: instance
       });
     },
     onDoubleClick: handleDoubleClick
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
     sx: function sx(theme) {
+      var _columnDef$minSize;
+
       return _extends({
         backgroundColor: column.getIsPinned() ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
         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,
@@ -2841,12 +2830,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         '&:hover': {
           backgroundColor: enableHover && enableEditing && editingMode !== 'row' ? 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, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
-      width: column.getSize()
+      }, tableCellProps == null ? void 0 : tableCellProps.sx, {
+        maxWidth: "min(" + column.getSize() + "px, fit-content)",
+        minWidth: "max(" + column.getSize() + "px, " + ((_columnDef$minSize = columnDef.minSize) != null ? _columnDef$minSize : 30) + "px)",
+        width: column.getSize()
+      });
     }
   }), React.createElement(React.Fragment, null, isLoading || showSkeletons ? React.createElement(Skeleton, Object.assign({
     animation: "wave",
@@ -2854,46 +2842,49 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     width: skeletonWidth
   }, muiTableBodyCellSkeletonProps)) : enableRowNumbers && rowNumberMode === 'static' && column.id === 'mrt-row-numbers' ? rowIndex + 1 : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
-    tableInstance: tableInstance
-  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React.createElement(MRT_EditCellTextField, {
+    instance: instance
+  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? (_columnDef$Aggregated = columnDef.AggregatedCell == null ? void 0 : columnDef.AggregatedCell({
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
+  })) != null ? _columnDef$Aggregated : cell.renderAggregatedCell() : isEditing ? React.createElement(MRT_EditCellTextField, {
+    cell: cell,
+    instance: instance
   }) : (enableClickToCopy || columnDef.enableClickToCopy) && columnDef.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
   }, React.createElement(React.Fragment, null, (_columnDef$Cell = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
   })) != null ? _columnDef$Cell : cell.renderCell())), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
-    tableInstance: tableInstance
+    instance: instance
   })) != null ? _columnDef$Cell2 : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   var row = _ref.row,
-      tableInstance = _ref.tableInstance;
-  var getVisibleFlatColumns = tableInstance.getVisibleFlatColumns,
-      _tableInstance$option = tableInstance.options,
-      muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
-      muiTableDetailPanelProps = _tableInstance$option.muiTableDetailPanelProps,
-      onMrtDetailPanelClick = _tableInstance$option.onMrtDetailPanelClick,
-      renderDetailPanel = _tableInstance$option.renderDetailPanel;
+      instance = _ref.instance;
+  var getVisibleLeafColumns = instance.getVisibleLeafColumns,
+      _instance$options = instance.options,
+      muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
+      muiTableDetailPanelProps = _instance$options.muiTableDetailPanelProps,
+      onMrtDetailPanelClick = _instance$options.onMrtDetailPanelClick,
+      renderDetailPanel = _instance$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableBodyRowProps;
   var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps({
     row: row,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableDetailPanelProps;
   return React.createElement(TableRow, Object.assign({}, tableRowProps), React.createElement(TableCell, Object.assign({
-    colSpan: getVisibleFlatColumns().length + 10,
+    colSpan: getVisibleLeafColumns().length,
     onClick: function onClick(event) {
       return onMrtDetailPanelClick == null ? void 0 : onMrtDetailPanelClick({
         event: event,
         row: row,
-        tableInstance: tableInstance
+        instance: instance
       });
     }
   }, tableCellProps, {
@@ -2901,28 +2892,29 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
       borderBottom: !row.getIsExpanded() ? 'none' : undefined,
       pb: row.getIsExpanded() ? '1rem' : 0,
       pt: row.getIsExpanded() ? '1rem' : 0,
-      transition: 'all 0.2s ease-in-out'
+      transition: 'all 0.2s ease-in-out',
+      width: instance.getTotalSize() + "px"
     }, tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), React.createElement(Collapse, {
+  }), renderDetailPanel && React.createElement(Collapse, {
     "in": row.getIsExpanded()
-  }, renderDetailPanel == null ? void 0 : renderDetailPanel({
+  }, renderDetailPanel({
     row: row,
-    tableInstance: tableInstance
+    instance: instance
   }))));
 };
 
 var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
   var row = _ref.row,
       rowIndex = _ref.rowIndex,
-      tableInstance = _ref.tableInstance;
-  var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
-      _tableInstance$option = tableInstance.options,
-      muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
-      onMrtRowClick = _tableInstance$option.onMrtRowClick,
-      renderDetailPanel = _tableInstance$option.renderDetailPanel;
+      instance = _ref.instance;
+  var getIsSomeColumnsPinned = instance.getIsSomeColumnsPinned,
+      _instance$options = instance.options,
+      muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
+      onMrtRowClick = _instance$options.onMrtRowClick,
+      renderDetailPanel = _instance$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableBodyRowProps;
   return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
     hover: true,
@@ -2930,7 +2922,7 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       return onMrtRowClick == null ? void 0 : onMrtRowClick({
         event: event,
         row: row,
-        tableInstance: tableInstance
+        instance: instance
       });
     },
     selected: row.getIsSelected()
@@ -2950,37 +2942,38 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       key: cell.id,
       enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
       rowIndex: rowIndex,
-      tableInstance: tableInstance
+      instance: instance
     });
   })), renderDetailPanel && !row.getIsGrouped() && React.createElement(MRT_TableDetailPanel, {
     row: row,
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
-  var tableInstance = _ref.tableInstance,
+  var instance = _ref.instance,
       tableContainerRef = _ref.tableContainerRef;
-  var getPaginationRowModel = tableInstance.getPaginationRowModel,
-      getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
-      getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      enablePagination = _tableInstance$option.enablePagination,
-      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
-      muiTableBodyProps = _tableInstance$option.muiTableBodyProps;
+  var getPaginationRowModel = instance.getPaginationRowModel,
+      getPrePaginationRowModel = instance.getPrePaginationRowModel,
+      getState = instance.getState,
+      _instance$options = instance.options,
+      enablePagination = _instance$options.enablePagination,
+      enableRowVirtualization = _instance$options.enableRowVirtualization,
+      muiTableBodyProps = _instance$options.muiTableBodyProps,
+      virtualizerProps = _instance$options.virtualizerProps;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
 
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableBodyProps;
   var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
-  var rowVirtualizer = enableRowVirtualization ? useVirtual({
+  var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
     overscan: isDensePadding ? 15 : 5,
     size: rows.length,
     parentRef: tableContainerRef
-  }) : {};
+  }, virtualizerProps)) : {};
   var virtualRows = rowVirtualizer.virtualItems;
   var paddingTop = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? virtualRows[0].start : 0;
   var paddingBottom = (virtualRows == null ? void 0 : virtualRows.length) > 0 ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end : 0;
@@ -2994,7 +2987,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       key: row.id,
       row: row,
       rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
-      tableInstance: tableInstance
+      instance: instance
     });
   }), enableRowVirtualization && paddingBottom > 0 && React.createElement("tr", null, React.createElement("td", {
     style: {
@@ -3007,11 +3000,11 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
   var _ref2, _ref3, _ref4;
 
   var footer = _ref.footer,
-      tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      muiTableFooterCellProps = _tableInstance$option.muiTableFooterCellProps,
-      enableColumnResizing = _tableInstance$option.enableColumnResizing;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      muiTableFooterCellProps = _instance$options.muiTableFooterCellProps,
+      enableColumnResizing = _instance$options.enableColumnResizing;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
@@ -3021,11 +3014,11 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
       columnDefType = column.columnDefType;
   var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps({
     column: column,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableFooterCellProps;
   var mcTableFooterCellProps = columnDef.muiTableFooterCellProps instanceof Function ? columnDef.muiTableFooterCellProps({
     column: column,
-    tableInstance: tableInstance
+    instance: instance
   }) : columnDef.muiTableFooterCellProps;
 
   var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps);
@@ -3050,7 +3043,7 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
     }
   }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = (_ref4 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
     footer: footer,
-    tableInstance: tableInstance
+    instance: instance
   }) : columnDef.Footer) != null ? _ref4 : columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
 };
 
@@ -3058,78 +3051,84 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
   var _footerGroup$headers;
 
   var footerGroup = _ref.footerGroup,
-      tableInstance = _ref.tableInstance;
-  var muiTableFooterRowProps = tableInstance.options.muiTableFooterRowProps; // if no content in row, skip row
+      instance = _ref.instance;
+  var muiTableFooterRowProps = instance.options.muiTableFooterRowProps; // if no content in row, skip row
 
   if (!((_footerGroup$headers = footerGroup.headers) != null && _footerGroup$headers.some(function (header) {
     return typeof header.column.columnDef.footer === 'string' && !!header.column.columnDef.footer || header.column.columnDef.Footer;
   }))) return null;
   var tableRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps({
     footerGroup: footerGroup,
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableFooterRowProps;
   return React.createElement(TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map(function (footer) {
     return React.createElement(MRT_TableFooterCell, {
       footer: footer,
       key: footer.id,
-      tableInstance: tableInstance
+      instance: instance
     });
   }));
 };
 
 var MRT_TableFooter = function MRT_TableFooter(_ref) {
-  var tableInstance = _ref.tableInstance;
-  var getFooterGroups = tableInstance.getFooterGroups,
-      muiTableFooterProps = tableInstance.options.muiTableFooterProps;
+  var instance = _ref.instance;
+  var getFooterGroups = instance.getFooterGroups,
+      muiTableFooterProps = instance.options.muiTableFooterProps;
   var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableFooterProps;
   return React.createElement(TableFooter, Object.assign({}, tableFooterProps), getFooterGroups().map(function (footerGroup) {
     return React.createElement(MRT_TableFooterRow, {
       footerGroup: footerGroup,
       key: footerGroup.id,
-      tableInstance: tableInstance
+      instance: instance
     });
   }));
 };
 
 var MRT_Table = function MRT_Table(_ref) {
   var tableContainerRef = _ref.tableContainerRef,
-      tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      enableColumnResizing = _tableInstance$option.enableColumnResizing,
-      enableRowVirtualization = _tableInstance$option.enableRowVirtualization,
-      enableStickyHeader = _tableInstance$option.enableStickyHeader,
-      enableTableFooter = _tableInstance$option.enableTableFooter,
-      enableTableHead = _tableInstance$option.enableTableHead,
-      muiTableProps = _tableInstance$option.muiTableProps;
+      instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      enableColumnResizing = _instance$options.enableColumnResizing,
+      enableRowVirtualization = _instance$options.enableRowVirtualization,
+      enableStickyHeader = _instance$options.enableStickyHeader,
+      enableTableFooter = _instance$options.enableTableFooter,
+      enableTableHead = _instance$options.enableTableHead,
+      muiTableProps = _instance$options.muiTableProps;
+
+  var _getState = getState(),
+      isFullScreen = _getState.isFullScreen;
+
   var tableProps = muiTableProps instanceof Function ? muiTableProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableProps;
   return React.createElement(Table, Object.assign({
-    stickyHeader: enableStickyHeader
+    stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
   }, tableProps, {
     sx: _extends({
-      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : undefined
+      tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
     }, tableProps == null ? void 0 : tableProps.sx)
   }), enableTableHead && React.createElement(MRT_TableHead, {
-    tableInstance: tableInstance
+    instance: instance
   }), React.createElement(MRT_TableBody, {
     tableContainerRef: tableContainerRef,
-    tableInstance: tableInstance
+    instance: instance
   }), enableTableFooter && React.createElement(MRT_TableFooter, {
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 var MRT_TableContainer = function MRT_TableContainer(_ref) {
-  var tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      enableStickyHeader = _tableInstance$option.enableStickyHeader,
-      muiTableContainerProps = _tableInstance$option.muiTableContainerProps,
-      tableId = _tableInstance$option.tableId;
+  var instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      enableStickyHeader = _instance$options.enableStickyHeader,
+      enableRowVirtualization = _instance$options.enableRowVirtualization,
+      muiTableContainerProps = _instance$options.muiTableContainerProps,
+      tableId = _instance$options.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -3139,7 +3138,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
       setTotalToolbarHeight = _useState[1];
 
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTableContainerProps;
   useIsomorphicLayoutEffect(function () {
     var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
@@ -3153,25 +3152,25 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
     ref: tableContainerRef,
     sx: _extends({
       maxWidth: '100%',
-      maxHeight: enableStickyHeader ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 2000px)" : undefined,
+      maxHeight: enableStickyHeader || enableRowVirtualization ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 9999px)" : undefined,
       overflow: 'auto'
     }, tableContainerProps == null ? void 0 : tableContainerProps.sx),
-    style: {
+    style: _extends({
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
-    }
+    }, tableContainerProps == null ? void 0 : tableContainerProps.style)
   }), React.createElement(MRT_Table, {
     tableContainerRef: tableContainerRef,
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
 var MRT_TablePaper = function MRT_TablePaper(_ref) {
-  var tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      enableToolbarBottom = _tableInstance$option.enableToolbarBottom,
-      enableToolbarTop = _tableInstance$option.enableToolbarTop,
-      muiTablePaperProps = _tableInstance$option.muiTablePaperProps;
+  var instance = _ref.instance;
+  var getState = instance.getState,
+      _instance$options = instance.options,
+      enableToolbarBottom = _instance$options.enableToolbarBottom,
+      enableToolbarTop = _instance$options.enableToolbarTop,
+      muiTablePaperProps = _instance$options.muiTablePaperProps;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -3179,16 +3178,14 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   useEffect(function () {
     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]);
   var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps({
-    tableInstance: tableInstance
+    instance: instance
   }) : muiTablePaperProps;
   return React.createElement(DndProvider, {
     backend: HTML5Backend
@@ -3197,26 +3194,25 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
   }, tablePaperProps, {
     sx: _extends({
       transition: 'all 0.2s ease-in-out'
-    }, tablePaperProps == null ? void 0 : tablePaperProps.sx),
-    style: {
+    }, tablePaperProps == null ? void 0 : tablePaperProps.sx, {
       height: isFullScreen ? '100vh' : undefined,
       margin: isFullScreen ? '0' : undefined,
       maxHeight: isFullScreen ? '100vh' : undefined,
       maxWidth: isFullScreen ? '100vw' : undefined,
       padding: isFullScreen ? '0' : undefined,
       width: isFullScreen ? '100vw' : undefined
-    }
+    })
   }), enableToolbarTop && React.createElement(MRT_ToolbarTop, {
-    tableInstance: tableInstance
+    instance: instance
   }), React.createElement(MRT_TableContainer, {
-    tableInstance: tableInstance
+    instance: instance
   }), enableToolbarBottom && React.createElement(MRT_ToolbarBottom, {
-    tableInstance: tableInstance
+    instance: instance
   })));
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4;
+  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onIsDensePaddi, _props$onIsFullScreen, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = useState(props.tableId),
       tableId = _useState[0],
@@ -3290,13 +3286,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
 
-      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_OPTION.EQUALS : MRT_FILTER_OPTION.FUZZY, _ref2;
+      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? 'equals' : 'fuzzy', _ref2;
     })));
   }),
       currentFilterFns = _useState8[0],
       setCurrentFilterFns = _useState8[1];
 
-  var _useState9 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : MRT_FILTER_OPTION.FUZZY),
+  var _useState9 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
       currentGlobalFilterFn = _useState9[0],
       setCurrentGlobalFilterFn = _useState9[1];
 
@@ -3328,25 +3324,25 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         var cell = _ref3.cell;
         return React.createElement(MRT_ToggleRowActionMenuButton, {
           row: cell.row,
-          tableInstance: tableInstance
+          instance: instance
         });
       },
       header: (_props$localization = props.localization) == null ? void 0 : _props$localization.actions,
       id: 'mrt-row-actions',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
-      size: 60
+      size: 70
     }), showExpandColumn && createDisplayColumn(table, {
       Cell: function Cell(_ref4) {
         var cell = _ref4.cell;
         return React.createElement(MRT_ExpandButton, {
           row: cell.row,
-          tableInstance: tableInstance
+          instance: instance
         });
       },
       Header: function Header() {
         return props.enableExpandAll ? React.createElement(MRT_ExpandAllButton, {
-          tableInstance: tableInstance
+          instance: instance
         }) : null;
       },
       header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.expand,
@@ -3359,13 +3355,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
         var cell = _ref5.cell;
         return React.createElement(MRT_SelectCheckbox, {
           row: cell.row,
-          tableInstance: tableInstance
+          instance: instance
         });
       },
       Header: function Header() {
         return props.enableSelectAll ? React.createElement(MRT_SelectCheckbox, {
           selectAll: true,
-          tableInstance: tableInstance
+          instance: instance
         }) : null;
       },
       header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.select,
@@ -3407,7 +3403,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     }) : 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
 
-  var tableInstance = _extends({}, useTableInstance(table, _extends({}, props, {
+  var instance = _extends({}, useTableInstance(table, _extends({}, props, {
     //@ts-ignore
     columns: columns,
     data: data,
@@ -3424,14 +3420,14 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showGlobalFilter: showGlobalFilter
     }, props.state)
   })), {
-    setCurrentEditingCell: setCurrentEditingCell,
-    setCurrentEditingRow: setCurrentEditingRow,
-    setCurrentFilterFns: setCurrentFilterFns,
-    setCurrentGlobalFilterFn: setCurrentGlobalFilterFn,
-    setIsDensePadding: setIsDensePadding,
-    setIsFullScreen: setIsFullScreen,
-    setShowFilters: setShowFilters,
-    setShowGlobalFilter: setShowGlobalFilter
+    setCurrentEditingCell: (_props$onCurrentEditi = props.onCurrentEditingCellChange) != null ? _props$onCurrentEditi : setCurrentEditingCell,
+    setCurrentEditingRow: (_props$onCurrentEditi2 = props.onCurrentEditingRowChange) != null ? _props$onCurrentEditi2 : setCurrentEditingRow,
+    setCurrentFilterFns: (_props$onCurrentFilte = props.onCurrentFilterFnsChange) != null ? _props$onCurrentFilte : setCurrentFilterFns,
+    setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
+    setIsDensePadding: (_props$onIsDensePaddi = props.onIsDensePaddingChange) != null ? _props$onIsDensePaddi : setIsDensePadding,
+    setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
+    setShowFilters: (_props$onShowFiltersC = props.onShowFiltersChange) != null ? _props$onShowFiltersC : setShowFilters,
+    setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
   });
 
   useEffect(function () {
@@ -3444,7 +3440,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       return;
     }
 
-    var itemArgs = ["mrt-" + tableId + "-table-state", JSON.stringify(tableInstance.getState())];
+    var itemArgs = ["mrt-" + tableId + "-table-state", JSON.stringify(instance.getState())];
 
     if (props.persistentStateMode === 'localStorage') {
       var _localStorage;
@@ -3455,7 +3451,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
       (_sessionStorage = sessionStorage).setItem.apply(_sessionStorage, itemArgs);
     }
-  }, [props.enablePersistentState, props.tableId, props.persistentStateMode, tableInstance]);
+  }, [props.enablePersistentState, props.tableId, props.persistentStateMode, instance]);
   return React.createElement(React.Fragment, null, React.createElement(Dialog, {
     PaperComponent: Box,
     TransitionComponent: Grow,
@@ -3468,9 +3464,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     open: isFullScreen,
     transitionDuration: 400
   }, React.createElement(MRT_TablePaper, {
-    tableInstance: tableInstance
+    instance: instance
   })), !isFullScreen && React.createElement(MRT_TablePaper, {
-    tableInstance: tableInstance
+    instance: instance
   }));
 };
 
@@ -3482,7 +3478,7 @@ var MaterialReactTable = (function (_ref) {
       columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
       _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {
-    minSize: 30,
+    minSize: 40,
     maxSize: 1000,
     size: 180
   } : _ref$defaultColumn,
@@ -3521,7 +3517,7 @@ var MaterialReactTable = (function (_ref) {
       _ref$enableSorting = _ref.enableSorting,
       enableSorting = _ref$enableSorting === void 0 ? true : _ref$enableSorting,
       _ref$enableStickyHead = _ref.enableStickyHeader,
-      enableStickyHeader = _ref$enableStickyHead === void 0 ? true : _ref$enableStickyHead,
+      enableStickyHeader = _ref$enableStickyHead === void 0 ? false : _ref$enableStickyHead,
       _ref$enableTableFoote = _ref.enableTableFooter,
       enableTableFooter = _ref$enableTableFoote === void 0 ? true : _ref$enableTableFoote,
       _ref$enableTableHead = _ref.enableTableHead,