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

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

@@ -1,9 +1,9 @@
 import React, { useMemo, forwardRef, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
-import { sortingFns, createTable, filterFns, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, useTableInstance } from '@tanstack/react-table';
-import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
-import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
+import { filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, AlertTitle, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, Grow, TableSortLabel, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
 import { useDrop, useDrag, DndProvider } from 'react-dnd';
+import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { useVirtual } from 'react-virtual';
 
@@ -141,23 +141,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.createElement(Tooltip, {
     arrow: true,
@@ -185,30 +185,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.createElement(Tooltip, {
@@ -233,112 +227,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   }))));
 };
 
-var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
-  var itemRank = rankItem(row.getValue(columnId), filterValue, {
-    threshold: 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,
@@ -351,19 +239,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;
@@ -376,80 +264,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);
@@ -473,15 +350,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.createElement(MenuItem, {
       divider: divider,
       key: index,
       onClick: function onClick() {
         return handleSelectFilterType(option);
       },
-      selected: option === filterOption || fn === filterOption,
+      selected: option === filterOption,
       sx: commonMenuItemStyles,
       value: option
     }, label);
@@ -490,10 +366,10 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
 
 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);
@@ -540,10 +416,10 @@ var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
 };
 
 var MRT_GrabHandleButton = /*#__PURE__*/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.createElement(Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -571,6 +447,140 @@ var MRT_GrabHandleButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, React.createElement(DragHandleIcon, null)));
 });
 
+var fuzzy = function fuzzy(row, columnId, filterValue, addMeta) {
+  var itemRank = rankItem(row.getValue(columnId), filterValue, {
+    threshold: 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({}, 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 = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
+  } // Provide a fallback for when the item ranks are equal
+
+
+  return dir === 0 ? sortingFns.alphanumeric(rowA, rowB, columnId) : dir;
+};
+
+var MRT_SortingFns = /*#__PURE__*/_extends({}, 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;
@@ -599,25 +609,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 (process.env.NODE_ENV !== 'production' && !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()) {
@@ -634,8 +655,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);
 };
 
@@ -645,20 +666,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',
@@ -716,17 +737,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.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
-    instance: instance
+    table: table
   }) : React.createElement(Box, {
     sx: {
       width: '28px'
     }
   })), enablePinning && !isSubMenu && (column.getCanPin() ? React.createElement(MRT_ColumnPinningButtons, {
     column: column,
-    instance: instance
+    table: table
   }) : React.createElement(Box, {
     sx: {
       width: '70px'
@@ -762,7 +783,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       key: i + "-" + c.id,
       column: c,
       isSubMenu: isSubMenu,
-      instance: instance
+      table: table
     });
   }));
 };
@@ -771,21 +792,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,
@@ -804,7 +825,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) {
@@ -836,12 +857,12 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
     onClick: hideAllColumns
   }, localization.hideAll), !isSubMenu && enableColumnOrdering && React.createElement(Button, {
     onClick: function onClick() {
-      return instance.setColumnOrder(getDefaultColumnOrderIds(instance.options));
+      return table.setColumnOrder(getDefaultColumnOrderIds(table.options));
     }
   }, localization.resetOrder), !isSubMenu && enablePinning && React.createElement(Button, {
     disabled: !getIsSomeColumnsPinned(),
     onClick: function onClick() {
-      return instance.resetColumnPinning(true);
+      return table.resetColumnPinning(true);
     }
   }, localization.unpinAll), React.createElement(Button, {
     disabled: getIsAllColumnsVisible(),
@@ -854,7 +875,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       column: column,
       isSubMenu: isSubMenu,
       key: index + "-" + column.id,
-      instance: instance
+      table: table
     });
   }));
 };
@@ -875,33 +896,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;
 
@@ -1052,7 +1073,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 2,
     onSelect: handleFilterByColumn,
     setAnchorEl: setFilterMenuAnchorEl,
