material-react-table 0.17.1 → 0.19.0-alpha.1

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,30 +190,24 @@ 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,
-      onExpandChanged = _instance$options.onExpandChanged,
-      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;
 
-  var handleToggleExpand = function handleToggleExpand(event) {
+  var handleToggleExpand = function handleToggleExpand() {
     row.toggleExpanded();
-    onExpandChanged == null ? void 0 : onExpandChanged({
-      event: event,
-      row: row,
-      instance: instance
-    });
   };
 
   return React__default.createElement(material.Tooltip, {
@@ -238,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,
@@ -356,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;
@@ -381,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);
@@ -478,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);
@@ -3271,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);
@@ -3321,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,
@@ -3352,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;
@@ -3380,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()) {
@@ -3415,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);
 };
 
@@ -3426,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',
@@ -3497,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'
@@ -3543,7 +3564,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       key: i + "-" + c.id,
       column: c,
       isSubMenu: isSubMenu,
-      instance: instance
+      table: table
     });
   }));
 };
@@ -3552,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,
@@ -3585,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) {
@@ -3617,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(),
@@ -3635,7 +3656,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       column: column,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
-      instance: instance
+      table: table
     });
   }));
 };
@@ -3656,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;
 
@@ -3833,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,
@@ -3912,7 +3933,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     isSubMenu: true,
     key: 2,
     setAnchorEl: setShowHideColumnsMenuAnchorEl,
-    instance: instance
+    table: table
   })]);
 };
 
@@ -3921,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;
@@ -3948,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);
     }
@@ -3957,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;
@@ -3980,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);
   };
@@ -4018,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;
@@ -4050,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,
@@ -4076,25 +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 getRowModel = instance.getRowModel,
-      getPaginationRowModel = instance.getPaginationRowModel,
-      getSelectedRowModel = instance.getSelectedRowModel,
-      getState = instance.getState,
-      _instance$options = instance.options,
-      localization = _instance$options.localization,
-      muiSelectCheckboxProps = _instance$options.muiSelectCheckboxProps,
-      muiSelectAllCheckboxProps = _instance$options.muiSelectAllCheckboxProps,
-      onRowSelectionChanged = _instance$options.onRowSelectionChanged,
-      onRowSelectAllChanged = _instance$options.onRowSelectAllChanged,
-      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;
@@ -4102,34 +4118,20 @@ 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);
       }
-
-      onRowSelectAllChanged == null ? void 0 : onRowSelectAllChanged({
-        event: event,
-        selectedRows: event.target.checked ? selectAllMode === 'all' ? getRowModel().flatRows : getPaginationRowModel().flatRows : [],
-        instance: instance
-      });
     } else if (row) {
       row == null ? void 0 : row.getToggleSelectedHandler()(event);
-      onRowSelectionChanged == null ? void 0 : onRowSelectionChanged({
-        event: event,
-        row: row,
-        selectedRows: event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
-          return selectedRow.id !== row.id;
-        }),
-        instance: instance
-      });
     }
   };
 
   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,
@@ -4137,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
     },
@@ -5123,29 +5125,23 @@ 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,
-      onIsFullScreenChanged = _instance$options.onIsFullScreenChanged,
-      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;
 
-  var handleToggleFullScreen = function handleToggleFullScreen(event) {
-    onIsFullScreenChanged == null ? void 0 : onIsFullScreenChanged({
-      event: event,
-      isFullScreen: !isFullScreen,
-      instance: instance
-    });
+  var handleToggleFullScreen = function handleToggleFullScreen() {
     setIsFullScreen(!isFullScreen);
   };
 
@@ -5158,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],
@@ -5184,35 +5180,29 @@ 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,
-      onDensityChanged = _instance$options.onDensityChanged,
-      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;
 
