material-react-table 0.7.6 → 0.8.0

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useState, useCallback, Fragment, useEffect } from 'react';
+import React, { useMemo, useState, useCallback, Fragment, useLayoutEffect, useEffect } from 'react';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import CheckBoxIcon from '@mui/icons-material/CheckBox';
@@ -27,12 +27,12 @@ import SearchOffIcon from '@mui/icons-material/SearchOff';
 import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import { createTable, useTableInstance, getColumnFilteredRowModelSync, getCoreRowModelSync, getExpandedRowModel, getGlobalFilteredRowModelSync, getGroupedRowModelSync, getPaginationRowModel, getSortedRowModelSync, functionalUpdate } from '@tanstack/react-table';
-import { IconButton, Menu, MenuItem, Box, Tooltip, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, useMediaQuery, Chip, Alert, LinearProgress, Toolbar, alpha, TableCell, TableSortLabel, TableRow, TableHead, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
-import { matchSorter } from 'match-sorter';
+import { createTable, useTableInstance, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, functionalUpdate } from '@tanstack/react-table';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, TablePagination, Chip, Alert, LinearProgress, useMediaQuery, Toolbar, lighten, alpha, TableCell, TableSortLabel, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog, Grow } from '@mui/material';
+import { rankItem, rankings } from '@tanstack/match-sorter-utils';
 
 function _extends() {
-  _extends = Object.assign || function (target) {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
     for (var i = 1; i < arguments.length; i++) {
       var source = arguments[i];
 
@@ -45,7 +45,6 @@ function _extends() {
 
     return target;
   };
-
   return _extends.apply(this, arguments);
 }
 
@@ -66,6 +65,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 
 var MRT_DefaultLocalization_EN = {
   actions: 'Actions',
+  and: 'and',
   cancel: 'Cancel',
   changeFilterMode: 'Change filter mode',
   changeSearchMode: 'Change search mode',
@@ -78,24 +78,26 @@ var MRT_DefaultLocalization_EN = {
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
-  filterBestMatch: 'Best Match',
-  filterBestMatchFirst: 'Best Match First',
+  filterBetween: 'Between',
   filterByColumn: 'Filter by {column}',
   filterContains: 'Contains',
   filterEmpty: 'Empty',
   filterEndsWith: 'Ends With',
   filterEquals: 'Equals',
+  filterFuzzy: 'Fuzzy',
   filterGreaterThan: 'Greater Than',
   filterLessThan: 'Less Than',
   filterMode: 'Filter Mode: {filterType}',
   filterNotEmpty: 'Not Empty',
   filterNotEquals: 'Not Equals',
   filterStartsWith: 'Starts With',
-  filteringByColumn: 'Filtering by {column} - {filterType} "{filterValue}"',
+  filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
   groupByColumn: 'Group by {column}',
   groupedBy: 'Grouped by ',
   hideAll: 'Hide all',
   hideColumn: 'Hide {column} column',
+  max: 'Max',
+  min: 'Min',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',
@@ -116,6 +118,7 @@ var MRT_DefaultLocalization_EN = {
   sortedByColumnAsc: 'Sorted by {column} ascending',
   sortedByColumnDesc: 'Sorted by {column} descending',
   thenBy: ', then by ',
+  to: 'to',
   toggleDensePadding: 'Toggle dense padding',
   toggleFullScreen: 'Toggle full screen',
   toggleSelectAll: 'Toggle select all',
@@ -161,20 +164,25 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
   var tableInstance = _ref.tableInstance;
   var getIsAllRowsExpanded = tableInstance.getIsAllRowsExpanded,
       getIsSomeRowsExpanded = tableInstance.getIsSomeRowsExpanded,
+      getCanSomeRowsExpand = tableInstance.getCanSomeRowsExpand,
       getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       DoubleArrowDownIcon = _tableInstance$option.icons.DoubleArrowDownIcon,
-      isLoading = _tableInstance$option.isLoading,
       localization = _tableInstance$option.localization,
+      renderDetailPanel = _tableInstance$option.renderDetailPanel,
       toggleAllRowsExpanded = tableInstance.toggleAllRowsExpanded;
 
   var _getState = getState(),
       isDensePadding = _getState.isDensePadding;
 
-  return React.createElement(IconButton, {
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.expandAll
+  }, React.createElement(IconButton, {
     "aria-label": localization.expandAll,
-    disabled: isLoading,
-    title: localization.expandAll,
+    disabled: !getCanSomeRowsExpand() && !renderDetailPanel,
     onClick: function onClick() {
       return toggleAllRowsExpanded(!getIsAllRowsExpanded());
     },
@@ -187,7 +195,7 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
       transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  }));
+  })));
 };
 
 var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
@@ -212,10 +220,14 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
     });
   };
 
-  return React.createElement(IconButton, {
+  return React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.expand
+  }, React.createElement(IconButton, {
     "aria-label": localization.expand,
     disabled: !row.getCanExpand() && !renderDetailPanel,
-    title: localization.expand,
     onClick: handleToggleExpand,
     sx: {
       height: isDensePadding ? '1.75rem' : '2.25rem',
@@ -226,18 +238,18 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
       transition: 'transform 0.2s'
     }
-  }));
+  })));
 };
 
 var MRT_FILTER_OPTION;
 
 (function (MRT_FILTER_OPTION) {
-  MRT_FILTER_OPTION["BEST_MATCH"] = "bestMatch";
-  MRT_FILTER_OPTION["BEST_MATCH_FIRST"] = "bestMatchFirst";
+  MRT_FILTER_OPTION["BETWEEN"] = "between";
   MRT_FILTER_OPTION["CONTAINS"] = "contains";
   MRT_FILTER_OPTION["EMPTY"] = "empty";
   MRT_FILTER_OPTION["ENDS_WITH"] = "endsWith";
   MRT_FILTER_OPTION["EQUALS"] = "equals";
+  MRT_FILTER_OPTION["FUZZY"] = "fuzzy";
   MRT_FILTER_OPTION["GREATER_THAN"] = "greaterThan";
   MRT_FILTER_OPTION["LESS_THAN"] = "lessThan";
   MRT_FILTER_OPTION["NOT_EMPTY"] = "notEmpty";
@@ -245,117 +257,92 @@ var MRT_FILTER_OPTION;
   MRT_FILTER_OPTION["STARTS_WITH"] = "startsWith";
 })(MRT_FILTER_OPTION || (MRT_FILTER_OPTION = {}));
 
-var bestMatchFirst = function bestMatchFirst(rows, columnIds, filterValue) {
-  return matchSorter(rows, filterValue.toString().trim(), {
-    keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
-      return "values." + c;
-    }) : ["values." + columnIds]
+var fuzzy = function fuzzy(row, columnId, value, addMeta) {
+  var itemRank = rankItem(row.getValue(columnId), value, {
+    threshold: rankings.MATCHES
   });
+  addMeta(itemRank);
+  return itemRank.passed;
 };
 
-bestMatchFirst.autoRemove = function (val) {
+fuzzy.autoRemove = function (val) {
   return !val;
 };
 
-var bestMatch = function bestMatch(rows, columnIds, filterValue) {
-  return matchSorter(rows, filterValue.toString().trim(), {
-    keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
-      return "values." + c;
-    }) : ["values." + columnIds],
-    sorter: function sorter(rankedItems) {
-      return rankedItems;
-    }
-  });
-};
-
-bestMatch.autoRemove = function (val) {
-  return !val;
-};
-
-var contains = function contains(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
-  });
+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(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
-  });
+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(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
-  });
+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(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
-  });
+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(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return row.values[id].toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
-  });
+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(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] > +filterValue : row.values[id].toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
-  });
+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(rows, id, filterValue) {
-  return rows.filter(function (row) {
-    return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] < +filterValue : row.values[id].toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
-  });
+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 empty = function empty(rows, id, _filterValue) {
-  return rows.filter(function (row) {
-    return !row.values[id].toString().toLowerCase().trim();
-  });
+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(rows, id, _filterValue) {
-  return rows.filter(function (row) {
-    return !!row.values[id].toString().toLowerCase().trim();
-  });
+var notEmpty = function notEmpty(row, id, _filterValue) {
+  return !!row.getValue(id).toString().trim();
 };
 
 notEmpty.autoRemove = function (val) {
@@ -363,12 +350,12 @@ notEmpty.autoRemove = function (val) {
 };
 
 var defaultFilterFNs = {
-  bestMatch: bestMatch,
-  bestMatchFirst: bestMatchFirst,
+  between: between,
   contains: contains,
   empty: empty,
   endsWith: endsWith,
   equals: equals,
+  fuzzy: fuzzy,
   greaterThan: greaterThan,
   lessThan: lessThan,
   notEmpty: notEmpty,
@@ -401,62 +388,62 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
 
   var filterOptions = useMemo(function () {
     return [{
-      type: MRT_FILTER_OPTION.BEST_MATCH_FIRST,
-      label: localization.filterBestMatchFirst,
+      option: MRT_FILTER_OPTION.FUZZY,
+      label: localization.filterFuzzy,
       divider: false,
-      fn: bestMatchFirst
-    }, {
-      type: MRT_FILTER_OPTION.BEST_MATCH,
-      label: localization.filterBestMatch,
-      divider: !!header,
-      fn: bestMatch
+      fn: fuzzy
     }, {
-      type: MRT_FILTER_OPTION.CONTAINS,
+      option: MRT_FILTER_OPTION.CONTAINS,
       label: localization.filterContains,
       divider: false,
       fn: contains
     }, {
-      type: MRT_FILTER_OPTION.STARTS_WITH,
+      option: MRT_FILTER_OPTION.STARTS_WITH,
       label: localization.filterStartsWith,
       divider: false,
       fn: startsWith
     }, {
-      type: MRT_FILTER_OPTION.ENDS_WITH,
+      option: MRT_FILTER_OPTION.ENDS_WITH,
       label: localization.filterEndsWith,
       divider: true,
       fn: endsWith
     }, {
-      type: MRT_FILTER_OPTION.EQUALS,
+      option: MRT_FILTER_OPTION.EQUALS,
       label: localization.filterEquals,
       divider: false,
       fn: equals
     }, {
-      type: MRT_FILTER_OPTION.NOT_EQUALS,
+      option: MRT_FILTER_OPTION.NOT_EQUALS,
       label: localization.filterNotEquals,
       divider: true,
       fn: notEquals
     }, {
-      type: MRT_FILTER_OPTION.GREATER_THAN,
+      option: MRT_FILTER_OPTION.BETWEEN,
+      label: localization.filterBetween,
+      divider: false,
+      fn: between
+    }, {
+      option: MRT_FILTER_OPTION.GREATER_THAN,
       label: localization.filterGreaterThan,
       divider: false,
       fn: greaterThan
     }, {
-      type: MRT_FILTER_OPTION.LESS_THAN,
+      option: MRT_FILTER_OPTION.LESS_THAN,
       label: localization.filterLessThan,
       divider: true,
       fn: lessThan
     }, {
-      type: MRT_FILTER_OPTION.EMPTY,
+      option: MRT_FILTER_OPTION.EMPTY,
       label: localization.filterEmpty,
       divider: false,
       fn: empty
     }, {
-      type: MRT_FILTER_OPTION.NOT_EMPTY,
+      option: MRT_FILTER_OPTION.NOT_EMPTY,
       label: localization.filterNotEmpty,
       divider: false,
       fn: notEmpty
     }].filter(function (filterType) {
-      return header ? !header.column.enabledColumnFilterOptions || header.column.enabledColumnFilterOptions.includes(filterType.type) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.type)) && [MRT_FILTER_OPTION.BEST_MATCH_FIRST, MRT_FILTER_OPTION.BEST_MATCH].includes(filterType.type);
+      return header ? !header.column.enabledColumnFilterOptions || header.column.enabledColumnFilterOptions.includes(filterType.option) : (!enabledGlobalFilterOptions || enabledGlobalFilterOptions.includes(filterType.option)) && [MRT_FILTER_OPTION.FUZZY, MRT_FILTER_OPTION.CONTAINS].includes(filterType.option);
     });
   }, []);
 
@@ -469,7 +456,11 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
       });
 
       if ([MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(value)) {
-        header.column.setColumnFilterValue(' ');
+        header.column.setFilterValue(' ');
+      } else if (value === MRT_FILTER_OPTION.BETWEEN) {
+        header.column.setFilterValue(['', '']);
+      } else {
+        header.column.setFilterValue('');
       }
     } else {
       setCurrentGlobalFilterFn(value);
@@ -479,7 +470,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
     onSelect == null ? void 0 : onSelect();
   };
 
