material-react-table 0.18.1 → 0.20.0

package/dist/material-react-table.cjs.development.js

@@ -9,8 +9,8 @@ var React__default = _interopDefault(React);
 var iconsMaterial = require('@mui/icons-material');
 var reactTable = require('@tanstack/react-table');
 var material = require('@mui/material');
-var matchSorterUtils = require('@tanstack/match-sorter-utils');
 var jsxRuntime = require('react/jsx-runtime');
+var matchSorterUtils = require('@tanstack/match-sorter-utils');
 
 function _extends() {
   _extends = Object.assign ? Object.assign.bind() : function (target) {
@@ -146,23 +146,23 @@ var MRT_Default_Icons = {
 };
 
 var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
-  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,
-      muiExpandAllButtonProps = _instance$options.muiExpandAllButtonProps,
-      renderDetailPanel = _instance$options.renderDetailPanel,
-      toggleAllRowsExpanded = instance.toggleAllRowsExpanded;
+  var table = _ref.table;
+  var getIsAllRowsExpanded = table.getIsAllRowsExpanded,
+      getIsSomeRowsExpanded = table.getIsSomeRowsExpanded,
+      getCanSomeRowsExpand = table.getCanSomeRowsExpand,
+      getState = table.getState,
+      _table$options = table.options,
+      KeyboardDoubleArrowDownIcon = _table$options.icons.KeyboardDoubleArrowDownIcon,
+      localization = _table$options.localization,
+      muiExpandAllButtonProps = _table$options.muiExpandAllButtonProps,
+      renderDetailPanel = _table$options.renderDetailPanel,
+      toggleAllRowsExpanded = table.toggleAllRowsExpanded;
 
   var _getState = getState(),
       density = _getState.density;
 
   var iconButtonProps = muiExpandAllButtonProps instanceof Function ? muiExpandAllButtonProps({
-    instance: instance
+    table: table
   }) : muiExpandAllButtonProps;
   return React__default.createElement(material.Tooltip, {
     arrow: true,
@@ -190,19 +190,19 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
 
 var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   var row = _ref.row,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      ExpandMoreIcon = _instance$options.icons.ExpandMoreIcon,
-      localization = _instance$options.localization,
-      muiExpandButtonProps = _instance$options.muiExpandButtonProps,
-      renderDetailPanel = _instance$options.renderDetailPanel;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      ExpandMoreIcon = _table$options.icons.ExpandMoreIcon,
+      localization = _table$options.localization,
+      muiExpandButtonProps = _table$options.muiExpandButtonProps,
+      renderDetailPanel = _table$options.renderDetailPanel;
 
   var _getState = getState(),
       density = _getState.density;
 
   var iconButtonProps = muiExpandButtonProps instanceof Function ? muiExpandButtonProps({
-    instance: instance,
+    table: table,
     row: row
   }) : muiExpandButtonProps;
 
@@ -232,112 +232,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   }))));
 };
 
-var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
-  var itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
-    threshold: matchSorterUtils.rankings.MATCHES
-  });
-  addMeta(itemRank);
-  return itemRank.passed;
-};
-
-fuzzy.autoRemove = function (val) {
-  return !val;
-};
-
-var contains = function contains(row, id, filterValue) {
-  return row.getValue(id).toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
-};
-
-contains.autoRemove = function (val) {
-  return !val;
-};
-
-var startsWith = function startsWith(row, id, filterValue) {
-  return row.getValue(id).toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
-};
-
-startsWith.autoRemove = function (val) {
-  return !val;
-};
-
-var endsWith = function endsWith(row, id, filterValue) {
-  return row.getValue(id).toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
-};
-
-endsWith.autoRemove = function (val) {
-  return !val;
-};
-
-var equals = function equals(row, id, filterValue) {
-  return row.getValue(id).toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
-};
-
-equals.autoRemove = function (val) {
-  return !val;
-};
-
-var notEquals = function notEquals(row, id, filterValue) {
-  return row.getValue(id).toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
-};
-
-notEquals.autoRemove = function (val) {
-  return !val;
-};
-
-var greaterThan = function greaterThan(row, id, filterValue) {
-  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) >= +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
-};
-
-greaterThan.autoRemove = function (val) {
-  return !val;
-};
-
-var lessThan = function lessThan(row, id, filterValue) {
-  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) <= +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
-};
-
-lessThan.autoRemove = function (val) {
-  return !val;
-};
-
-var between = function between(row, id, filterValues) {
-  return (['', undefined].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
-};
-
-between.autoRemove = function (val) {
-  return !val;
-};
-
-var empty = function empty(row, id, _filterValue) {
-  return !row.getValue(id).toString().trim();
-};
-
-empty.autoRemove = function (val) {
-  return !val;
-};
-
-var notEmpty = function notEmpty(row, id, _filterValue) {
-  return !!row.getValue(id).toString().trim();
-};
-
-notEmpty.autoRemove = function (val) {
-  return !val;
-};
-
-var MRT_FilterFns = {
-  between: between,
-  contains: contains,
-  empty: empty,
-  endsWith: endsWith,
-  equals: equals,
-  fuzzy: fuzzy,
-  greaterThan: greaterThan,
-  lessThan: lessThan,
-  notEmpty: notEmpty,
-  notEquals: notEquals,
-  startsWith: startsWith
-};
-
 var commonMenuItemStyles = {
   py: '6px',
   my: 0,
@@ -350,19 +244,19 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
       header = _ref.header,
       onSelect = _ref.onSelect,
       setAnchorEl = _ref.setAnchorEl,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      enabledGlobalFilterOptions = _instance$options.enabledGlobalFilterOptions,
-      enabledColumnFilterOptions = _instance$options.enabledColumnFilterOptions,
-      localization = _instance$options.localization,
-      setCurrentFilterFns = instance.setCurrentFilterFns,
-      setCurrentGlobalFilterFn = instance.setCurrentGlobalFilterFn;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enabledGlobalFilterOptions = _table$options.enabledGlobalFilterOptions,
+      enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
+      localization = _table$options.localization,
+      setCurrentFilterFns = table.setCurrentFilterFns,
+      setCurrentGlobalFilterFn = table.setCurrentGlobalFilterFn;
 
   var _getState = getState(),
-      density = _getState.density,
       currentFilterFns = _getState.currentFilterFns,
-      currentGlobalFilterFn = _getState.currentGlobalFilterFn;
+      currentGlobalFilterFn = _getState.currentGlobalFilterFn,
+      density = _getState.density;
 
   var _ref2 = header != null ? header : {},
       column = _ref2.column;
@@ -375,80 +269,69 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
     return [{
       option: 'fuzzy',
       label: localization.filterFuzzy,
-      divider: false,
-      fn: fuzzy
+      divider: false
     }, {
       option: 'contains',
       label: localization.filterContains,
-      divider: false,
-      fn: contains
+      divider: false
     }, {
       option: 'startsWith',
       label: localization.filterStartsWith,
-      divider: false,
-      fn: startsWith
+      divider: false
     }, {
       option: 'endsWith',
       label: localization.filterEndsWith,
-      divider: true,
-      fn: endsWith
+      divider: true
     }, {
       option: 'equals',
       label: localization.filterEquals,
-      divider: false,
-      fn: equals
+      divider: false
     }, {
       option: 'notEquals',
       label: localization.filterNotEquals,
-      divider: true,
-      fn: notEquals
+      divider: true
     }, {
       option: 'between',
       label: localization.filterBetween,
-      divider: false,
-      fn: between
+      divider: false
     }, {
       option: 'greaterThan',
       label: localization.filterGreaterThan,
-      divider: false,
-      fn: greaterThan
+      divider: false
     }, {
       option: 'lessThan',
       label: localization.filterLessThan,
-      divider: true,
-      fn: lessThan
+      divider: true
     }, {
       option: 'empty',
       label: localization.filterEmpty,
-      divider: false,
-      fn: empty
+      divider: false
     }, {
       option: 'notEmpty',
       label: localization.filterNotEmpty,
-      divider: false,
-      fn: notEmpty
+      divider: false
     }].filter(function (filterType) {
       return columnDef ? allowedColumnFilterOptions === undefined || (allowedColumnFilterOptions == null ? void 0 : allowedColumnFilterOptions.includes(filterType.option)) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.option)) && ['fuzzy', 'contains'].includes(filterType.option);
     });
   }, []);
 
-  var handleSelectFilterType = function handleSelectFilterType(value) {
+  var handleSelectFilterType = function handleSelectFilterType(option) {
     if (header && column) {
       setCurrentFilterFns(function (prev) {
         var _extends2;
 
-        return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = value, _extends2));
+        return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = option, _extends2));
       });
 
-      if (['empty', 'notEmpty'].includes(value)) {
+      if (['empty', 'notEmpty'].includes(option)) {
         column.setFilterValue(' ');
-      } else if (value === 'between') {
+      } else if (option === 'between') {
         column.setFilterValue(['', '']);
       } else {
         column.setFilterValue('');
       }
     } else {
-      setCurrentGlobalFilterFn(value);
+      setCurrentGlobalFilterFn(option);
     }
 
     setAnchorEl(null);
@@ -472,15 +355,14 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   }, filterOptions.map(function (_ref4, index) {
     var option = _ref4.option,
         label = _ref4.label,
-        divider = _ref4.divider,
-        fn = _ref4.fn;
+        divider = _ref4.divider;
     return React__default.createElement(material.MenuItem, {
       divider: divider,
       key: index,
       onClick: function onClick() {
         return handleSelectFilterType(option);
       },
-      selected: option === filterOption || fn === filterOption,
+      selected: option === filterOption,
       sx: commonMenuItemStyles,
       value: option
     }, label);
@@ -3265,10 +3147,10 @@ function useRegisteredDropTarget(spec, monitor, connector) {
 
 var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
   var column = _ref.column,
-      instance = _ref.instance;
-  var _instance$options = instance.options,
-      PushPinIcon = _instance$options.icons.PushPinIcon,
-      localization = _instance$options.localization;
+      table = _ref.table;
+  var _table$options = table.options,
+      PushPinIcon = _table$options.icons.PushPinIcon,
+      localization = _table$options.localization;
 
   var handlePinColumn = function handlePinColumn(pinDirection) {
     column.pin(pinDirection);
@@ -3315,10 +3197,10 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
 };
 
 var MRT_GrabHandleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
-  var instance = _ref.instance;
-  var _instance$options = instance.options,
-      DragHandleIcon = _instance$options.icons.DragHandleIcon,
-      localization = _instance$options.localization;
+  var table = _ref.table;
+  var _table$options = table.options,
+      DragHandleIcon = _table$options.icons.DragHandleIcon,
+      localization = _table$options.localization;
   return React__default.createElement(material.Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -3346,6 +3228,140 @@ var MRT_GrabHandleButton = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   }, React__default.createElement(DragHandleIcon, null)));
 });
 
+var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
+  var itemRank = matchSorterUtils.rankItem(row.getValue(columnId), filterValue, {
+    threshold: matchSorterUtils.rankings.MATCHES
+  });
+  addMeta(itemRank);
+  return itemRank.passed;
+};
+
+fuzzy.autoRemove = function (val) {
+  return !val;
+};
+
+var contains = function contains(row, id, filterValue) {
+  return row.getValue(id).toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
+};
+
+contains.autoRemove = function (val) {
+  return !val;
+};
+
+var startsWith = function startsWith(row, id, filterValue) {
+  return row.getValue(id).toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
+};
+
+startsWith.autoRemove = function (val) {
+  return !val;
+};
+
+var endsWith = function endsWith(row, id, filterValue) {
+  return row.getValue(id).toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
+};
+
+endsWith.autoRemove = function (val) {
+  return !val;
+};
+
+var equals = function equals(row, id, filterValue) {
+  return row.getValue(id).toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
+};
+
+equals.autoRemove = function (val) {
+  return !val;
+};
+
+var notEquals = function notEquals(row, id, filterValue) {
+  return row.getValue(id).toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
+};
+
+notEquals.autoRemove = function (val) {
+  return !val;
+};
+
+var greaterThan = function greaterThan(row, id, filterValue) {
+  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) >= +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
+};
+
+greaterThan.autoRemove = function (val) {
+  return !val;
+};
+
+var lessThan = function lessThan(row, id, filterValue) {
+  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) <= +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
+};
+
+lessThan.autoRemove = function (val) {
+  return !val;
+};
+
+var between = function between(row, id, filterValues) {
+  return (['', undefined].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
+};
+
+between.autoRemove = function (val) {
+  return !val;
+};
+
+var empty = function empty(row, id, _filterValue) {
+  return !row.getValue(id).toString().trim();
+};
+
+empty.autoRemove = function (val) {
+  return !val;
+};
+
+var notEmpty = function notEmpty(row, id, _filterValue) {
+  return !!row.getValue(id).toString().trim();
+};
+
+notEmpty.autoRemove = function (val) {
+  return !val;
+};
+
+var MRT_FilterFns = /*#__PURE__*/_extends({}, reactTable.filterFns, {
+  between: between,
+  contains: contains,
+  empty: empty,
+  endsWith: endsWith,
+  equals: equals,
+  fuzzy: fuzzy,
+  greaterThan: greaterThan,
+  lessThan: lessThan,
+  notEmpty: notEmpty,
+  notEquals: notEquals,
+  startsWith: startsWith
+});
+
+var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
+  var dir = 0;
+
+  if (rowA.columnFiltersMeta[columnId]) {
+    dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+  } // Provide a fallback for when the item ranks are equal
+
+
+  return dir === 0 ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
+};
+
+var MRT_SortingFns = /*#__PURE__*/_extends({}, reactTable.sortingFns, {
+  fuzzy: fuzzy$1
+});
+var rankGlobalFuzzy = function rankGlobalFuzzy(rowA, rowB) {
+  return Math.max.apply(Math, Object.values(rowB.columnFiltersMeta).map(function (v) {
+    return v.rank;
+  })) - Math.max.apply(Math, Object.values(rowA.columnFiltersMeta).map(function (v) {
+    return v.rank;
+  }));
+};
+
+var getColumnId = function getColumnId(columnDef) {
+  var _ref, _columnDef$id, _columnDef$accessorKe;
+
+  return (_ref = (_columnDef$id = columnDef.id) != null ? _columnDef$id : (_columnDef$accessorKe = columnDef.accessorKey) == null ? void 0 : _columnDef$accessorKe.toString == null ? void 0 : _columnDef$accessorKe.toString()) != null ? _ref : columnDef.header;
+};
+
 var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
   var lowestLevelColumns = columns;
   var currentCols = columns;
@@ -3374,25 +3390,36 @@ var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
     return !col.columns;
   });
 };