-    instance: instance
+    table: table
   })].filter(Boolean), enableGrouping && column.getCanGroup() && [React.createElement(MenuItem, {
     divider: enablePinning,
     key: 0,
@@ -1131,7 +1152,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     isSubMenu: true,
     key: 2,
     setAnchorEl: setShowHideColumnsMenuAnchorEl,
-    instance: instance
+    table: table
   })]);
 };
 
@@ -1140,13 +1161,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;
@@ -1167,7 +1188,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     sx: commonListItemStyles
   }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({
     row: row,
-    instance: instance,
+    table: table,
     closeMenu: function closeMenu() {
       return setAnchorEl(null);
     }
@@ -1176,15 +1197,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;
@@ -1199,7 +1220,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);
   };
@@ -1237,17 +1258,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;
@@ -1269,10 +1290,10 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
 
   return React.createElement(React.Fragment, null, renderRowActions ? React.createElement(React.Fragment, null, renderRowActions({
     row: row,
-    instance: instance
+    table: table
   })) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React.createElement(MRT_EditActionButtons, {
     row: row,
-    instance: instance
+    table: table
   }) : !renderRowActionMenuItems && enableEditing ? React.createElement(Tooltip, {
     placement: "right",
     arrow: true,
@@ -1295,25 +1316,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;
@@ -1321,34 +1337,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.createElement(Tooltip, {
     arrow: true,
@@ -1356,8 +1358,8 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     enterNextDelay: 1000,
     title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
   }, React.createElement(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
     },
@@ -1371,29 +1373,23 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   })));
 };
 
-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);
   };
 
@@ -1406,14 +1402,14 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.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 = useState(null),
       anchorEl = _useState[0],
@@ -1432,35 +1428,29 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
   }, rest), React.createElement(ViewColumnIcon, null))), React.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);
   };
 
@@ -1473,29 +1463,23 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
   }, rest), density === 'compact' ? React.createElement(DensitySmallIcon, null) : density === 'comfortable' ? React.createElement(DensityMediumIcon, null) : React.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);
   };
 
@@ -1508,35 +1492,29 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
   }, rest), showFilters ? React.createElement(FilterListOffIcon, null) : React.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;
@@ -1556,19 +1534,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,
@@ -1586,19 +1562,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) {
@@ -1611,7 +1579,7 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
   };
 
   var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
-    instance: instance
+    table: table
   }) : muiSearchTextFieldProps;
   return React.createElement(Collapse, {
     "in": showGlobalFilter,
@@ -1652,25 +1620,25 @@ var MRT_GlobalFilterTextField = function MRT_GlobalFilterTextField(_ref) {
   }, textFieldProps)), React.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.createElement(Box, {
     sx: {
       alignItems: 'center',
@@ -1683,33 +1651,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.createElement(React.Fragment, null, enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
-    instance: instance
+    table: table
   }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
-    instance: instance
+    table: table
   }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
-    instance: instance
+    table: table
   }), (enableHiding || enableColumnOrdering || enablePinning) && React.createElement(MRT_ShowHideColumnsButton, {
-    instance: instance
+    table: table
   }), enableDensityToggle && React.createElement(MRT_ToggleDensePaddingButton, {
-    instance: instance
+    table: table
   }), enableFullScreenToggle && React.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,