-  var filterType = !!header ? currentFilterFns[header.id] : currentGlobalFilterFn;
+  var filterOption = !!header ? currentFilterFns[header.id] : currentGlobalFilterFn;
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     anchorOrigin: {
@@ -494,7 +485,7 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
       dense: isDensePadding
     }
   }, filterOptions.map(function (_ref2, index) {
-    var type = _ref2.type,
+    var option = _ref2.option,
         label = _ref2.label,
         divider = _ref2.divider,
         fn = _ref2.fn;
@@ -502,11 +493,11 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
       divider: divider,
       key: index,
       onClick: function onClick() {
-        return handleSelectFilterType(type);
+        return handleSelectFilterType(option);
       },
-      selected: type === filterType || fn === filterType,
+      selected: option === filterOption || fn === filterOption,
       sx: commonMenuItemStyles,
-      value: type
+      value: option
     }, label);
   }));
 };
@@ -514,52 +505,51 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
 var MRT_ColumnPinningButtons = function MRT_ColumnPinningButtons(_ref) {
   var column = _ref.column,
       tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
+  var _tableInstance$option = tableInstance.options,
       PushPinIcon = _tableInstance$option.icons.PushPinIcon,
       localization = _tableInstance$option.localization;
 
-  var _getState = getState(),
-      columnOrder = _getState.columnOrder;
-
   var handlePinColumn = function handlePinColumn(pinDirection) {
     column.pin(pinDirection);
-
-    if (column.columnDefType === 'display') {
-      tableInstance.setColumnOrder([column.id].concat(columnOrder));
-    }
   };
 
-  var pinned = column.getIsPinned();
   return React.createElement(Box, {
     sx: {
       mr: '8px'
     }
-  }, React.createElement(Tooltip, {
+  }, column.getIsPinned() ? React.createElement(Tooltip, {
+    arrow: true,
+    title: localization.unpin
+  }, React.createElement(IconButton, {
+    onClick: function onClick() {
+      return handlePinColumn(false);
+    },
+    size: "small"
+  }, React.createElement(PushPinIcon, null))) : React.createElement(React.Fragment, null, React.createElement(Tooltip, {
     arrow: true,
-    title: pinned === 'left' ? localization.unpin : localization.pinToLeft
+    title: localization.pinToLeft
   }, React.createElement(IconButton, {
     onClick: function onClick() {
-      return handlePinColumn(pinned === 'left' ? false : 'left');
+      return handlePinColumn('left');
     },
     size: "small"
   }, React.createElement(PushPinIcon, {
     style: {
-      transform: pinned === 'left' ? 'rotate(0)' : 'rotate(90deg)'
+      transform: 'rotate(90deg)'
     }
   }))), React.createElement(Tooltip, {
     arrow: true,
-    title: pinned === 'right' ? localization.unpin : localization.pinToRight
+    title: localization.pinToRight
   }, React.createElement(IconButton, {
     onClick: function onClick() {
-      return handlePinColumn(pinned === 'right' ? false : 'right');
+      return handlePinColumn('right');
     },
     size: "small"
   }, React.createElement(PushPinIcon, {
     style: {
-      transform: pinned === 'right' ? 'rotate(0)' : 'rotate(-90deg)'
+      transform: 'rotate(-90deg)'
     }
-  }))));
+  })))));
 };
 
 var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
@@ -569,9 +559,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       isSubMenu = _ref.isSubMenu,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
-      _tableInstance$option = tableInstance.options,
-      onToggleColumnVisibility = _tableInstance$option.onToggleColumnVisibility,
-      enablePinning = _tableInstance$option.enablePinning;
+      onToggleColumnVisibility = tableInstance.options.onToggleColumnVisibility;
 
   var _getState = getState(),
       columnVisibility = _getState.columnVisibility;
@@ -606,7 +594,7 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
       pl: (column.depth + 0.5) * 2 + "rem",
       py: '6px'
     }
-  }, !isSubMenu && enablePinning && React.createElement(MRT_ColumnPinningButtons, {
+  }, !isSubMenu && column.getCanPin() && React.createElement(MRT_ColumnPinningButtons, {
     column: column,
     tableInstance: tableInstance
   }), React.createElement(FormControlLabel, {
@@ -619,8 +607,8 @@ var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
     },
     checked: switchChecked,
     control: React.createElement(Switch, null),
-    disabled: isSubMenu && switchChecked || column.enableHiding === false,
-    label: column.header,
+    disabled: isSubMenu && switchChecked || !column.getCanHide(),
+    label: column.columnDef.header,
     onChange: function onChange() {
       return handleToggleColumnHidden(column);
     }
@@ -700,7 +688,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }, localization.hideAll), !isSubMenu && enablePinning && React.createElement(Button, {
     disabled: !getIsSomeColumnsPinned(),
     onClick: function onClick() {
-      return tableInstance.setColumnPinning({});
+      return tableInstance.resetColumnPinning(true);
     }
   }, localization.unpinAll), React.createElement(Button, {
     disabled: getIsAllColumnsVisible(),
@@ -783,7 +771,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       setShowHideColumnsMenuAnchorEl = _useState2[1];
 
   var handleClearSort = function handleClearSort() {
-    column.resetSorting();
+    column.clearSorting();
     setAnchorEl(null);
   };
 
@@ -809,6 +797,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
 
   var handlePinColumn = function handlePinColumn(pinDirection) {
     column.pin(pinDirection);
+    setAnchorEl(null);
   };
 
   var handleGroupByColumn = function handleGroupByColumn() {
@@ -820,7 +809,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   };
 
   var handleClearFilter = function handleClearFilter() {
-    column.setColumnFilterValue('');
+    column.setFilterValue('');
     setAnchorEl(null);
   };
 
@@ -873,7 +862,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.columnDef.header)))), React.createElement(MenuItem, {
     divider: enableColumnFilters || enableGrouping || enableHiding,
     key: 2,
     disabled: column.getIsSorted() === 'desc',
@@ -885,8 +874,8 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.header))))], enableColumnFilters && column.getCanColumnFilter() && [React.createElement(MenuItem, {
-    disabled: !column.getColumnFilterValue(),
+  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.columnDef.header))))], enableColumnFilters && column.getCanFilter() && [React.createElement(MenuItem, {
+    disabled: !column.getFilterValue(),
     key: 0,
     onClick: handleClearFilter,
     sx: commonMenuItemStyles$1
@@ -899,7 +888,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.header))), !column.filterSelectOptions && React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.columnDef.header))), !column.filterSelectOptions && React.createElement(IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
@@ -920,7 +909,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.columnDef.header))))], enablePinning && column.getCanPin() && [React.createElement(MenuItem, {
     disabled: column.getIsPinned() === 'left' || !column.getCanPin(),
     key: 0,
     onClick: function onClick() {
@@ -935,7 +924,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     }
   })), localization.pinToLeft)), React.createElement(MenuItem, {
     disabled: column.getIsPinned() === 'right' || !column.getCanPin(),
-    key: 0,
+    key: 1,
     onClick: function onClick() {
       return handlePinColumn('right');
     },
@@ -949,7 +938,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   })), localization.pinToRight)), React.createElement(MenuItem, {
     disabled: !column.getIsPinned(),
     divider: enableHiding,
-    key: 0,
+    key: 2,
     onClick: function onClick() {
       return handlePinColumn(false);
     },
@@ -970,7 +959,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.header)))), React.createElement(MenuItem, {
+  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.columnDef.header)))), React.createElement(MenuItem, {
     disabled: !Object.values(columnVisibility).filter(function (visible) {
       return !visible;
     }).length,
@@ -979,7 +968,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.header))), React.createElement(IconButton, {
+  }, React.createElement(ListItemIcon, null, React.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.columnDef.header))), React.createElement(IconButton, {
     onClick: handleOpenShowHideColumnsMenu,
     onMouseEnter: handleOpenShowHideColumnsMenu,
     size: "small",
@@ -1052,7 +1041,7 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   var handleCancel = function handleCancel() {
     var _row$original;
 
-    row.values = (_row$original = row.original) != null ? _row$original : {};
+    row._valuesCache = (_row$original = row.original) != null ? _row$original : {};
     setCurrentEditingRow(null);
   };
 
@@ -1166,9 +1155,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
   var getRowModel = tableInstance.getRowModel,
       getSelectedRowModel = tableInstance.getSelectedRowModel,
       getState = tableInstance.getState,
-      getToggleAllRowsSelectedProps = tableInstance.getToggleAllRowsSelectedProps,
       _tableInstance$option = tableInstance.options,
-      isLoading = _tableInstance$option.isLoading,
       localization = _tableInstance$option.localization,
       muiSelectCheckboxProps = _tableInstance$option.muiSelectCheckboxProps,
       onSelectChange = _tableInstance$option.onSelectChange,
@@ -1179,18 +1166,14 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
   var handleSelectChange = function handleSelectChange(event) {
     if (selectAll) {
-      var _getToggleAllRowsSele;
-
-      getToggleAllRowsSelectedProps == null ? void 0 : (_getToggleAllRowsSele = getToggleAllRowsSelectedProps()) == null ? void 0 : _getToggleAllRowsSele.onChange == null ? void 0 : _getToggleAllRowsSele.onChange(event);
+      tableInstance.getToggleAllRowsSelectedHandler()(event);
       onSelectAllChange == null ? void 0 : onSelectAllChange({
         event: event,
         selectedRows: event.target.checked ? getRowModel().flatRows : [],
         tableInstance: tableInstance
       });
     } else if (row) {
-      var _row$getToggleSelecte;
-
-      row == null ? void 0 : (_row$getToggleSelecte = row.getToggleSelectedProps()) == null ? void 0 : _row$getToggleSelecte.onChange == null ? void 0 : _row$getToggleSelecte.onChange(event);
+      row == null ? void 0 : row.getToggleSelectedHandler()(event);
       onSelectChange == null ? void 0 : onSelectChange({
         event: event,
         row: row,
@@ -1202,131 +1185,32 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     }
   };
 
-  var mTableBodyRowSelectCheckboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
+  var checkboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps({
     isSelectAll: !!selectAll,
     row: row,
     tableInstance: tableInstance
   }) : muiSelectCheckboxProps;
-  var rtSelectCheckboxProps = selectAll ? getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleSelectedProps();
-
-  var checkboxProps = _extends({}, rtSelectCheckboxProps, mTableBodyRowSelectCheckboxProps);
-
   return React.createElement(Tooltip, {
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
     title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
   }, React.createElement(Checkbox, Object.assign({
-    disabled: isLoading,
+    checked: selectAll ? tableInstance.getIsAllRowsSelected() : row == null ? void 0 : row.getIsSelected(),
+    indeterminate: selectAll ? tableInstance.getIsSomeRowsSelected() : row == null ? void 0 : row.getIsSomeSelected(),
     inputProps: {
       'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
     },
+    onChange: handleSelectChange,
     size: isDensePadding ? 'small' : 'medium'
   }, checkboxProps, {
-    sx: {
+    sx: _extends({
       height: isDensePadding ? '1.75rem' : '2.25rem',
       width: isDensePadding ? '1.75rem' : '2.25rem'
-    },
-    onChange: handleSelectChange,
-    title: undefined
+    }, checkboxProps == null ? void 0 : checkboxProps.sx)
   })));
 };
 
-var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
-  var tableInstance = _ref.tableInstance;
-  var getState = tableInstance.getState,
-      setGlobalFilter = tableInstance.setGlobalFilter,
-      _tableInstance$option = tableInstance.options,
-      _tableInstance$option2 = _tableInstance$option.icons,
-      SearchIcon = _tableInstance$option2.SearchIcon,
-      CloseIcon = _tableInstance$option2.CloseIcon,
-      idPrefix = _tableInstance$option.idPrefix,
-      localization = _tableInstance$option.localization,
-      muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
-      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
-
-  var _getState = getState(),
-      globalFilter = _getState.globalFilter,
-      showGlobalFilter = _getState.showGlobalFilter;
-
-  var _useState = useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
-
-  var _useState2 = useState(globalFilter != null ? globalFilter : ''),
-      searchValue = _useState2[0],
-      setSearchValue = _useState2[1];
-
-  var handleChange = useCallback(debounce(function (event) {
-    var _event$target$value;
-
-    setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
-      event: event,
-      tableInstance: tableInstance
-    });
-  }, 200), []);
-
-  var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
-    setAnchorEl(event.currentTarget);
-  };
-
-  var handleClear = function handleClear() {
-    setSearchValue('');
-    setGlobalFilter(undefined);
-  };
-
-  var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
-    tableInstance: tableInstance
-  }) : muiSearchTextFieldProps;
-  return React.createElement(Collapse, {
-    "in": showGlobalFilter,
-    orientation: "horizontal"
-  }, React.createElement(TextField, Object.assign({
-    id: "mrt-" + idPrefix + "-search-text-field",
-    placeholder: localization.search,
-    onChange: function onChange(event) {
-      setSearchValue(event.target.value);
-      handleChange(event);
-    },
-    value: searchValue != null ? searchValue : '',
-    variant: "standard",
-    InputProps: {
-      startAdornment: React.createElement(InputAdornment, {
-        position: "start"
-      }, React.createElement(Tooltip, {
-        arrow: true,
-        title: localization.changeSearchMode
-      }, React.createElement("span", null, React.createElement(IconButton, {
-        "aria-label": localization.changeSearchMode,
-        onClick: handleGlobalFilterMenuOpen,
-        size: "small",
-        sx: {
-          height: '1.75rem',
-          width: '1.75rem'
-        }
-      }, React.createElement(SearchIcon, null))))),
-      endAdornment: React.createElement(InputAdornment, {
-        position: "end"
-      }, React.createElement(IconButton, {
-        "aria-label": localization.clearSearch,
-        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
-        onClick: handleClear,
-        size: "small",
-        title: localization.clearSearch
-      }, React.createElement(CloseIcon, null)))
-    }
-  }, textFieldProps, {
-    sx: _extends({
-      justifySelf: 'end'
-    }, textFieldProps == null ? void 0 : textFieldProps.sx)
-  })), React.createElement(MRT_FilterOptionMenu, {
-    anchorEl: anchorEl,
-    setAnchorEl: setAnchorEl,
-    tableInstance: tableInstance
-  }));
-};
-
 var _excluded = ["tableInstance"];
 var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   var tableInstance = _ref.tableInstance,