-var createGroup = function createGroup(table, column, currentFilterFns) {
-  var _column$columns;
+var prepareColumns = function prepareColumns(columnDefs, currentFilterFns) {
+  return columnDefs.map(function (columnDef) {
+    var _columnDef$columns;
 
-  return table.createGroup(_extends({}, column, {
-    columns: column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.map == null ? void 0 : _column$columns.map(function (col) {
-      return col.columns ? createGroup(table, col, currentFilterFns) : createDataColumn(table, col, 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] : // @ts-ignore
-      MRT_FilterFns[currentFilterFns[column.id]]
-    }, column))
-  );
-};
-var createDisplayColumn = function createDisplayColumn(table, column) {
-  return table.createDisplayColumn(column);
+    if (!columnDef.id) columnDef.id = getColumnId(columnDef);
+
+    if ( !columnDef.id) {
+      console.error('Column definitions must have a valid `accessorKey` or `id` property');
+    }
+
+    if (!columnDef.columnDefType) columnDef.columnDefType = 'data';
+
+    if (!!((_columnDef$columns = columnDef.columns) != null && _columnDef$columns.length)) {
+      columnDef.columnDefType = 'group';
+      columnDef.columns = prepareColumns(columnDef.columns, currentFilterFns);
+    } else if (columnDef.columnDefType === 'data') {
+      if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
+        var _MRT_FilterFns$curren;
+
+        columnDef.filterFn = (_MRT_FilterFns$curren = MRT_FilterFns[currentFilterFns[columnDef.id]]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy;
+      }
+
+      if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn)) {
+        // @ts-ignore
+        columnDef.sortingFn = MRT_SortingFns[columnDef.sortingFn];
+      }
+    }
+
+    return columnDef;
+  });
 };
 var reorderColumn = function reorderColumn(movingColumn, receivingColumn, columnOrder) {
   if (movingColumn.getCanPin()) {
@@ -3409,8 +3436,8 @@ var getTrailingDisplayColumnIds = function getTrailingDisplayColumnIds(props) {
   return [(props.positionActionsColumn === 'last' && props.enableRowActions || props.enableEditing && props.editingMode === 'row') && 'mrt-row-actions'];
 };
 var getDefaultColumnOrderIds = function getDefaultColumnOrderIds(props) {
-  return [].concat(getLeadingDisplayColumnIds(props), getAllLeafColumnDefs(props.columns).map(function (c) {
-    return c.id;
+  return [].concat(getLeadingDisplayColumnIds(props), getAllLeafColumnDefs(props.columns).map(function (columnDef) {
+    return getColumnId(columnDef);
   }), getTrailingDisplayColumnIds(props)).filter(Boolean);
 };
 
@@ -3420,20 +3447,20 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
   var allColumns = _ref.allColumns,
       column = _ref.column,
       isSubMenu = _ref.isSubMenu,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      enableColumnOrdering = _instance$options.enableColumnOrdering,
-      enableHiding = _instance$options.enableHiding,
-      enablePinning = _instance$options.enablePinning,
-      localization = _instance$options.localization,
-      setColumnOrder = instance.setColumnOrder;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableColumnOrdering = _table$options.enableColumnOrdering,
+      enableHiding = _table$options.enableHiding,
+      enablePinning = _table$options.enablePinning,
+      localization = _table$options.localization,
+      setColumnOrder = table.setColumnOrder;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
 
-  var columnDef = column.columnDef,
-      columnDefType = column.columnDefType;
+  var columnDef = column.columnDef;
+  var columnDefType = columnDef.columnDefType;
 
   var _useDrop = useDrop({
     accept: 'column',
@@ -3491,17 +3518,17 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       gap: '8px'
     }
   }, columnDefType !== 'group' && enableColumnOrdering && !allColumns.some(function (col) {
-    return col.columnDefType === 'group';
+    return col.columnDef.columnDefType === 'group';
   }) && (columnDef.enableColumnOrdering !== false ? React__default.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
-    instance: instance
+    table: table
   }) : React__default.createElement(material.Box, {
     sx: {
       width: '28px'
     }
   })), enablePinning && !isSubMenu && (column.getCanPin() ? React__default.createElement(MRT_ColumnPinningButtons, {
     column: column,
-    instance: instance
+    table: table
   }) : React__default.createElement(material.Box, {
     sx: {
       width: '70px'
@@ -3537,7 +3564,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       key: i + "-" + c.id,
       column: c,
       isSubMenu: isSubMenu,
-      instance: instance
+      table: table
     });
   }));
 };
@@ -3546,21 +3573,21 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   var anchorEl = _ref.anchorEl,
       isSubMenu = _ref.isSubMenu,
       setAnchorEl = _ref.setAnchorEl,
-      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;
+      table = _ref.table;
+  var getAllColumns = table.getAllColumns,
+      getAllLeafColumns = table.getAllLeafColumns,
+      getCenterLeafColumns = table.getCenterLeafColumns,
+      getIsAllColumnsVisible = table.getIsAllColumnsVisible,
+      getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
+      getIsSomeColumnsVisible = table.getIsSomeColumnsVisible,
+      getLeftLeafColumns = table.getLeftLeafColumns,
+      getRightLeafColumns = table.getRightLeafColumns,
+      getState = table.getState,
+      toggleAllColumnsVisible = table.toggleAllColumnsVisible,
+      _table$options = table.options,
+      localization = _table$options.localization,
+      enablePinning = _table$options.enablePinning,
+      enableColumnOrdering = _table$options.enableColumnOrdering;
 
   var _getState = getState(),
       density = _getState.density,
@@ -3579,7 +3606,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     var columns = getAllColumns();
 
     if (columnOrder.length > 0 && !columns.some(function (col) {
-      return col.columnDefType === 'group';
+      return col.columnDef.columnDefType === 'group';
     })) {
       return [].concat(getLeftLeafColumns(), Array.from(new Set(columnOrder)).map(function (colId) {
         return getCenterLeafColumns().find(function (col) {
@@ -3611,12 +3638,12 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     onClick: hideAllColumns
   }, localization.hideAll), !isSubMenu && enableColumnOrdering && React__default.createElement(material.Button, {
     onClick: function onClick() {
-      return instance.setColumnOrder(getDefaultColumnOrderIds(instance.options));
+      return table.setColumnOrder(getDefaultColumnOrderIds(table.options));
     }
   }, localization.resetOrder), !isSubMenu && enablePinning && React__default.createElement(material.Button, {
     disabled: !getIsSomeColumnsPinned(),
     onClick: function onClick() {
-      return instance.resetColumnPinning(true);
+      return table.resetColumnPinning(true);
     }
   }, localization.unpinAll), React__default.createElement(material.Button, {
     disabled: getIsAllColumnsVisible(),
@@ -3629,7 +3656,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       column: column,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
-      instance: instance
+      table: table
     });
   }));
 };
@@ -3650,33 +3677,33 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var anchorEl = _ref.anchorEl,
       header = _ref.header,
       setAnchorEl = _ref.setAnchorEl,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      toggleAllColumnsVisible = instance.toggleAllColumnsVisible,
-      setColumnOrder = instance.setColumnOrder,
-      _instance$options = instance.options,
-      enableColumnFilterChangeMode = _instance$options.enableColumnFilterChangeMode,
-      enableColumnFilters = _instance$options.enableColumnFilters,
-      enableColumnResizing = _instance$options.enableColumnResizing,
-      enableGrouping = _instance$options.enableGrouping,
-      enableHiding = _instance$options.enableHiding,
-      enablePinning = _instance$options.enablePinning,
-      enableSorting = _instance$options.enableSorting,
-      enabledColumnFilterOptions = _instance$options.enabledColumnFilterOptions,
-      _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;
+      table = _ref.table;
+  var getState = table.getState,
+      toggleAllColumnsVisible = table.toggleAllColumnsVisible,
+      setColumnOrder = table.setColumnOrder,
+      _table$options = table.options,
+      enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
+      enableColumnFilters = _table$options.enableColumnFilters,
+      enableColumnResizing = _table$options.enableColumnResizing,
+      enableGrouping = _table$options.enableGrouping,
+      enableHiding = _table$options.enableHiding,
+      enablePinning = _table$options.enablePinning,
+      enableSorting = _table$options.enableSorting,
+      enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
+      _table$options$icons = _table$options.icons,
+      ArrowRightIcon = _table$options$icons.ArrowRightIcon,
+      ClearAllIcon = _table$options$icons.ClearAllIcon,
+      ViewColumnIcon = _table$options$icons.ViewColumnIcon,
+      DynamicFeedIcon = _table$options$icons.DynamicFeedIcon,
+      FilterListIcon = _table$options$icons.FilterListIcon,
+      FilterListOffIcon = _table$options$icons.FilterListOffIcon,
+      PushPinIcon = _table$options$icons.PushPinIcon,
+      SortIcon = _table$options$icons.SortIcon,
+      RestartAltIcon = _table$options$icons.RestartAltIcon,
+      VisibilityOffIcon = _table$options$icons.VisibilityOffIcon,
+      tableId = _table$options.tableId,
+      localization = _table$options.localization,
+      setShowFilters = table.setShowFilters;
   var column = header.column;
   var columnDef = column.columnDef;
 
@@ -3827,7 +3854,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 2,
     onSelect: handleFilterByColumn,
     setAnchorEl: setFilterMenuAnchorEl,
-    instance: instance
+    table: table
   })].filter(Boolean), enableGrouping && column.getCanGroup() && [React__default.createElement(material.MenuItem, {
     divider: enablePinning,
     key: 0,
@@ -3906,7 +3933,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     isSubMenu: true,
     key: 2,
     setAnchorEl: setShowHideColumnsMenuAnchorEl,
-    instance: instance
+    table: table
   })]);
 };
 
@@ -3915,13 +3942,13 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       handleEdit = _ref.handleEdit,
       row = _ref.row,
       setAnchorEl = _ref.setAnchorEl,
-      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;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      EditIcon = _table$options.icons.EditIcon,
+      enableEditing = _table$options.enableEditing,
+      localization = _table$options.localization,
+      renderRowActionMenuItems = _table$options.renderRowActionMenuItems;
 
   var _getState = getState(),
       density = _getState.density;
@@ -3942,7 +3969,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({
     row: row,
-    instance: instance,
+    table: table,
     closeMenu: function closeMenu() {
       return setAnchorEl(null);
     }
@@ -3951,15 +3978,15 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
 
 var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   var row = _ref.row,
-      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,
-      onEditRowSubmit = _instance$options.onEditRowSubmit,
-      setCurrentEditingRow = instance.setCurrentEditingRow;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      _table$options$icons = _table$options.icons,
+      CancelIcon = _table$options$icons.CancelIcon,
+      SaveIcon = _table$options$icons.SaveIcon,
+      localization = _table$options.localization,
+      onEditRowSubmit = _table$options.onEditRowSubmit,
+      setCurrentEditingRow = table.setCurrentEditingRow;
 
   var _getState = getState(),
       currentEditingRow = _getState.currentEditingRow;
@@ -3974,7 +4001,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   var handleSave = function handleSave() {
     onEditRowSubmit == null ? void 0 : onEditRowSubmit({
       row: currentEditingRow != null ? currentEditingRow : row,
-      instance: instance
+      table: table
     });
     setCurrentEditingRow(null);
   };
@@ -4012,17 +4039,17 @@ var commonIconButtonStyles = {
 };
 var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
   var row = _ref.row,
-      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;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableEditing = _table$options.enableEditing,
+      _table$options$icons = _table$options.icons,
+      EditIcon = _table$options$icons.EditIcon,
+      MoreHorizIcon = _table$options$icons.MoreHorizIcon,
+      localization = _table$options.localization,
+      renderRowActionMenuItems = _table$options.renderRowActionMenuItems,
+      renderRowActions = _table$options.renderRowActions,
+      setCurrentEditingRow = table.setCurrentEditingRow;
 
   var _getState = getState(),
       currentEditingRow = _getState.currentEditingRow;
@@ -4044,10 +4071,10 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
 
   return React__default.createElement(React__default.Fragment, null, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions({
     row: row,
-    instance: instance
+    table: table
   })) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React__default.createElement(MRT_EditActionButtons, {
     row: row,
-    instance: instance
+    table: table
   }) : !renderRowActionMenuItems && enableEditing ? React__default.createElement(material.Tooltip, {
     placement: "right",
     arrow: true,
@@ -4070,20 +4097,20 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     handleEdit: handleStartEditMode,
     row: row,
     setAnchorEl: setAnchorEl,
-    instance: instance
+    table: table
   })) : null);
 };
 
 var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var row = _ref.row,
       selectAll = _ref.selectAll,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      localization = _instance$options.localization,
-      muiSelectCheckboxProps = _instance$options.muiSelectCheckboxProps,
-      muiSelectAllCheckboxProps = _instance$options.muiSelectAllCheckboxProps,
-      selectAllMode = _instance$options.selectAllMode;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      localization = _table$options.localization,
+      muiSelectCheckboxProps = _table$options.muiSelectCheckboxProps,
+      muiSelectAllCheckboxProps = _table$options.muiSelectAllCheckboxProps,
+      selectAllMode = _table$options.selectAllMode;
 
   var _getState = getState(),
       density = _getState.density;
@@ -4091,9 +4118,9 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
       if (selectAllMode === 'all') {
-        instance.getToggleAllRowsSelectedHandler()(event);
+        table.getToggleAllRowsSelectedHandler()(event);
       } else if (selectAllMode === 'page') {
-        instance.getToggleAllPageRowsSelectedHandler()(event);
+        table.getToggleAllPageRowsSelectedHandler()(event);
       }
     } else if (row) {
       row == null ? void 0 : row.getToggleSelectedHandler()(event);
@@ -4101,10 +4128,10 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   };
 
   var checkboxProps = selectAll ? muiSelectAllCheckboxProps instanceof Function ? muiSelectAllCheckboxProps({
-    instance: instance
+    table: table
   }) : muiSelectAllCheckboxProps : muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
     row: row,
-    instance: instance
+    table: table
   }) : muiSelectCheckboxProps;
   return React__default.createElement(material.Tooltip, {
     arrow: true,
@@ -4112,8 +4139,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     enterNextDelay: 1000,
     title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
   }, React__default.createElement(material.Checkbox, Object.assign({
-    checked: selectAll ? instance.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
-    indeterminate: selectAll ? instance.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
+    checked: selectAll ? table.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
+    indeterminate: selectAll ? table.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
     inputProps: {
       'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
     },
@@ -5098,18 +5125,18 @@ const HTML5Backend = function createBackend(manager, context, options) {
     return new HTML5BackendImpl(manager, context, options);
 };
 
-var _excluded = ["instance"];
+var _excluded = ["table"];
 var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
-  var instance = _ref.instance,
+  var table = _ref.table,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded);
 
-  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,
-      setIsFullScreen = instance.setIsFullScreen;
+  var getState = table.getState,
+      _table$options = table.options,
+      _table$options$icons = _table$options.icons,
+      FullscreenExitIcon = _table$options$icons.FullscreenExitIcon,
+      FullscreenIcon = _table$options$icons.FullscreenIcon,
+      localization = _table$options.localization,
+      setIsFullScreen = table.setIsFullScreen;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -5127,14 +5154,14 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   }, rest), isFullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
 };
 