-  var handleToggleDensePadding = function handleToggleDensePadding(event) {
+  var handleToggleDensePadding = function handleToggleDensePadding() {
     var nextDensity = density === 'comfortable' ? 'compact' : density === 'compact' ? 'spacious' : 'comfortable';
-    onDensityChanged == null ? void 0 : onDensityChanged({
-      event: event,
-      density: nextDensity,
-      instance: instance
-    });
     setDensity(nextDensity);
   };
 
@@ -5225,29 +5215,23 @@ 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,
-      onShowFiltersChanged = _instance$options.onShowFiltersChanged,
-      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;
 
-  var handleToggleShowFilters = function handleToggleShowFilters(event) {
-    onShowFiltersChanged == null ? void 0 : onShowFiltersChanged({
-      event: event,
-      showFilters: !showFilters,
-      instance: instance
-    });
+  var handleToggleShowFilters = function handleToggleShowFilters() {
     setShowFilters(!showFilters);
   };
 
@@ -5260,35 +5244,29 @@ 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,
-      onShowGlobalFilterChanged = _instance$options.onShowGlobalFilterChanged,
-      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(event) {
-    onShowGlobalFilterChanged == null ? void 0 : onShowGlobalFilterChanged({
-      event: event,
-      showGlobalFilter: !showGlobalFilter,
-      instance: instance
-    });
+  var handleToggleSearch = function handleToggleSearch() {
     setShowGlobalFilter(!showGlobalFilter);
     setTimeout(function () {
       var _document$getElementB, _textFieldProps$id;
@@ -5308,19 +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,
-      onGlobalFilterValueChanged = _instance$options.onGlobalFilterValueChanged,
-      onGlobalFilterValueChangedDebounced = _instance$options.onGlobalFilterValueChangedDebounced,
-      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,
@@ -5338,19 +5314,11 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
     var _event$target$value;
 
     setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalFilterValueChangedDebounced == null ? void 0 : onGlobalFilterValueChangedDebounced({
-      event: event,
-      instance: instance
-    });
   }, 250), []);
 
   var handleChange = function handleChange(event) {
     setSearchValue(event.target.value);
     handleChangeDebounced(event);
-    onGlobalFilterValueChanged == null ? void 0 : onGlobalFilterValueChanged({
-      event: event,
-      instance: instance
-    });
   };
 
   var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
@@ -5363,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,
@@ -5404,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',
@@ -5435,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,
@@ -5471,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: {
@@ -5517,19 +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;
+      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) {
@@ -5537,18 +5506,19 @@ 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;
   return React__default.createElement(material.Collapse, {
-    "in": !!selectMessage || !!groupedByMessage,
+    "in": showAlertBanner || !!selectMessage || !!groupedByMessage,
     timeout: stackAlertBanner ? 200 : 0
   }, React__default.createElement(material.Alert, Object.assign({
     color: "info",
-    icon: false,
+    icon: false
+  }, alertProps, {
     sx: _extends({
       borderRadius: 0,
       fontSize: '1rem',
@@ -5560,25 +5530,25 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       width: '100%',
       zIndex: 2
     }, alertProps == null ? void 0 : alertProps.sx)
-  }, alertProps), React__default.createElement(material.Box, {
+  }), (alertProps == null ? void 0 : alertProps.title) && React__default.createElement(material.AlertTitle, null, alertProps.title), React__default.createElement(material.Box, {
     sx: {
       p: '0.5rem 1rem'
     }
-  }, selectMessage, selectMessage && groupedByMessage && React__default.createElement("br", null), groupedByMessage)));
+  }, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React__default.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React__default.createElement("br", null), groupedByMessage)));
 };
 
 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,
@@ -5615,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,
@@ -5634,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({
@@ -5651,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',
@@ -5665,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({
@@ -5717,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',
@@ -5731,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',
@@ -5741,30 +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,
-      onColumnFilterValueChanged = _instance$options.onColumnFilterValueChanged,
-      onColumnFilterValueChangedDebounced = _instance$options.onColumnFilterValueChangedDebounced,
-      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;
 
@@ -5777,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);
@@ -5806,36 +5774,11 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 
       column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
     }
-
-    onColumnFilterValueChangedDebounced == null ? void 0 : onColumnFilterValueChangedDebounced({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
-    columnDef.onColumnFilterValueChangedDebounced == null ? void 0 : columnDef.onColumnFilterValueChangedDebounced({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
   }, 200), []);
 
   var handleChange = function handleChange(event) {
     setFilterValue(event.target.value);
     handleChangeDebounced(event);
-    onColumnFilterValueChanged == null ? void 0 : onColumnFilterValueChanged({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
-    columnDef.onColumnFilterValueChanged == null ? void 0 : columnDef.onColumnFilterValueChanged({
-      column: column,
-      event: event,
-      filterValue: event.target.value,
-      instance: instance
-    });
   };
 
   var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
@@ -5869,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));
@@ -5894,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',
@@ -5983,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',
@@ -5999,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,
@@ -6023,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
   }));
 };
 