@@ -1507,7 +1391,104 @@ var MRT_ToggleGlobalFilterButton = function MRT_ToggleGlobalFilterButton(_ref) {
   }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null)));
 };
 
+var MRT_SearchTextField = function MRT_SearchTextField(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      setGlobalFilter = tableInstance.setGlobalFilter,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      SearchIcon = _tableInstance$option2.SearchIcon,
+      CloseIcon = _tableInstance$option2.CloseIcon,
+      idPrefix = _tableInstance$option.idPrefix,
+      localization = _tableInstance$option.localization,
+      muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
+      onGlobalSearchFilterChange = _tableInstance$option.onGlobalSearchFilterChange;
+
+  var _getState = getState(),
+      globalFilter = _getState.globalFilter,
+      showGlobalFilter = _getState.showGlobalFilter;
+
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var _useState2 = useState(globalFilter != null ? globalFilter : ''),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var handleChange = useCallback(debounce(function (event) {
+    var _event$target$value;
+
+    setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+    onGlobalSearchFilterChange == null ? void 0 : onGlobalSearchFilterChange({
+      event: event,
+      tableInstance: tableInstance
+    });
+  }, 200), []);
+
+  var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClear = function handleClear() {
+    setSearchValue('');
+    setGlobalFilter(undefined);
+  };
+
+  var textFieldProps = muiSearchTextFieldProps instanceof Function ? muiSearchTextFieldProps({
+    tableInstance: tableInstance
+  }) : muiSearchTextFieldProps;
+  return React.createElement(Collapse, {
+    "in": showGlobalFilter,
+    orientation: "horizontal"
+  }, React.createElement(TextField, Object.assign({
+    id: "mrt-" + idPrefix + "-search-text-field",
+    placeholder: localization.search,
+    onChange: function onChange(event) {
+      setSearchValue(event.target.value);
+      handleChange(event);
+    },
+    value: searchValue != null ? searchValue : '',
+    variant: "standard",
+    InputProps: {
+      startAdornment: React.createElement(InputAdornment, {
+        position: "start"
+      }, React.createElement(Tooltip, {
+        arrow: true,
+        title: localization.changeSearchMode
+      }, React.createElement("span", null, React.createElement(IconButton, {
+        "aria-label": localization.changeSearchMode,
+        onClick: handleGlobalFilterMenuOpen,
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
+      }, React.createElement(SearchIcon, null))))),
+      endAdornment: React.createElement(InputAdornment, {
+        position: "end"
+      }, React.createElement(IconButton, {
+        "aria-label": localization.clearSearch,
+        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
+        onClick: handleClear,
+        size: "small",
+        title: localization.clearSearch
+      }, React.createElement(CloseIcon, null)))
+    }
+  }, textFieldProps, {
+    sx: _extends({
+      justifySelf: 'end'
+    }, textFieldProps == null ? void 0 : textFieldProps.sx)
+  })), React.createElement(MRT_FilterOptionMenu, {
+    anchorEl: anchorEl,
+    setAnchorEl: setAnchorEl,
+    tableInstance: tableInstance
+  }));
+};
+
 var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
+  var _renderToolbarInterna;
+
   var tableInstance = _ref.tableInstance;
   var _tableInstance$option = tableInstance.options,
       enableColumnFilters = _tableInstance$option.enableColumnFilters,
@@ -1517,24 +1498,22 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
       enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enableHiding = _tableInstance$option.enableHiding,
       renderToolbarInternalActions = _tableInstance$option.renderToolbarInternalActions;
-
-  if (renderToolbarInternalActions) {
-    return React.createElement(React.Fragment, null, renderToolbarInternalActions({
-      MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
-      MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
-      MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
-      MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
-      MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
-      tableInstance: tableInstance
-    }));
-  }
-
   return React.createElement(Box, {
     sx: {
       display: 'flex',
-      alignItems: 'center'
+      alignItems: 'center',
+      zIndex: 3
     }
-  }, enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
+  }, (_renderToolbarInterna = renderToolbarInternalActions == null ? void 0 : renderToolbarInternalActions({
+    MRT_FullScreenToggleButton: MRT_FullScreenToggleButton,
+    MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
+    MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
+    MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
+    MRT_ToggleGlobalFilterButton: MRT_ToggleGlobalFilterButton,
+    tableInstance: tableInstance
+  })) != null ? _renderToolbarInterna : React.createElement(React.Fragment, null, enableGlobalFilter && React.createElement(MRT_SearchTextField, {
+    tableInstance: tableInstance
+  }), enableFilters && enableGlobalFilter && React.createElement(MRT_ToggleGlobalFilterButton, {
     tableInstance: tableInstance
   }), enableFilters && enableColumnFilters && React.createElement(MRT_ToggleFiltersButton, {
     tableInstance: tableInstance
@@ -1544,7 +1523,7 @@ var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
     tableInstance: tableInstance
   }), enableFullScreenToggle && React.createElement(MRT_FullScreenToggleButton, {
     tableInstance: tableInstance
-  }));
+  })));
 };
 
 var MRT_TablePagination = function MRT_TablePagination(_ref) {
@@ -1605,45 +1584,36 @@ var MRT_TablePagination = function MRT_TablePagination(_ref) {
 var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
   var _localization$selecte, _localization$selecte2;
 
-  var tableInstance = _ref.tableInstance;
+  var stackAlertBanner = _ref.stackAlertBanner,
+      tableInstance = _ref.tableInstance;
   var getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
       getSelectedRowModel = tableInstance.getSelectedRowModel,
       getState = tableInstance.getState,
-      toggleColumnGrouping = tableInstance.toggleColumnGrouping,
       _tableInstance$option = tableInstance.options,
       localization = _tableInstance$option.localization,
-      muiTableToolbarAlertBannerProps = _tableInstance$option.muiTableToolbarAlertBannerProps,
-      positionToolbarActions = _tableInstance$option.positionToolbarActions,
-      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
-      renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
+      muiTableToolbarAlertBannerProps = _tableInstance$option.muiTableToolbarAlertBannerProps;
 
   var _getState = getState(),
       grouping = _getState.grouping;
 
-  var isMobile = useMediaQuery('(max-width:720px)');
   var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps({
     tableInstance: tableInstance
   }) : 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) {
-    var _tableInstance$getAll;
-
     return React.createElement(Fragment, {
       key: index + "-" + columnId
     }, index > 0 ? localization.thenBy : '', React.createElement(Chip, {
       color: "secondary",
-      label: (_tableInstance$getAll = tableInstance.getAllColumns().find(function (column) {
-        return column.id === columnId;
-      })) == null ? void 0 : _tableInstance$getAll.header,
+      label: tableInstance.getColumn(columnId).columnDef.header,
       onDelete: function onDelete() {
-        return toggleColumnGrouping(columnId);
+        return tableInstance.getColumn(columnId).toggleGrouping();
       }
     }));
   })) : null;