-var _excluded$1 = ["instance"];
+var _excluded$1 = ["table"];
 var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
-  var instance = _ref.instance,
+  var table = _ref.table,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  var _instance$options = instance.options,
-      ViewColumnIcon = _instance$options.icons.ViewColumnIcon,
-      localization = _instance$options.localization;
+  var _table$options = table.options,
+      ViewColumnIcon = _table$options.icons.ViewColumnIcon,
+      localization = _table$options.localization;
 
   var _useState = React.useState(null),
       anchorEl = _useState[0],
@@ -5153,23 +5180,23 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
   }, rest), React__default.createElement(ViewColumnIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
     anchorEl: anchorEl,
     setAnchorEl: setAnchorEl,
-    instance: instance
+    table: table
   }));
 };
 
-var _excluded$2 = ["instance"];
+var _excluded$2 = ["table"];
 var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
-  var instance = _ref.instance,
+  var table = _ref.table,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      _instance$options$ico = _instance$options.icons,
-      DensityLargeIcon = _instance$options$ico.DensityLargeIcon,
-      DensityMediumIcon = _instance$options$ico.DensityMediumIcon,
-      DensitySmallIcon = _instance$options$ico.DensitySmallIcon,
-      localization = _instance$options.localization,
-      setDensity = instance.setDensity;
+  var getState = table.getState,
+      _table$options = table.options,
+      _table$options$icons = _table$options.icons,
+      DensityLargeIcon = _table$options$icons.DensityLargeIcon,
+      DensityMediumIcon = _table$options$icons.DensityMediumIcon,
+      DensitySmallIcon = _table$options$icons.DensitySmallIcon,
+      localization = _table$options.localization,
+      setDensity = table.setDensity;
 
   var _getState = getState(),
       density = _getState.density;
@@ -5188,18 +5215,18 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
   }, rest), density === 'compact' ? React__default.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React__default.createElement(DensityMediumIcon, null) : React__default.createElement(DensityLargeIcon, null)));
 };
 
-var _excluded$3 = ["instance"];
+var _excluded$3 = ["table"];
 var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
-  var instance = _ref.instance,
+  var table = _ref.table,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
-  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,
-      setShowFilters = instance.setShowFilters;
+  var getState = table.getState,
+      _table$options = table.options,
+      _table$options$icons = _table$options.icons,
+      FilterListIcon = _table$options$icons.FilterListIcon,
+      FilterListOffIcon = _table$options$icons.FilterListOffIcon,
+      localization = _table$options.localization,
+      setShowFilters = table.setShowFilters;
 
   var _getState = getState(),
       showFilters = _getState.showFilters;
@@ -5217,26 +5244,26 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
   }, rest), showFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
 };
 
-var _excluded$4 = ["instance"];
+var _excluded$4 = ["table"];
 var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
-  var instance = _ref.instance,
+  var table = _ref.table,
       rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
 
-  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,
-      setShowGlobalFilter = instance.setShowGlobalFilter;
+  var getState = table.getState,
+      _table$options = table.options,
+      _table$options$icons = _table$options.icons,
+      SearchIcon = _table$options$icons.SearchIcon,
+      SearchOffIcon = _table$options$icons.SearchOffIcon,
+      tableId = _table$options.tableId,
+      localization = _table$options.localization,
+      muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
+      setShowGlobalFilter = table.setShowGlobalFilter;
 
   var _getState = getState(),
       showGlobalFilter = _getState.showGlobalFilter;
 
   var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
-    instance: instance
+    table: table
   }) : muiSearchTextFieldProps;
 
   var handleToggleSearch = function handleToggleSearch() {
@@ -5259,17 +5286,17 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
 var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
   var _localization$clearSe;
 
-  var instance = _ref.instance;
-  var getState = instance.getState,
-      setGlobalFilter = instance.setGlobalFilter,
-      _instance$options = instance.options,
-      enableGlobalFilterChangeMode = _instance$options.enableGlobalFilterChangeMode,
-      _instance$options$ico = _instance$options.icons,
-      SearchIcon = _instance$options$ico.SearchIcon,
-      CloseIcon = _instance$options$ico.CloseIcon,
-      localization = _instance$options.localization,
-      muiSearchTextFieldProps = _instance$options.muiSearchTextFieldProps,
-      tableId = _instance$options.tableId;
+  var table = _ref.table;
+  var getState = table.getState,
+      setGlobalFilter = table.setGlobalFilter,
+      _table$options = table.options,
+      enableGlobalFilterChangeMode = _table$options.enableGlobalFilterChangeMode,
+      _table$options$icons = _table$options.icons,
+      SearchIcon = _table$options$icons.SearchIcon,
+      CloseIcon = _table$options$icons.CloseIcon,
+      localization = _table$options.localization,
+      muiSearchTextFieldProps = _table$options.muiSearchTextFieldProps,
+      tableId = _table$options.tableId;
 
   var _getState = getState(),
       globalFilter = _getState.globalFilter,
@@ -5304,7 +5331,7 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
   };
 
   var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
-    instance: instance
+    table: table
   }) : muiSearchTextFieldProps;
   return React__default.createElement(material.Collapse, {
     "in": showGlobalFilter,
@@ -5345,25 +5372,25 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
   }, textFieldProps)), React__default.createElement(MRT_FilterOptionMenu, {
     anchorEl: anchorEl,
     setAnchorEl: setAnchorEl,
-    instance: instance
+    table: table
   }));
 };
 
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
   var _renderToolbarInterna;
 
-  var instance = _ref.instance;
-  var _instance$options = instance.options,
-      enableColumnFilters = _instance$options.enableColumnFilters,
-      enableColumnOrdering = _instance$options.enableColumnOrdering,
-      enableDensityToggle = _instance$options.enableDensityToggle,
-      enableFilters = _instance$options.enableFilters,
-      enableFullScreenToggle = _instance$options.enableFullScreenToggle,
-      enableGlobalFilter = _instance$options.enableGlobalFilter,
-      enableHiding = _instance$options.enableHiding,
-      enablePinning = _instance$options.enablePinning,
-      positionGlobalFilter = _instance$options.positionGlobalFilter,
-      renderToolbarInternalActions = _instance$options.renderToolbarInternalActions;
+  var table = _ref.table;
+  var _table$options = table.options,
+      enableColumnFilters = _table$options.enableColumnFilters,
+      enableColumnOrdering = _table$options.enableColumnOrdering,
+      enableDensityToggle = _table$options.enableDensityToggle,
+      enableFilters = _table$options.enableFilters,
+      enableFullScreenToggle = _table$options.enableFullScreenToggle,
+      enableGlobalFilter = _table$options.enableGlobalFilter,
+      enableHiding = _table$options.enableHiding,
+      enablePinning = _table$options.enablePinning,
+      positionGlobalFilter = _table$options.positionGlobalFilter,
+      renderToolbarInternalActions = _table$options.renderToolbarInternalActions;
   return React__default.createElement(material.Box, {
     sx: {
       alignItems: 'center',
@@ -5376,33 +5403,33 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
     MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
     MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
-    instance: instance
+    table: table
   })) != null ? _renderToolbarInterna : React__default.createElement(React__default.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_GlobalFilterTextField, {
-    instance: instance
+    table: table
   }), enableFilters && enableGlobalFilter && React__default.createElement(MRT_ToggleGlobalFilterButton, {
-    instance: instance
+    table: table
   }), enableFilters && enableColumnFilters && React__default.createElement(MRT_ToggleFiltersButton, {
-    instance: instance
+    table: table
   }), (enableHiding || enableColumnOrdering || enablePinning) && React__default.createElement(MRT_ShowHideColumnsButton, {
-    instance: instance
+    table: table
   }), enableDensityToggle && React__default.createElement(MRT_ToggleDensePaddingButton, {
-    instance: instance
+    table: table
   }), enableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, {
-    instance: instance
+    table: table
   })));
 };
 
 var MRT_TablePagination = function MRT_TablePagination(_ref) {
-  var instance = _ref.instance,
+  var table = _ref.table,
       position = _ref.position;
-  var getPrePaginationRowModel = instance.getPrePaginationRowModel,
-      getState = instance.getState,
-      setPageIndex = instance.setPageIndex,
-      setPageSize = instance.setPageSize,
-      _instance$options = instance.options,
-      muiTablePaginationProps = _instance$options.muiTablePaginationProps,
-      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
-      rowCount = _instance$options.rowCount;
+  var getPrePaginationRowModel = table.getPrePaginationRowModel,
+      getState = table.getState,
+      setPageIndex = table.setPageIndex,
+      setPageSize = table.setPageSize,
+      _table$options = table.options,
+      muiTablePaginationProps = _table$options.muiTablePaginationProps,
+      enableToolbarInternalActions = _table$options.enableToolbarInternalActions,
+      rowCount = _table$options.rowCount;
 
   var _getState = getState(),
       _getState$pagination = _getState.pagination,
@@ -5412,16 +5439,16 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
       pageIndex = _getState$pagination$2 === void 0 ? 0 : _getState$pagination$2,
       showGlobalFilter = _getState.showGlobalFilter;
 
+  var totalRowCount = rowCount != null ? rowCount : getPrePaginationRowModel().rows.length;
+  var showFirstLastPageButtons = totalRowCount / pageSize > 2;
   var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps({
-    instance: instance
+    table: table
   }) : muiTablePaginationProps;
 
   var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
     setPageSize(+event.target.value);
   };
 
-  var totalRowCount = rowCount != null ? rowCount : getPrePaginationRowModel().rows.length;
-  var showFirstLastPageButtons = totalRowCount / pageSize > 2;
   return React__default.createElement(material.TablePagination, Object.assign({
     SelectProps: {
       sx: {
@@ -5458,20 +5485,20 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
   var _localization$selecte, _localization$selecte2;
 
   var stackAlertBanner = _ref.stackAlertBanner,
-      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;
+      table = _ref.table;
+  var getPrePaginationRowModel = table.getPrePaginationRowModel,
+      getSelectedRowModel = table.getSelectedRowModel,
+      getState = table.getState,
+      _table$options = table.options,
+      localization = _table$options.localization,
+      muiTableToolbarAlertBannerProps = _table$options.muiTableToolbarAlertBannerProps;
 
   var _getState = getState(),
       grouping = _getState.grouping,
       showAlertBanner = _getState.showAlertBanner;
 
   var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps({
-    instance: instance
+    table: table
   }) : 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__default.createElement("span", null, localization.groupedBy, ' ', grouping.map(function (columnId, index) {
@@ -5479,9 +5506,9 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       key: index + "-" + columnId
     }, index > 0 ? localization.thenBy : '', React__default.createElement(material.Chip, {
       color: "secondary",
-      label: instance.getColumn(columnId).columnDef.header,
+      label: table.getColumn(columnId).columnDef.header,
       onDelete: function onDelete() {
-        return instance.getColumn(columnId).toggleGrouping();
+        return table.getColumn(columnId).toggleGrouping();
       }
     }));
   })) : null;
@@ -5512,16 +5539,16 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
   var alignTo = _ref.alignTo,
-      instance = _ref.instance;
-  var muiLinearProgressProps = instance.options.muiLinearProgressProps,
-      getState = instance.getState;
+      table = _ref.table;
+  var muiLinearProgressProps = table.options.muiLinearProgressProps,
+      getState = table.getState;
 
   var _getState = getState(),
       isLoading = _getState.isLoading,
       showProgressBars = _getState.showProgressBars;
 
   var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
-    instance: instance
+    table: table
   }) : muiLinearProgressProps;
   return React__default.createElement(material.Collapse, {
     "in": isLoading || showProgressBars,
@@ -5558,18 +5585,18 @@ var commonToolbarStyles = function commonToolbarStyles(_ref) {
 var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var _renderToolbarTopCust;
 
-  var instance = _ref2.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      enableGlobalFilter = _instance$options.enableGlobalFilter,
-      enablePagination = _instance$options.enablePagination,
-      enableToolbarInternalActions = _instance$options.enableToolbarInternalActions,
-      muiTableToolbarTopProps = _instance$options.muiTableToolbarTopProps,
-      positionGlobalFilter = _instance$options.positionGlobalFilter,
-      positionPagination = _instance$options.positionPagination,
-      positionToolbarAlertBanner = _instance$options.positionToolbarAlertBanner,
-      renderToolbarTopCustomActions = _instance$options.renderToolbarTopCustomActions,
-      tableId = _instance$options.tableId;
+  var table = _ref2.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableGlobalFilter = _table$options.enableGlobalFilter,
+      enablePagination = _table$options.enablePagination,
+      enableToolbarInternalActions = _table$options.enableToolbarInternalActions,
+      muiTableToolbarTopProps = _table$options.muiTableToolbarTopProps,
+      positionGlobalFilter = _table$options.positionGlobalFilter,
+      positionPagination = _table$options.positionPagination,
+      positionToolbarAlertBanner = _table$options.positionToolbarAlertBanner,
+      renderToolbarTopCustomActions = _table$options.renderToolbarTopCustomActions,
+      tableId = _table$options.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen,
@@ -5577,7 +5604,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
 
   var isMobile = material.useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
-    instance: instance
+    table: table
   }) : muiTableToolbarTopProps;
   var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarTopCustomActions || showGlobalFilter);
   return React__default.createElement(material.Toolbar, Object.assign({
@@ -5594,7 +5621,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
     }
   }), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, {
     stackAlertBanner: stackAlertBanner,
-    instance: instance
+    table: table
   }), React__default.createElement(material.Box, {
     sx: {
       alignItems: 'flex-start',
@@ -5608,39 +5635,39 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       width: '100%'
     }
   }, enableGlobalFilter && positionGlobalFilter === 'left' && React__default.createElement(MRT_GlobalFilterTextField, {
-    instance: instance
+    table: table
   }), (_renderToolbarTopCust = renderToolbarTopCustomActions == null ? void 0 : renderToolbarTopCustomActions({
-    instance: instance
+    table: table
   })) != null ? _renderToolbarTopCust : React__default.createElement("span", null), enableToolbarInternalActions ? React__default.createElement(MRT_ToolbarInternalButtons, {
-    instance: instance
+    table: table
   }) : enableGlobalFilter && positionGlobalFilter === 'right' && React__default.createElement(MRT_GlobalFilterTextField, {
-    instance: instance
+    table: table
   })), enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