@@ -1719,16 +1687,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.createElement(TablePagination, Object.assign({
     SelectProps: {
       sx: {
@@ -1765,19 +1733,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.createElement("span", null, localization.groupedBy, ' ', grouping.map(function (columnId, index) {
@@ -1785,18 +1754,19 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       key: index + "-" + columnId
     }, index > 0 ? localization.thenBy : '', React.createElement(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.createElement(Collapse, {
-    "in": !!selectMessage || !!groupedByMessage,
+    "in": showAlertBanner || !!selectMessage || !!groupedByMessage,
     timeout: stackAlertBanner ? 200 : 0
   }, React.createElement(Alert, Object.assign({
     color: "info",
-    icon: false,
+    icon: false
+  }, alertProps, {
     sx: _extends({
       borderRadius: 0,
       fontSize: '1rem',
@@ -1808,25 +1778,25 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       width: '100%',
       zIndex: 2
     }, alertProps == null ? void 0 : alertProps.sx)
-  }, alertProps), React.createElement(Box, {
+  }), (alertProps == null ? void 0 : alertProps.title) && React.createElement(AlertTitle, null, alertProps.title), React.createElement(Box, {
     sx: {
       p: '0.5rem 1rem'
     }
-  }, selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
+  }, alertProps == null ? void 0 : alertProps.children, (alertProps == null ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && React.createElement("br", null), selectMessage, selectMessage && groupedByMessage && React.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.createElement(Collapse, {
     "in": isLoading || showProgressBars,
@@ -1863,18 +1833,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,
@@ -1882,7 +1852,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
 
   var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
-    instance: instance
+    table: table
   }) : muiTableToolbarTopProps;
   var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && (!!renderToolbarTopCustomActions || showGlobalFilter);
   return React.createElement(Toolbar, Object.assign({
@@ -1899,7 +1869,7 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
     }
   }), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, {
     stackAlertBanner: stackAlertBanner,
-    instance: instance
+    table: table
   }), React.createElement(Box, {
     sx: {
       alignItems: 'flex-start',
@@ -1913,39 +1883,39 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       width: '100%'
     }
   }, enableGlobalFilter && positionGlobalFilter === 'left' && React.createElement(MRT_GlobalFilterTextField, {
-    instance: instance
+    table: table
   }), (_renderToolbarTopCust = renderToolbarTopCustomActions == null ? void 0 : renderToolbarTopCustomActions({
-    instance: instance
+    table: table
   })) != null ? _renderToolbarTopCust : React.createElement("span", null), enableToolbarInternalActions ? React.createElement(MRT_ToolbarInternalButtons, {
-    instance: instance
+    table: table
   }) : enableGlobalFilter && positionGlobalFilter === 'right' && React.createElement(MRT_GlobalFilterTextField, {
-    instance: instance
+    table: table
   })), enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
-    instance: instance,
+    table: table,
     position: "top"
   }), React.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 = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
-    instance: instance
+    table: table
   }) : muiTableToolbarBottomProps;
   var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && !!renderToolbarBottomCustomActions;
   return React.createElement(Toolbar, Object.assign({
@@ -1965,9 +1935,9 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
     }
   }), React.createElement(MRT_LinearProgressBar, {
     alignTo: "top",
-    instance: instance
+    table: table
   }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
-    instance: instance
+    table: table
   }), React.createElement(Box, {
     sx: {
       display: 'flex',
@@ -1979,7 +1949,7 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       p: '0.5rem'
     }
   }, renderToolbarBottomCustomActions({
-    instance: instance
+    table: table
   })) : React.createElement("span", null), React.createElement(Box, {
     sx: {
       display: 'flex',
@@ -1989,30 +1959,28 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       top: 0
     }
   }, enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.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;
 
@@ -2025,11 +1993,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);
@@ -2054,36 +2022,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) {
@@ -2117,15 +2060,15 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   if (columnDef.Filter) {
     return React.createElement(React.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));
@@ -2142,9 +2085,8 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     },
     helperText: showChangeModeButton ? React.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',
@@ -2231,13 +2173,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.createElement(Box, {
     sx: {
       display: 'grid',
@@ -2247,18 +2189,18 @@ var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
   }, React.createElement(MRT_FilterTextField, {
     header: header,
     inputIndex: 0,
-    instance: instance
+    table: table
   }), React.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,
@@ -2271,10 +2213,10 @@ var MRT_TableHeadCellFilterContainer = function MRT_TableHeadCellFilterContainer
     unmountOnExit: true
   }, currentFilterFns[column.id] === 'between' ? React.createElement(MRT_FilterRangeFields, {
     header: header,
-    instance: instance
+    table: table
   }) : React.createElement(MRT_FilterTextField, {
     header: header,
-    instance: instance
+    table: table
   }));
 };
 
@@ -2282,23 +2224,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.createElement(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.createElement("span", null, React.createElement(Tooltip, {
     arrow: true,
@@ -2321,16 +2263,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.createElement(Divider, {
     flexItem: true,
     orientation: "vertical",
@@ -2360,15 +2306,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;
@@ -2389,11 +2335,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;
 
@@ -2409,11 +2355,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);
@@ -2443,53 +2389,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() {
@@ -2497,7 +2443,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.createElement(TableCell, Object.assign({
@@ -2522,7 +2468,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, {
@@ -2552,34 +2498,34 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     }
   }, headerElement, columnDefType === 'data' && column.getCanSort() && React.createElement(MRT_TableHeadCellSortLabel, {
     header: header,
-    instance: instance
+    table: table
   }), columnDefType === 'data' && column.getCanFilter() && React.createElement(MRT_TableHeadCellFilterLabel, {
     header: header,
-    instance: instance
+    table: table
   })), React.createElement(Box, {
     sx: {
       whiteSpace: 'nowrap'
     }
   }, columnDefType === 'data' && (enableColumnOrdering && columnDef.enableColumnOrdering !== false || enableGrouping && columnDef.enableGrouping !== false) && React.createElement(MRT_GrabHandleButton, {
     ref: dragRef,
-    instance: instance
+    table: table
   }), (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false && columnDefType !== 'group' && React.createElement(MRT_TableHeadCellColumnActionsButton, {
     header: header,
-    instance: instance
+    table: table
   })), column.getCanResize() && React.createElement(MRT_TableHeadCellResizeHandle, {
     header: header,
-    instance: instance
+    table: table
   })), columnDefType === 'data' && column.getCanFilter() && React.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;
@@ -2616,20 +2562,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.createElement(TableRow, Object.assign({}, tableRowProps, {
     sx: function sx(theme) {
@@ -2642,63 +2588,62 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
     return enableColumnOrdering || enableGrouping ? React.createElement(MRT_DraggableTableHeadCell, {
       header: header,
       key: header.id || index,
-      instance: instance
+      table: table
     }) : React.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.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
     return React.createElement(MRT_TableHeadRow, {
       headerGroup: headerGroup,
       key: headerGroup.id,
-      instance: instance
+      table: table
     });
   }));
 };
 
 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 = 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
     });
   };
 
@@ -2713,22 +2658,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);
@@ -2736,7 +2681,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
     return React.createElement(React.Fragment, null, columnDef.Edit == null ? void 0 : columnDef.Edit({
       cell: cell,
-      instance: instance
+      table: table
     }));
   }
 
@@ -2757,10 +2702,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;
 
@@ -2778,11 +2723,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);
@@ -2819,27 +2764,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,
@@ -2851,8 +2794,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',
@@ -2865,18 +2808,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 = 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);
 
@@ -2895,7 +2838,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() {
@@ -2903,17 +2846,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.createElement(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,
@@ -2923,7 +2859,7 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
       return _extends({
         backgroundColor: column.getIsPinned() ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : undefined,
         boxShadow: getIsLastLeftPinnedColumn() ? "4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : getIsFirstRightPinnedColumn() ? "-4px 0 4px -2px " + alpha(theme.palette.common.black, 0.1) : undefined,
-        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',
@@ -2943,95 +2879,78 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
         width: column.getSize()
       });
     }
-  }), React.createElement(React.Fragment, null, isLoading || showSkeletons ? React.createElement(Skeleton, Object.assign({
+  }), React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? React.createElement(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({
+    table: table
+  }) : isEditing ? React.createElement(MRT_EditCellTextField, {
     cell: cell,
-    instance: instance
-  })) != null ? _columnDef$Aggregated : cell.renderAggregatedCell() : isEditing ? React.createElement(MRT_EditCellTextField, {
-    cell: cell,
-    instance: instance
+    table: table
   }) : (enableClickToCopy || columnDef.enableClickToCopy) && columnDef.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
     cell: cell,
-    instance: instance
+    table: table
   }, React.createElement(React.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.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
+    table: table
+  })) != null ? _columnDef$Cell : cell.renderValue())), cell.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_columnDef$Cell2 = columnDef == null ? void 0 : columnDef.Cell == null ? void 0 : columnDef.Cell({
     cell: cell,
-    instance: instance
-  })) != null ? _columnDef$Cell2 : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
+    table: table
+  })) != null ? _columnDef$Cell2 : cell.renderValue(), cell.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
   var row = _ref.row,