-  var displayAbsolute = !(isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
   return React.createElement(Collapse, {
     "in": !!selectMessage || !!groupedByMessage,
-    timeout: displayAbsolute ? 0 : 200
+    timeout: stackAlertBanner ? 200 : 0
   }, React.createElement(Alert, Object.assign({
     color: "info",
     icon: false,
@@ -1652,9 +1622,8 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
       fontSize: '1rem',
       left: 0,
       p: 0,
-      position: displayAbsolute ? 'absolute' : 'relative',
+      position: 'relative',
       right: 0,
-      minHeight: '3.5rem',
       top: 0,
       width: '100%',
       zIndex: 2
@@ -1663,20 +1632,24 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
     sx: {
       p: '0.5rem 1rem'
     }
-  }, selectMessage, React.createElement("br", null), groupedByMessage)));
+  }, selectMessage, selectMessage && groupedByMessage && React.createElement("br", null), groupedByMessage)));
 };
 
 var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
   var tableInstance = _ref.tableInstance;
-  var _tableInstance$option = tableInstance.options,
-      muiLinearProgressProps = _tableInstance$option.muiLinearProgressProps,
-      isReloading = _tableInstance$option.isReloading,
-      isLoading = _tableInstance$option.isLoading;
+  var muiLinearProgressProps = tableInstance.options.muiLinearProgressProps,
+      getState = tableInstance.getState;
+
+  var _getState = getState(),
+      isLoading = _getState.isLoading,
+      showProgressBars = _getState.showProgressBars;
+
   var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps({
     tableInstance: tableInstance
   }) : muiLinearProgressProps;
   return React.createElement(Collapse, {
-    "in": isReloading || isLoading,
+    "in": isLoading || showProgressBars,
+    mountOnEnter: true,
     unmountOnExit: true
   }, React.createElement(LinearProgress, Object.assign({
     "aria-label": "Loading",
@@ -1687,10 +1660,13 @@ var MRT_LinearProgressBar = function MRT_LinearProgressBar(_ref) {
 var commonToolbarStyles = function commonToolbarStyles(_ref) {
   var theme = _ref.theme;
   return {
-    backgroundColor: theme.palette.background["default"],
-    backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
+    backgroundColor: lighten(theme.palette.background["default"], 0.04),
+    backgroundImage: 'none',
     display: 'grid',
+    minHeight: '3.5rem',
+    overflow: 'hidden',
     p: '0 !important',
+    transition: 'all 0.2s ease-in-out',
     width: '100%',
     zIndex: 1
   };
@@ -1701,7 +1677,6 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var tableInstance = _ref2.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
       enablePagination = _tableInstance$option.enablePagination,
       enableToolbarInternalActions = _tableInstance$option.enableToolbarInternalActions,
       idPrefix = _tableInstance$option.idPrefix,
@@ -1714,9 +1689,11 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
+  var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps({
     tableInstance: tableInstance
   }) : muiTableToolbarTopProps;
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions;
   return React.createElement(Toolbar, Object.assign({
     id: "mrt-" + idPrefix + "-toolbar-top",
     variant: "dense"
@@ -1730,27 +1707,23 @@ var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
       }), toolbarProps == null ? void 0 : toolbarProps.sx);
     }
   }), positionToolbarAlertBanner === 'top' && React.createElement(MRT_ToolbarAlertBanner, {
+    stackAlertBanner: stackAlertBanner,
     tableInstance: tableInstance
   }), React.createElement(Box, {
     sx: {
-      p: '0.5rem',
       display: 'flex',
-      justifyContent: 'space-between'
+      justifyContent: 'space-between',
+      p: '0.5rem',
+      position: stackAlertBanner ? 'relative' : 'absolute',
+      right: 0,
+      top: 0,
+      width: 'calc(100% - 1rem)'
     }
   }, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions({
     tableInstance: tableInstance
-  })) != null ? _renderToolbarCustomA : React.createElement("span", null), React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      gap: '0.5rem',
-      position: 'relative',
-      zIndex: 3
-    }
-  }, enableGlobalFilter && React.createElement(MRT_SearchTextField, {
+  })) != null ? _renderToolbarCustomA : React.createElement("span", null), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
-  }), enableToolbarInternalActions && positionToolbarActions === 'top' && React.createElement(MRT_ToolbarInternalButtons, {
-    tableInstance: tableInstance
-  }))), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
+  })), React.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
   })), React.createElement(MRT_LinearProgressBar, {
     tableInstance: tableInstance
@@ -1767,14 +1740,17 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
       muiTableToolbarBottomProps = _tableInstance$option.muiTableToolbarBottomProps,
       positionPagination = _tableInstance$option.positionPagination,
       positionToolbarActions = _tableInstance$option.positionToolbarActions,
-      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner;
+      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
+      renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
 
   var _getState = getState(),
       isFullScreen = _getState.isFullScreen;
 
+  var isMobile = useMediaQuery('(max-width:720px)');
   var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps({
     tableInstance: tableInstance
   }) : muiTableToolbarBottomProps;
+  var stackAlertBanner = isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'bottom' && !!renderToolbarCustomActions && positionToolbarActions === 'bottom';
   return React.createElement(Toolbar, Object.assign({
     id: "mrt-" + idPrefix + "-toolbar-bottom",
     variant: "dense"
@@ -1790,25 +1766,29 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
     }
   }), React.createElement(MRT_LinearProgressBar, {
     tableInstance: tableInstance
+  }), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
+    tableInstance: tableInstance
   }), React.createElement(Box, {
     sx: {
       display: 'flex',
       justifyContent: 'space-between',
-      width: '100%'
+      width: '100%',
+      position: stackAlertBanner ? 'relative' : 'absolute',
+      right: 0,
+      top: 0
     }
   }, enableToolbarInternalActions && positionToolbarActions === 'bottom' ? React.createElement(MRT_ToolbarInternalButtons, {
     tableInstance: tableInstance
-  }) : React.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React.createElement(MRT_ToolbarAlertBanner, {
-    tableInstance: tableInstance
-  }), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
+  }) : React.createElement("span", null), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React.createElement(MRT_TablePagination, {
     tableInstance: tableInstance
   })));
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _column$getColumnFilt, _localization$filterB, _localization$filterM, _localization$, _localization$clearFi, _column$filterSelectO;
+  var _localization$filterB, _localization$filterM, _localization$, _localization$clearFi, _column$filterSelectO;
 
   var header = _ref.header,
+      inputIndex = _ref.inputIndex,
       tableInstance = _ref.tableInstance;
   var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
@@ -1839,14 +1819,22 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 
   var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
 
-  var _useState2 = useState((_column$getColumnFilt = column.getColumnFilterValue()) != null ? _column$getColumnFilt : ''),
+  var _useState2 = useState(function () {
+    var _column$getFilterValu, _column$getFilterValu2, _column$getFilterValu3;
+
+    return inputIndex !== undefined ? (_column$getFilterValu = (_column$getFilterValu2 = column.getFilterValue()) == null ? void 0 : _column$getFilterValu2[inputIndex]) != null ? _column$getFilterValu : '' : (_column$getFilterValu3 = column.getFilterValue()) != null ? _column$getFilterValu3 : '';
+  }),
       filterValue = _useState2[0],
       setFilterValue = _useState2[1];
 
-  var handleChange = useCallback(debounce(function (event) {
+  var handleChangeDebounced = useCallback(debounce(function (event) {
     var _event$target$value;
 
-    return column.setColumnFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+    return inputIndex !== undefined ? column.setFilterValue(function (old) {
+      var newFilterValues = old != null ? old : ['', ''];
+      newFilterValues[inputIndex] = event.target.value;
+      return newFilterValues;
+    }) : column.setFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
   }, 150), []);
 
   var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
@@ -1855,16 +1843,25 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
 
   var handleClear = function handleClear() {
     setFilterValue('');
-    column.setColumnFilterValue(undefined);
+
+    if (inputIndex !== undefined) {
+      column.setFilterValue(function (old) {
+        var newFilterValues = old != null ? old : ['', ''];
+        newFilterValues[inputIndex] = undefined;
+        return newFilterValues;
+      });
+    } else {
+      column.setFilterValue(undefined);
+    }
   };
 
   var handleClearFilterChip = function handleClearFilterChip() {
     setFilterValue('');
-    column.setColumnFilterValue(undefined);
+    column.setFilterValue(undefined);
     setCurrentFilterFns(function (prev) {
       var _extends2;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = MRT_FILTER_OPTION.BEST_MATCH, _extends2));
+      return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = MRT_FILTER_OPTION.FUZZY, _extends2));
     });
   };
 
@@ -1875,12 +1872,12 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     }));
   }
 
-  var filterId = "mrt-" + idPrefix + "-" + header.id + "-filter-text-field";
+  var filterId = "mrt-" + idPrefix + "-" + header.id + "-filter-text-field" + (inputIndex != null ? inputIndex : '');
   var filterFn = currentFilterFns == null ? void 0 : currentFilterFns[header.id];
   var isSelectFilter = !!column.filterSelectOptions;
   var filterChipLabel = !(filterFn instanceof Function) && [MRT_FILTER_OPTION.EMPTY, MRT_FILTER_OPTION.NOT_EMPTY].includes(filterFn) ? //@ts-ignore
   localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))] : '';
-  var filterPlaceholder = (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.header));
+  var filterPlaceholder = inputIndex === undefined ? (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.columnDef.header)) : inputIndex === 0 ? localization.min : inputIndex === 1 ? localization.max : '';
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: filterId,
@@ -1892,23 +1889,24 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       },
       title: filterPlaceholder
     },
-    helperText: React.createElement("label", {
+    helperText: !inputIndex ? 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))])),
+    localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))])) : null,
     FormHelperTextProps: {
       sx: {
         fontSize: '0.6rem',
-        lineHeight: '0.8rem'
+        lineHeight: '0.8rem',
+        whiteSpace: 'nowrap'
       }
     },
     label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
     margin: "none",