-    instance: instance,
+    table: table,
     position: "top"
   }), React__default.createElement(MRT_LinearProgressBar, {
     alignTo: "bottom",
-    instance: instance
+    table: table
   }));
 };
 
 var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
-  var instance = _ref.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      enablePagination = _instance$options.enablePagination,
-      muiTableToolbarBottomProps = _instance$options.muiTableToolbarBottomProps,
-      positionPagination = _instance$options.positionPagination,
-      positionToolbarAlertBanner = _instance$options.positionToolbarAlertBanner,
-      renderToolbarBottomCustomActions = _instance$options.renderToolbarBottomCustomActions,
-      tableId = _instance$options.tableId;
+  var table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enablePagination = _table$options.enablePagination,
+      muiTableToolbarBottomProps = _table$options.muiTableToolbarBottomProps,
+      positionPagination = _table$options.positionPagination,
+      positionToolbarAlertBanner = _table$options.positionToolbarAlertBanner,
+      renderToolbarBottomCustomActions = _table$options.renderToolbarBottomCustomActions,
+      tableId = _table$options.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
   var isMobile = material.useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
-    instance: instance
+    table: table
   }) : muiTableToolbarBottomProps;
   var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && !!renderToolbarBottomCustomActions;
   return React__default.createElement(material.Toolbar, Object.assign({
@@ -5660,9 +5687,9 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
     }
   }), React__default.createElement(MRT_LinearProgressBar, {
     alignTo: "top",
-    instance: instance
+    table: table
   }), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, {
-    instance: instance
+    table: table
   }), React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
@@ -5674,7 +5701,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       p: '0.5rem'
     }
   }, renderToolbarBottomCustomActions({
-    instance: instance
+    table: table
   })) : React__default.createElement("span", null), React__default.createElement(material.Box, {
     sx: {
       display: 'flex',
@@ -5684,28 +5711,28 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       top: 0
     }
   }, enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
-    instance: instance,
+    table: table,
     position: "bottom"
   }))));
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _columnDef$enabledCol, _localization$filterM, _localization, _localization$clearFi, _columnDef$filterSele;
+  var _localization$filterB, _columnDef$enabledCol, _localization$clearFi, _columnDef$filterSele;
 
   var header = _ref.header,
       inputIndex = _ref.inputIndex,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      enableColumnFilterChangeMode = _instance$options.enableColumnFilterChangeMode,
-      enabledColumnFilterOptions = _instance$options.enabledColumnFilterOptions,
-      _instance$options$ico = _instance$options.icons,
-      FilterListIcon = _instance$options$ico.FilterListIcon,
-      CloseIcon = _instance$options$ico.CloseIcon,
-      localization = _instance$options.localization,
-      muiTableHeadCellFilterTextFieldProps = _instance$options.muiTableHeadCellFilterTextFieldProps,
-      tableId = _instance$options.tableId,
-      setCurrentFilterFns = instance.setCurrentFilterFns;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableColumnFilterChangeMode = _table$options.enableColumnFilterChangeMode,
+      enabledColumnFilterOptions = _table$options.enabledColumnFilterOptions,
+      _table$options$icons = _table$options.icons,
+      FilterListIcon = _table$options$icons.FilterListIcon,
+      CloseIcon = _table$options$icons.CloseIcon,
+      localization = _table$options.localization,
+      muiTableHeadCellFilterTextFieldProps = _table$options.muiTableHeadCellFilterTextFieldProps,
+      tableId = _table$options.tableId,
+      setCurrentFilterFns = table.setCurrentFilterFns;
   var column = header.column;
   var columnDef = column.columnDef;
 
@@ -5718,11 +5745,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 
   var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps({
     column: column,
-    instance: instance
+    table: table
   }) : muiTableHeadCellFilterTextFieldProps;
   var mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function ? columnDef.muiTableHeadCellFilterTextFieldProps({
     column: column,
-    instance: instance
+    table: table
   }) : columnDef.muiTableHeadCellFilterTextFieldProps;
 
   var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
@@ -5785,15 +5812,15 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   if (columnDef.Filter) {
     return React__default.createElement(React__default.Fragment, null, columnDef.Filter == null ? void 0 : columnDef.Filter({
       header: header,
-      instance: instance
+      table: table
     }));
   }
 
   var filterId = "mrt-" + tableId + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
-  var filterFn = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
+  var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
   var isSelectFilter = !!columnDef.filterSelectOptions;
-  var filterChipLabel = !(filterFn instanceof Function) && ['empty', 'notEmpty'].includes(filterFn) ? //@ts-ignore
-  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
+  var filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption) ? //@ts-ignore
+  localization["filter" + (currentFilterOption.charAt(0).toUpperCase() + currentFilterOption.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 : '';
   var allowedColumnFilterOptions = (_columnDef$enabledCol = columnDef == null ? void 0 : columnDef.enabledColumnFilterOptions) != null ? _columnDef$enabledCol : enabledColumnFilterOptions;
   var showChangeModeButton = enableColumnFilterChangeMode && columnDef.enableColumnFilterChangeMode !== false && !isSelectFilter && !inputIndex && (allowedColumnFilterOptions === undefined || !!(allowedColumnFilterOptions != null && allowedColumnFilterOptions.length));
@@ -5810,9 +5837,8 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     },
     helperText: showChangeModeButton ? React__default.createElement("label", {
       htmlFor: filterId
-    }, filterFn instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
-    (_localization = localization["filter" + (filterFn.name.charAt(0).toUpperCase() + filterFn.name.slice(1))]) != null ? _localization : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
-    localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))])) : null,
+    }, localization.filterMode.replace('{filterType}', // @ts-ignore
+    localization["filter" + (currentFilterOption.charAt(0).toUpperCase() + currentFilterOption.slice(1))])) : null,
     FormHelperTextProps: {
       sx: {
         fontSize: '0.6rem',
@@ -5899,13 +5925,13 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     anchorEl: anchorEl,
     header: header,
     setAnchorEl: setAnchorEl,
-    instance: instance
+    table: table
   }));
 };
 
 var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
   var header = _ref.header,
-      instance = _ref.instance;
+      table = _ref.table;
   return React__default.createElement(material.Box, {
     sx: {
       display: 'grid',
@@ -5915,18 +5941,18 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
   }, React__default.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 0,
-    instance: instance
+    table: table
   }), React__default.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 1,
-    instance: instance
+    table: table
   }));
 };
 
 var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer(_ref) {
   var header = _ref.header,
-      instance = _ref.instance;
-  var getState = instance.getState;
+      table = _ref.table;
+  var getState = table.getState;
 
   var _getState = getState(),
       currentFilterFns = _getState.currentFilterFns,
@@ -5939,10 +5965,10 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
     unmountOnExit: true
   }, currentFilterFns[column.id] === 'between' ? React__default.createElement(MRT_FilterRangeFields, {
     header: header,
-    instance: instance
+    table: table
   }) : React__default.createElement(MRT_FilterTextField, {
     header: header,
-    instance: instance
+    table: table
   }));
 };
 
@@ -5950,23 +5976,23 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
   var _column$getFilterValu, _column$getFilterValu2;
 
   var header = _ref.header,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      FilterAltIcon = _instance$options.icons.FilterAltIcon,
-      localization = _instance$options.localization;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      FilterAltIcon = _table$options.icons.FilterAltIcon,
+      localization = _table$options.localization;
 
   var _getState = getState(),
       currentFilterFns = _getState.currentFilterFns;
 
   var column = header.column;
   var columnDef = column.columnDef;
-  var filterFn = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
-  var filterTooltip = localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
-  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
+  var currentFilterOption = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
+  var filterTooltip = localization.filteringByColumn.replace('{column}', String(columnDef.header)).replace('{filterType}', // @ts-ignore
+  localization["filter" + (currentFilterOption.charAt(0).toUpperCase() + currentFilterOption.slice(1))]).replace('{filterValue}', "\"" + (Array.isArray(column.getFilterValue()) ? column.getFilterValue().join("\" " + localization.and + " \"") : column.getFilterValue()) + "\"").replace('" "', '');
   return React__default.createElement(material.Grow, {
     unmountOnExit: true,
-    "in": !!column.getFilterValue() && filterFn !== 'between' || filterFn === 'between' && ( // @ts-ignore
+    "in": !!column.getFilterValue() && currentFilterOption !== 'between' || currentFilterOption === 'between' && ( // @ts-ignore
     !!((_column$getFilterValu = column.getFilterValue()) != null && _column$getFilterValu[0]) || !!((_column$getFilterValu2 = column.getFilterValue()) != null && _column$getFilterValu2[1]))
   }, React__default.createElement("span", null, React__default.createElement(material.Tooltip, {
     arrow: true,
@@ -5989,16 +6015,20 @@ var MRT_TableHeadCellFilterLabel = function MRT_TableHeadCellFilterLabel(_ref) {
 };
 
 var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref) {
+  var _getState$columnSizin;
+
   var header = _ref.header,
-      instance = _ref.instance;
-  var getState = instance.getState;
+      table = _ref.table;
+  var getState = table.getState,
+      columnResizeMode = table.options.columnResizeMode;
 
   var _getState = getState(),
       density = _getState.density,
       showFilters = _getState.showFilters;
 
   var column = header.column;
-  var columnDefType = column.columnDefType;
+  var columnDef = column.columnDef;
+  var columnDefType = columnDef.columnDefType;
   return React__default.createElement(material.Divider, {
     flexItem: true,
     orientation: "vertical",
@@ -6028,15 +6058,15 @@ var MRT_TableHeadCellResizeHandle = function MRT_TableHeadCellResizeHandle(_ref)
     onMouseDown: header.getResizeHandler(),
     onTouchStart: header.getResizeHandler(),
     style: {
-      transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : 'none'
+      transform: column.getIsResizing() ? "translateX(" + ((_getState$columnSizin = getState().columnSizingInfo.deltaOffset) != null ? _getState$columnSizin : 0) / (columnResizeMode === 'onChange' ? 16 : 1) + "px)" : 'none'
     }
   });
 };
 
 var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
   var header = _ref.header,
-      instance = _ref.instance;
-  var localization = instance.options.localization;
+      table = _ref.table;
+  var localization = table.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;
@@ -6057,11 +6087,11 @@ var MRT_TableHeadCellSortLabel = function MRT_TableHeadCellSortLabel(_ref) {
 
 var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActionsButton(_ref) {
   var header = _ref.header,
-      instance = _ref.instance;
-  var _instance$options = instance.options,
-      MoreVertIcon = _instance$options.icons.MoreVertIcon,
-      localization = _instance$options.localization,
-      muiTableHeadCellColumnActionsButtonProps = _instance$options.muiTableHeadCellColumnActionsButtonProps;
+      table = _ref.table;
+  var _table$options = table.options,
+      MoreVertIcon = _table$options.icons.MoreVertIcon,
+      localization = _table$options.localization,
+      muiTableHeadCellColumnActionsButtonProps = _table$options.muiTableHeadCellColumnActionsButtonProps;
   var column = header.column;
   var columnDef = column.columnDef;
 
@@ -6077,11 +6107,11 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
 
   var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps({
     column: column,
-    instance: instance
+    table: table
   }) : muiTableHeadCellColumnActionsButtonProps;
   var mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function ? columnDef.muiTableHeadCellColumnActionsButtonProps({
     column: column,
-    instance: instance
+    table: table
   }) : columnDef.muiTableHeadCellColumnActionsButtonProps;
 
   var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
@@ -6111,53 +6141,53 @@ var MRT_TableHeadCellColumnActionsButton = function MRT_TableHeadCellColumnActio
     anchorEl: anchorEl,
     header: header,
     setAnchorEl: setAnchorEl,
-    instance: instance
+    table: table
   }));
 };
 
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _ref2, _ref3, _columnDef$header$len, _columnDef$header;
+  var _ref2, _columnDef$header$len, _columnDef$header;
 
   var dragRef = _ref.dragRef,
       dropRef = _ref.dropRef,
       header = _ref.header,
-      instance = _ref.instance,
+      table = _ref.table,
       isDragging = _ref.isDragging,
       previewRef = _ref.previewRef;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      enableColumnActions = _instance$options.enableColumnActions,
-      enableColumnOrdering = _instance$options.enableColumnOrdering,
-      enableColumnResizing = _instance$options.enableColumnResizing,
-      enableGrouping = _instance$options.enableGrouping,
-      enableMultiSort = _instance$options.enableMultiSort,
-      muiTableHeadCellProps = _instance$options.muiTableHeadCellProps;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableColumnActions = _table$options.enableColumnActions,
+      enableColumnOrdering = _table$options.enableColumnOrdering,
+      enableColumnResizing = _table$options.enableColumnResizing,
+      enableGrouping = _table$options.enableGrouping,
+      enableMultiSort = _table$options.enableMultiSort,
+      muiTableHeadCellProps = _table$options.muiTableHeadCellProps;
 
   var _getState = getState(),
       density = _getState.density,
       showFilters = _getState.showFilters;
 
   var column = header.column;
-  var columnDef = column.columnDef,
-      columnDefType = column.columnDefType;
+  var columnDef = column.columnDef;
+  var columnDefType = columnDef.columnDefType;
   var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps({
     column: column,
-    instance: instance
+    table: table
   }) : muiTableHeadCellProps;
   var mcTableHeadCellProps = columnDef.muiTableHeadCellProps instanceof Function ? columnDef.muiTableHeadCellProps({
     column: column,
-    instance: instance
+    table: table
   }) : 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({
+  var headerElement = (_ref2 = (columnDef == null ? void 0 : columnDef.Header) instanceof Function ? columnDef == null ? void 0 : columnDef.Header == null ? void 0 : columnDef.Header({
     header: header,
-    instance: instance
-  }) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref3 : header.renderHeader()) != null ? _ref2 : columnDef.header;
+    table: table
+  }) : columnDef == null ? void 0 : columnDef.Header) != null ? _ref2 : columnDef.header;
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
-    return column.getIsPinned() === 'left' && instance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
+    return column.getIsPinned() === 'left' && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
   };
 
   var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