@@ -6034,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,
@@ -6073,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",
@@ -6112,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;
@@ -6141,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;
 
@@ -6161,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);
@@ -6195,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() {
@@ -6249,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({
@@ -6274,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, {
@@ -6304,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;
@@ -6368,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) {
@@ -6394,27 +6340,27 @@ 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
     });
   }));
 };
@@ -6913,36 +6859,35 @@ function calculateRange(_ref4) {
 
 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,
-      onCellEditChanged = _instance$options.onCellEditChanged,
-      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.onCellEditChanged == null ? void 0 : columnDef.onCellEditChanged({
+    columnDef.onCellEditChange == null ? void 0 : columnDef.onCellEditChange({
       event: event,
       cell: cell,
-      instance: instance
+      table: table
     });
-    onCellEditChanged == null ? void 0 : onCellEditChanged({
+    onCellEditChange == null ? void 0 : onCellEditChange({
       event: event,
       cell: cell,
-      instance: instance
+      table: table
     });
   };
 
@@ -6957,22 +6902,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);
@@ -6980,7 +6925,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
     }));
   }
 
@@ -7001,10 +6946,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;
 
@@ -7022,11 +6967,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);
@@ -7063,27 +7008,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,
-      onCellClick = _instance$options.onCellClick,
-      onRowClick = _instance$options.onRowClick,
-      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,
@@ -7095,8 +7038,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',
@@ -7109,18 +7052,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);
 