-    placeholder: filterPlaceholder,
+    placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
     onChange: function onChange(event) {
       setFilterValue(event.target.value);
-      handleChange(event);
+      handleChangeDebounced(event);
     },
     onClick: function onClick(e) {
       return e.stopPropagation();
@@ -1917,7 +1915,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: !isSelectFilter && React.createElement(InputAdornment, {
+      startAdornment: !isSelectFilter && !inputIndex && React.createElement(InputAdornment, {
         position: "start"
       }, React.createElement(Tooltip, {
         arrow: true,
@@ -1956,7 +1954,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     sx: _extends({
       m: '-0.25rem',
       p: 0,
-      minWidth: !filterChipLabel ? '5rem' : 'auto',
+      minWidth: !filterChipLabel ? '6rem' : 'auto',
       width: 'calc(100% + 0.5rem)',
       mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
       '&	.MuiSelect-icon': {
@@ -2051,8 +2049,34 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
   }));
 };
 
+var MRT_FilterRangeFields = function MRT_FilterRangeFields(_ref) {
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var localization = tableInstance.options.localization;
+  return React.createElement(Box, {
+    sx: {
+      display: 'grid',
+      gridTemplateColumns: '6fr auto 5fr'
+    }
+  }, React.createElement(MRT_FilterTextField, {
+    header: header,
+    inputIndex: 0,
+    tableInstance: tableInstance
+  }), React.createElement(Box, {
+    sx: {
+      width: '100%',
+      minWidth: '5ch',
+      textAlign: 'center'
+    }
+  }, localization.to), React.createElement(MRT_FilterTextField, {
+    header: header,
+    inputIndex: 1,
+    tableInstance: tableInstance
+  }));
+};
+
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _getState2, _getState2$currentFil, _column$Header;
+  var _getState2, _getState2$currentFil, _column$columnDef$Hea, _column$columnDef, _column$minSize, _column$columnDef$hea, _column$columnDef$hea2;
 
   var header = _ref.header,
       tableInstance = _ref.tableInstance;
@@ -2069,6 +2093,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       setShowFilters = tableInstance.setShowFilters;
 
   var _getState = getState(),
+      currentFilterFns = _getState.currentFilterFns,
       isDensePadding = _getState.isDensePadding,
       showFilters = _getState.showFilters;
 
@@ -2082,37 +2107,56 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     tableInstance: tableInstance
   }) : column.muiTableHeadCellProps;
 
-  var tableCellProps = _extends({}, header.getHeaderProps(), mTableHeadCellProps, mcTableHeadCellProps);
+  var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps);
 
-  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.header) : localization.sortedByColumnAsc.replace('{column}', column.header) : localization.unsorted;
+  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.sortedByColumnDesc.replace('{column}', column.columnDef.header) : localization.sortedByColumnAsc.replace('{column}', column.columnDef.header) : localization.unsorted;
   var filterFn = (_getState2 = getState()) == null ? void 0 : (_getState2$currentFil = _getState2.currentFilterFns) == null ? void 0 : _getState2$currentFil[header.id];
-  var filterTooltip = !!column.getColumnFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.header)).replace('{filterType}', filterFn instanceof Function ? '' : // @ts-ignore
-  localization["filter" + (filterFn.charAt(0).toUpperCase() + filterFn.slice(1))]).replace('{filterValue}', column.getColumnFilterValue()).replace('" "', '') : localization.showHideFilters;
-  var headerElement = (_column$Header = column == null ? void 0 : column.Header == null ? void 0 : column.Header({
+  var filterTooltip = !!column.getFilterValue() ? localization.filteringByColumn.replace('{column}', String(column.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('" "', '') : localization.showHideFilters;
+  var headerElement = (_column$columnDef$Hea = (_column$columnDef = column.columnDef) == null ? void 0 : _column$columnDef.Header == null ? void 0 : _column$columnDef.Header({
     header: header,
     tableInstance: tableInstance
-  })) != null ? _column$Header : column.header;
+  })) != null ? _column$columnDef$Hea : header.renderHeader();
+
+  var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
+    return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
+  };
+
+  var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
+    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+  };
+
+  var getTotalRight = function getTotalRight() {
+    return (tableInstance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
+  };
+
   return React.createElement(TableCell, Object.assign({
-    align: column.columnDefType === 'group' ? 'center' : 'left'
+    align: column.columnDefType === 'group' ? 'center' : 'left',
+    colSpan: header.colSpan
   }, tableCellProps, {
-    //@ts-ignore
     sx: function sx(theme) {
       return _extends({
-        backgroundColor: theme.palette.background["default"],
-        backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
+        backgroundColor: column.getIsPinned() && column.columnDefType !== 'group' ? alpha(lighten(theme.palette.background["default"], 0.04), 0.95) : 'inherit',
+        backgroundImage: 'inherit',
+        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,
         fontWeight: 'bold',
         height: '100%',
-        maxWidth: "min(" + column.getWidth() + "px, " + column.maxWidth + "px)",
-        minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
+        left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
+        overflow: 'visible',
         p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
-        pt: column.columnDefType === 'display' ? 0 : isDensePadding ? '0.75rem' : '1.25rem',
         pb: column.columnDefType === 'display' ? 0 : undefined,
-        overflow: 'visible',
+        position: column.getIsPinned() && column.columnDefType !== 'group' ? 'sticky' : undefined,
+        pt: column.columnDefType === 'display' ? 0 : isDensePadding ? '0.75rem' : '1.25rem',
+        right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
         transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
         verticalAlign: 'text-top',
-        width: header.getWidth(),
-        zIndex: column.getIsResizing() ? 2 : 1
+        zIndex: column.getIsResizing() ? 3 : column.getIsPinned() && column.columnDefType !== 'group' ? 2 : 1
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
+    },
+    style: {
+      maxWidth: "min(" + column.getSize() + "px, fit-content)",
+      minWidth: "max(" + column.getSize() + "px, " + ((_column$minSize = column.minSize) != null ? _column$minSize : 30) + "px)",
+      width: header.getSize()
     }
   }), header.isPlaceholder ? null : column.columnDefType === 'display' ? headerElement : React.createElement(Box, {
     sx: {
@@ -2130,7 +2174,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       cursor: column.getCanSort() && column.columnDefType !== 'group' ? 'pointer' : undefined,
       display: 'flex',
       flexWrap: 'nowrap',
-      whiteSpace: column.header.length < 24 ? 'nowrap' : 'normal'
+      whiteSpace: ((_column$columnDef$hea = (_column$columnDef$hea2 = column.columnDef.header) == null ? void 0 : _column$columnDef$hea2.length) != null ? _column$columnDef$hea : 0) < 24 ? 'nowrap' : 'normal'
     }
   }, headerElement, column.columnDefType === 'data' && column.getCanSort() && React.createElement(Tooltip, {
     arrow: true,
@@ -2140,7 +2184,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     "aria-label": sortTooltip,
     active: !!column.getIsSorted(),
     direction: column.getIsSorted() ? column.getIsSorted() : undefined
-  })), column.columnDefType === 'data' && enableColumnFilters && !!column.getCanColumnFilter() && React.createElement(Tooltip, {
+  })), column.columnDefType === 'data' && enableColumnFilters && !!column.getCanFilter() && React.createElement(Tooltip, {
     arrow: true,
     placement: "top",
     title: filterTooltip
@@ -2153,7 +2197,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     size: "small",
     sx: {
       m: 0,
-      opacity: !!column.getColumnFilterValue() ? 0.8 : 0,
+      opacity: !!column.getFilterValue() ? 0.8 : 0,
       p: '2px',
       transition: 'all 0.2s ease-in-out',
       '&:hover': {
@@ -2161,14 +2205,14 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         opacity: 0.8
       }
     }
-  }, showFilters && !column.getColumnFilterValue() ? React.createElement(FilterAltOff, null) : React.createElement(FilterAltIcon, null)))), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
+  }, showFilters && !column.getFilterValue() ? React.createElement(FilterAltOff, null) : React.createElement(FilterAltIcon, null)))), (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React.createElement(MRT_ToggleColumnActionMenuButton, {
     header: header,
     tableInstance: tableInstance
-  }), column.getCanResize() && React.createElement(Divider, Object.assign({
+  }), column.getCanResize() && React.createElement(Divider, {
     flexItem: true,
     orientation: "vertical",
     onDoubleClick: function onDoubleClick() {
-      return header.resetSize();
+      return column.resetSize();
     },
     sx: function sx(theme) {
       return {
@@ -2180,7 +2224,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
         position: 'absolute',
         right: '1px',
         touchAction: 'none',
-        transition: 'all 0.2s ease-in-out',
+        transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
         userSelect: 'none',
         zIndex: 2000,
         '&:active': {
@@ -2188,16 +2232,20 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
           opacity: 1
         }
       };
+    },
+    onMouseDown: header.getResizeHandler(),
+    onTouchStart: header.getResizeHandler(),
+    style: {
+      transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : 'none'
     }
-  }, header.getResizerProps(function (props) {
-    return _extends({}, props, {
-      style: {
-        transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : ''
-      }
-    });
-  })))), column.columnDefType === 'data' && column.getCanColumnFilter() && React.createElement(Collapse, {
-    "in": showFilters
-  }, React.createElement(MRT_FilterTextField, {
+  })), column.columnDefType === 'data' && column.getCanFilter() && React.createElement(Collapse, {
+    "in": showFilters,
+    mountOnEnter: true,
+    unmountOnExit: true
+  }, currentFilterFns[column.id] === MRT_FILTER_OPTION.BETWEEN ? React.createElement(MRT_FilterRangeFields, {
+    header: header,
+    tableInstance: tableInstance
+  }) : React.createElement(MRT_FilterTextField, {
     header: header,
     tableInstance: tableInstance
   })));
@@ -2207,17 +2255,15 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   var headerGroup = _ref.headerGroup,
       tableInstance = _ref.tableInstance;
   var muiTableHeadRowProps = tableInstance.options.muiTableHeadRowProps;
-  var mTableHeadRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
+  var tableRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps({
     headerGroup: headerGroup,
     tableInstance: tableInstance
   }) : muiTableHeadRowProps;