@@ -6165,7 +6195,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   };
 
   var getTotalRight = function getTotalRight() {
-    return (instance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
+    return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
   return React__default.createElement(material.TableCell, Object.assign({
@@ -6190,7 +6220,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         pt: columnDefType !== 'data' ? 0 : density === 'compact' ? '0.25' : density === 'comfortable' ? '.75rem' : '1.25rem',
         right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
-        userSelect: enableMultiSort ? 'none' : undefined,
+        userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: columnDefType === 'display' && showFilters ? 'center' : 'text-top',
         zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && columnDefType !== 'group' ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx, {
@@ -6220,34 +6250,34 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     }
   }, headerElement, columnDefType === 'data' && column.getCanSort() && React__default.createElement(MRT_TableHeadCellSortLabel, {
     header: header,
-    instance: instance
+    table: table
   }), columnDefType === 'data' && column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterLabel, {
     header: header,
-    instance: instance
+    table: table
   })), React__default.createElement(material.Box, {
     sx: {
       whiteSpace: 'nowrap'
     }
   }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React__default.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
-    instance: instance
+    table: table
   }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React__default.createElement(MRT_TableHeadCellColumnActionsButton, {
     header: header,
-    instance: instance
+    table: table
   })), column.getCanResize() && React__default.createElement(MRT_TableHeadCellResizeHandle, {
     header: header,
-    instance: instance
+    table: table
   })), columnDefType === 'data' && column.getCanFilter() && React__default.createElement(MRT_TableHeadCellFilterContainer, {
     header: header,
-    instance: instance
+    table: table
   }));
 };
 
 var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
   var header = _ref.header,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      setColumnOrder = instance.setColumnOrder;
+      table = _ref.table;
+  var getState = table.getState,
+      setColumnOrder = table.setColumnOrder;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder;
@@ -6284,20 +6314,20 @@ var MRT_DraggableTableHeadCell = function MRT_DraggableTableHeadCell(_ref) {
     header: header,
     isDragging: isDragging,
     previewRef: previewRef,
-    instance: instance
+    table: table
   });
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var headerGroup = _ref.headerGroup,
-      instance = _ref.instance;
-  var _instance$options = instance.options,
-      enableColumnOrdering = _instance$options.enableColumnOrdering,
-      enableGrouping = _instance$options.enableGrouping,
-      muiTableHeadRowProps = _instance$options.muiTableHeadRowProps;
+      table = _ref.table;
+  var _table$options = table.options,
+      enableColumnOrdering = _table$options.enableColumnOrdering,
+      enableGrouping = _table$options.enableGrouping,
+      muiTableHeadRowProps = _table$options.muiTableHeadRowProps;
   var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
     headerGroup: headerGroup,
-    instance: instance
+    table: table
   }) : muiTableHeadRowProps;
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps, {
     sx: function sx(theme) {
@@ -6310,65 +6340,53 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     return enableColumnOrdering || enableGrouping ? React__default.createElement(MRT_DraggableTableHeadCell, {
       header: header,
       key: header.id || index,
-      instance: instance
+      table: table
     }) : React__default.createElement(MRT_TableHeadCell, {
       header: header,
       key: header.id || index,
-      instance: instance
+      table: table
     });
   }));
 };
 
 var MRT_TableHead = function MRT_TableHead(_ref) {
-  var instance = _ref.instance;
-  var getHeaderGroups = instance.getHeaderGroups,
-      muiTableHeadProps = instance.options.muiTableHeadProps;
+  var table = _ref.table;
+  var getHeaderGroups = table.getHeaderGroups,
+      muiTableHeadProps = table.options.muiTableHeadProps;
   var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps({
-    instance: instance
+    table: table
   }) : muiTableHeadProps;
   return React__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
     return React__default.createElement(MRT_TableHeadRow, {
       headerGroup: headerGroup,
       key: headerGroup.id,
-      instance: instance
+      table: table
     });
   }));
 };
 