@@ -7139,7 +7082,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() {
@@ -7147,17 +7090,10 @@ 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({
-    onClick: function onClick(event) {
-      return onCellClick == null ? void 0 : onCellClick({
-        event: event,
-        cell: cell,
-        instance: instance
-      });
-    },
     onDoubleClick: handleDoubleClick
   }, tableCellProps, {
     ref: columnDefType === 'data' && enableColumnOrdering ? dropRef : undefined,
@@ -7167,7 +7103,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       return _extends({
         backgroundColor: column.getIsPinned() ? material.alpha(material.lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + material.alpha(theme.palette.common.black, 0.1) : undefined,
-        cursor: isEditable && editingMode === 'cell' || onRowClick || onCellClick ? 'pointer' : 'text',
+        cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
         left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
         overflow: 'hidden',
         p: density === 'compact' ? columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : density === 'comfortable' ? columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem' : columnDefType === 'display' ? '1rem 1.25rem' : '1.5rem',
@@ -7187,95 +7123,78 @@ 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,
-      onDetailPanelClick = _instance$options.onDetailPanelClick,
-      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,
-    onClick: function onClick(event) {
-      return onDetailPanelClick == null ? void 0 : onDetailPanelClick({
-        event: event,
-        row: row,
-        instance: instance
-      });
-    }
+    colSpan: getVisibleLeafColumns().length
   }, tableCellProps, {
     sx: _extends({
       borderBottom: !row.getIsExpanded() ? 'none' : undefined,
       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,
-      onRowClick = _instance$options.onRowClick,
-      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,
-    onClick: function onClick(event) {
-      return onRowClick == null ? void 0 : onRowClick({
-        event: event,
-        row: row,
-        instance: instance
-      });
-    },
     selected: row.getIsSelected()
   }, tableRowProps, {
     sx: function sx(theme) {
@@ -7287,54 +7206,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,
@@ -7343,7 +7240,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() {
@@ -7383,7 +7280,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: {
@@ -7393,28 +7290,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);
@@ -7437,68 +7334,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
@@ -7507,24 +7404,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;
@@ -7534,7 +7431,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;
@@ -7556,17 +7453,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;
@@ -7581,7 +7478,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
@@ -7600,16 +7497,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, _initialState$showFil, _initialState$showGlo, _props$globalFilterFn, _props$state3, _props$state4, _props$onCurrentEditi, _props$onCurrentEditi2, _props$onCurrentFilte, _props$onCurrentGloba, _props$onDensityChang, _props$onIsFullScreen, _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],
@@ -7648,99 +7545,91 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       isFullScreen = _useState6[0],
       setIsFullScreen = _useState6[1];
 
-  var _useState7 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
-      showFilters = _useState7[0],
-      setShowFilters = _useState7[1];
+  var _useState7 = React.useState((_props$initialState$s = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.showAlertBanner) != null ? _props$initialState$s : false),
+      showAlertBanner = _useState7[0],
+      setShowAlertBanner = _useState7[1];
+
+  var _useState8 = React.useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
+      showFilters = _useState8[0],
+      setShowFilters = _useState8[1];
 
-  var _useState8 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
-      showGlobalFilter = _useState8[0],
-      setShowGlobalFilter = _useState8[1];
+  var _useState9 = React.useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState9[0],
+      setShowGlobalFilter = _useState9[1];
 
-  var _useState9 = React.useState(function () {
-    return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
-      var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
+  var _useState10 = React.useState(function () {
+    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 = _useState9[0],
-      setCurrentFilterFns = _useState9[1];
-
-  var _useState10 = React.useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
-      currentGlobalFilterFn = _useState10[0],
-      setCurrentGlobalFilterFn = _useState10[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)
-      })
-    );
-  }, []);
+      currentFilterFns = _useState10[0],
+      setCurrentFilterFns = _useState10[1];
+
+  var _useState11 = React.useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
+      currentGlobalFilterFn = _useState11[0],
+      setCurrentGlobalFilterFn = _useState11[1];
+
   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() {
@@ -7748,41 +7637,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,
@@ -7792,6 +7687,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentGlobalFilterFn: currentGlobalFilterFn,
       density: density,
       isFullScreen: isFullScreen,
+      showAlertBanner: showAlertBanner,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
     }, props.state),
@@ -7803,31 +7699,11 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     setCurrentGlobalFilterFn: (_props$onCurrentGloba = props.onCurrentGlobalFilterFnChange) != null ? _props$onCurrentGloba : setCurrentGlobalFilterFn,
     setDensity: (_props$onDensityChang = props.onDensityChange) != null ? _props$onDensityChang : setDensity,
     setIsFullScreen: (_props$onIsFullScreen = props.onIsFullScreenChange) != null ? _props$onIsFullScreen : setIsFullScreen,
+    setShowAlertBanner: (_props$onShowAlertBan = props.onShowAlertBannerChange) != null ? _props$onShowAlertBan : setShowAlertBanner,
     setShowFilters: (_props$onShowFiltersC = props.onShowFiltersChange) != null ? _props$onShowFiltersC : setShowFilters,
     setShowGlobalFilter: (_props$onShowGlobalFi = props.onShowGlobalFilterChange) != null ? _props$onShowGlobalFi : setShowGlobalFilter
   });
 
-  React.useEffect(function () {
-    props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
-      columnOrder: instance.getState().columnOrder,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnOrder]);
-  React.useEffect(function () {
-    props == null ? void 0 : props.onColumnPinningChanged == null ? void 0 : props.onColumnPinningChanged({
-      columnPinning: instance.getState().columnPinning,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnPinning]);
-  React.useEffect(function () {
-    props == null ? void 0 : props.onColumnVisibilityChanged == null ? void 0 : props.onColumnVisibilityChanged({
-      columnPinning: instance.getState().columnVisibility,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnVisibility]);
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Dialog, {
     PaperComponent: material.Box,
     TransitionComponent: material.Grow,
@@ -7840,9 +7716,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
   }));
 };