-
-  var tableRowProps = _extends({}, headerGroup == null ? void 0 : headerGroup.getHeaderGroupProps(), mTableHeadRowProps);
-
   return React.createElement(TableRow, Object.assign({}, tableRowProps, {
     sx: function sx(theme) {
       return _extends({
-        boxShadow: "4px 0 8px " + alpha(theme.palette.common.black, 0.1)
+        boxShadow: "4px 0 8px " + alpha(theme.palette.common.black, 0.1),
+        backgroundColor: lighten(theme.palette.background["default"], 0.04)
       }, tableRowProps == null ? void 0 : tableRowProps.sx);
     }
   }), headerGroup.headers.map(function (header, index) {
@@ -2230,26 +2276,16 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 };
 
 var MRT_TableHead = function MRT_TableHead(_ref) {
-  var pinned = _ref.pinned,
-      tableInstance = _ref.tableInstance;
-  var getCenterHeaderGroups = tableInstance.getCenterHeaderGroups,
-      getHeaderGroups = tableInstance.getHeaderGroups,
-      getLeftHeaderGroups = tableInstance.getLeftHeaderGroups,
-      getRightHeaderGroups = tableInstance.getRightHeaderGroups,
+  var tableInstance = _ref.tableInstance;
+  var getHeaderGroups = tableInstance.getHeaderGroups,
       muiTableHeadProps = tableInstance.options.muiTableHeadProps;
   var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps({
     tableInstance: tableInstance
   }) : muiTableHeadProps;
-  var getHeaderGroupsMap = {
-    center: getCenterHeaderGroups,
-    left: getLeftHeaderGroups,
-    none: getHeaderGroups,
-    right: getRightHeaderGroups
-  };
-  return React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroupsMap[pinned]().map(function (headerGroup) {
+  return React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map(function (headerGroup) {
     return React.createElement(MRT_TableHeadRow, {
       headerGroup: headerGroup,
-      key: headerGroup.getHeaderGroupProps().key,
+      key: headerGroup.id,
       tableInstance: tableInstance
     });
   }));
@@ -2268,7 +2304,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
       setCurrentEditingCell = tableInstance.setCurrentEditingCell,
       setCurrentEditingRow = tableInstance.setCurrentEditingRow;
 
-  var _useState = useState(cell.value),
+  var _useState = useState(cell.getValue()),
       value = _useState[0],
       setValue = _useState[1];
 
@@ -2291,7 +2327,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
 
   var handleBlur = function handleBlur(event) {
     if (getState().currentEditingRow) {
-      row.values[column.id] = value;
+      row._valuesCache[column.id] = value;
       setCurrentEditingRow(_extends({}, getState().currentEditingRow));
     }
 
@@ -2334,7 +2370,7 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    placeholder: column.header,
+    placeholder: column.columnDef.header,
     value: value,
     variant: "standard"
   }, textFieldProps));
@@ -2380,9 +2416,11 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
   }, React.createElement(Button, Object.assign({
     "aria-label": localization.clickToCopy,
     onClick: function onClick() {
-      return handleCopy(cell.value);
+      return handleCopy(cell.getValue());
     },
-    size: "small"
+    size: "small",
+    type: "button",
+    variant: "text"
   }, buttonProps, {
     sx: _extends({
       backgroundColor: 'transparent',
@@ -2396,25 +2434,22 @@ var MRT_CopyButton = function MRT_CopyButton(_ref) {
       minWidth: 'unset',
       textAlign: 'inherit',
       textTransform: 'inherit'
-    }, buttonProps == null ? void 0 : buttonProps.sx),
-    variant: "text"
+    }, buttonProps == null ? void 0 : buttonProps.sx)
   }), children));
 };
 
 var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var _cell$column$Cell, _cell$column, _row$subRows, _cell$column$Cell2, _cell$column2, _row$subRows2;
+  var _column$minSize, _cell$column$columnDe, _cell$column$columnDe2, _row$subRows, _cell$column$columnDe3, _cell$column$columnDe4, _row$subRows$length, _row$subRows2;
 
   var cell = _ref.cell,
+      enableHover = _ref.enableHover,
       tableInstance = _ref.tableInstance;
-  var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
-      getState = tableInstance.getState,
+  var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
       editingMode = _tableInstance$option.editingMode,
       enableClickToCopy = _tableInstance$option.enableClickToCopy,
       enableEditing = _tableInstance$option.enableEditing,
-      enablePinning = _tableInstance$option.enablePinning,
       idPrefix = _tableInstance$option.idPrefix,
-      isLoading = _tableInstance$option.isLoading,
       muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
       muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
       onCellClick = _tableInstance$option.onCellClick,
@@ -2423,7 +2458,9 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var _getState = getState(),
       currentEditingCell = _getState.currentEditingCell,
       currentEditingRow = _getState.currentEditingRow,
-      isDensePadding = _getState.isDensePadding;
+      isDensePadding = _getState.isDensePadding,
+      isLoading = _getState.isLoading,
+      showSkeletons = _getState.showSkeletons;
 
   var column = cell.column,
       row = cell.row;
@@ -2436,11 +2473,11 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     tableInstance: tableInstance
   }) : column.muiTableBodyCellProps;
 
-  var tableCellProps = _extends({}, cell.getCellProps(), mTableCellBodyProps, mcTableCellBodyProps);
+  var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps);
 
   var skeletonWidth = useMemo(function () {
-    return column.columnDefType === 'display' ? column.getWidth() / 2 : Math.random() * (column.getWidth() - column.getWidth() / 3) + column.getWidth() / 3;
-  }, [column.columnDefType, column.getWidth()]);
+    return column.columnDefType === 'display' ? column.getSize() / 2 : Math.random() * (column.getSize() - column.getSize() / 3) + column.getSize() / 3;
+  }, [column.columnDefType, column.getSize()]);
   var isEditable = (enableEditing || column.enableEditing) && column.enableEditing !== false;
   var isEditing = isEditable && (editingMode === 'table' || (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id || (currentEditingCell == null ? void 0 : currentEditingCell.id) === cell.id);
 
@@ -2458,6 +2495,18 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     }
   };
 