-function _extends$1() {
-  _extends$1 = Object.assign || function (target) {
-    for (var i = 1; i < arguments.length; i++) {
-      var source = arguments[i];
-
-      for (var key in source) {
-        if (Object.prototype.hasOwnProperty.call(source, key)) {
-          target[key] = source[key];
-        }
-      }
-    }
-
-    return target;
-  };
-
-  return _extends$1.apply(this, arguments);
-}
-
-function _objectWithoutPropertiesLoose$2(source, excluded) {
-  if (source == null) return {};
-  var target = {};
-  var sourceKeys = Object.keys(source);
-  var key, i;
-
-  for (i = 0; i < sourceKeys.length; i++) {
-    key = sourceKeys[i];
-    if (excluded.indexOf(key) >= 0) continue;
-    target[key] = source[key];
-  }
-
-  return target;
-}
+/**
+ * react-virtual
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
 
-var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
+/**
+ * virtual-core
+ *
+ * Copyright (c) TanStack
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE.md file in the root directory of this source tree.
+ *
+ * @license MIT
+ */
+var props = ["bottom", "height", "left", "right", "top", "width"];
 
 var rectChanged = function rectChanged(a, b) {
   if (a === void 0) {
@@ -6438,355 +6456,383 @@ function observeRect(node, cb) {
   };
 }
 
-var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React__default.useLayoutEffect : React__default.useEffect;
+function memo(getDeps, fn, opts) {
+  let deps = [];
+  let result;
+  return () => {
+    let depTime;
+    if (opts.key && opts.debug != null && opts.debug()) depTime = Date.now();
+    const newDeps = getDeps();
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => deps[index] !== dep);
 
-function useRect(nodeRef, initialRect) {
-  if (initialRect === void 0) {
-    initialRect = {
-      width: 0,
-      height: 0
-    };
-  }
+    if (!depsChanged) {
+      return result;
+    }
 
-  var _React$useState = React__default.useState(nodeRef.current),
-      element = _React$useState[0],
-      setElement = _React$useState[1];
+    deps = newDeps;
+    let resultTime;
+    if (opts.key && opts.debug != null && opts.debug()) resultTime = Date.now();
+    result = fn(...newDeps);
+    opts == null ? void 0 : opts.onChange == null ? void 0 : opts.onChange(result);
 
-  var _React$useReducer = React__default.useReducer(rectReducer, initialRect),
-      rect = _React$useReducer[0],
-      dispatch = _React$useReducer[1];
+    if (opts.key && opts.debug != null && opts.debug()) {
+      const depEndTime = Math.round((Date.now() - depTime) * 100) / 100;
+      const resultEndTime = Math.round((Date.now() - resultTime) * 100) / 100;
+      const resultFpsPercentage = resultEndTime / 16;
 
-  var initialRectSet = React__default.useRef(false);
-  useIsomorphicLayoutEffect$1(function () {
-    if (nodeRef.current !== element) {
-      setElement(nodeRef.current);
-    }
-  });
-  useIsomorphicLayoutEffect$1(function () {
-    if (element && !initialRectSet.current) {
-      initialRectSet.current = true;
+      const pad = (str, num) => {
+        str = String(str);
 
-      var _rect = element.getBoundingClientRect();
+        while (str.length < num) {
+          str = ' ' + str;
+        }
 
-      dispatch({
-        rect: _rect
-      });
-    }
-  }, [element]);
-  React__default.useEffect(function () {
-    if (!element) {
-      return;
+        return str;
+      };
+
+      console.info("%c\u23F1 " + pad(resultEndTime, 5) + " /" + pad(depEndTime, 5) + " ms", "\n            font-size: .6rem;\n            font-weight: bold;\n            color: hsl(" + Math.max(0, Math.min(120 - 120 * resultFpsPercentage, 120)) + "deg 100% 31%);", opts == null ? void 0 : opts.key);
     }
 
-    var observer = observeRect(element, function (rect) {
-      dispatch({
-        rect: rect
-      });
-    });
-    observer.observe();
-    return function () {
-      observer.unobserve();
-    };
-  }, [element]);
-  return rect;
+    return result;
+  };
 }
 
-function rectReducer(state, action) {
-  var rect = action.rect;
+//
+const defaultKeyExtractor = index => index;
+const defaultRangeExtractor = range => {
+  const start = Math.max(range.startIndex - range.overscan, 0);
+  const end = Math.min(range.endIndex + range.overscan, range.count - 1);
+  const arr = [];
 
-  if (state.height !== rect.height || state.width !== rect.width) {
-    return rect;
+  for (let i = start; i <= end; i++) {
+    arr.push(i);
   }
 
-  return state;
-}
-
-var defaultEstimateSize = function defaultEstimateSize() {
-  return 50;
+  return arr;
 };
+const observeElementRect = (instance, cb) => {
+  const observer = observeRect(instance.scrollElement, rect => {
+    cb(rect);
+  });
 
-var defaultKeyExtractor = function defaultKeyExtractor(index) {
-  return index;
-};
+  if (!instance.scrollElement) {
+    return;
+  }
 
-var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
-  var key = horizontal ? 'offsetWidth' : 'offsetHeight';
-  return el[key];
+  cb(instance.scrollElement.getBoundingClientRect());
+  observer.observe();
+  return () => {
+    observer.unobserve();
+  };
 };
+const observeElementOffset = (instance, cb) => {
+  const onScroll = () => cb(instance.scrollElement[instance.options.horizontal ? 'scrollLeft' : 'scrollTop']);
 
-var defaultRangeExtractor = function defaultRangeExtractor(range) {
-  var start = Math.max(range.start - range.overscan, 0);
-  var end = Math.min(range.end + range.overscan, range.size - 1);
-  var arr = [];
-
-  for (var i = start; i <= end; i++) {
-    arr.push(i);
+  if (!instance.scrollElement) {
+    return;
   }
 
-  return arr;
+  onScroll();
+  instance.scrollElement.addEventListener('scroll', onScroll, {
+    capture: false,
+    passive: true
+  });
+  return () => {
+    instance.scrollElement.removeEventListener('scroll', onScroll);
+  };
+};
+const measureElement = (element, instance) => {
+  return element.getBoundingClientRect()[instance.options.horizontal ? 'width' : 'height'];
 };
-function useVirtual(_ref) {
-  var _measurements;
-
-  var _ref$size = _ref.size,
-      size = _ref$size === void 0 ? 0 : _ref$size,
-      _ref$estimateSize = _ref.estimateSize,
-      estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
-      _ref$overscan = _ref.overscan,
-      overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
-      _ref$paddingStart = _ref.paddingStart,
-      paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
-      _ref$paddingEnd = _ref.paddingEnd,
-      paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
-      parentRef = _ref.parentRef,
-      horizontal = _ref.horizontal,
-      scrollToFn = _ref.scrollToFn,
-      useObserver = _ref.useObserver,
-      initialRect = _ref.initialRect,
-      onScrollElement = _ref.onScrollElement,
-      scrollOffsetFn = _ref.scrollOffsetFn,
-      _ref$keyExtractor = _ref.keyExtractor,
-      keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
-      _ref$measureSize = _ref.measureSize,
-      measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
-      _ref$rangeExtractor = _ref.rangeExtractor,
-      rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
-  var sizeKey = horizontal ? 'width' : 'height';
-  var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
-  var latestRef = React__default.useRef({
-    scrollOffset: 0,
-    measurements: []
+const elementScroll = (offset, canSmooth, instance) => {
+  var _instance$scrollEleme2;
+  (_instance$scrollEleme2 = instance.scrollElement) == null ? void 0 : _instance$scrollEleme2.scrollTo({
+    [instance.options.horizontal ? 'left' : 'top']: offset,
+    behavior: canSmooth ? 'smooth' : undefined
   });
+};
+class Virtualizer {
+  constructor(_opts) {
+    var _this = this;
+
+    this.unsubs = [];
+    this.scrollElement = null;
+    this.measurementsCache = [];
+    this.itemMeasurementsCache = {};
+    this.pendingMeasuredCacheIndexes = [];
+
+    this.setOptions = opts => {
+      Object.entries(opts).forEach(_ref => {
+        let [key, value] = _ref;
+        if (typeof value === 'undefined') delete opts[key];
+      });
+      this.options = {
+        debug: false,
+        initialOffset: 0,
+        overscan: 1,
+        paddingStart: 0,
+        paddingEnd: 0,
+        scrollPaddingStart: 0,
+        scrollPaddingEnd: 0,
+        horizontal: false,
+        getItemKey: defaultKeyExtractor,
+        rangeExtractor: defaultRangeExtractor,
+        enableSmoothScroll: true,
+        onChange: () => {},
+        measureElement,
+        initialRect: {
+          width: 0,
+          height: 0
+        },
+        ...opts
+      };
+    };
 
-  var _React$useState = React__default.useState(0),
-      scrollOffset = _React$useState[0],
-      setScrollOffset = _React$useState[1];
+    this.notify = () => {
+      var _this$options$onChang, _this$options;
 
-  latestRef.current.scrollOffset = scrollOffset;
-  var useMeasureParent = useObserver || useRect;
+      (_this$options$onChang = (_this$options = this.options).onChange) == null ? void 0 : _this$options$onChang.call(_this$options, this);
+    };
 
-  var _useMeasureParent = useMeasureParent(parentRef, initialRect),
-      outerSize = _useMeasureParent[sizeKey];
+    this.cleanup = () => {
+      this.unsubs.filter(Boolean).forEach(d => d());
+      this.unsubs = [];
+    };
 
-  latestRef.current.outerSize = outerSize;
-  var defaultScrollToFn = React__default.useCallback(function (offset) {
-    if (parentRef.current) {
-      parentRef.current[scrollKey] = offset;
-    }
-  }, [parentRef, scrollKey]);
-  var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
-  scrollToFn = React__default.useCallback(function (offset) {
-    resolvedScrollToFn(offset, defaultScrollToFn);
-  }, [defaultScrollToFn, resolvedScrollToFn]);
+    this._didMount = () => {
+      return () => {
+        this.cleanup();
+      };
+    };
 
-  var _React$useState2 = React__default.useState({}),
-      measuredCache = _React$useState2[0],
-      setMeasuredCache = _React$useState2[1];
+    this._willUpdate = () => {
+      const scrollElement = this.options.getScrollElement();
+
+      if (this.scrollElement !== scrollElement) {
+        this.cleanup();
+        this.scrollElement = scrollElement;
+        this.unsubs.push(this.options.observeElementRect(this, rect => {
+          this.scrollRect = rect;
+          this.notify();
+        }));
+        this.unsubs.push(this.options.observeElementOffset(this, offset => {
+          this.scrollOffset = offset;
+          this.notify();
+        }));
+      }
+    };
 
-  var measure = React__default.useCallback(function () {
-    return setMeasuredCache({});
-  }, []);
-  var pendingMeasuredCacheIndexesRef = React__default.useRef([]);
-  var measurements = React__default.useMemo(function () {
-    var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
-    pendingMeasuredCacheIndexesRef.current = [];
-    var measurements = latestRef.current.measurements.slice(0, min);
+    this.getSize = () => {
+      return this.scrollRect[this.options.horizontal ? 'width' : 'height'];
+    };
 
-    for (var i = min; i < size; i++) {
-      var key = keyExtractor(i);
-      var measuredSize = measuredCache[key];
+    this.getMeasurements = memo(() => [this.options.count, this.options.paddingStart, this.options.getItemKey, this.itemMeasurementsCache], (count, paddingStart, getItemKey, measurementsCache) => {
+      const min = this.pendingMeasuredCacheIndexes.length > 0 ? Math.min(...this.pendingMeasuredCacheIndexes) : 0;
+      this.pendingMeasuredCacheIndexes = [];
+      const measurements = this.measurementsCache.slice(0, min);
+
+      for (let i = min; i < count; i++) {
+        const key = getItemKey(i);
+        const measuredSize = measurementsCache[key];
+        const start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
+        const size = typeof measuredSize === 'number' ? measuredSize : this.options.estimateSize(i);
+        const end = start + size;
+        measurements[i] = {
+          index: i,
+          start,
+          size,
+          end,
+          key
+        };
+      }
 
-      var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
+      this.measurementsCache = measurements;
+      return measurements;
+    }, {
+      key:  'getMeasurements',
+      debug: () => this.options.debug
+    });
+    this.calculateRange = memo(() => [this.getMeasurements(), this.getSize(), this.scrollOffset], (measurements, outerSize, scrollOffset) => {
+      return calculateRange({
+        measurements,
+        outerSize,
+        scrollOffset
+      });
+    }, {
+      key:  'calculateRange',
+      debug: () => this.options.debug
+    });
+    this.getIndexes = memo(() => [this.options.rangeExtractor, this.calculateRange(), this.options.overscan, this.options.count], (rangeExtractor, range, overscan, count) => {
+      return rangeExtractor({ ...range,
+        overscan,
+        count: count
+      });
+    }, {
+      key:  'getIndexes'
+    });
+    this.getVirtualItems = memo(() => [this.getIndexes(), this.getMeasurements(), this.options.measureElement], (indexes, measurements, measureElement) => {
+      const virtualItems = [];
+
+      for (let k = 0, len = indexes.length; k < len; k++) {
+        const i = indexes[k];
+        const measurement = measurements[i];
+        const item = { ...measurement,
+          measureElement: measurableItem => {
+            if (measurableItem) {
+              const measuredItemSize = measureElement(measurableItem, this);
+
+              if (measuredItemSize !== item.size) {
+                if (item.start < this.scrollOffset) {
+                  if ( this.options.debug) console.info('correction', measuredItemSize - item.size);
+
+                  if (!this.destinationOffset) {
+                    this._scrollToOffset(this.scrollOffset + (measuredItemSize - item.size), false);
+                  }
+                }
 
-      var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
+                this.pendingMeasuredCacheIndexes.push(i);
+                this.itemMeasurementsCache = { ...this.itemMeasurementsCache,
+                  [item.key]: measuredItemSize
+                };
+                this.notify();
+              }
+            }
+          }
+        };
+        virtualItems.push(item);
+      }
 
-      var _end = _start + _size;
+      return virtualItems;
+    }, {
+      key:  'getIndexes'
+    });
 
-      measurements[i] = {
-        index: i,
-        start: _start,
-        size: _size,
-        end: _end,
-        key: key
-      };
-    }
+    this.scrollToOffset = function (toOffset, _temp) {
+      let {
+        align
+      } = _temp === void 0 ? {
+        align: 'start'
+      } : _temp;
+
+      const attempt = () => {
+        const offset = _this.scrollOffset;
+
+        const size = _this.getSize();
+
+        if (align === 'auto') {
+          if (toOffset <= offset) {
+            align = 'start';
+          } else if (toOffset >= offset + size) {
+            align = 'end';
+          } else {
+            align = 'start';
+          }
+        }
 
-    return measurements;
-  }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
-  var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
-  latestRef.current.measurements = measurements;
-  latestRef.current.totalSize = totalSize;
-  var element = onScrollElement ? onScrollElement.current : parentRef.current;
-  var scrollOffsetFnRef = React__default.useRef(scrollOffsetFn);
-  scrollOffsetFnRef.current = scrollOffsetFn;
-  useIsomorphicLayoutEffect$1(function () {
-    if (!element) {
-      setScrollOffset(0);
-      return;
-    }
+        if (align === 'start') {
+          _this._scrollToOffset(toOffset, true);
+        } else if (align === 'end') {
+          _this._scrollToOffset(toOffset - size, true);
+        } else if (align === 'center') {
+          _this._scrollToOffset(toOffset - size / 2, true);
+        }
+      };
 
-    var onScroll = function onScroll(event) {
-      var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
-      setScrollOffset(offset);
+      attempt();
+      requestAnimationFrame(() => {
+        attempt();
+      });
     };
 
-    onScroll();
-    element.addEventListener('scroll', onScroll, {
-      capture: false,
-      passive: true
-    });
-    return function () {
-      element.removeEventListener('scroll', onScroll);
-    };
-  }, [element, scrollKey]);
-
-  var _calculateRange = calculateRange(latestRef.current),
-      start = _calculateRange.start,
-      end = _calculateRange.end;
-
-  var indexes = React__default.useMemo(function () {
-    return rangeExtractor({
-      start: start,
-      end: end,
-      overscan: overscan,
-      size: measurements.length
-    });
-  }, [start, end, overscan, measurements.length, rangeExtractor]);
-  var measureSizeRef = React__default.useRef(measureSize);
-  measureSizeRef.current = measureSize;
-  var virtualItems = React__default.useMemo(function () {
-    var virtualItems = [];
-
-    var _loop = function _loop(k, len) {
-      var i = indexes[k];
-      var measurement = measurements[i];
-
-      var item = _extends$1(_extends$1({}, measurement), {}, {
-        measureRef: function measureRef(el) {
-          if (el) {
-            var measuredSize = measureSizeRef.current(el, horizontal);
-
-            if (measuredSize !== item.size) {
-              var _scrollOffset = latestRef.current.scrollOffset;
-
-              if (item.start < _scrollOffset) {
-                defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
-              }
+    this.scrollToIndex = function (index, _temp2) {
+      let {
+        align,
+        ...rest
+      } = _temp2 === void 0 ? {
+        align: 'auto'
+      } : _temp2;
 
-              pendingMeasuredCacheIndexesRef.current.push(i);
-              setMeasuredCache(function (old) {
-                var _extends2;
+      const measurements = _this.getMeasurements();
 
-                return _extends$1(_extends$1({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
-              });
-            }
-          }
+      const offset = _this.scrollOffset;
+
+      const size = _this.getSize();
+
+      const {
+        count
+      } = _this.options;
+      const measurement = measurements[Math.max(0, Math.min(index, count - 1))];
+
+      if (!measurement) {
+        return;
+      }
+
+      if (align === 'auto') {
+        if (measurement.end >= offset + size - _this.options.scrollPaddingEnd) {
+          align = 'end';
+        } else if (measurement.start <= offset + _this.options.scrollPaddingStart) {
+          align = 'start';
+        } else {
+          return;
         }
-      });
+      }
 
-      virtualItems.push(item);
+      const toOffset = align === 'end' ? measurement.end + _this.options.scrollPaddingEnd : measurement.start - _this.options.scrollPaddingStart;
+
+      _this.scrollToOffset(toOffset, {
+        align,
+        ...rest
+      });
     };
 
-    for (var k = 0, len = indexes.length; k < len; k++) {
-      _loop(k);
-    }
+    this.getTotalSize = () => {
+      var _this$getMeasurements;
 
-    return virtualItems;
-  }, [indexes, defaultScrollToFn, horizontal, measurements]);
-  var mountedRef = React__default.useRef(false);
-  useIsomorphicLayoutEffect$1(function () {
-    if (mountedRef.current) {
-      setMeasuredCache({});
-    }
+      return (((_this$getMeasurements = this.getMeasurements()[this.options.count - 1]) == null ? void 0 : _this$getMeasurements.end) || this.options.paddingStart) + this.options.paddingEnd;
+    };
 
-    mountedRef.current = true;
-  }, [estimateSize]);
-  var scrollToOffset = React__default.useCallback(function (toOffset, _temp) {
-    var _ref2 = _temp === void 0 ? {} : _temp,
-        _ref2$align = _ref2.align,
-        align = _ref2$align === void 0 ? 'start' : _ref2$align;
+    this._scrollToOffset = (offset, canSmooth) => {
+      clearTimeout(this.scrollCheckFrame);
+      this.destinationOffset = offset;
+      this.options.scrollToFn(offset, this.options.enableSmoothScroll && canSmooth, this);
+      let scrollCheckFrame;
 
-    var _latestRef$current = latestRef.current,
-        scrollOffset = _latestRef$current.scrollOffset,
-        outerSize = _latestRef$current.outerSize;
+      const check = () => {
+        let lastOffset = this.scrollOffset;
+        this.scrollCheckFrame = scrollCheckFrame = setTimeout(() => {
+          if (this.scrollCheckFrame !== scrollCheckFrame) {
+            return;
+          }
 
-    if (align === 'auto') {
-      if (toOffset <= scrollOffset) {
-        align = 'start';
-      } else if (toOffset >= scrollOffset + outerSize) {
-        align = 'end';
-      } else {
-        align = 'start';
-      }
-    }
+          if (this.scrollOffset === lastOffset) {
+            this.destinationOffset = undefined;
+            return;
+          }
 
-    if (align === 'start') {
-      scrollToFn(toOffset);
-    } else if (align === 'end') {
-      scrollToFn(toOffset - outerSize);
-    } else if (align === 'center') {
-      scrollToFn(toOffset - outerSize / 2);
-    }
-  }, [scrollToFn]);
-  var tryScrollToIndex = React__default.useCallback(function (index, _temp2) {
-    var _ref3 = _temp2 === void 0 ? {} : _temp2,
-        _ref3$align = _ref3.align,
-        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
-        rest = _objectWithoutPropertiesLoose$2(_ref3, ["align"]);
+          lastOffset = this.scrollOffset;
+          check();
+        }, 100);
+      };
 
-    var _latestRef$current2 = latestRef.current,
-        measurements = _latestRef$current2.measurements,
-        scrollOffset = _latestRef$current2.scrollOffset,
-        outerSize = _latestRef$current2.outerSize;
-    var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
+      check();
+    };
 
-    if (!measurement) {
-      return;
-    }
+    this.measure = () => {
+      this.itemMeasurementsCache = {};
+      this.notify();
+    };
 
-    if (align === 'auto') {
-      if (measurement.end >= scrollOffset + outerSize) {
-        align = 'end';
-      } else if (measurement.start <= scrollOffset) {
-        align = 'start';
-      } else {
-        return;
-      }
-    }
+    this.setOptions(_opts);
+    this.scrollRect = this.options.initialRect;
+    this.scrollOffset = this.options.initialOffset;
+  }
 
-    var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
-    scrollToOffset(toOffset, _extends$1({
-      align: align
-    }, rest));
-  }, [scrollToOffset, size]);
-  var scrollToIndex = React__default.useCallback(function () {
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    // We do a double request here because of
-    // dynamic sizes which can cause offset shift
-    // and end up in the wrong spot. Unfortunately,
-    // we can't know about those dynamic sizes until
-    // we try and render them. So double down!
-    tryScrollToIndex.apply(void 0, args);
-    requestAnimationFrame(function () {
-      tryScrollToIndex.apply(void 0, args);
-    });
-  }, [tryScrollToIndex]);
-  return {
-    virtualItems: virtualItems,
-    totalSize: totalSize,
-    scrollToOffset: scrollToOffset,
-    scrollToIndex: scrollToIndex,
-    measure: measure
-  };
 }
 
-var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
+const findNearestBinarySearch = (low, high, getCurrentValue, value) => {
   while (low <= high) {
-    var middle = (low + high) / 2 | 0;
-    var currentValue = getCurrentValue(middle);
+    const middle = (low + high) / 2 | 0;
+    const currentValue = getCurrentValue(middle);
 
     if (currentValue < value) {
       low = middle + 1;
@@ -6804,61 +6850,90 @@ var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCur
   }
 };
 
-function calculateRange(_ref4) {
-  var measurements = _ref4.measurements,
-      outerSize = _ref4.outerSize,
-      scrollOffset = _ref4.scrollOffset;
-  var size = measurements.length - 1;
+function calculateRange(_ref2) {
+  let {
+    measurements,
+    outerSize,
+    scrollOffset
+  } = _ref2;
+  const count = measurements.length - 1;
 
-  var getOffset = function getOffset(index) {
-    return measurements[index].start;
-  };
+  const getOffset = index => measurements[index].start;
 
-  var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
-  var end = start;
+  const startIndex = findNearestBinarySearch(0, count, getOffset, scrollOffset);
+  let endIndex = startIndex;
 
-  while (end < size && measurements[end].end < scrollOffset + outerSize) {
-    end++;
+  while (endIndex < count && measurements[endIndex].end < scrollOffset + outerSize) {
+    endIndex++;
   }
 
   return {
-    start: start,
-    end: end
+    startIndex,
+    endIndex
   };
 }
 
+const useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+function useVirtualizerBase(options) {
+  const rerender = React.useReducer(() => ({}), {})[1];
+  const resolvedOptions = { ...options,
+    onChange: instance => {
+      rerender();
+      options.onChange == null ? void 0 : options.onChange(instance);
+    }
+  };
+  const [instance] = React.useState(() => new Virtualizer(resolvedOptions));
+  instance.setOptions(resolvedOptions);
+  React.useEffect(() => {
+    return instance._didMount();
+  }, []);
+  useIsomorphicLayoutEffect$1(() => {
+    return instance._willUpdate();
+  });
+  return instance;
+}
+
+function useVirtualizer(options) {
+  return useVirtualizerBase({
+    observeElementRect: observeElementRect,
+    observeElementOffset: observeElementOffset,
+    scrollToFn: elementScroll,
+    ...options
+  });
+}
+
 var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   var cell = _ref.cell,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      tableId = _instance$options.tableId,
-      enableEditing = _instance$options.enableEditing,
-      muiTableBodyCellEditTextFieldProps = _instance$options.muiTableBodyCellEditTextFieldProps,
-      onCellEditBlur = _instance$options.onCellEditBlur,
-      onCellEditChange = _instance$options.onCellEditChange,
-      setCurrentEditingCell = instance.setCurrentEditingCell,
-      setCurrentEditingRow = instance.setCurrentEditingRow;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      tableId = _table$options.tableId,
+      enableEditing = _table$options.enableEditing,
+      muiTableBodyCellEditTextFieldProps = _table$options.muiTableBodyCellEditTextFieldProps,
+      onCellEditBlur = _table$options.onCellEditBlur,
+      onCellEditChange = _table$options.onCellEditChange,
+      setCurrentEditingCell = table.setCurrentEditingCell,
+      setCurrentEditingRow = table.setCurrentEditingRow;
+  var column = cell.column,
+      row = cell.row;
+  var columnDef = column.columnDef;
 
   var _useState = React.useState(cell.getValue()),
       value = _useState[0],
       setValue = _useState[1];
 
-  var column = cell.column,
-      row = cell.row;
-  var columnDef = column.columnDef;
-
   var handleChange = function handleChange(event) {
     setValue(event.target.value);
     columnDef.onCellEditChange == null ? void 0 : columnDef.onCellEditChange({
       event: event,
       cell: cell,
-      instance: instance
+      table: table
     });
     onCellEditChange == null ? void 0 : onCellEditChange({
       event: event,
       cell: cell,
-      instance: instance
+      table: table
     });
   };
 
@@ -6873,22 +6948,22 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     columnDef.onCellEditBlur == null ? void 0 : columnDef.onCellEditBlur({
       event: event,
       cell: cell,
-      instance: instance
+      table: table
     });
     onCellEditBlur == null ? void 0 : onCellEditBlur({
       event: event,
       cell: cell,
-      instance: instance
+      table: table
     });
   };
 
   var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps({
     cell: cell,
-    instance: instance
+    table: table
   }) : muiTableBodyCellEditTextFieldProps;
   var mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function ? columnDef.muiTableBodyCellEditTextFieldProps({
     cell: cell,
-    instance: instance
+    table: table
   }) : columnDef.muiTableBodyCellEditTextFieldProps;
 
   var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
@@ -6896,7 +6971,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
     return React__default.createElement(React__default.Fragment, null, columnDef.Edit == null ? void 0 : columnDef.Edit({
       cell: cell,
-      instance: instance
+      table: table
     }));
   }
 
@@ -6917,10 +6992,10 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 var MRT_CopyButton = function MRT_CopyButton(_ref) {
   var cell = _ref.cell,
       children = _ref.children,
-      instance = _ref.instance;
-  var _instance$options = instance.options,
-      localization = _instance$options.localization,
-      muiTableBodyCellCopyButtonProps = _instance$options.muiTableBodyCellCopyButtonProps;
+      table = _ref.table;
+  var _table$options = table.options,
+      localization = _table$options.localization,
+      muiTableBodyCellCopyButtonProps = _table$options.muiTableBodyCellCopyButtonProps;
   var column = cell.column;
   var columnDef = column.columnDef;
 
@@ -6938,11 +7013,11 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 
   var mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function ? muiTableBodyCellCopyButtonProps({
     cell: cell,
-    instance: instance
+    table: table
   }) : muiTableBodyCellCopyButtonProps;
   var mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function ? columnDef.muiTableBodyCellCopyButtonProps({
     cell: cell,
-    instance: instance
+    table: table
   }) : columnDef.muiTableBodyCellCopyButtonProps;
 
   var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
@@ -6979,25 +7054,25 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _columnDef$Aggregated, _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
+  var _columnDef$Cell, _row$subRows, _columnDef$Cell2, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
       enableHover = _ref.enableHover,
       rowIndex = _ref.rowIndex,
-      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,
-      rowNumberMode = _instance$options.rowNumberMode,
-      tableId = _instance$options.tableId,
-      setColumnOrder = instance.setColumnOrder,
-      setCurrentEditingCell = instance.setCurrentEditingCell;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      editingMode = _table$options.editingMode,
+      enableClickToCopy = _table$options.enableClickToCopy,
+      enableColumnOrdering = _table$options.enableColumnOrdering,
+      enableEditing = _table$options.enableEditing,
+      enableRowNumbers = _table$options.enableRowNumbers,
+      muiTableBodyCellProps = _table$options.muiTableBodyCellProps,
+      muiTableBodyCellSkeletonProps = _table$options.muiTableBodyCellSkeletonProps,
+      rowNumberMode = _table$options.rowNumberMode,
+      tableId = _table$options.tableId,
+      setColumnOrder = table.setColumnOrder,
+      setCurrentEditingCell = table.setCurrentEditingCell;
 
   var _getState = getState(),
       columnOrder = _getState.columnOrder,
@@ -7009,8 +7084,8 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   var column = cell.column,
       row = cell.row;
-  var columnDef = column.columnDef,
-      columnDefType = column.columnDefType;
+  var columnDef = column.columnDef;
+  var columnDefType = columnDef.columnDefType;
 
   var _useDrop = useDrop({
     accept: 'column',
@@ -7023,18 +7098,18 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
 
   var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps({
     cell: cell,
-    instance: instance
+    table: table
   }) : muiTableBodyCellProps;
   var mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function ? columnDef.muiTableBodyCellProps({
     cell: cell,
-    instance: instance
+    table: table
   }) : columnDef.muiTableBodyCellProps;
 
   var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps);
 
   var skeletonWidth = React.useMemo(function () {
     return columnDefType === 'display' ? column.getSize() / 2 : Math.random() * (column.getSize() - column.getSize() / 3) + column.getSize() / 3;
-  }, [columnDefType, column.getSize()]);
+  }, []);
   var isEditable = (enableEditing || columnDef.enableEditing) && columnDef.enableEditing !== false;
   var isEditing = isEditable && (editingMode === 'table' || (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id || (currentEditingCell == null ? void 0 : currentEditingCell.id) === cell.id);
 
@@ -7053,7 +7128,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
-    return column.getIsPinned() === 'left' && instance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
+    return column.getIsPinned() === 'left' && table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
   };
 
   var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
@@ -7061,7 +7136,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   };
 
   var getTotalRight = function getTotalRight() {
-    return (instance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
+    return (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
   };
 
   return React__default.createElement(material.TableCell, Object.assign({
@@ -7094,46 +7169,43 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         width: column.getSize()
       });
     }
-  }), React__default.createElement(React__default.Fragment, null, isLoading || showSkeletons ? React__default.createElement(material.Skeleton, Object.assign({
+  }), React__default.createElement(React__default.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? React__default.createElement(material.Skeleton, Object.assign({
     animation: "wave",
     height: 20,
     width: skeletonWidth
   }, muiTableBodyCellSkeletonProps)) : enableRowNumbers && rowNumberMode === 'static' && column.id === 'mrt-row-numbers' ? rowIndex + 1 : columnDefType === 'display' ? columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
-    instance: instance
-  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? (_columnDef$Aggregated = columnDef.AggregatedCell == null ? void 0 : columnDef.AggregatedCell({
-    cell: cell,
-    instance: instance
-  })) != null ? _columnDef$Aggregated : cell.renderAggregatedCell() : isEditing ? React__default.createElement(MRT_EditCellTextField, {
+    table: table
+  }) : isEditing ? React__default.createElement(MRT_EditCellTextField, {
     cell: cell,
-    instance: instance
+    table: table
   }) : (enableClickToCopy || columnDef.enableClickToCopy) && columnDef.enableClickToCopy !== false ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MRT_CopyButton, {
     cell: cell,
-    instance: instance
+    table: table
   }, React__default.createElement(React__default.Fragment, null, (_columnDef$Cell = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
-    instance: instance
-  })) != null ? _columnDef$Cell : cell.renderCell())), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
+    table: table
+  })) != null ? _columnDef$Cell : cell.renderValue())), cell.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
-    instance: instance
-  })) != null ? _columnDef$Cell2 : cell.renderCell(), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
+    table: table
+  })) != null ? _columnDef$Cell2 : cell.renderValue(), cell.getIsGrouped() && React__default.createElement(React__default.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,
-      instance = _ref.instance;
-  var getVisibleLeafColumns = instance.getVisibleLeafColumns,
-      _instance$options = instance.options,
-      muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
-      muiTableDetailPanelProps = _instance$options.muiTableDetailPanelProps,
-      renderDetailPanel = _instance$options.renderDetailPanel;
+      table = _ref.table;
+  var getVisibleLeafColumns = table.getVisibleLeafColumns,
+      _table$options = table.options,
+      muiTableBodyRowProps = _table$options.muiTableBodyRowProps,
+      muiTableDetailPanelProps = _table$options.muiTableDetailPanelProps,
+      renderDetailPanel = _table$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
-    instance: instance
+    table: table
   }) : muiTableBodyRowProps;
   var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps({
     row: row,
-    instance: instance
+    table: table
   }) : muiTableDetailPanelProps;
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
     colSpan: getVisibleLeafColumns().length
@@ -7143,27 +7215,29 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
       pb: row.getIsExpanded() ? '1rem' : 0,
       pt: row.getIsExpanded() ? '1rem' : 0,
       transition: 'all 0.2s ease-in-out',
-      width: instance.getTotalSize() + "px"
+      width: table.getTotalSize() + "px"
     }, tableCellProps == null ? void 0 : tableCellProps.sx)
   }), renderDetailPanel && React__default.createElement(material.Collapse, {
     "in": row.getIsExpanded()
   }, renderDetailPanel({
     row: row,
-    instance: instance
+    table: table
   }))));
 };
 
 var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