-      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.createElement(TableRow, Object.assign({}, tableRowProps), React.createElement(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.createElement(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.createElement(React.Fragment, null, React.createElement(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) {
@@ -3043,54 +2962,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.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.createElement(MRT_TableDetailPanel, {
     row: row,
-    instance: instance
-  }));
-};
-
-var fuzzy$1 = function fuzzy(rowA, rowB, columnId) {
-  var dir = 0;
-
-  if (rowA.columnFiltersMeta[columnId]) {
-    dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-  } // Provide a fallback for when the item ranks are equal
-
-
-  return dir === 0 ? 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,
@@ -3099,7 +2996,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() {
@@ -3139,7 +3036,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.createElement("tr", null, React.createElement("td", {
     style: {
@@ -3149,28 +3046,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);
@@ -3193,68 +3090,68 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = (_ref4 = columnDef.Footer instanceof Function ? columnDef.Footer == null ? void 0 : columnDef.Footer({
+  }), React.createElement(React.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.createElement(TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map(function (footer) {
     return React.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.createElement(TableFooter, Object.assign({}, tableFooterProps), getFooterGroups().map(function (footerGroup) {
     return React.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.createElement(Table, Object.assign({
     stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen
@@ -3263,24 +3160,24 @@ var MRT_Table = function MRT_Table(_ref) {
       tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto'
     }, tableProps == null ? void 0 : tableProps.sx)
   }), enableTableHead && React.createElement(MRT_TableHead, {
-    instance: instance
+    table: table
   }), React.createElement(MRT_TableBody, {
     tableContainerRef: tableContainerRef,
-    instance: instance
+    table: table
   }), enableTableFooter && React.createElement(MRT_TableFooter, {
-    instance: instance
+    table: table
   }));
 };
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : 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;
@@ -3290,7 +3187,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
       setTotalToolbarHeight = _useState[1];
 
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
-    instance: instance
+    table: table
   }) : muiTableContainerProps;
   useIsomorphicLayoutEffect(function () {
     var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
@@ -3312,17 +3209,17 @@ var MRT_TableContainer = function MRT_TableContainer(_ref) {
     }, tableContainerProps == null ? void 0 : tableContainerProps.style)
   }), React.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;
@@ -3337,7 +3234,7 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
     }
   }, [isFullScreen]);
   var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps({
-    instance: instance
+    table: table
   }) : muiTablePaperProps;
   return React.createElement(DndProvider, {
     backend: HTML5Backend
@@ -3356,16 +3253,16 @@ var MRT_TablePaper = function MRT_TablePaper(_ref) {
       width: isFullScreen ? '100vw' : undefined
     })
   }), enableToolbarTop && React.createElement(MRT_ToolbarTop, {
-    instance: instance
+    table: table
   }), React.createElement(MRT_TableContainer, {
-    instance: instance
+    table: table
   }), enableToolbarBottom && React.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 = useState(props.tableId),
       tableId = _useState[0],
@@ -3404,99 +3301,91 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       isFullScreen = _useState6[0],
       setIsFullScreen = _useState6[1];
 
-  var _useState7 = useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
-      showFilters = _useState7[0],
-      setShowFilters = _useState7[1];
+  var _useState7 = 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 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
-      showGlobalFilter = _useState8[0],
-      setShowGlobalFilter = _useState8[1];
+  var _useState8 = useState((_initialState$showFil = initialState == null ? void 0 : initialState.showFilters) != null ? _initialState$showFil : false),
+      showFilters = _useState8[0],
+      setShowFilters = _useState8[1];
 
-  var _useState9 = useState(function () {
-    return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
-      var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
+  var _useState9 = useState((_initialState$showGlo = initialState == null ? void 0 : initialState.showGlobalFilter) != null ? _initialState$showGlo : false),
+      showGlobalFilter = _useState9[0],
+      setShowGlobalFilter = _useState9[1];
 
-      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;
+  var _useState10 = 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 _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 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : 'fuzzy'),
-      currentGlobalFilterFn = _useState10[0],
-      setCurrentGlobalFilterFn = _useState10[1];
-
-  var table = useMemo(function () {
-    return (// @ts-ignore
-      createTable().setOptions({
-        filterFns: _extends({}, filterFns, MRT_FilterFns, props.filterFns),
-        getCoreRowModel: getCoreRowModel(),
-        getExpandedRowModel: getExpandedRowModel(),
-        getFacetedRowModel: getFacetedRowModel(),
-        getFilteredRowModel: getFilteredRowModel(),
-        getGroupedRowModel: getGroupedRowModel(),
-        getPaginationRowModel: getPaginationRowModel(),
-        getSortedRowModel: getSortedRowModel(),
-        sortingFns: _extends({}, sortingFns, MRT_SortingFns, props.sortingFns)
-      })
-    );
-  }, []);
+      currentFilterFns = _useState10[0],
+      setCurrentFilterFns = _useState10[1];
+
+  var _useState11 = useState(props.globalFilterFn instanceof String ? props.globalFilterFn : 'fuzzy'),
+      currentGlobalFilterFn = _useState11[0],
+      setCurrentGlobalFilterFn = _useState11[1];
+
   var displayColumns = 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.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.createElement(MRT_ExpandButton, {
           row: cell.row,
-          instance: instance
+          table: table
         });
       },
       Header: function Header() {
         return props.enableExpandAll ? React.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.createElement(MRT_SelectCheckbox, {
           row: cell.row,
-          instance: instance
+          table: table
         });
       },
       Header: function Header() {
         return props.enableSelectAll ? React.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() {
@@ -3504,41 +3393,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 = 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 = useMemo(function () {
+    return prepareColumns([].concat(displayColumns, props.columns), currentFilterFns);
+  }, [currentFilterFns, displayColumns, props.columns]);
   var data = 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({}, useTableInstance(table, _extends({
+  var table = _extends({}, useReactTable(_extends({
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getGroupedRowModel: getGroupedRowModel(),
+    getPaginationRowModel: getPaginationRowModel(),
+    getSortedRowModel: 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,
@@ -3548,6 +3443,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       currentGlobalFilterFn: currentGlobalFilterFn,
       density: density,
       isFullScreen: isFullScreen,
+      showAlertBanner: showAlertBanner,
       showFilters: showFilters,
       showGlobalFilter: showGlobalFilter
     }, props.state),
@@ -3559,31 +3455,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
   });
 
-  useEffect(function () {
-    props == null ? void 0 : props.onColumnOrderChanged == null ? void 0 : props.onColumnOrderChanged({
-      columnOrder: instance.getState().columnOrder,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnOrder]);
-  useEffect(function () {
-    props == null ? void 0 : props.onColumnPinningChanged == null ? void 0 : props.onColumnPinningChanged({
-      columnPinning: instance.getState().columnPinning,
-      //@ts-ignore
-      instance: instance
-    });
-  }, [instance.getState().columnPinning]);
-  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.createElement(React.Fragment, null, React.createElement(Dialog, {
     PaperComponent: Box,
     TransitionComponent: Grow,
@@ -3596,9 +3472,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     open: isFullScreen,
     transitionDuration: 400
   }, React.createElement(MRT_TablePaper, {
-    instance: instance
+    table: table
   })), !isFullScreen && React.createElement(MRT_TablePaper, {
-    instance: instance
+    table: table
   }));
 };