+  var getIsLastLeftPinnedColumn = function getIsLastLeftPinnedColumn() {
+    return column.getIsPinned() === 'left' && tableInstance.getLeftLeafHeaders().length - 1 === column.getPinnedIndex();
+  };
+
+  var getIsFirstRightPinnedColumn = function getIsFirstRightPinnedColumn() {
+    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+  };
+
+  var getTotalRight = function getTotalRight() {
+    return (tableInstance.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150;
+  };
+
   return React.createElement(TableCell, Object.assign({
     onClick: function onClick(event) {
       return onCellClick == null ? void 0 : onCellClick({
@@ -2468,21 +2517,34 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
     },
     onDoubleClick: handleDoubleClick
   }, tableCellProps, {
-    sx: _extends({
-      cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text',
-      maxWidth: "min(" + column.getWidth() + "px, fit-content)",
-      minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
-      p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
-      pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
-      transition: 'all 0.2s ease-in-out',
-      whiteSpace: isDensePadding || enablePinning && getIsSomeColumnsPinned() ? 'nowrap' : 'normal',
-      width: column.getWidth()
-    }, tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), isLoading ? React.createElement(Skeleton, Object.assign({
+    sx: function sx(theme) {
+      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' ? 'pointer' : 'text',
+        left: column.getIsPinned() === 'left' ? column.getStart('left') + "px" : undefined,
+        p: isDensePadding ? column.columnDefType === 'display' ? '0 0.5rem' : '0.5rem' : column.columnDefType === 'display' ? '0.5rem 0.75rem' : '1rem',
+        pl: column.id === 'mrt-expand' ? row.depth + (isDensePadding ? 0.5 : 0.75) + "rem" : undefined,
+        position: column.getIsPinned() ? 'sticky' : 'relative',
+        right: column.getIsPinned() === 'right' ? getTotalRight() + "px" : undefined,
+        transition: 'all 0.2s ease-in-out',
+        whiteSpace: isDensePadding ? 'nowrap' : 'normal',
+        zIndex: column.getIsPinned() ? 1 : undefined,
+        '&:hover': {
+          backgroundColor: enableHover ? theme.palette.mode === 'dark' ? lighten(theme.palette.background["default"], 0.13) + " !important" : darken(theme.palette.background["default"], 0.07) + " !important" : undefined
+        }
+      }, tableCellProps == null ? void 0 : tableCellProps.sx);
+    },
+    style: {
+      maxWidth: "min(" + column.getSize() + "px, fit-content)",
+      minWidth: "max(" + column.getSize() + "px, " + ((_column$minSize = column.minSize) != null ? _column$minSize : 30) + "px)",
+      width: column.getSize()
+    }
+  }), React.createElement(React.Fragment, null, isLoading || showSkeletons ? React.createElement(Skeleton, Object.assign({
     animation: "wave",
     height: 20,
     width: skeletonWidth
-  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.Cell == null ? void 0 : column.Cell({
+  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.columnDef.Cell == null ? void 0 : column.columnDef.Cell({
     cell: cell,
     tableInstance: tableInstance
   }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : isEditing ? React.createElement(MRT_EditCellTextField, {
@@ -2491,13 +2553,13 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React.createElement(React.Fragment, null, React.createElement(MRT_CopyButton, {
     cell: cell,
     tableInstance: tableInstance
-  }, (_cell$column$Cell = (_cell$column = cell.column) == null ? void 0 : _cell$column.Cell == null ? void 0 : _cell$column.Cell({
+  }, React.createElement(React.Fragment, null, (_cell$column$columnDe = (_cell$column$columnDe2 = cell.column.columnDef) == null ? void 0 : _cell$column$columnDe2.Cell == null ? void 0 : _cell$column$columnDe2.Cell({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$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, (_cell$column$Cell2 = (_cell$column2 = cell.column) == null ? void 0 : _cell$column2.Cell == null ? void 0 : _cell$column2.Cell({
+  })) != null ? _cell$column$columnDe : cell.renderCell())), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React.createElement(React.Fragment, null, (_cell$column$columnDe3 = (_cell$column$columnDe4 = cell.column.columnDef) == null ? void 0 : _cell$column$columnDe4.Cell == null ? void 0 : _cell$column$columnDe4.Cell({
     cell: cell,
     tableInstance: tableInstance
-  })) != null ? _cell$column$Cell2 : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length, ")")));
+  })) != null ? _cell$column$columnDe3 : cell.renderCell(), row.getIsGrouped() && React.createElement(React.Fragment, null, " (", (_row$subRows$length = (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length) != null ? _row$subRows$length : '', ")"))));
 };
 
 var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
@@ -2542,33 +2604,16 @@ var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
 };
 
 var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
-  var pinned = _ref.pinned,
-      row = _ref.row,
+  var row = _ref.row,
       tableInstance = _ref.tableInstance;
   var _tableInstance$option = tableInstance.options,
       muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
       onRowClick = _tableInstance$option.onRowClick,
       renderDetailPanel = _tableInstance$option.renderDetailPanel;
-  var getCenterVisibleCells = row.getCenterVisibleCells,
-      getIsGrouped = row.getIsGrouped,
-      getIsSelected = row.getIsSelected,
-      getLeftVisibleCells = row.getLeftVisibleCells,
-      getRightVisibleCells = row.getRightVisibleCells,
-      getRowProps = row.getRowProps,
-      getVisibleCells = row.getVisibleCells;
-  var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
+  var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps({
     row: row,
     tableInstance: tableInstance
   }) : muiTableBodyRowProps;
-
-  var tableRowProps = _extends({}, getRowProps(), mTableBodyRowProps);
-
-  var getVisibleCellsMap = {
-    center: getCenterVisibleCells,
-    left: getLeftVisibleCells,
-    none: getVisibleCells,
-    right: getRightVisibleCells
-  };
   return React.createElement(React.Fragment, null, React.createElement(TableRow, Object.assign({
     hover: true,
     onClick: function onClick(event) {
@@ -2578,39 +2623,44 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
         tableInstance: tableInstance
       });
     },
-    selected: getIsSelected()
-  }, tableRowProps), getVisibleCellsMap[pinned]().map(function (cell) {
+    selected: row.getIsSelected()
+  }, tableRowProps, {
+    sx: function sx(theme) {
+      return _extends({
+        backgroundColor: lighten(theme.palette.background["default"], 0.06),
+        transition: 'all 0.2s ease-in-out',
+        '&:hover td': {
+          backgroundColor: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false ? theme.palette.mode === 'dark' ? "" + lighten(theme.palette.background["default"], 0.12) : "" + darken(theme.palette.background["default"], 0.05) : undefined
+        }
+      }, tableRowProps == null ? void 0 : tableRowProps.sx);
+    }
+  }), row.getVisibleCells().map(function (cell) {
     return React.createElement(MRT_TableBodyCell, {
       cell: cell,
-      key: cell.getCellProps().key,
+      key: cell.id,
+      enableHover: (tableRowProps == null ? void 0 : tableRowProps.hover) !== false,
       tableInstance: tableInstance
     });
-  })), renderDetailPanel && !getIsGrouped() && React.createElement(MRT_TableDetailPanel, {
+  })), renderDetailPanel && !row.getIsGrouped() && React.createElement(MRT_TableDetailPanel, {
     row: row,
     tableInstance: tableInstance
   }));
 };
 
 var MRT_TableBody = function MRT_TableBody(_ref) {
-  var pinned = _ref.pinned,
-      tableInstance = _ref.tableInstance;
+  var tableInstance = _ref.tableInstance;
   var getPaginationRowModel = tableInstance.getPaginationRowModel,
       getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
-      getTableBodyProps = tableInstance.getTableBodyProps,
       _tableInstance$option = tableInstance.options,
       enablePagination = _tableInstance$option.enablePagination,
       muiTableBodyProps = _tableInstance$option.muiTableBodyProps;
   var rows = enablePagination ? getPaginationRowModel().rows : getPrePaginationRowModel().rows;
-  var mTableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
+  var tableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps({
     tableInstance: tableInstance
   }) : muiTableBodyProps;
-
-  var tableBodyProps = _extends({}, getTableBodyProps(), mTableBodyProps);
-
   return React.createElement(TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
     return React.createElement(MRT_TableBodyRow, {
-      key: row.getRowProps().key,
-      pinned: pinned,
+      key: row.id,
       row: row,
       tableInstance: tableInstance
     });
@@ -2618,7 +2668,7 @@ var MRT_TableBody = function MRT_TableBody(_ref) {
 };
 
 var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _ref2, _column$Footer;
+  var _ref2, _ref3, _column$columnDef$Foo;
 
   var footer = _ref.footer,
       tableInstance = _ref.tableInstance;
@@ -2640,30 +2690,30 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
     tableInstance: tableInstance
   }) : column.muiTableFooterCellProps;
 
-  var tableCellProps = _extends({}, footer.getFooterProps(), mTableFooterCellProps, mcTableFooterCellProps);
+  var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps);
 
   return React.createElement(TableCell, Object.assign({
     align: column.columnDefType === 'group' ? 'center' : 'left',
+    colSpan: footer.colSpan,
     variant: "head"
   }, tableCellProps, {
-    //@ts-ignore
     sx: function sx(theme) {
       return _extends({
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
         fontWeight: 'bold',
-        maxWidth: "min(" + column.getWidth() + "px, " + column.maxWidth + "px)",
-        minWidth: "max(" + column.getWidth() + "px, " + column.minWidth + "px)",
+        maxWidth: column.getSize() + "px",
+        minWidth: column.getSize() + "px",
         p: isDensePadding ? '0.5rem' : '1rem',
         transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
-        width: column.getWidth(),
+        width: column.getSize(),
         verticalAlign: 'text-top'
       }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }), footer.isPlaceholder ? null : (_ref2 = (_column$Footer = column.Footer == null ? void 0 : column.Footer({
+  }), React.createElement(React.Fragment, null, footer.isPlaceholder ? null : (_ref2 = (_ref3 = (_column$columnDef$Foo = column.columnDef.Footer == null ? void 0 : column.columnDef.Footer({
     footer: footer,
     tableInstance: tableInstance
-  })) != null ? _column$Footer : column.footer) != null ? _ref2 : null);
+  })) != null ? _column$columnDef$Foo : column.columnDef.footer) != null ? _ref3 : footer.renderFooter()) != null ? _ref2 : null));
 };
 
 var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
@@ -2674,99 +2724,63 @@ var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
   var muiTableFooterRowProps = tableInstance.options.muiTableFooterRowProps; // if no content in row, skip row
 
   if (!((_footerGroup$headers = footerGroup.headers) != null && _footerGroup$headers.some(function (h) {
-    return h.column.columnDef.footer || h.column.Footer;
+    return typeof h.column.columnDef.footer === 'string' && !!h.column.columnDef.footer || h.column.columnDef.Footer;
   }))) return null;
-  var mTableFooterRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps({
+  var tableRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps({
     footerGroup: footerGroup,
     tableInstance: tableInstance
   }) : muiTableFooterRowProps;
-
-  var tableRowProps = _extends({}, footerGroup.getFooterGroupProps(), mTableFooterRowProps);
-
   return React.createElement(TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map(function (footer) {
     return React.createElement(MRT_TableFooterCell, {
       footer: footer,
-      key: footer.getFooterProps().key,
+      key: footer.id,
       tableInstance: tableInstance
     });
   }));
 };
 
 var MRT_TableFooter = function MRT_TableFooter(_ref) {
-  var pinned = _ref.pinned,
-      tableInstance = _ref.tableInstance;
-  var getCenterFooterGroups = tableInstance.getCenterFooterGroups,
-      getFooterGroups = tableInstance.getFooterGroups,
-      getLeftFooterGroups = tableInstance.getLeftFooterGroups,
-      getRightFooterGroups = tableInstance.getRightFooterGroups,
+  var tableInstance = _ref.tableInstance;
+  var getFooterGroups = tableInstance.getFooterGroups,
       muiTableFooterProps = tableInstance.options.muiTableFooterProps;
   var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps({
     tableInstance: tableInstance
   }) : muiTableFooterProps;
-  var getFooterGroupsMap = {
-    center: getCenterFooterGroups,
-    left: getLeftFooterGroups,
-    none: getFooterGroups,
-    right: getRightFooterGroups
-  };
-  return React.createElement(TableFooter, Object.assign({}, tableFooterProps), getFooterGroupsMap[pinned]().map(function (footerGroup) {
+  return React.createElement(TableFooter, Object.assign({}, tableFooterProps), getFooterGroups().map(function (footerGroup) {
     return React.createElement(MRT_TableFooterRow, {
       footerGroup: footerGroup,
-      key: footerGroup.getFooterGroupProps().key,
+      key: footerGroup.id,
       tableInstance: tableInstance
     });
   }));
 };
 
 var MRT_Table = function MRT_Table(_ref) {
-  var pinned = _ref.pinned,
-      tableInstance = _ref.tableInstance;
-  var getTableProps = tableInstance.getTableProps,
-      _tableInstance$option = tableInstance.options,
+  var tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
       enableTableFooter = _tableInstance$option.enableTableFooter,
       enableTableHead = _tableInstance$option.enableTableHead,
       muiTableProps = _tableInstance$option.muiTableProps;
-  var mTableProps = muiTableProps instanceof Function ? muiTableProps({
+  var tableProps = muiTableProps instanceof Function ? muiTableProps({
     tableInstance: tableInstance
   }) : muiTableProps;
-
-  var tableProps = _extends({}, getTableProps(), mTableProps);
-
   return React.createElement(Table, Object.assign({
     stickyHeader: enableStickyHeader
   }, tableProps), enableTableHead && React.createElement(MRT_TableHead, {
-    pinned: pinned,
     tableInstance: tableInstance
   }), React.createElement(MRT_TableBody, {
-    pinned: pinned,
     tableInstance: tableInstance
   }), enableTableFooter && React.createElement(MRT_TableFooter, {
-    pinned: pinned,
     tableInstance: tableInstance
   }));
 };
 
-var commonBoxStyles = function commonBoxStyles(_ref) {
-  var pinned = _ref.pinned,
-      theme = _ref.theme,
-      visible = _ref.visible;
-  return {
-    display: 'grid',
-    minWidth: visible ? '200px' : 0,
-    overflowX: pinned ? 'scroll' : 'auto',
-    boxShadow: pinned === 'left' ? "0 1px 12px " + alpha(theme.palette.common.black, 0.5) : pinned === 'right' ? "0 -1px 12px " + alpha(theme.palette.common.black, 0.5) : 'none'
-  };
-};
-
-var MRT_TableContainer = function MRT_TableContainer(_ref2) {
-  var tableInstance = _ref2.tableInstance;
-  var getCenterTableWidth = tableInstance.getCenterTableWidth,
-      getLeftTableWidth = tableInstance.getLeftTableWidth,
-      getRightTableWidth = tableInstance.getRightTableWidth,
-      getState = tableInstance.getState,
+var useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+var MRT_TableContainer = function MRT_TableContainer(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
       _tableInstance$option = tableInstance.options,
-      enablePinning = _tableInstance$option.enablePinning,
       enableStickyHeader = _tableInstance$option.enableStickyHeader,
       idPrefix = _tableInstance$option.idPrefix,
       muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
@@ -2781,15 +2795,13 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
   var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps({
     tableInstance: tableInstance
   }) : muiTableContainerProps;
-  useEffect(function () {
+  useIsomorphicLayoutEffect(function () {
     var _document$getElementB, _document, _document$getElementB2, _document$getElementB3, _document2, _document2$getElement;
 
     var topToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB = (_document = document) == null ? void 0 : (_document$getElementB2 = _document.getElementById("mrt-" + idPrefix + "-toolbar-top")) == null ? void 0 : _document$getElementB2.offsetHeight) != null ? _document$getElementB : 0 : 0;
     var bottomToolbarHeight = typeof document !== 'undefined' ? (_document$getElementB3 = (_document2 = document) == null ? void 0 : (_document2$getElement = _document2.getElementById("mrt-" + idPrefix + "-toolbar-bottom")) == null ? void 0 : _document2$getElement.offsetHeight) != null ? _document$getElementB3 : 0 : 0;
     setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
   });
-  var isSomeColumnsPinnedLeft = !!tableInstance.getLeftFlatHeaders().length;
-  var isSomeColumnsPinnedRight = !!tableInstance.getRightFlatHeaders().length;
   return React.createElement(TableContainer, Object.assign({}, tableContainerProps, {
     sx: _extends({
       maxWidth: '100%',
@@ -2799,45 +2811,7 @@ var MRT_TableContainer = function MRT_TableContainer(_ref2) {
     style: {
       maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
-  }), enablePinning && isSomeColumnsPinnedLeft || isSomeColumnsPinnedRight ? React.createElement(Box, {
-    sx: {
-      display: 'grid',
-      gridTemplateColumns: getLeftTableWidth() + "fr " + getCenterTableWidth() + "fr " + getRightTableWidth() + "fr"
-    }
-  }, React.createElement(Box, {
-    sx: function sx(theme) {
-      return commonBoxStyles({
-        pinned: 'left',
-        theme: theme,
-        visible: isSomeColumnsPinnedLeft
-      });
-    }
-  }, React.createElement(MRT_Table, {
-    pinned: "left",
-    tableInstance: tableInstance
-  })), React.createElement(Box, {
-    sx: function sx(theme) {
-      return commonBoxStyles({
-        theme: theme,
-        visible: !!tableInstance.getCenterFlatHeaders().length
-      });
-    }
-  }, React.createElement(MRT_Table, {
-    pinned: "center",
-    tableInstance: tableInstance
-  })), React.createElement(Box, {
-    sx: function sx(theme) {
-      return commonBoxStyles({
-        pinned: 'right',
-        theme: theme,
-        visible: isSomeColumnsPinnedRight
-      });
-    }
-  }, React.createElement(MRT_Table, {
-    pinned: "right",
-    tableInstance: tableInstance
-  }))) : React.createElement(MRT_Table, {
-    pinned: "none",
+  }), React.createElement(MRT_Table, {
     tableInstance: tableInstance
   }));
 };
@@ -2939,7 +2913,7 @@ var createDisplayColumn = function createDisplayColumn(table, column) {
 };
 
 var MRT_TableRoot = function MRT_TableRoot(props) {
-  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _initialState$paginat4, _initialState$paginat5, _initialState$paginat6, _props$globalFilterFn;
+  var _initialState$current, _initialState$current2, _initialState$isDense, _initialState$isFullS, _initialState$showFil, _initialState$showGlo, _initialState$paginat, _initialState$paginat2, _initialState$paginat3, _initialState$paginat4, _initialState$paginat5, _props$globalFilterFn, _props$state3, _props$state4;
 
   var _useState = useState(props.idPrefix),
       idPrefix = _useState[0],
@@ -3003,7 +2977,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   var _useState8 = useState({
     pageIndex: (_initialState$paginat = initialState == null ? void 0 : (_initialState$paginat2 = initialState.pagination) == null ? void 0 : _initialState$paginat2.pageIndex) != null ? _initialState$paginat : 0,
     pageSize: (_initialState$paginat3 = initialState == null ? void 0 : (_initialState$paginat4 = initialState.pagination) == null ? void 0 : _initialState$paginat4.pageSize) != null ? _initialState$paginat3 : 10,
-    pageCount: (_initialState$paginat5 = initialState == null ? void 0 : (_initialState$paginat6 = initialState.pagination) == null ? void 0 : _initialState$paginat6.pageCount) != null ? _initialState$paginat5 : -1
+    pageCount: initialState == null ? void 0 : (_initialState$paginat5 = initialState.pagination) == null ? void 0 : _initialState$paginat5.pageCount
   }),
       pagination = _useState8[0],
       setPagination = _useState8[1];
@@ -3012,13 +2986,13 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
     return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
       var _ref, _c$filterFn, _initialState$current3, _c$filterSelectOption, _ref2;
 
-      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_OPTION.EQUALS : MRT_FILTER_OPTION.BEST_MATCH, _ref2;
+      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filterFn = c.filterFn) != null ? _c$filterFn : initialState == null ? void 0 : (_initialState$current3 = initialState.currentFilterFns) == null ? void 0 : _initialState$current3[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_OPTION.EQUALS : MRT_FILTER_OPTION.FUZZY, _ref2;
     })));
   }),
       currentFilterFns = _useState9[0],
       setCurrentFilterFns = _useState9[1];
 
-  var _useState10 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : MRT_FILTER_OPTION.BEST_MATCH_FIRST),
+  var _useState10 = useState((_props$globalFilterFn = props.globalFilterFn) != null ? _props$globalFilterFn : MRT_FILTER_OPTION.FUZZY),
       currentGlobalFilterFn = _useState10[0],
       setCurrentGlobalFilterFn = _useState10[1];
 
@@ -3038,9 +3012,8 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization = props.localization) == null ? void 0 : _props$localization.actions,
       id: 'mrt-row-actions',
-      maxWidth: 60,
-      width: 60
-    }), (props.enableExpanded || props.enableGrouping) && createDisplayColumn(table, {
+      size: 60
+    }), (props.enableExpanding || props.enableGrouping) && createDisplayColumn(table, {
       Cell: function Cell(_ref4) {
         var cell = _ref4.cell;
         return React.createElement(MRT_ExpandButton, {
@@ -3055,8 +3028,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.expand,
       id: 'mrt-expand',
-      maxWidth: 40,
-      width: 40
+      size: 50
     }), props.enableRowSelection && createDisplayColumn(table, {
       Cell: function Cell(_ref5) {
         var cell = _ref5.cell;
@@ -3073,8 +3045,7 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.select,
       id: 'mrt-select',
-      maxWidth: 40,
-      width: 40
+      size: 50
     }), props.enableRowNumbers && createDisplayColumn(table, {
       Cell: function Cell(_ref6) {
         var cell = _ref6.cell;
@@ -3087,39 +3058,39 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       },
       header: (_props$localization5 = props.localization) == null ? void 0 : _props$localization5.rowNumbers,
       id: 'mrt-row-numbers',
-      maxWidth: 40,
-      width: 40,
-      minWidth: 40
+      size: 50
     })].filter(Boolean);
-  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanded, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
+  }, [props.editingMode, props.enableEditing, props.enableExpandAll, props.enableExpanding, props.enableGrouping, props.enableRowActions, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization, table]);
   var columns = useMemo(function () {
-    return table.createColumns([].concat(displayColumns, props.columns.map(function (column) {
+    return [].concat(displayColumns, props.columns.map(function (column) {
       return column.columns ? createGroup(table, column, currentFilterFns) : createDataColumn(table, column, currentFilterFns);
-    })));
+    }));
   }, [table, props.columns, currentFilterFns]);
   var data = useMemo(function () {
-    return props.isLoading && !props.data.length ? [].concat(Array(10).fill(null)).map(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 _ref7 = {}, _ref7[c.id] = null, _ref7;
       })));
     }) : props.data;
-  }, [props.data, props.isLoading]); //@ts-ignore
+  }, [props.data, (_props$state3 = props.state) == null ? void 0 : _props$state3.isLoading, (_props$state4 = props.state) == null ? void 0 : _props$state4.showSkeletons]); //@ts-ignore
 
   var tableInstance = _extends({}, useTableInstance(table, _extends({
-    //@ts-ignore
     filterFns: defaultFilterFNs,
-    getColumnFilteredRowModel: getColumnFilteredRowModelSync(),
-    getCoreRowModel: getCoreRowModelSync(),
+    getCoreRowModel: getCoreRowModel(),
     getExpandedRowModel: getExpandedRowModel(),
-    getGlobalFilteredRowModel: getGlobalFilteredRowModelSync(),
-    getGroupedRowModel: getGroupedRowModelSync(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getGroupedRowModel: getGroupedRowModel(),
     getPaginationRowModel: getPaginationRowModel(),
-    getSortedRowModel: getSortedRowModelSync(),
-    getSubRows: function getSubRows(originalRow) {
-      return originalRow.subRows;
+    getSortedRowModel: getSortedRowModel(),
+    getSubRows: function getSubRows(row) {
+      return row == null ? void 0 : row.subRows;
     },
+    //@ts-ignore
     globalFilterFn: currentGlobalFilterFn,
     onPaginationChange: function onPaginationChange(updater) {
       return setPagination(function (old) {
@@ -3127,10 +3098,10 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       });
     }
   }, props, {
+    //@ts-ignore
     columns: columns,
     data: data,
     idPrefix: idPrefix,
-    //@ts-ignore
     initialState: initialState,
     state: _extends({
       currentEditingCell: currentEditingCell,
@@ -3145,12 +3116,9 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
       showGlobalFilter: showGlobalFilter
     }, props.state)
   })), {
-    //@ts-ignore
     setCurrentEditingCell: setCurrentEditingCell,
-    //@ts-ignore
     setCurrentEditingRow: setCurrentEditingRow,
     setCurrentFilterFns: setCurrentFilterFns,
-    //@ts-ignore
     setCurrentGlobalFilterFn: setCurrentGlobalFilterFn,
     setIsDensePadding: setIsDensePadding,
     setIsFullScreen: setIsFullScreen,
@@ -3198,14 +3166,18 @@ var MRT_TableRoot = function MRT_TableRoot(props) {
   }));
 };
 
-var _excluded$5 = ["autoResetExpanded", "autoResetSorting", "columnResizeMode", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableColumnActions", "enableColumnFilters", "enableColumnResizing", "enableDensePaddingToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enableMultiRowSelection", "enablePagination", "enablePinning", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarBottom", "enableToolbarInternalActions", "enableToolbarTop", "icons", "localization", "persistentStateMode", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
   var _ref$autoResetExpande = _ref.autoResetExpanded,
       autoResetExpanded = _ref$autoResetExpande === void 0 ? false : _ref$autoResetExpande,
-      _ref$autoResetSorting = _ref.autoResetSorting,
-      autoResetSorting = _ref$autoResetSorting === void 0 ? false : _ref$autoResetSorting,
       _ref$columnResizeMode = _ref.columnResizeMode,
       columnResizeMode = _ref$columnResizeMode === void 0 ? 'onEnd' : _ref$columnResizeMode,
+      _ref$defaultColumn = _ref.defaultColumn,
+      defaultColumn = _ref$defaultColumn === void 0 ? {
+    minSize: 50,
+    maxSize: 1000,
+    size: 150
+  } : _ref$defaultColumn,
       _ref$editingMode = _ref.editingMode,
       editingMode = _ref$editingMode === void 0 ? 'row' : _ref$editingMode,
       _ref$enableColumnActi = _ref.enableColumnActions,
@@ -3230,6 +3202,8 @@ var MaterialReactTable = (function (_ref) {
       enableMultiRowSelection = _ref$enableMultiRowSe === void 0 ? true : _ref$enableMultiRowSe,
       _ref$enablePagination = _ref.enablePagination,
       enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
+      _ref$enablePinning = _ref.enablePinning,
+      enablePinning = _ref$enablePinning === void 0 ? false : _ref$enablePinning,
       _ref$enableSelectAll = _ref.enableSelectAll,
       enableSelectAll = _ref$enableSelectAll === void 0 ? true : _ref$enableSelectAll,
       _ref$enableSorting = _ref.enableSorting,
@@ -3262,12 +3236,12 @@ var MaterialReactTable = (function (_ref) {
 
   return React.createElement(MRT_TableRoot, Object.assign({
     autoResetExpanded: autoResetExpanded,
-    autoResetSorting: autoResetSorting,
     columnResizeMode: columnResizeMode,
+    defaultColumn: defaultColumn,
     editingMode: editingMode,
     enableColumnActions: enableColumnActions,
-    enableColumnResizing: enableColumnResizing,
     enableColumnFilters: enableColumnFilters,
+    enableColumnResizing: enableColumnResizing,
     enableDensePaddingToggle: enableDensePaddingToggle,
     enableExpandAll: enableExpandAll,
     enableFilters: enableFilters,
@@ -3276,6 +3250,7 @@ var MaterialReactTable = (function (_ref) {
     enableHiding: enableHiding,
     enableMultiRowSelection: enableMultiRowSelection,
     enablePagination: enablePagination,
+    enablePinning: enablePinning,
     enableSelectAll: enableSelectAll,
     enableSorting: enableSorting,
     enableStickyHeader: enableStickyHeader,