+  var _row$getVisibleCells;
+
   var row = _ref.row,
       rowIndex = _ref.rowIndex,
-      instance = _ref.instance;
-  var getIsSomeColumnsPinned = instance.getIsSomeColumnsPinned,
-      _instance$options = instance.options,
-      muiTableBodyRowProps = _instance$options.muiTableBodyRowProps,
-      renderDetailPanel = _instance$options.renderDetailPanel;
+      table = _ref.table;
+  var getIsSomeColumnsPinned = table.getIsSomeColumnsPinned,
+      _table$options = table.options,
+      muiTableBodyRowProps = _table$options.muiTableBodyRowProps,
+      renderDetailPanel = _table$options.renderDetailPanel;
   var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
-    instance: instance
+    table: table
   }) : muiTableBodyRowProps;
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
     hover: true,
@@ -7178,54 +7252,32 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
         }
       }, tableRowProps == null ? void 0 : tableRowProps.sx);
     }
-  }), row.getVisibleCells().map(function (cell) {
+  }), row == null ? void 0 : (_row$getVisibleCells = row.getVisibleCells()) == null ? void 0 : _row$getVisibleCells.map == null ? void 0 : _row$getVisibleCells.map(function (cell) {
     return React__default.createElement(MRT_TableBodyCell, {
       cell: cell,
       key: cell.id,
       enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
       rowIndex: rowIndex,
-      instance: instance
+      table: table
     });
   })), renderDetailPanel && !row.getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
     row: row,
-    instance: instance
-  }));
-};
-
-var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
-  var dir = 0;
-
-  if (rowA.columnFiltersMeta[columnId]) {
-    dir = matchSorterUtils.compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-  } // Provide a fallback for when the item ranks are equal
-
-
-  return dir === 0 ? reactTable.sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
-};
-
-var MRT_SortingFns = {
-  fuzzy: fuzzy$1
-};
-var rankGlobalFuzzy = function rankGlobalFuzzy(rowA, rowB) {
-  return Math.max.apply(Math, Object.values(rowB.columnFiltersMeta).map(function (v) {
-    return v.rank;
-  })) - Math.max.apply(Math, Object.values(rowA.columnFiltersMeta).map(function (v) {
-    return v.rank;
+    table: table
   }));
 };
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
-  var instance = _ref.instance,
+  var table = _ref.table,
       tableContainerRef = _ref.tableContainerRef;
-  var getRowModel = instance.getRowModel,
-      getPrePaginationRowModel = instance.getPrePaginationRowModel,
-      getState = instance.getState,
-      _instance$options = instance.options,
-      enableGlobalFilterRankedResults = _instance$options.enableGlobalFilterRankedResults,
-      enablePagination = _instance$options.enablePagination,
-      enableRowVirtualization = _instance$options.enableRowVirtualization,
-      muiTableBodyProps = _instance$options.muiTableBodyProps,
-      virtualizerProps = _instance$options.virtualizerProps;
+  var getRowModel = table.getRowModel,
+      getPrePaginationRowModel = table.getPrePaginationRowModel,
+      getState = table.getState,
+      _table$options = table.options,
+      enableGlobalFilterRankedResults = _table$options.enableGlobalFilterRankedResults,
+      enablePagination = _table$options.enablePagination,
+      enableRowVirtualization = _table$options.enableRowVirtualization,
+      muiTableBodyProps = _table$options.muiTableBodyProps,
+      virtualizerProps = _table$options.virtualizerProps;
 
   var _getState = getState(),
       density = _getState.density,
@@ -7234,7 +7286,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       sorting = _getState.sorting;
 
   var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
-    instance: instance
+    table: table
   }) : muiTableBodyProps;
 
   var getIsSomeColumnsSorted = function getIsSomeColumnsSorted() {
@@ -7256,14 +7308,25 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 
     return enablePagination ? getRowModel().rows : getPrePaginationRowModel().rows;
   }, [enableGlobalFilterRankedResults, enableGlobalFilterRankedResults && globalFilter || !enablePagination ? getPrePaginationRowModel().rows : getRowModel().rows, globalFilter]);
-  var rowVirtualizer = enableRowVirtualization ? useVirtual(_extends({
-    overscan: density === 'compact' ? 20 : 10,
-    size: rows.length,
-    parentRef: tableContainerRef
+  var rowVirtualizer = enableRowVirtualization ? useVirtualizer(_extends({
+    count: rows.length,
+    estimateSize: function estimateSize() {
+      return density === 'compact' ? 25 : 50;
+    },
+    getScrollElement: function getScrollElement() {
+      return tableContainerRef.current;
+    },
+    overscan: density === 'compact' ? 30 : 10
   }, 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;
+  var virtualRows = enableRowVirtualization ? rowVirtualizer.getVirtualItems() : [];
+  var paddingTop = 0;
+  var paddingBottom = 0;
+
+  if (enableRowVirtualization) {
+    paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+    paddingBottom = virtualRows.length > 0 ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+  }
+
   return React__default.createElement(material.TableBody, Object.assign({}, tableBodyProps), enableRowVirtualization && paddingTop > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
     style: {
       height: paddingTop + "px"
@@ -7274,7 +7337,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
       key: row.id,
       row: row,
       rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex,
-      instance: instance
+      table: table
     });
   }), enableRowVirtualization && paddingBottom > 0 && React__default.createElement("tr", null, React__default.createElement("td", {
     style: {
@@ -7284,28 +7347,28 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _ref2, _ref3, _ref4;
+  var _ref2, _ref3;
 
   var footer = _ref.footer,
-      instance = _ref.instance;
-  var getState = instance.getState,
-      _instance$options = instance.options,
-      muiTableFooterCellProps = _instance$options.muiTableFooterCellProps,
-      enableColumnResizing = _instance$options.enableColumnResizing;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      muiTableFooterCellProps = _table$options.muiTableFooterCellProps,
+      enableColumnResizing = _table$options.enableColumnResizing;
 
   var _getState = getState(),
       density = _getState.density;
 
   var column = footer.column;
-  var columnDef = column.columnDef,
-      columnDefType = column.columnDefType;
+  var columnDef = column.columnDef;
+  var columnDefType = columnDef.columnDefType;
   var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps({
     column: column,
-    instance: instance
+    table: table
   }) : muiTableFooterCellProps;
   var mcTableFooterCellProps = columnDef.muiTableFooterCellProps instanceof Function ? columnDef.muiTableFooterCellProps({
     column: column,
-    instance: instance
+    table: table
   }) : columnDef.muiTableFooterCellProps;
 
   var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps);
@@ -7328,68 +7391,68 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }), React__default.createElement(React__default.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = (_ref4 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
+  }), React__default.createElement(React__default.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
     footer: footer,
-    instance: instance
-  }) : columnDef.Footer) != null ? _ref4 : columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
+    table: table
+  }) : columnDef.Footer) != null ? _ref3 : columnDef.footer) != null ? _ref2 : null));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
   var _footerGroup$headers;
 
   var footerGroup = _ref.footerGroup,
-      instance = _ref.instance;
-  var muiTableFooterRowProps = instance.options.muiTableFooterRowProps; // if no content in row, skip row
+      table = _ref.table;
+  var muiTableFooterRowProps = table.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,
-    instance: instance
+    table: table
   }) : muiTableFooterRowProps;
   return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map(function (footer) {
     return React__default.createElement(MRT_TableFooterCell, {
       footer: footer,
       key: footer.id,
-      instance: instance
+      table: table
     });
   }));
 };
 
 var MRT_TableFooter = function MRT_TableFooter(_ref) {
-  var instance = _ref.instance;
-  var getFooterGroups = instance.getFooterGroups,
-      muiTableFooterProps = instance.options.muiTableFooterProps;
+  var table = _ref.table;
+  var getFooterGroups = table.getFooterGroups,
+      muiTableFooterProps = table.options.muiTableFooterProps;
   var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps({
-    instance: instance
+    table: table
   }) : muiTableFooterProps;
   return React__default.createElement(material.TableFooter, Object.assign({}, tableFooterProps), getFooterGroups().map(function (footerGroup) {
     return React__default.createElement(MRT_TableFooterRow, {
       footerGroup: footerGroup,
       key: footerGroup.id,
-      instance: instance
+      table: table
     });
   }));
 };
 
 var MRT_Table = function MRT_Table(_ref) {
   var tableContainerRef = _ref.tableContainerRef,
-      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;
+      table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableColumnResizing = _table$options.enableColumnResizing,
+      enableRowVirtualization = _table$options.enableRowVirtualization,
+      enableStickyHeader = _table$options.enableStickyHeader,
+      enableTableFooter = _table$options.enableTableFooter,
+      enableTableHead = _table$options.enableTableHead,
+      muiTableProps = _table$options.muiTableProps;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
   var tableProps = muiTableProps instanceof Function ? muiTableProps({
-    instance: instance
+    table: table
   }) : muiTableProps;
   return React__default.createElement(material.Table, Object.assign({
     stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
@@ -7398,24 +7461,24 @@ var MRT_Table = function MRT_Table(_ref) {
       tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
     }, tableProps == null ? void 0 : tableProps.sx)
   }), enableTableHead && React__default.createElement(MRT_TableHead, {
-    instance: instance
+    table: table
   }), React__default.createElement(MRT_TableBody, {
     tableContainerRef: tableContainerRef,
-    instance: instance
+    table: table
   }), enableTableFooter && React__default.createElement(MRT_TableFooter, {
-    instance: instance
+    table: table
   }));
 };
 
 var useIsomorphicLayoutEffect$2 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
 var MRT_TableContainer = function MRT_TableContainer(_ref) {
-  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 table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableStickyHeader = _table$options.enableStickyHeader,
+      enableRowVirtualization = _table$options.enableRowVirtualization,
+      muiTableContainerProps = _table$options.muiTableContainerProps,
+      tableId = _table$options.tableId;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -7425,7 +7488,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
       setTotalToolbarHeight = _useState[1];
 
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
-    instance: instance
+    table: table
   }) : muiTableContainerProps;
   useIsomorphicLayoutEffect$2(function () {
     var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
@@ -7447,17 +7510,17 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
     }, tableContainerProps == null ? void 0 : tableContainerProps.style)
   }), React__default.createElement(MRT_Table, {
     tableContainerRef: tableContainerRef,
-    instance: instance
+    table: table
   }));
 };
 
 var MRT_TablePaper = function MRT_TablePaper(_ref) {
-  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 table = _ref.table;
+  var getState = table.getState,
+      _table$options = table.options,
+      enableToolbarBottom = _table$options.enableToolbarBottom,
+      enableToolbarTop = _table$options.enableToolbarTop,
+      muiTablePaperProps = _table$options.muiTablePaperProps;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
@@ -7472,7 +7535,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
     }
   }, [isFullScreen]);
   var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps({
-    instance: instance
+    table: table
   }) : muiTablePaperProps;
   return React__default.createElement(DndProvider, {
     backend: HTML5Backend
@@ -7491,16 +7554,16 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
       width: isFullScreen ? '100vw' : undefined
     })
   }), enableToolbarTop && React__default.createElement(MRT_ToolbarTop, {
-    instance: instance
+    table: table
   }), React__default.createElement(MRT_TableContainer, {
-    instance: instance
+    table: table
   }), enableToolbarBottom && React__default.createElement(MRT_ToolbarBottom, {
-    instance: instance
+    table: table
   })));
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
+  var _initialState$columnO, _initialState$current, _initialState$current2, _initialState$density, _initialState$isFullS, _props$initialState$s, _props$initialState2, _initialState$showFil, _initialState$showGlo, _props$state3, _props$state4, _MRT_FilterFns$curren, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _props$onShowAlertBan, _props$onShowFiltersC, _props$onShowGlobalFi;
 
   var _useState = React.useState(props.tableId),
       tableId = _useState[0],
@@ -7552,90 +7615,78 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       setShowGlobalFilter = _useState9[1];
 
   var _useState10 = React.useState(function () {
-    return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
-      var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
+    return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
+      var _ref, _col$id$toString, _col$id, _col$accessorKey, _col$filterFn$name, _ref2, _col$filterFn, _initialState$current3, _ref3, _col$id$toString2, _col$id2, _col$accessorKey2, _col$filterSelectOpti, _ref4;
 
-      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;
+      return _ref4 = {}, _ref4[(_ref = (_col$id$toString = (_col$id = col.id) == null ? void 0 : _col$id.toString()) != null ? _col$id$toString : (_col$accessorKey = col.accessorKey) == null ? void 0 : _col$accessorKey.toString()) != null ? _ref : ''] = col.filterFn instanceof Function ? (_col$filterFn$name = col.filterFn.name) != null ? _col$filterFn$name : 'custom' : (_ref2 = (_col$filterFn = col.filterFn) != null ? _col$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[(_ref3 = (_col$id$toString2 = (_col$id2 = col.id) == null ? void 0 : _col$id2.toString()) != null ? _col$id$toString2 : (_col$accessorKey2 = col.accessorKey) == null ? void 0 : _col$accessorKey2.toString()) != null ? _ref3 : '']) != null ? _ref2 : !!((_col$filterSelectOpti = col.filterSelectOptions) != null && _col$filterSelectOpti.length) ? 'equals' : 'fuzzy', _ref4;
     })));
   }),
       currentFilterFns = _useState10[0],
       setCurrentFilterFns = _useState10[1];
 
-  var _useState11 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
+  var _useState11 = React.useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
       currentGlobalFilterFn = _useState11[0],
       setCurrentGlobalFilterFn = _useState11[1];
 
-  var table = React.useMemo(function () {
-    return (// @ts-ignore
-      reactTable.createTable().setOptions({
-        filterFns: _extends({}, reactTable.filterFns, MRT_FilterFns, props.filterFns),
-        getCoreRowModel: reactTable.getCoreRowModel(),
-        getExpandedRowModel: reactTable.getExpandedRowModel(),
-        getFacetedRowModel: reactTable.getFacetedRowModel(),
-        getFilteredRowModel: reactTable.getFilteredRowModel(),
-        getGroupedRowModel: reactTable.getGroupedRowModel(),
-        getPaginationRowModel: reactTable.getPaginationRowModel(),
-        getSortedRowModel: reactTable.getSortedRowModel(),
-        sortingFns: _extends({}, reactTable.sortingFns, MRT_SortingFns, props.sortingFns)
-      })
-    );
-  }, []);
   var displayColumns = React.useMemo(function () {
     var _props$localization, _props$localization2, _props$localization3, _props$localization5;
 
-    return [columnOrder.includes('mrt-row-actions') && createDisplayColumn(table, {
-      Cell: function Cell(_ref3) {
-        var cell = _ref3.cell;
+    return [columnOrder.includes('mrt-row-actions') && {
+      Cell: function Cell(_ref5) {
+        var cell = _ref5.cell;
         return React__default.createElement(MRT_ToggleRowActionMenuButton, {
           row: cell.row,
-          instance: instance
+          table: table
         });
       },
+      columnDefType: 'display',
       header: (_props$localization = props.localization) == null ? void 0 : _props$localization.actions,
       id: 'mrt-row-actions',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 70
-    }), columnOrder.includes('mrt-expand') && createDisplayColumn(table, {
-      Cell: function Cell(_ref4) {
-        var cell = _ref4.cell;
+    }, columnOrder.includes('mrt-expand') && {
+      Cell: function Cell(_ref6) {
+        var cell = _ref6.cell;
         return React__default.createElement(MRT_ExpandButton, {
           row: cell.row,
-          instance: instance
+          table: table
         });
       },
       Header: function Header() {
         return props.enableExpandAll ? React__default.createElement(MRT_ExpandAllButton, {
-          instance: instance
+          table: table
         }) : null;
       },
+      columnDefType: 'display',
       header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.expand,
       id: 'mrt-expand',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
-    }), columnOrder.includes('mrt-select') && createDisplayColumn(table, {
-      Cell: function Cell(_ref5) {
-        var cell = _ref5.cell;
+    }, columnOrder.includes('mrt-select') && {
+      Cell: function Cell(_ref7) {
+        var cell = _ref7.cell;
         return React__default.createElement(MRT_SelectCheckbox, {
           row: cell.row,
-          instance: instance
+          table: table
         });
       },
       Header: function Header() {
         return props.enableSelectAll ? React__default.createElement(MRT_SelectCheckbox, {
           selectAll: true,
-          instance: instance
+          table: table
         }) : null;
       },
+      columnDefType: 'display',
       header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.select,
       id: 'mrt-select',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
-    }), columnOrder.includes('mrt-row-numbers') && createDisplayColumn(table, {
-      Cell: function Cell(_ref6) {
-        var cell = _ref6.cell;
+    }, columnOrder.includes('mrt-row-numbers') && {
+      Cell: function Cell(_ref8) {
+        var cell = _ref8.cell;
         return cell.row.index + 1;
       },
       Header: function Header() {
@@ -7643,41 +7694,47 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
 
         return (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.rowNumber;
       },
+      columnDefType: 'display',
       header: (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumbers,
       id: 'mrt-row-numbers',
       muiTableBodyCellProps: props.muiTableBodyCellProps,
       muiTableHeadCellProps: props.muiTableHeadCellProps,
       size: 60
-    })].filter(Boolean);
-  }, [columnOrder, props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn, table]);
-  var columns = React.useMemo(function () {
-    return [].concat(displayColumns, props.columns.map(function (column) {
-      return column.columns ? createGroup(table, column, currentFilterFns) : createDataColumn(table, column, currentFilterFns);
-    }));
-  }, [table, props.columns, currentFilterFns]);
+    }].filter(Boolean);
+  }, [columnOrder, props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, props.muiTableBodyCellProps, props.muiTableHeadCellProps, props.positionActionsColumn]);
+  var columnDefs = React.useMemo(function () {
+    return prepareColumns([].concat(displayColumns, props.columns), currentFilterFns);
+  }, [currentFilterFns, displayColumns, props.columns]);
   var data = React.useMemo(function () {
     var _props$state, _props$state2;
 
     return ((_props$state = props.state) != null && _props$state.isLoading || (_props$state2 = props.state) != null && _props$state2.showSkeletons) && !props.data.length ? [].concat(Array(10).fill(null)).map(function () {
-      return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
-        var _ref7;
+      return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (col) {
+        var _ref9, _col$id3, _ref10;
 
-        return _ref7 = {}, _ref7[c.id] = null, _ref7;
+        return _ref10 = {}, _ref10[(_ref9 = (_col$id3 = col.id) != null ? _col$id3 : col.accessorKey) != null ? _ref9 : ''] = null, _ref10;
       })));
     }) : 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 instance = _extends({}, reactTable.useTableInstance(table, _extends({
+  var table = _extends({}, reactTable.useReactTable(_extends({
+    getCoreRowModel: reactTable.getCoreRowModel(),
+    getExpandedRowModel: reactTable.getExpandedRowModel(),
+    getFacetedRowModel: reactTable.getFacetedRowModel(),
+    getFilteredRowModel: reactTable.getFilteredRowModel(),
+    getGroupedRowModel: reactTable.getGroupedRowModel(),
+    getPaginationRowModel: reactTable.getPaginationRowModel(),
+    getSortedRowModel: reactTable.getSortedRowModel(),
     onColumnOrderChange: setColumnOrder
   }, props, {
     //@ts-ignore
-    columns: columns,
+    columns: columnDefs,
     data: data,
     getSubRows: function getSubRows(row) {
       return row == null ? void 0 : row.subRows;
     },
     //@ts-ignore
-    globalFilterFn: currentGlobalFilterFn,
+    globalFilterFn: (_MRT_FilterFns$curren = MRT_FilterFns[currentGlobalFilterFn]) != null ? _MRT_FilterFns$curren : MRT_FilterFns.fuzzy,
     initialState: initialState,
     state: _extends({
       columnOrder: columnOrder,
@@ -7716,9 +7773,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     open: isFullScreen,
     transitionDuration: 400
   }, React__default.createElement(MRT_TablePaper, {
-    instance: instance
+    table: table
   })), !isFullScreen && React__default.createElement(MRT_TablePaper, {
-    instance: instance
+    table: table
   }));
 };