material-react-table 0.6.10 → 0.7.0-alpha.1

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

@@ -6,15 +6,11 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 
 var React = require('react');
 var React__default = _interopDefault(React);
-var reactTable = require('react-table');
-var material = require('@mui/material');
-var matchSorter = require('match-sorter');
 var ArrowRightIcon = _interopDefault(require('@mui/icons-material/ArrowRight'));
 var CancelIcon = _interopDefault(require('@mui/icons-material/Cancel'));
 var CheckBoxIcon = _interopDefault(require('@mui/icons-material/CheckBox'));
 var ClearAllIcon = _interopDefault(require('@mui/icons-material/ClearAll'));
 var CloseIcon = _interopDefault(require('@mui/icons-material/Close'));
-var ContentCopyIcon = _interopDefault(require('@mui/icons-material/ContentCopy'));
 var DensityMediumIcon = _interopDefault(require('@mui/icons-material/DensityMedium'));
 var DensitySmallIcon = _interopDefault(require('@mui/icons-material/DensitySmall'));
 var DoubleArrowDownIcon = _interopDefault(require('@mui/icons-material/KeyboardDoubleArrowDown'));
@@ -30,12 +26,16 @@ var FullscreenExitIcon = _interopDefault(require('@mui/icons-material/Fullscreen
 var FullscreenIcon = _interopDefault(require('@mui/icons-material/Fullscreen'));
 var MoreHorizIcon = _interopDefault(require('@mui/icons-material/MoreHoriz'));
 var MoreVertIcon = _interopDefault(require('@mui/icons-material/MoreVert'));
+var PushPinIcon = _interopDefault(require('@mui/icons-material/PushPin'));
 var SaveIcon = _interopDefault(require('@mui/icons-material/Save'));
 var SearchIcon = _interopDefault(require('@mui/icons-material/Search'));
 var SearchOffIcon = _interopDefault(require('@mui/icons-material/SearchOff'));
 var SortIcon = _interopDefault(require('@mui/icons-material/Sort'));
 var ViewColumnIcon = _interopDefault(require('@mui/icons-material/ViewColumn'));
 var VisibilityOffIcon = _interopDefault(require('@mui/icons-material/VisibilityOff'));
+var reactTable = require('@tanstack/react-table');
+var material = require('@mui/material');
+var matchSorter = require('match-sorter');
 
 function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -106,6 +106,160 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var MRT_DefaultLocalization_EN = {
+  actions: 'Actions',
+  cancel: 'Cancel',
+  changeFilterMode: 'Change filter mode',
+  changeSearchMode: 'Change search mode',
+  clearFilter: 'Clear filter',
+  clearSearch: 'Clear search',
+  clearSort: 'Clear sort',
+  clickToCopy: 'Click to copy',
+  columnActions: 'Column Actions',
+  copiedToClipboard: 'Copied to clipboard',
+  edit: 'Edit',
+  expand: 'Expand',
+  expandAll: 'Expand all',
+  filterBestMatch: 'Best Match',
+  filterBestMatchFirst: 'Best Match First',
+  filterByColumn: 'Filter by {column}',
+  filterContains: 'Contains',
+  filterEmpty: 'Empty',
+  filterEndsWith: 'Ends With',
+  filterEquals: 'Equals',
+  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}"',
+  groupByColumn: 'Group by {column}',
+  groupedBy: 'Grouped by ',
+  hideAll: 'Hide all',
+  hideColumn: 'Hide {column} column',
+  pinToLeft: 'Pin to left',
+  pinToRight: 'Pin to right',
+  rowActions: 'Row Actions',
+  rowNumbers: 'Row Numbers',
+  save: 'Save',
+  search: 'Search',
+  selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
+  select: 'Select',
+  showAll: 'Show all',
+  showAllColumns: 'Show all columns',
+  showHideColumns: 'Show/Hide columns',
+  showHideFilters: 'Show/Hide filters',
+  showHideSearch: 'Show/Hide search',
+  sortByColumnAsc: 'Sort by {column} ascending',
+  sortByColumnDesc: 'Sort by {column} descending',
+  thenBy: ', then by ',
+  toggleDensePadding: 'Toggle dense padding',
+  toggleFullScreen: 'Toggle full screen',
+  toggleSelectAll: 'Toggle select all',
+  toggleSelectRow: 'Toggle select row',
+  ungroupByColumn: 'Ungroup by {column}',
+  unpin: 'Unpin'
+};
+
+var MRT_Default_Icons = {
+  ArrowRightIcon: ArrowRightIcon,
+  CancelIcon: CancelIcon,
+  CheckBoxIcon: CheckBoxIcon,
+  ClearAllIcon: ClearAllIcon,
+  CloseIcon: CloseIcon,
+  DensityMediumIcon: DensityMediumIcon,
+  DensitySmallIcon: DensitySmallIcon,
+  DoubleArrowDownIcon: DoubleArrowDownIcon,
+  DynamicFeedIcon: DynamicFeedIcon,
+  EditIcon: EditIcon,
+  ExpandLessIcon: ExpandLessIcon,
+  ExpandMoreIcon: ExpandMoreIcon,
+  FilterAltIcon: FilterAltIcon,
+  FilterAltOff: FilterAltOff,
+  FilterListIcon: FilterListIcon,
+  FilterListOffIcon: FilterListOffIcon,
+  FullscreenExitIcon: FullscreenExitIcon,
+  FullscreenIcon: FullscreenIcon,
+  MoreHorizIcon: MoreHorizIcon,
+  MoreVertIcon: MoreVertIcon,
+  PushPinIcon: PushPinIcon,
+  SaveIcon: SaveIcon,
+  SearchIcon: SearchIcon,
+  SearchOffIcon: SearchOffIcon,
+  SortIcon: SortIcon,
+  ViewColumnIcon: ViewColumnIcon,
+  VisibilityOffIcon: VisibilityOffIcon
+};
+
+var MRT_ExpandAllButton = function MRT_ExpandAllButton(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var getIsAllRowsExpanded = tableInstance.getIsAllRowsExpanded,
+      getIsSomeRowsExpanded = tableInstance.getIsSomeRowsExpanded,
+      getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      DoubleArrowDownIcon = _tableInstance$option.icons.DoubleArrowDownIcon,
+      isLoading = _tableInstance$option.isLoading,
+      localization = _tableInstance$option.localization,
+      toggleAllRowsExpanded = tableInstance.toggleAllRowsExpanded;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
+
+  return React__default.createElement(material.IconButton, {
+    "aria-label": localization.expandAll,
+    disabled: isLoading,
+    title: localization.expandAll,
+    onClick: function onClick() {
+      return toggleAllRowsExpanded(!getIsAllRowsExpanded());
+    },
+    sx: {
+      height: isDensePadding ? '1.75rem' : '2.25rem',
+      width: isDensePadding ? '1.75rem' : '2.25rem'
+    }
+  }, React__default.createElement(DoubleArrowDownIcon, {
+    style: {
+      transform: "rotate(" + (getIsAllRowsExpanded() ? -180 : getIsSomeRowsExpanded() ? -90 : 0) + "deg)",
+      transition: 'transform 0.2s'
+    }
+  }));
+};
+
+var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
+  var row = _ref.row,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      ExpandMoreIcon = _tableInstance$option.icons.ExpandMoreIcon,
+      localization = _tableInstance$option.localization,
+      onRowExpandChange = _tableInstance$option.onRowExpandChange,
+      renderDetailPanel = _tableInstance$option.renderDetailPanel;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
+
+  var handleToggleExpand = function handleToggleExpand(event) {
+    row.toggleExpanded();
+    onRowExpandChange == null ? void 0 : onRowExpandChange(event, row);
+  };
+
+  return React__default.createElement(material.IconButton, {
+    "aria-label": localization.expand,
+    disabled: !row.getCanExpand() && !renderDetailPanel,
+    title: localization.expand,
+    onClick: handleToggleExpand,
+    sx: {
+      height: isDensePadding ? '1.75rem' : '2.25rem',
+      width: isDensePadding ? '1.75rem' : '2.25rem'
+    }
+  }, React__default.createElement(ExpandMoreIcon, {
+    style: {
+      transform: "rotate(" + (!row.getCanExpand() && !renderDetailPanel ? -90 : row.getIsExpanded() ? -180 : 0) + "deg)",
+      transition: 'transform 0.2s'
+    }
+  }));
+};
+
 var MRT_FILTER_TYPE;
 
 (function (MRT_FILTER_TYPE) {
@@ -122,161 +276,6 @@ var MRT_FILTER_TYPE;
   MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
 })(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
 
-var findLowestLevelCols = function findLowestLevelCols(columns) {
-  var lowestLevelColumns = columns;
-  var currentCols = columns;
-
-  while (!!((_currentCols = currentCols) != null && _currentCols.length) && currentCols.some(function (col) {
-    return col.columns;
-  })) {
-    var _currentCols;
-
-    var nextCols = currentCols.filter(function (col) {
-      return !!col.columns;
-    }).map(function (col) {
-      return col.columns;
-    }).flat();
-
-    if (nextCols.every(function (col) {
-      return !(col != null && col.columns);
-    })) {
-      lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
-    }
-
-    currentCols = nextCols;
-  }
-
-  return lowestLevelColumns.filter(function (col) {
-    return !col.columns;
-  });
-};
-
-var MaterialReactTableContext = /*#__PURE__*/function () {
-  return React.createContext({});
-}();
-
-var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
-  var _props$initialState$d, _props$initialState, _props$initialState$f, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4;
-
-  var hooks = [reactTable.useFilters, reactTable.useGlobalFilter, reactTable.useGroupBy, reactTable.useSortBy, reactTable.useExpanded, reactTable.usePagination, reactTable.useRowSelect];
-  if (props.enableColumnResizing) hooks.unshift(reactTable.useResizeColumns, reactTable.useFlexLayout);
-
-  var _useState = React.useState(null),
-      currentEditingRow = _useState[0],
-      setCurrentEditingRow = _useState[1];
-
-  var _useState2 = React.useState((_props$initialState$d = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.densePadding) != null ? _props$initialState$d : false),
-      densePadding = _useState2[0],
-      setDensePadding = _useState2[1];
-
-  var _useState3 = React.useState((_props$initialState$f = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.fullScreen) != null ? _props$initialState$f : false),
-      fullScreen = _useState3[0],
-      setFullScreen = _useState3[1];
-
-  var _useState4 = React.useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
-      showFilters = _useState4[0],
-      setShowFilters = _useState4[1];
-
-  var _useState5 = React.useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearch) != null ? _props$initialState$s2 : false),
-      showSearch = _useState5[0],
-      setShowSearch = _useState5[1];
-
-  var _useState6 = React.useState(function () {
-    return Object.assign.apply(Object, [{}].concat(findLowestLevelCols(props.columns).map(function (c) {
-      var _ref, _c$filter, _props$initialState5, _props$initialState5$, _c$filterSelectOption, _ref2;
-
-      return _ref2 = {}, _ref2[c.accessor] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.filters) == null ? void 0 : _props$initialState5$[c.accessor]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
-    })));
-  }),
-      currentFilterTypes = _useState6[0],
-      setCurrentFilterTypes = _useState6[1];
-
-  var _useState7 = React.useState(props.globalFilter),
-      currentGlobalFilterType = _useState7[0],
-      setCurrentGlobalFilterType = _useState7[1];
-
-  var applyFiltersToColumns = React.useCallback(function (cols) {
-    return cols.map(function (column) {
-      if (column.columns) {
-        applyFiltersToColumns(column.columns);
-      } else {
-        var _props$filterTypes;
-
-        column.filter = props == null ? void 0 : (_props$filterTypes = props.filterTypes) == null ? void 0 : _props$filterTypes[currentFilterTypes[column.accessor]];
-      }
-
-      return column;
-    });
-  }, [currentFilterTypes, props.filterTypes]);
-  var columns = React.useMemo(function () {
-    return applyFiltersToColumns(props.columns);
-  }, [props.columns, applyFiltersToColumns]);
-  var data = React.useMemo(function () {
-    return !props.isLoading || !!props.data.length ? props.data : [].concat(Array(10).fill(null)).map(function (_) {
-      return Object.assign.apply(Object, [{}].concat(findLowestLevelCols(props.columns).map(function (c) {
-        var _ref3;
-
-        return _ref3 = {}, _ref3[c.accessor] = null, _ref3;
-      })));
-    });
-  }, [props.data, props.isLoading]);
-  var tableInstance = reactTable.useTable.apply(void 0, [// @ts-ignore
-  _extends({}, props, {
-    // @ts-ignore
-    columns: columns,
-    data: data,
-    globalFilter: currentGlobalFilterType,
-    useControlledState: function useControlledState(state) {
-      return React.useMemo(function () {
-        return _extends({}, state, {
-          currentEditingRow: currentEditingRow,
-          currentFilterTypes: currentFilterTypes,
-          currentGlobalFilterType: currentGlobalFilterType,
-          densePadding: densePadding,
-          fullScreen: fullScreen,
-          showFilters: showFilters,
-          showSearch: showSearch
-        }, props == null ? void 0 : props.useControlledState == null ? void 0 : props.useControlledState(state));
-      }, [currentEditingRow, currentFilterTypes, currentGlobalFilterType, densePadding, fullScreen, showFilters, showSearch, state]);
-    }
-  })].concat(hooks));
-  var idPrefix = React.useMemo(function () {
-    var _props$idPrefix;
-
-    return (_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9);
-  }, [props.idPrefix]);
-  var anyRowsCanExpand = React.useMemo(function () {
-    return tableInstance.rows.some(function (row) {
-      return row.canExpand;
-    });
-  }, [tableInstance.rows]);
-  var anyRowsExpanded = React.useMemo(function () {
-    return tableInstance.rows.some(function (row) {
-      return row.isExpanded;
-    });
-  }, [tableInstance.rows]);
-  return React__default.createElement(MaterialReactTableContext.Provider, {
-    value: _extends({}, props, {
-      anyRowsCanExpand: anyRowsCanExpand,
-      anyRowsExpanded: anyRowsExpanded,
-      idPrefix: idPrefix,
-      //@ts-ignore
-      setCurrentEditingRow: setCurrentEditingRow,
-      setCurrentFilterTypes: setCurrentFilterTypes,
-      setCurrentGlobalFilterType: setCurrentGlobalFilterType,
-      setDensePadding: setDensePadding,
-      setFullScreen: setFullScreen,
-      setShowFilters: setShowFilters,
-      setShowSearch: setShowSearch,
-      //@ts-ignore
-      tableInstance: tableInstance
-    })
-  }, props.children);
-};
-var useMRT = function useMRT() {
-  return React.useContext(MaterialReactTableContext);
-};
-
 var bestMatchFirst = function bestMatchFirst(rows, columnIds, filterValue) {
   return matchSorter.matchSorter(rows, filterValue.toString().trim(), {
     keys: Array.isArray(columnIds) ? columnIds.map(function (c) {
@@ -415,16 +414,21 @@ var commonMenuItemStyles = {
 };
 var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   var anchorEl = _ref.anchorEl,
-      column = _ref.column,
+      header = _ref.header,
       onSelect = _ref.onSelect,
-      setAnchorEl = _ref.setAnchorEl;
-
-  var _useMRT = useMRT(),
-      enabledGlobalFilterTypes = _useMRT.enabledGlobalFilterTypes,
-      localization = _useMRT.localization,
-      setCurrentFilterTypes = _useMRT.setCurrentFilterTypes,
-      setCurrentGlobalFilterType = _useMRT.setCurrentGlobalFilterType,
-      tableInstance = _useMRT.tableInstance;
+      setAnchorEl = _ref.setAnchorEl,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      enabledGlobalFilterTypes = _tableInstance$option.enabledGlobalFilterTypes,
+      localization = _tableInstance$option.localization,
+      setCurrentFilterTypes = _tableInstance$option.setCurrentFilterTypes,
+      setCurrentGlobalFilterType = _tableInstance$option.setCurrentGlobalFilterType;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding,
+      currentFilterTypes = _getState.currentFilterTypes,
+      currentGlobalFilterType = _getState.currentGlobalFilterType;
 
   var filterTypes = React.useMemo(function () {
     return [{
@@ -435,7 +439,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
     }, {
       type: MRT_FILTER_TYPE.BEST_MATCH,
       label: localization.filterBestMatch,
-      divider: !!column,
+      divider: !!header,
       fn: bestMatch
     }, {
       type: MRT_FILTER_TYPE.CONTAINS,
@@ -483,20 +487,20 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       divider: false,
       fn: notEmpty
     }].filter(function (filterType) {
-      return column ? !column.enabledFilterTypes || column.enabledFilterTypes.includes(filterType.type) : (!enabledGlobalFilterTypes || enabledGlobalFilterTypes.includes(filterType.type)) && [MRT_FILTER_TYPE.BEST_MATCH_FIRST, MRT_FILTER_TYPE.BEST_MATCH].includes(filterType.type);
+      return header ? !header.column.enabledFilterTypes || header.column.enabledFilterTypes.includes(filterType.type) : (!enabledGlobalFilterTypes || enabledGlobalFilterTypes.includes(filterType.type)) && [MRT_FILTER_TYPE.BEST_MATCH_FIRST, MRT_FILTER_TYPE.BEST_MATCH].includes(filterType.type);
     });
   }, []);
 
   var handleSelectFilterType = function handleSelectFilterType(value) {
-    if (column) {
+    if (header) {
       setCurrentFilterTypes(function (prev) {
         var _extends2;
 
-        return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
+        return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = value, _extends2));
       });
 
       if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
-        column.setFilter(' ');
+        header.column.setColumnFilterValue(' ');
       }
     } else {
       setCurrentGlobalFilterType(value);
@@ -506,7 +510,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
     onSelect == null ? void 0 : onSelect();
   };
 
-  var filterType = column ? tableInstance.state.currentFilterTypes[column.id] : tableInstance.state.currentGlobalFilterType;
+  var filterType = !!header ? currentFilterTypes[header.id] : currentGlobalFilterType;
   return React__default.createElement(material.Menu, {
     anchorEl: anchorEl,
     anchorOrigin: {
@@ -518,7 +522,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
     },
     open: !!anchorEl,
     MenuListProps: {
-      dense: tableInstance.state.densePadding
+      dense: isDensePadding
     }
   }, filterTypes.map(function (_ref2, index) {
     var type = _ref2.type,
@@ -538,255 +542,111 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   }));
 };
 
-var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterB, _localization$filterM, _localization$, _localization$clearFi, _column$filterSelectO;
-
-  var column = _ref.column;
-
-  var _useMRT = useMRT(),
-      _useMRT$icons = _useMRT.icons,
-      FilterListIcon = _useMRT$icons.FilterListIcon,
-      CloseIcon = _useMRT$icons.CloseIcon,
-      idPrefix = _useMRT.idPrefix,
-      localization = _useMRT.localization,
-      muiTableHeadCellFilterTextFieldProps = _useMRT.muiTableHeadCellFilterTextFieldProps,
-      setCurrentFilterTypes = _useMRT.setCurrentFilterTypes,
-      tableInstance = _useMRT.tableInstance;
+var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
+  var _column$columns2;
 
-  var _useState = React.useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
+  var column = _ref.column,
+      isSubMenu = _ref.isSubMenu,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      onColumnHide = tableInstance.options.onColumnHide;
 
-  var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps(column) : muiTableHeadCellFilterTextFieldProps;
-  var mcTableHeadCellFilterTextFieldProps = column.muiTableHeadCellFilterTextFieldProps instanceof Function ? column.muiTableHeadCellFilterTextFieldProps(column) : column.muiTableHeadCellFilterTextFieldProps;
+  var _getState = getState(),
+      columnVisibility = _getState.columnVisibility;
 
-  var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
+  var switchChecked = column.columnDefType !== 'group' && column.getIsVisible() || column.columnDefType === 'group' && column.getLeafColumns().some(function (col) {
+    return col.getIsVisible();
+  });
 
-  var _useState2 = React.useState(''),
-      filterValue = _useState2[0],
-      setFilterValue = _useState2[1];
+  var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
+    if (column.columnDefType === 'group') {
+      var _column$columns;
 
-  var handleChange = reactTable.useAsyncDebounce(function (value) {
-    column.setFilter(value != null ? value : undefined);
-  }, 150);
+      column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.forEach == null ? void 0 : _column$columns.forEach(function (childColumn) {
+        childColumn.toggleVisibility(!switchChecked);
+      });
+    } else {
+      column.toggleVisibility();
+    }
 
-  var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
-    setAnchorEl(event.currentTarget);
+    onColumnHide == null ? void 0 : onColumnHide(column, Object.entries(columnVisibility).filter(function (entry) {
+      return entry[1];
+    }).map(function (entry) {
+      return entry[0];
+    }));
   };
 
-  var handleClear = function handleClear() {
-    setFilterValue('');
-    column.setFilter(undefined);
-  };
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
+    sx: _extends({}, commonMenuItemStyles$1, {
+      pl: (column.depth + 0.5) * 2 + "rem"
+    })
+  }, React__default.createElement(material.FormControlLabel, {
+    componentsProps: {
+      typography: {
+        sx: {
+          marginBottom: 0
+        }
+      }
+    },
+    checked: switchChecked,
+    control: React__default.createElement(material.Switch, null),
+    disabled: isSubMenu && switchChecked || column.enableHiding === false,
+    label: column.header,
+    onChange: function onChange() {
+      return handleToggleColumnHidden(column);
+    }
+  })), (_column$columns2 = column.columns) == null ? void 0 : _column$columns2.map(function (c, i) {
+    return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
+      key: i + "-" + c.id,
+      column: c,
+      isSubMenu: isSubMenu,
+      tableInstance: tableInstance
+    });
+  }));
+};
 
-  var handleClearFilterChip = function handleClearFilterChip() {
-    setFilterValue('');
-    column.setFilter(undefined);
-    setCurrentFilterTypes(function (prev) {
-      var _extends2;
+var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
+  var anchorEl = _ref.anchorEl,
+      isSubMenu = _ref.isSubMenu,
+      setAnchorEl = _ref.setAnchorEl,
+      tableInstance = _ref.tableInstance;
+  var getAllColumns = tableInstance.getAllColumns,
+      getIsAllColumnsVisible = tableInstance.getIsAllColumnsVisible,
+      getIsSomeColumnsVisible = tableInstance.getIsSomeColumnsVisible,
+      getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
+      getState = tableInstance.getState,
+      toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
+      getAllLeafColumns = tableInstance.getAllLeafColumns,
+      localization = tableInstance.options.localization;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = MRT_FILTER_TYPE.BEST_MATCH, _extends2));
+  var hideAllColumns = function hideAllColumns() {
+    getAllLeafColumns().filter(function (col) {
+      return col.enableHiding !== false;
+    }).forEach(function (col) {
+      return col.toggleVisibility(false);
     });
   };
 
-  if (column.Filter) {
-    return React__default.createElement(React__default.Fragment, null, column.Filter == null ? void 0 : column.Filter({
-      column: column
-    }));
-  }
-
-  var filterId = "mrt-" + idPrefix + "-" + column.id + "-filter-text-field";
-  var filterType = tableInstance.state.currentFilterTypes[column.id];
-  var isSelectFilter = !!column.filterSelectOptions;
-  var filterChipLabel = !(filterType instanceof Function) && [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType) ? //@ts-ignore
-  localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))] : '';
-  var filterPlaceholder = (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header));
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
-    fullWidth: true,
-    id: filterId,
-    inputProps: {
-      disabled: !!filterChipLabel,
-      sx: {
-        textOverflow: 'ellipsis',
-        width: filterChipLabel ? 0 : undefined
-      },
-      title: filterPlaceholder
-    },
-    helperText: React__default.createElement("label", {
-      htmlFor: filterId
-    }, filterType instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
-    (_localization$ = localization["filter" + (filterType.name.charAt(0).toUpperCase() + filterType.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
-    localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))])),
-    FormHelperTextProps: {
-      sx: {
-        fontSize: '0.6rem',
-        lineHeight: '0.8rem'
-      }
-    },
-    label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
-    margin: "none",
-    placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
-    onChange: function onChange(e) {
-      setFilterValue(e.target.value);
-      handleChange(e.target.value);
-    },
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    select: isSelectFilter,
-    value: filterValue != null ? filterValue : '',
-    variant: "standard",
-    InputProps: {
-      startAdornment: !isSelectFilter && React__default.createElement(material.InputAdornment, {
-        position: "start"
-      }, React__default.createElement(material.Tooltip, {
-        arrow: true,
-        title: localization.changeFilterMode
-      }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
-        "aria-label": localization.changeFilterMode,
-        onClick: handleFilterMenuOpen,
-        size: "small",
-        sx: {
-          height: '1.75rem',
-          width: '1.75rem'
-        }
-      }, React__default.createElement(FilterListIcon, null)))), filterChipLabel && React__default.createElement(material.Chip, {
-        onDelete: handleClearFilterChip,
-        label: filterChipLabel
-      })),
-      endAdornment: !filterChipLabel && React__default.createElement(material.InputAdornment, {
-        position: "end"
-      }, React__default.createElement(material.Tooltip, {
-        arrow: true,
-        disableHoverListener: isSelectFilter,
-        placement: "right",
-        title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
-      }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
-        "aria-label": localization.clearFilter,
-        disabled: !(filterValue != null && filterValue.length),
-        onClick: handleClear,
-        size: "small",
-        sx: {
-          height: '1.75rem',
-          width: '1.75rem'
-        }
-      }, React__default.createElement(CloseIcon, {
-        fontSize: "small"
-      })))))
-    }
-  }, textFieldProps, {
-    sx: _extends({
-      m: '-0.25rem',
-      p: 0,
-      minWidth: !filterChipLabel ? '5rem' : 'auto',
-      width: 'calc(100% + 0.5rem)',
-      mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
-      '&	.MuiSelect-icon': {
-        mr: '1.5rem'
-      }
-    }, textFieldProps == null ? void 0 : textFieldProps.sx)
-  }), isSelectFilter && React__default.createElement(material.MenuItem, {
-    divider: true,
-    disabled: !filterValue,
-    value: ""
-  }, localization.clearFilter), column == null ? void 0 : (_column$filterSelectO = column.filterSelectOptions) == null ? void 0 : _column$filterSelectO.map(function (option) {
-    var value;
-    var text;
-
-    if (typeof option === 'string') {
-      value = option;
-      text = option;
-    } else if (typeof option === 'object') {
-      value = option.value;
-      text = option.text;
-    }
-
-    return React__default.createElement(material.MenuItem, {
-      key: value,
-      value: value
-    }, text);
-  })), React__default.createElement(MRT_FilterTypeMenu, {
-    anchorEl: anchorEl,
-    column: column,
-    setAnchorEl: setAnchorEl
-  }));
-};
-
-var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
-  var _column$columns, _column$columns2, _column$isVisible, _column$columns4;
-
-  var column = _ref.column,
-      isSubMenu = _ref.isSubMenu;
-
-  var _useMRT = useMRT(),
-      onColumnHide = _useMRT.onColumnHide,
-      tableInstance = _useMRT.tableInstance;
-
-  var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
-  var allChildColumnsVisible = isParentHeader && !!((_column$columns2 = column.columns) != null && _column$columns2.every(function (childColumn) {
-    return childColumn.isVisible;
-  }));
-  var switchChecked = (_column$isVisible = column.isVisible) != null ? _column$isVisible : allChildColumnsVisible;
-
-  var handleToggleColumnHidden = function handleToggleColumnHidden(column) {
-    if (isParentHeader) {
-      var _column$columns3;
-
-      column == null ? void 0 : (_column$columns3 = column.columns) == null ? void 0 : _column$columns3.forEach == null ? void 0 : _column$columns3.forEach(function (childColumn) {
-        childColumn.toggleHidden(switchChecked);
-      });
-    } else {
-      column.toggleHidden();
-    }
-
-    onColumnHide == null ? void 0 : onColumnHide(column, tableInstance.state.hiddenColumns);
-  };
-
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.MenuItem, {
-    sx: _extends({}, commonMenuItemStyles$1, {
-      pl: (column.depth + 0.5) * 2 + "rem"
-    })
-  }, React__default.createElement(material.FormControlLabel, {
-    componentsProps: {
-      typography: {
-        sx: {
-          marginBottom: 0
-        }
-      }
-    },
-    checked: switchChecked,
-    control: React__default.createElement(material.Switch, null),
-    disabled: isSubMenu && switchChecked || column.disableColumnHiding,
-    label: column.Header,
-    onChange: function onChange() {
-      return handleToggleColumnHidden(column);
-    }
-  })), (_column$columns4 = column.columns) == null ? void 0 : _column$columns4.map(function (c, i) {
-    return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
-      key: i + "-" + c.id,
-      column: c,
-      isSubMenu: isSubMenu
+  var allDisplayColumns = React.useMemo(function () {
+    return getAllColumns().filter(function (col) {
+      return col.columnDefType === 'display';
     });
-  }));
-};
-
-var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
-  var anchorEl = _ref.anchorEl,
-      isSubMenu = _ref.isSubMenu,
-      setAnchorEl = _ref.setAnchorEl;
-
-  var _useMRT = useMRT(),
-      localization = _useMRT.localization,
-      tableInstance = _useMRT.tableInstance;
-
-  var hideAllColumns = function hideAllColumns() {
-    findLowestLevelCols(tableInstance.columns).filter(function (col) {
-      return !col.disableColumnHiding;
-    }).forEach(function (col) {
-      return col.toggleHidden(true);
+  }, [getAllColumns()]);
+  var allDataColumns = React.useMemo(function () {
+    var dataColumns = getAllColumns().filter(function (col) {
+      return col.columnDefType !== 'display';
     });
-  };
-
+    return getIsSomeColumnsPinned() ? [].concat(dataColumns.filter(function (c) {
+      return c.getIsPinned() === 'left';
+    }), dataColumns.filter(function (c) {
+      return c.getIsPinned() === false;
+    }), dataColumns.filter(function (c) {
+      return c.getIsPinned() === 'right';
+    })) : dataColumns;
+  }, [getAllColumns(), getState().columnPinning, getIsSomeColumnsPinned()]);
   return React__default.createElement(material.Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -794,7 +654,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: tableInstance.state.densePadding
+      dense: isDensePadding
     }
   }, React__default.createElement(material.Box, {
     sx: {
@@ -804,18 +664,26 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
       pt: 0
     }
   }, !isSubMenu && React__default.createElement(material.Button, {
-    disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
+    disabled: !getIsSomeColumnsVisible(),
     onClick: hideAllColumns
   }, localization.hideAll), React__default.createElement(material.Button, {
-    disabled: tableInstance.getToggleHideAllColumnsProps().checked,
+    disabled: getIsAllColumnsVisible(),
     onClick: function onClick() {
-      return tableInstance.toggleHideAllColumns(false);
+      return toggleAllColumnsVisible(true);
     }
-  }, localization.showAll)), React__default.createElement(material.Divider, null), tableInstance.columns.map(function (column, index) {
+  }, localization.showAll)), React__default.createElement(material.Divider, null), allDisplayColumns.map(function (column, index) {
+    return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
+      column: column,
+      isSubMenu: isSubMenu,
+      key: index + "-" + column.id,
+      tableInstance: tableInstance
+    });
+  }), React__default.createElement(material.Divider, null), allDataColumns.map(function (column, index) {
     return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
       column: column,
       isSubMenu: isSubMenu,
-      key: index + "-" + column.id
+      key: index + "-" + column.id,
+      tableInstance: tableInstance
     });
   }));
 };
@@ -831,30 +699,39 @@ var commonListItemStyles = {
   alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _tableInstance$state$, _localization$showAll;
+  var _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _localization$showAll;
 
   var anchorEl = _ref.anchorEl,
-      column = _ref.column,
-      setAnchorEl = _ref.setAnchorEl;
-
-  var _useMRT = useMRT(),
-      disableColumnHiding = _useMRT.disableColumnHiding,
-      disableFilters = _useMRT.disableFilters,
-      disableSortBy = _useMRT.disableSortBy,
-      enableColumnGrouping = _useMRT.enableColumnGrouping,
-      _useMRT$icons = _useMRT.icons,
-      ArrowRightIcon = _useMRT$icons.ArrowRightIcon,
-      ClearAllIcon = _useMRT$icons.ClearAllIcon,
-      ViewColumnIcon = _useMRT$icons.ViewColumnIcon,
-      DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
-      FilterListIcon = _useMRT$icons.FilterListIcon,
-      FilterListOffIcon = _useMRT$icons.FilterListOffIcon,
-      SortIcon = _useMRT$icons.SortIcon,
-      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon,
-      idPrefix = _useMRT.idPrefix,
-      localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters,
-      tableInstance = _useMRT.tableInstance;
+      header = _ref.header,
+      setAnchorEl = _ref.setAnchorEl,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      toggleAllColumnsVisible = tableInstance.toggleAllColumnsVisible,
+      setColumnOrder = tableInstance.setColumnOrder,
+      _tableInstance$option = tableInstance.options,
+      enableColumnFilters = _tableInstance$option.enableColumnFilters,
+      enableColumnPinning = _tableInstance$option.enableColumnPinning,
+      enableGrouping = _tableInstance$option.enableGrouping,
+      enableHiding = _tableInstance$option.enableHiding,
+      enableSorting = _tableInstance$option.enableSorting,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      ArrowRightIcon = _tableInstance$option2.ArrowRightIcon,
+      ClearAllIcon = _tableInstance$option2.ClearAllIcon,
+      ViewColumnIcon = _tableInstance$option2.ViewColumnIcon,
+      DynamicFeedIcon = _tableInstance$option2.DynamicFeedIcon,
+      FilterListIcon = _tableInstance$option2.FilterListIcon,
+      FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
+      PushPinIcon = _tableInstance$option2.PushPinIcon,
+      SortIcon = _tableInstance$option2.SortIcon,
+      VisibilityOffIcon = _tableInstance$option2.VisibilityOffIcon,
+      idPrefix = _tableInstance$option.idPrefix,
+      localization = _tableInstance$option.localization,
+      setShowFilters = _tableInstance$option.setShowFilters;
+  var column = header.column;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding,
+      columnVisibility = _getState.columnVisibility;
 
   var _useState = React.useState(null),
       filterMenuAnchorEl = _useState[0],
@@ -865,48 +742,55 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       setShowHideColumnsMenuAnchorEl = _useState2[1];
 
   var handleClearSort = function handleClearSort() {
-    column.clearSortBy();
+    column.resetSorting();
     setAnchorEl(null);
   };
 
   var handleSortAsc = function handleSortAsc() {
-    column.toggleSortBy(false);
+    column.toggleSorting(false);
     setAnchorEl(null);
   };
 
   var handleSortDesc = function handleSortDesc() {
-    column.toggleSortBy(true);
+    column.toggleSorting(true);
     setAnchorEl(null);
   };
 
   var handleHideColumn = function handleHideColumn() {
-    column.toggleHidden();
+    column.toggleVisibility(false);
     setAnchorEl(null);
   };
 
+  var handlePinColumn = function handlePinColumn(pinDirection) {
+    column.pin(pinDirection);
+  };
+
   var handleGroupByColumn = function handleGroupByColumn() {
-    column.toggleGroupBy();
+    column.toggleGrouping();
+    setColumnOrder(function (old) {
+      return ['mrt-expand'].concat(old);
+    });
     setAnchorEl(null);
   };
 
   var handleClearFilter = function handleClearFilter() {
-    column.setFilter('');
+    column.setColumnFilterValue('');
     setAnchorEl(null);
   };
 
   var handleFilterByColumn = function handleFilterByColumn() {
     setShowFilters(true);
     setTimeout(function () {
-      var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
+      var _document$getElementB, _header$muiTableHeadC, _header$muiTableHeadC2;
 
       return (_document$getElementB = document.getElementById( // @ts-ignore
-      (_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "mrt-" + idPrefix + "-" + column.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
+      (_header$muiTableHeadC = (_header$muiTableHeadC2 = header.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _header$muiTableHeadC2.id) != null ? _header$muiTableHeadC : "mrt-" + idPrefix + "-" + header.id + "-filter-text-field")) == null ? void 0 : _document$getElementB.focus();
     }, 200);
     setAnchorEl(null);
   };
 
   var handleShowAllColumns = function handleShowAllColumns() {
-    tableInstance.toggleHideAllColumns(false);
+    toggleAllColumnsVisible(true);
     setAnchorEl(null);
   };
 
@@ -927,26 +811,26 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: tableInstance.state.densePadding
+      dense: isDensePadding
     }
-  }, !disableSortBy && column.canSort && [React__default.createElement(material.MenuItem, {
-    disabled: !column.isSorted,
+  }, enableSorting && column.getCanSort() && [React__default.createElement(material.MenuItem, {
+    disabled: !column.getIsSorted(),
     key: 0,
     onClick: handleClearSort,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), localization.clearSort)), React__default.createElement(material.MenuItem, {
-    disabled: column.isSorted && !column.isSortedDesc,
+    disabled: column.getIsSorted() === 'asc',
     key: 1,
     onClick: handleSortAsc,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.Header)))), React__default.createElement(material.MenuItem, {
-    divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.header)))), React__default.createElement(material.MenuItem, {
+    divider: enableColumnFilters || enableGrouping || enableHiding,
     key: 2,
-    disabled: column.isSorted && column.isSortedDesc,
+    disabled: column.getIsSorted() === 'desc',
     onClick: handleSortDesc,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
@@ -955,21 +839,21 @@ 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))))], !disableFilters && column.canFilter && [React__default.createElement(material.MenuItem, {
-    disabled: !column.filterValue,
+  })), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.header))))], enableColumnFilters && column.getCanColumnFilter() && [React__default.createElement(material.MenuItem, {
+    disabled: !column.getColumnFilterValue(),
     key: 0,
     onClick: handleClearFilter,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListOffIcon, null)), localization.clearFilter)), React__default.createElement(material.MenuItem, {
-    divider: enableColumnGrouping || !disableColumnHiding,
+    divider: enableGrouping || enableHiding,
     key: 1,
     onClick: handleFilterByColumn,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header))), !column.filterSelectOptions && React__default.createElement(material.IconButton, {
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.header))), !column.filterSelectOptions && React__default.createElement(material.IconButton, {
     onClick: handleOpenFilterModeMenu,
     onMouseEnter: handleOpenFilterModeMenu,
     size: "small",
@@ -978,32 +862,71 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     }
   }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_FilterTypeMenu, {
     anchorEl: filterMenuAnchorEl,
-    column: column,
+    header: header,
     key: 2,
+    onSelect: handleFilterByColumn,
     setAnchorEl: setFilterMenuAnchorEl,
-    onSelect: handleFilterByColumn
-  })], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.MenuItem, {
-    divider: !disableColumnHiding,
+    tableInstance: tableInstance
+  })], enableGrouping && column.getCanGroup() && [React__default.createElement(material.MenuItem, {
+    divider: enableColumnPinning,
     key: 0,
     onClick: handleGroupByColumn,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.isGrouped ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React__default.createElement(material.MenuItem, {
-    disabled: column.disableColumnHiding,
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.header))))], enableColumnPinning && column.getCanPin() && [React__default.createElement(material.MenuItem, {
+    disabled: column.getIsPinned() === 'left',
+    key: 0,
+    onClick: function onClick() {
+      return handlePinColumn('left');
+    },
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
+    style: {
+      transform: 'rotate(90deg)'
+    }
+  })), localization.pinToLeft)), React__default.createElement(material.MenuItem, {
+    disabled: column.getIsPinned() === 'right',
+    key: 0,
+    onClick: function onClick() {
+      return handlePinColumn('right');
+    },
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
+    style: {
+      transform: 'rotate(-90deg)'
+    }
+  })), localization.pinToRight)), React__default.createElement(material.MenuItem, {
+    disabled: !column.getIsPinned(),
+    divider: enableHiding,
+    key: 0,
+    onClick: function onClick() {
+      return handlePinColumn(false);
+    },
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableHiding && [React__default.createElement(material.MenuItem, {
+    disabled: column.enableHiding === false,
     key: 0,
     onClick: handleHideColumn,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.Header)))), React__default.createElement(material.MenuItem, {
-    disabled: !((_tableInstance$state$ = tableInstance.state.hiddenColumns) != null && _tableInstance$state$.length),
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.header)))), React__default.createElement(material.MenuItem, {
+    disabled: !Object.values(columnVisibility).filter(function (visible) {
+      return !visible;
+    }).length,
     key: 1,
     onClick: handleShowAllColumns,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.Header))), !column.filterSelectOptions && React__default.createElement(material.IconButton, {
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.header))), React__default.createElement(material.IconButton, {
     onClick: handleOpenShowHideColumnsMenu,
     onMouseEnter: handleOpenShowHideColumnsMenu,
     size: "small",
@@ -1014,605 +937,51 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     anchorEl: showHideColumnsMenuAnchorEl,
     isSubMenu: true,
     key: 2,
-    setAnchorEl: setShowHideColumnsMenuAnchorEl
+    setAnchorEl: setShowHideColumnsMenuAnchorEl,
+    tableInstance: tableInstance
   })]);
 };
 
-var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
-  var column = _ref.column;
-
-  var _useMRT = useMRT(),
-      MoreVertIcon = _useMRT.icons.MoreVertIcon,
-      localization = _useMRT.localization,
-      muiTableHeadCellColumnActionsButtonProps = _useMRT.muiTableHeadCellColumnActionsButtonProps;
-
-  var _useState = React.useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
-
-  var handleClick = function handleClick(event) {
-    event.stopPropagation();
-    event.preventDefault();
-    setAnchorEl(event.currentTarget);
-  };
-
-  var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps(column) : muiTableHeadCellColumnActionsButtonProps;
-  var mcTableHeadCellColumnActionsButtonProps = column.muiTableHeadCellColumnActionsButtonProps instanceof Function ? column.muiTableHeadCellColumnActionsButtonProps(column) : column.muiTableHeadCellColumnActionsButtonProps;
+var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
+  var _renderRowActionMenuI;
 
-  var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
+  var anchorEl = _ref.anchorEl,
+      handleEdit = _ref.handleEdit,
+      row = _ref.row,
+      setAnchorEl = _ref.setAnchorEl,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      EditIcon = _tableInstance$option.icons.EditIcon,
+      enableRowEditing = _tableInstance$option.enableRowEditing,
+      localization = _tableInstance$option.localization,
+      renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
 
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    placement: "top",
-    title: localization.columnActions
-  }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.columnActions,
-    onClick: handleClick,
-    size: "small"
-  }, iconButtonProps, {
-    sx: _extends({
-      height: '2rem',
-      mr: '2px',
-      mt: '-0.2rem',
-      opacity: 0.5,
-      transition: 'opacity 0.2s',
-      width: '2rem',
-      '&:hover': {
-        opacity: 1
-      }
-    }, iconButtonProps.sx)
-  }), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
+  return React__default.createElement(material.Menu, {
     anchorEl: anchorEl,
-    column: column,
-    setAnchorEl: setAnchorEl
-  }));
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: isDensePadding
+    }
+  }, enableRowEditing && React__default.createElement(material.MenuItem, {
+    onClick: handleEdit,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), localization.edit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+    return setAnchorEl(null);
+  })) != null ? _renderRowActionMenuI : null);
 };
 
-var commonTableHeadCellStyles = function commonTableHeadCellStyles(densePadding, enableColumnResizing, widths) {
-  return _extends({
-    fontWeight: 'bold',
-    height: '100%',
-    p: densePadding ? '0.5rem' : '1rem',
-    pt: densePadding ? '0.75rem' : '1.25rem',
-    transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
-    verticalAlign: 'text-top'
-  }, widths);
-};
-var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _column$columns, _localization$sortByC, _localization$sortByC2;
-
-  var column = _ref.column;
-
-  var _useMRT = useMRT(),
-      disableColumnActions = _useMRT.disableColumnActions,
-      disableFilters = _useMRT.disableFilters,
-      enableColumnResizing = _useMRT.enableColumnResizing,
-      _useMRT$icons = _useMRT.icons,
-      FilterAltIcon = _useMRT$icons.FilterAltIcon,
-      FilterAltOff = _useMRT$icons.FilterAltOff,
-      localization = _useMRT.localization,
-      muiTableHeadCellProps = _useMRT.muiTableHeadCellProps,
-      setShowFilters = _useMRT.setShowFilters,
-      tableInstance = _useMRT.tableInstance;
-
-  var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
-  var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps(column) : muiTableHeadCellProps;
-  var mcTableHeadCellProps = column.muiTableHeadCellProps instanceof Function ? column.muiTableHeadCellProps(column) : column.muiTableHeadCellProps;
-
-  var tableCellProps = _extends({}, mTableHeadCellProps, mcTableHeadCellProps, column.getHeaderProps(), {
-    style: _extends({}, column.getHeaderProps().style, mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style, mcTableHeadCellProps == null ? void 0 : mcTableHeadCellProps.style)
-  });
-
-  var sortTooltip = column.isSorted ? column.isSortedDesc ? localization.clearSort : (_localization$sortByC = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC.replace('{column}', column.Header) : (_localization$sortByC2 = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC2.replace('{column}', column.Header);
-  var filterType = tableInstance.state.currentFilterTypes[column.id];
-  var filterTooltip = !!column.filterValue ? localization.filteringByColumn.replace('{column}', String(column.Header)).replace('{filterType}', filterType instanceof Function ? '' : // @ts-ignore
-  localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))]).replace('{filterValue}', column.filterValue).replace('" "', '') : localization.showHideFilters;
-  var columnHeader = column.render('Header');
-  return React__default.createElement(material.TableCell, Object.assign({
-    align: isParentHeader ? 'center' : 'left'
-  }, tableCellProps, {
-    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing, {
-      maxWidth: column.maxWidth,
-      minWidth: column.minWidth,
-      width: column.width
-    }), tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), React__default.createElement(material.Box, {
-    sx: {
-      alignItems: 'flex-start',
-      display: 'flex',
-      justifyContent: isParentHeader ? 'center' : 'space-between',
-      width: '100%'
-    }
-  }, React__default.createElement(material.Box, Object.assign({}, column.getSortByToggleProps(), {
-    sx: {
-      alignItems: 'center',
-      display: 'flex',
-      flexWrap: 'nowrap',
-      whiteSpace: columnHeader.length < 15 ? 'nowrap' : 'normal'
-    },
-    title: undefined
-  }), column.render('Header'), !isParentHeader && column.canSort && React__default.createElement(material.Tooltip, {
-    arrow: true,
-    placement: "top",
-    title: sortTooltip
-  }, React__default.createElement(material.TableSortLabel, {
-    "aria-label": sortTooltip,
-    active: column.isSorted,
-    direction: column.isSortedDesc ? 'desc' : 'asc'
-  })), !isParentHeader && !!column.canFilter && React__default.createElement(material.Tooltip, {
-    arrow: true,
-    placement: "top",
-    title: filterTooltip
-  }, React__default.createElement(material.IconButton, {
-    disableRipple: true,
-    onClick: function onClick(event) {
-      event.stopPropagation();
-      setShowFilters(!tableInstance.state.showFilters);
-    },
-    size: "small",
-    sx: {
-      m: 0,
-      opacity: !!column.filterValue ? 0.8 : 0,
-      p: '2px',
-      transition: 'all 0.2s ease-in-out',
-      '&:hover': {
-        backgroundColor: 'transparent',
-        opacity: 0.8
-      }
-    }
-  }, tableInstance.state.showFilters && !column.filterValue ? React__default.createElement(FilterAltOff, {
-    fontSize: "small"
-  }) : React__default.createElement(FilterAltIcon, {
-    fontSize: "small"
-  })))), React__default.createElement(material.Box, {
-    sx: {
-      alignItems: 'center',
-      display: 'flex',
-      flexWrap: 'nowrap'
-    }
-  }, !disableColumnActions && !column.disableColumnActions && !isParentHeader && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
-    column: column
-  }), enableColumnResizing && !isParentHeader && React__default.createElement(material.Divider, Object.assign({
-    flexItem: true,
-    orientation: "vertical",
-    onDoubleClick: function onDoubleClick() {
-      return tableInstance.resetResizing();
-    }
-  }, column.getResizerProps(), {
-    sx: {
-      borderRightWidth: '2px',
-      borderRadius: '2px',
-      maxHeight: '2rem'
-    }
-  })))), !disableFilters && column.canFilter && React__default.createElement(material.Collapse, {
-    "in": tableInstance.state.showFilters
-  }, React__default.createElement(MRT_FilterTextField, {
-    column: column
-  })));
-};
-
-var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
-  var row = _ref.row,
-      selectAll = _ref.selectAll;
-
-  var _useMRT = useMRT(),
-      localization = _useMRT.localization,
-      muiSelectCheckboxProps = _useMRT.muiSelectCheckboxProps,
-      onSelectChange = _useMRT.onSelectChange,
-      onSelectAllChange = _useMRT.onSelectAllChange,
-      tableInstance = _useMRT.tableInstance,
-      densePadding = _useMRT.tableInstance.state.densePadding;
-
-  var handleSelectChange = function handleSelectChange(event) {
-    if (selectAll) {
-      var _tableInstance$getTog;
-
-      tableInstance == null ? void 0 : tableInstance.getToggleAllRowsSelectedProps == null ? void 0 : (_tableInstance$getTog = tableInstance.getToggleAllRowsSelectedProps()) == null ? void 0 : _tableInstance$getTog.onChange == null ? void 0 : _tableInstance$getTog.onChange(event);
-      onSelectAllChange == null ? void 0 : onSelectAllChange(event, event.target.checked ? tableInstance.rows : []);
-    } else if (row) {
-      var _row$getToggleRowSele;
-
-      row == null ? void 0 : (_row$getToggleRowSele = row.getToggleRowSelectedProps()) == null ? void 0 : _row$getToggleRowSele.onChange == null ? void 0 : _row$getToggleRowSele.onChange(event);
-      onSelectChange == null ? void 0 : onSelectChange(event, row, event.target.checked ? [].concat(tableInstance.selectedFlatRows, [row]) : tableInstance.selectedFlatRows.filter(function (selectedRow) {
-        return selectedRow.id !== row.id;
-      }));
-    }
-  };
-
-  var mTableBodyRowSelectCheckboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps(selectAll, row, tableInstance) : muiSelectCheckboxProps;
-  var rtSelectCheckboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
-
-  var checkboxProps = _extends({}, mTableBodyRowSelectCheckboxProps, rtSelectCheckboxProps, {
-    style: _extends({}, rtSelectCheckboxProps == null ? void 0 : rtSelectCheckboxProps.style, mTableBodyRowSelectCheckboxProps == null ? void 0 : mTableBodyRowSelectCheckboxProps.style)
-  });
-
-  return React__default.createElement(material.Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
-  }, React__default.createElement(material.Checkbox, Object.assign({
-    inputProps: {
-      'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
-    },
-    size: densePadding ? 'small' : 'medium'
-  }, checkboxProps, {
-    onChange: handleSelectChange,
-    title: undefined
-  })));
-};
-
-var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
-  var _useMRT = useMRT(),
-      anyRowsExpanded = _useMRT.anyRowsExpanded,
-      DoubleArrowDownIcon = _useMRT.icons.DoubleArrowDownIcon,
-      localization = _useMRT.localization,
-      tableInstance = _useMRT.tableInstance;
-
-  return React__default.createElement(material.IconButton, {
-    "aria-label": localization.expandAll,
-    title: localization.expandAll
-  }, React__default.createElement(DoubleArrowDownIcon, {
-    style: {
-      transform: "rotate(" + (tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0) + "deg)",
-      transition: 'transform 0.2s'
-    }
-  }));
-};
-
-var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
-  var width = _ref.width;
-
-  var _useMRT = useMRT(),
-      muiTableBodyCellProps = _useMRT.muiTableBodyCellProps;
-
-  var tableCellProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps() : muiTableBodyCellProps;
-  return React__default.createElement(material.TableCell, Object.assign({}, tableCellProps, {
-    sx: _extends({
-      width: width
-    }, tableCellProps == null ? void 0 : tableCellProps.sx)
-  }));
-};
-
-var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
-  var _useMRT = useMRT(),
-      localization = _useMRT.localization,
-      densePadding = _useMRT.tableInstance.state.densePadding;
-
-  return React__default.createElement(material.TableCell, {
-    style: {
-      textAlign: 'center'
-    },
-    sx: _extends({}, commonTableHeadCellStyles(densePadding), {
-      textAlign: 'center',
-      maxWidth: '4rem',
-      width: '4rem'
-    })
-  }, localization.actions);
-};
-
-var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
-  var headerGroup = _ref.headerGroup;
-
-  var _useMRT = useMRT(),
-      anyRowsCanExpand = _useMRT.anyRowsCanExpand,
-      disableExpandAll = _useMRT.disableExpandAll,
-      disableSelectAll = _useMRT.disableSelectAll,
-      enableRowActions = _useMRT.enableRowActions,
-      enableRowEditing = _useMRT.enableRowEditing,
-      enableRowNumbers = _useMRT.enableRowNumbers,
-      enableSelection = _useMRT.enableSelection,
-      muiTableHeadRowProps = _useMRT.muiTableHeadRowProps,
-      positionActionsColumn = _useMRT.positionActionsColumn,
-      renderDetailPanel = _useMRT.renderDetailPanel,
-      tableInstance = _useMRT.tableInstance;
-
-  var isParentHeader = React.useMemo(function () {
-    return headerGroup.headers.some(function (h) {
-      var _h$columns$length, _h$columns;
-
-      return ((_h$columns$length = (_h$columns = h.columns) == null ? void 0 : _h$columns.length) != null ? _h$columns$length : 0) > 0;
-    });
-  }, [headerGroup.headers]);
-  var mTableHeadRowProps = muiTableHeadRowProps instanceof Function ? muiTableHeadRowProps(headerGroup) : muiTableHeadRowProps;
-
-  var tableRowProps = _extends({}, mTableHeadRowProps, headerGroup.getHeaderGroupProps(), {
-    style: _extends({}, headerGroup.getHeaderGroupProps().style, mTableHeadRowProps == null ? void 0 : mTableHeadRowProps.style)
-  });
-
-  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React__default.createElement(material.TableCell, Object.assign({
-    size: "small"
-  }, tableInstance.getToggleAllRowsExpandedProps(), {
-    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding), {
-      width: '3rem',
-      maxWidth: '3rem',
-      textAlign: 'center'
-    })
-  }), React__default.createElement(MRT_ExpandAllButton, null)) : React__default.createElement(MRT_TableSpacerCell, {
-    width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
-  }) : null, enableSelection ? !isParentHeader && !disableSelectAll ? React__default.createElement(material.TableCell, {
-    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding), {
-      maxWidth: '3rem',
-      width: '3rem',
-      textAlign: 'center'
-    })
-  }, React__default.createElement(MRT_SelectCheckbox, {
-    selectAll: true
-  })) : React__default.createElement(MRT_TableSpacerCell, {
-    width: "1rem"
-  }) : null, enableRowNumbers && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(material.TableCell, {
-    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding), {
-      width: '2rem',
-      maxWidth: '2rem'
-    })
-  }, "#")), headerGroup.headers.map(function (column) {
-    return React__default.createElement(MRT_TableHeadCell, {
-      key: column.getHeaderProps().key,
-      column: column
-    });
-  }), (enableRowActions || enableRowEditing) && positionActionsColumn === 'last' && (isParentHeader ? React__default.createElement(MRT_TableSpacerCell, null) : React__default.createElement(MRT_TableHeadCellActions, null)));
-};
-
-var MRT_TableHead = function MRT_TableHead() {
-  var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      muiTableHeadProps = _useMRT.muiTableHeadProps;
-
-  var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
-  return React__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), tableInstance.headerGroups.map(function (headerGroup) {
-    return React__default.createElement(MRT_TableHeadRow, {
-      key: headerGroup.getHeaderGroupProps().key,
-      headerGroup: headerGroup
-    });
-  }));
-};
-
-var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
-  var cell = _ref.cell;
-
-  var _useMRT = useMRT(),
-      muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
-      currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
-
-  var handleChange = function handleChange(event) {
-    if (currentEditingRow) {
-      cell.row.values[cell.column.id] = event.target.value;
-      setCurrentEditingRow(_extends({}, currentEditingRow));
-    }
-
-    cell.column.onCellEditChange == null ? void 0 : cell.column.onCellEditChange(event, cell);
-  };
-
-  var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
-  var mcTableBodyCellEditTextFieldProps = cell.column.muiTableBodyCellEditTextFieldProps instanceof Function ? cell.column.muiTableBodyCellEditTextFieldProps(cell) : cell.column.muiTableBodyCellEditTextFieldProps;
-
-  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps);
-
-  if (!cell.column.disableEditing && cell.column.Edit) {
-    return React__default.createElement(React__default.Fragment, null, cell.column.Edit(_extends({}, textFieldProps, {
-      cell: cell
-    })));
-  }
-
-  return React__default.createElement(material.TextField, Object.assign({
-    margin: "dense",
-    onChange: handleChange,
-    onClick: function onClick(e) {
-      return e.stopPropagation();
-    },
-    placeholder: cell.column.Header,
-    value: cell.value,
-    variant: "standard"
-  }, textFieldProps));
-};
-
-var MRT_CopyButton = function MRT_CopyButton(_ref) {
-  var cell = _ref.cell,
-      children = _ref.children;
-
-  var _useMRT = useMRT(),
-      localization = _useMRT.localization,
-      muiTableBodyCellCopyButtonProps = _useMRT.muiTableBodyCellCopyButtonProps;
-
-  var _useState = React.useState(false),
-      copied = _useState[0],
-      setCopied = _useState[1];
-
-  var handleCopy = function handleCopy(text) {
-    navigator.clipboard.writeText(text);
-    setCopied(true);
-    setTimeout(function () {
-      return setCopied(false);
-    }, 4000);
-  };
-
-  var mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function ? muiTableBodyCellCopyButtonProps(cell) : muiTableBodyCellCopyButtonProps;
-  var mcTableBodyCellCopyButtonProps = cell.column.muiTableBodyCellCopyButtonProps instanceof Function ? cell.column.muiTableBodyCellCopyButtonProps(cell) : cell.column.muiTableBodyCellCopyButtonProps;
-
-  var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
-
-  return React__default.createElement(material.Tooltip, {
-    arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    placement: "top",
-    title: copied ? localization.copiedToClipboard : localization.clickToCopy
-  }, React__default.createElement(material.Button, Object.assign({
-    "aria-label": localization.clickToCopy,
-    onClick: function onClick() {
-      return handleCopy(cell.value);
-    },
-    size: "small"
-  }, buttonProps, {
-    sx: _extends({
-      backgroundColor: 'transparent',
-      border: 'none',
-      color: 'inherit',
-      fontFamily: 'inherit',
-      fontSize: 'inherit',
-      letterSpacing: 'inherit',
-      m: '-0.25rem',
-      minWidth: 'unset',
-      textAlign: 'inherit',
-      textTransform: 'inherit'
-    }, buttonProps == null ? void 0 : buttonProps.sx),
-    variant: "text"
-  }), children));
-};
-
-var commonTableBodyCellStyles = function commonTableBodyCellStyles(densePadding) {
-  return {
-    p: densePadding ? '0.5rem' : '1rem',
-    transition: 'all 0.2s ease-in-out',
-    whiteSpace: densePadding ? 'nowrap' : 'normal'
-  };
-};
-var commonTableBodyButtonCellStyles = function commonTableBodyButtonCellStyles(densePadding) {
-  return {
-    p: densePadding ? '1px' : '0.6rem',
-    textAlign: 'center',
-    transition: 'all 0.2s ease-in-out'
-  };
-};
-var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
-  var cell = _ref.cell;
-
-  var _useMRT = useMRT(),
-      enableClickToCopy = _useMRT.enableClickToCopy,
-      isLoading = _useMRT.isLoading,
-      muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
-      muiTableBodyCellSkeletonProps = _useMRT.muiTableBodyCellSkeletonProps,
-      onCellClick = _useMRT.onCellClick,
-      _useMRT$tableInstance = _useMRT.tableInstance.state,
-      currentEditingRow = _useMRT$tableInstance.currentEditingRow,
-      densePadding = _useMRT$tableInstance.densePadding;
-
-  var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
-  var mcTableCellBodyProps = cell.column.muiTableBodyCellProps instanceof Function ? cell.column.muiTableBodyCellProps(cell) : cell.column.muiTableBodyCellProps;
-
-  var tableCellProps = _extends({}, mTableCellBodyProps, mcTableCellBodyProps, cell.getCellProps(), {
-    style: _extends({}, cell.getCellProps().style, mTableCellBodyProps == null ? void 0 : mTableCellBodyProps.style, mcTableCellBodyProps == null ? void 0 : mcTableCellBodyProps.style)
-  });
-
-  return React__default.createElement(material.TableCell, Object.assign({
-    onClick: function onClick(event) {
-      return onCellClick == null ? void 0 : onCellClick(event, cell);
-    }
-  }, tableCellProps, {
-    sx: _extends({}, commonTableBodyCellStyles(densePadding), tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), isLoading ? React__default.createElement(material.Skeleton, Object.assign({
-    animation: "wave",
-    height: 20,
-    width: Math.random() * (120 - 60) + 60
-  }, muiTableBodyCellSkeletonProps)) : !cell.column.disableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === cell.row.id ? React__default.createElement(MRT_EditCellTextField, {
-    cell: cell
-  }) : cell.isPlaceholder ? null : cell.isAggregated ? enableClickToCopy && !cell.column.disableClickToCopy ? React__default.createElement(MRT_CopyButton, {
-    cell: cell
-  }, cell.render('Aggregated')) : cell.render('Aggregated') : cell.isGrouped ? React__default.createElement("span", null, cell.render('Cell'), " (", cell.row.subRows.length, ")") : enableClickToCopy && !cell.column.disableClickToCopy ? React__default.createElement(MRT_CopyButton, {
-    cell: cell
-  }, cell.render('Cell')) : cell.render('Cell'));
-};
-
-var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
-  var row = _ref.row;
-
-  var _useMRT = useMRT(),
-      muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
-      muiTableDetailPanelProps = _useMRT.muiTableDetailPanelProps,
-      onDetailPanelClick = _useMRT.onDetailPanelClick,
-      renderDetailPanel = _useMRT.renderDetailPanel,
-      tableInstance = _useMRT.tableInstance;
-
-  var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
-  var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
-  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
-    colSpan: tableInstance.visibleColumns.length + 10,
-    onClick: function onClick(event) {
-      return onDetailPanelClick == null ? void 0 : onDetailPanelClick(event, row);
-    }
-  }, tableCellProps, {
-    sx: _extends({
-      borderBottom: !row.isExpanded ? 'none' : undefined,
-      pb: row.isExpanded ? '1rem' : 0,
-      pt: row.isExpanded ? '1rem' : 0,
-      transition: 'all 0.2s ease-in-out'
-    }, tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), React__default.createElement(material.Collapse, {
-    "in": row.isExpanded
-  }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
-};
-
-var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
-  var row = _ref.row;
-
-  var _useMRT = useMRT(),
-      ExpandMoreIcon = _useMRT.icons.ExpandMoreIcon,
-      localization = _useMRT.localization,
-      onRowExpandChange = _useMRT.onRowExpandChange,
-      renderDetailPanel = _useMRT.renderDetailPanel;
-
-  var handleToggleExpand = function handleToggleExpand(event) {
-    var _row$getToggleRowExpa;
-
-    // @ts-ignore
-    (_row$getToggleRowExpa = row.getToggleRowExpandedProps()) == null ? void 0 : _row$getToggleRowExpa.onClick(event);
-    onRowExpandChange == null ? void 0 : onRowExpandChange(event, row);
-  };
-
-  return React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.expand,
-    disabled: !row.canExpand && !renderDetailPanel,
-    title: localization.expand
-  }, row.getToggleRowExpandedProps(), {
-    onClick: handleToggleExpand
-  }), React__default.createElement(ExpandMoreIcon, {
-    style: {
-      transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
-      transition: 'transform 0.2s'
-    }
-  }));
-};
-
-var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
-  var _renderRowActionMenuI;
-
-  var anchorEl = _ref.anchorEl,
-      row = _ref.row,
-      handleEdit = _ref.handleEdit,
-      setAnchorEl = _ref.setAnchorEl;
-
-  var _useMRT = useMRT(),
-      EditIcon = _useMRT.icons.EditIcon,
-      enableRowEditing = _useMRT.enableRowEditing,
-      localization = _useMRT.localization,
-      renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
-      tableInstance = _useMRT.tableInstance;
-
-  return React__default.createElement(material.Menu, {
-    anchorEl: anchorEl,
-    open: !!anchorEl,
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    },
-    MenuListProps: {
-      dense: tableInstance.state.densePadding
-    }
-  }, enableRowEditing && React__default.createElement(material.MenuItem, {
-    onClick: handleEdit,
-    sx: commonMenuItemStyles$1
-  }, React__default.createElement(material.Box, {
-    sx: commonListItemStyles
-  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), localization.edit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
-    return setAnchorEl(null);
-  })) != null ? _renderRowActionMenuI : null);
-};
-
-function createCommonjsModule(fn, module) {
-	return module = { exports: {} }, fn(module, module.exports), module.exports;
-}
+function createCommonjsModule(fn, module) {
+	return module = { exports: {} }, fn(module, module.exports), module.exports;
+}
 
 var runtime_1 = createCommonjsModule(function (module) {
 /**
@@ -2371,30 +1740,34 @@ try {
 });
 
 var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
-  var row = _ref.row;
-
-  var _useMRT = useMRT(),
-      _useMRT$icons = _useMRT.icons,
-      CancelIcon = _useMRT$icons.CancelIcon,
-      SaveIcon = _useMRT$icons.SaveIcon,
-      localization = _useMRT.localization,
-      onRowEditSubmit = _useMRT.onRowEditSubmit,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
-      currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
+  var row = _ref.row,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      CancelIcon = _tableInstance$option2.CancelIcon,
+      SaveIcon = _tableInstance$option2.SaveIcon,
+      localization = _tableInstance$option.localization,
+      onRowEditSubmit = _tableInstance$option.onRowEditSubmit,
+      setCurrentEditingRow = _tableInstance$option.setCurrentEditingRow;
 
   var handleCancel = function handleCancel() {
-    row.values = row.original;
+    var _row$original;
+
+    row.values = (_row$original = row.original) != null ? _row$original : {};
     setCurrentEditingRow(null);
   };
 
   var handleSave = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/runtime_1.mark(function _callee() {
+      var _getState$currentEdit;
+
       return runtime_1.wrap(function _callee$(_context) {
         while (1) {
           switch (_context.prev = _context.next) {
             case 0:
               _context.next = 2;
-              return onRowEditSubmit == null ? void 0 : onRowEditSubmit(currentEditingRow != null ? currentEditingRow : row);
+              return onRowEditSubmit == null ? void 0 : onRowEditSubmit((_getState$currentEdit = getState().currentEditingRow) != null ? _getState$currentEdit : row);
 
             case 2:
               setCurrentEditingRow(null);
@@ -2433,823 +1806,1859 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
   }, React__default.createElement(SaveIcon, null))));
 };
 
-var commonIconButtonStyles = {
-  opacity: 0.5,
-  transition: 'opacity 0.2s',
-  marginRight: '2px',
-  height: '2rem',
-  width: '2rem',
-  '&:hover': {
-    opacity: 1
-  }
+var commonIconButtonStyles = {
+  height: '2rem',
+  ml: '10px',
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  width: '2rem',
+  '&:hover': {
+    opacity: 1
+  }
+};
+var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
+  var row = _ref.row,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      enableRowEditing = _tableInstance$option.enableRowEditing,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      EditIcon = _tableInstance$option2.EditIcon,
+      MoreHorizIcon = _tableInstance$option2.MoreHorizIcon,
+      localization = _tableInstance$option.localization,
+      renderRowActionMenuItems = _tableInstance$option.renderRowActionMenuItems,
+      renderRowActions = _tableInstance$option.renderRowActions,
+      setCurrentEditingRow = _tableInstance$option.setCurrentEditingRow;
+
+  var _getState = getState(),
+      currentEditingRow = _getState.currentEditingRow;
+
+  var _useState = React.useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleOpenRowActionMenu = function handleOpenRowActionMenu(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleEdit = function handleEdit() {
+    setCurrentEditingRow(_extends({}, row));
+    setAnchorEl(null);
+  };
+
+  return React__default.createElement(React__default.Fragment, null, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions(row, tableInstance)) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React__default.createElement(MRT_EditActionButtons, {
+    row: row,
+    tableInstance: tableInstance
+  }) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
+    placement: "right",
+    arrow: true,
+    title: localization.edit
+  }, React__default.createElement(material.IconButton, {
+    sx: commonIconButtonStyles,
+    onClick: handleEdit
+  }, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.rowActions
+  }, React__default.createElement(material.IconButton, {
+    "aria-label": localization.rowActions,
+    onClick: handleOpenRowActionMenu,
+    size: "small",
+    sx: commonIconButtonStyles
+  }, React__default.createElement(MoreHorizIcon, null))), React__default.createElement(MRT_RowActionMenu, {
+    anchorEl: anchorEl,
+    handleEdit: handleEdit,
+    row: row,
+    setAnchorEl: setAnchorEl,
+    tableInstance: tableInstance
+  })) : null);
+};
+
+var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
+  var row = _ref.row,
+      selectAll = _ref.selectAll,
+      tableInstance = _ref.tableInstance;
+  var getRowModel = tableInstance.getRowModel,
+      getSelectedRowModel = tableInstance.getSelectedRowModel,
+      getState = tableInstance.getState,
+      getToggleAllRowsSelectedProps = tableInstance.getToggleAllRowsSelectedProps,
+      _tableInstance$option = tableInstance.options,
+      isLoading = _tableInstance$option.isLoading,
+      localization = _tableInstance$option.localization,
+      muiSelectCheckboxProps = _tableInstance$option.muiSelectCheckboxProps,
+      onSelectChange = _tableInstance$option.onSelectChange,
+      onSelectAllChange = _tableInstance$option.onSelectAllChange;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
+
+  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);
+      onSelectAllChange == null ? void 0 : onSelectAllChange(event, event.target.checked ? getRowModel().flatRows : []);
+    } 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);
+      onSelectChange == null ? void 0 : onSelectChange(event, row, event.target.checked ? [].concat(getSelectedRowModel().flatRows, [row]) : getSelectedRowModel().flatRows.filter(function (selectedRow) {
+        return selectedRow.id !== row.id;
+      }));
+    }
+  };
+
+  var mTableBodyRowSelectCheckboxProps = muiSelectCheckboxProps instanceof Function ? muiSelectCheckboxProps(selectAll, row, tableInstance) : muiSelectCheckboxProps;
+  var rtSelectCheckboxProps = selectAll ? getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleSelectedProps();
+
+  var checkboxProps = _extends({}, rtSelectCheckboxProps, mTableBodyRowSelectCheckboxProps);
+
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+  }, React__default.createElement(material.Checkbox, Object.assign({
+    disabled: isLoading,
+    inputProps: {
+      'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+    },
+    size: isDensePadding ? 'small' : 'medium'
+  }, checkboxProps, {
+    sx: {
+      height: isDensePadding ? '1.75rem' : '2.25rem',
+      width: isDensePadding ? '1.75rem' : '2.25rem'
+    },
+    onChange: handleSelectChange,
+    title: undefined
+  })));
+};
+
+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,
+      onGlobalFilterChange = _tableInstance$option.onGlobalFilterChange;
+
+  var _getState = getState(),
+      globalFilter = _getState.globalFilter,
+      showSearch = _getState.showSearch;
+
+  var _useState = React.useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var _useState2 = React.useState(globalFilter != null ? globalFilter : ''),
+      searchValue = _useState2[0],
+      setSearchValue = _useState2[1];
+
+  var handleChange = React.useCallback(material.debounce(function (event) {
+    var _event$target$value;
+
+    setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+    onGlobalFilterChange == null ? void 0 : onGlobalFilterChange(event);
+  }, 200), []);
+
+  var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
+  var handleClear = function handleClear() {
+    setSearchValue('');
+    setGlobalFilter(undefined);
+  };
+
+  return React__default.createElement(material.Collapse, {
+    "in": showSearch,
+    orientation: "horizontal"
+  }, React__default.createElement(material.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__default.createElement(material.InputAdornment, {
+        position: "start"
+      }, React__default.createElement(material.Tooltip, {
+        arrow: true,
+        title: localization.changeSearchMode
+      }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
+        "aria-label": localization.changeSearchMode,
+        onClick: handleGlobalFilterMenuOpen,
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
+      }, React__default.createElement(SearchIcon, {
+        fontSize: "small"
+      }))))),
+      endAdornment: React__default.createElement(material.InputAdornment, {
+        position: "end"
+      }, React__default.createElement(material.IconButton, {
+        "aria-label": localization.clearSearch,
+        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
+        onClick: handleClear,
+        size: "small",
+        title: localization.clearSearch
+      }, React__default.createElement(CloseIcon, {
+        fontSize: "small"
+      })))
+    }
+  }, muiSearchTextFieldProps, {
+    sx: _extends({
+      justifySelf: 'end'
+    }, muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.sx)
+  })), React__default.createElement(MRT_FilterTypeMenu, {
+    anchorEl: anchorEl,
+    setAnchorEl: setAnchorEl,
+    tableInstance: tableInstance
+  }));
+};
+
+var _excluded = ["tableInstance"];
+var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
+  var tableInstance = _ref.tableInstance,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
+
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      FullscreenExitIcon = _tableInstance$option2.FullscreenExitIcon,
+      FullscreenIcon = _tableInstance$option2.FullscreenIcon,
+      localization = _tableInstance$option.localization,
+      setIsFullScreen = _tableInstance$option.setIsFullScreen;
+
+  var _getState = getState(),
+      isFullScreen = _getState.isFullScreen;
+
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.toggleFullScreen
+  }, React__default.createElement(material.IconButton, Object.assign({
+    "aria-label": localization.showHideFilters,
+    onClick: function onClick() {
+      return setIsFullScreen(!isFullScreen);
+    },
+    size: "small"
+  }, rest), isFullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
 };
-var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
-  var _tableInstance$state$;
 
-  var row = _ref.row;
+var _excluded$1 = ["tableInstance"];
+var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
+  var tableInstance = _ref.tableInstance,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
 
-  var _useMRT = useMRT(),
-      enableRowEditing = _useMRT.enableRowEditing,
-      _useMRT$icons = _useMRT.icons,
-      EditIcon = _useMRT$icons.EditIcon,
-      MoreHorizIcon = _useMRT$icons.MoreHorizIcon,
-      localization = _useMRT.localization,
-      renderRowActionMenuItems = _useMRT.renderRowActionMenuItems,
-      renderRowActions = _useMRT.renderRowActions,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
-      tableInstance = _useMRT.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      ViewColumnIcon = _tableInstance$option.icons.ViewColumnIcon,
+      localization = _tableInstance$option.localization;
 
   var _useState = React.useState(null),
       anchorEl = _useState[0],
       setAnchorEl = _useState[1];
 
-  var handleOpenRowActionMenu = function handleOpenRowActionMenu(event) {
-    event.stopPropagation();
-    event.preventDefault();
+  var handleClick = function handleClick(event) {
     setAnchorEl(event.currentTarget);
   };
 
-  var handleEdit = function handleEdit() {
-    setCurrentEditingRow(_extends({}, row));
-    setAnchorEl(null);
-  };
-
-  return React__default.createElement(material.TableCell, {
-    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
-  }, renderRowActions ? React__default.createElement(React__default.Fragment, null, renderRowActions(row, tableInstance)) : row.id === ((_tableInstance$state$ = tableInstance.state.currentEditingRow) == null ? void 0 : _tableInstance$state$.id) ? React__default.createElement(MRT_EditActionButtons, {
-    row: row
-  }) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
-    placement: "right",
-    arrow: true,
-    title: localization.edit
-  }, React__default.createElement(material.IconButton, {
-    sx: commonIconButtonStyles,
-    onClick: handleEdit
-  }, React__default.createElement(EditIcon, null))) : renderRowActionMenuItems ? React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
     arrow: true,
-    enterDelay: 1000,
-    enterNextDelay: 1000,
-    title: localization.rowActions
-  }, React__default.createElement(material.IconButton, {
-    "aria-label": localization.rowActions,
-    onClick: handleOpenRowActionMenu,
-    size: "small",
-    sx: commonIconButtonStyles
-  }, React__default.createElement(MoreHorizIcon, null))), React__default.createElement(MRT_RowActionMenu, {
+    title: localization.showHideColumns
+  }, React__default.createElement(material.IconButton, Object.assign({
+    "aria-label": localization.showHideColumns,
+    onClick: handleClick,
+    size: "small"
+  }, rest), React__default.createElement(ViewColumnIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
     anchorEl: anchorEl,
-    handleEdit: handleEdit,
-    row: row,
-    setAnchorEl: setAnchorEl
-  })) : null);
+    setAnchorEl: setAnchorEl,
+    tableInstance: tableInstance
+  }));
 };
 
-var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
-  var row = _ref.row;
-
-  var _useMRT = useMRT(),
-      anyRowsCanExpand = _useMRT.anyRowsCanExpand,
-      enableRowActions = _useMRT.enableRowActions,
-      enableRowEditing = _useMRT.enableRowEditing,
-      enableRowNumbers = _useMRT.enableRowNumbers,
-      enableSelection = _useMRT.enableSelection,
-      muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
-      onRowClick = _useMRT.onRowClick,
-      positionActionsColumn = _useMRT.positionActionsColumn,
-      renderDetailPanel = _useMRT.renderDetailPanel,
-      tableInstance = _useMRT.tableInstance,
-      densePadding = _useMRT.tableInstance.state.densePadding;
+var _excluded$2 = ["tableInstance"];
+var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
+  var tableInstance = _ref.tableInstance,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
 
-  var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      DensityMediumIcon = _tableInstance$option2.DensityMediumIcon,
+      DensitySmallIcon = _tableInstance$option2.DensitySmallIcon,
+      localization = _tableInstance$option.localization,
+      setIsDensePadding = _tableInstance$option.setIsDensePadding;
 
-  var tableRowProps = _extends({}, mTableBodyRowProps, row.getRowProps(), {
-    style: _extends({}, row.getRowProps().style, mTableBodyRowProps == null ? void 0 : mTableBodyRowProps.style)
-  });
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
 
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
-    hover: true,
-    onClick: function onClick(event) {
-      return onRowClick == null ? void 0 : onRowClick(event, row);
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.toggleDensePadding
+  }, React__default.createElement(material.IconButton, Object.assign({
+    "aria-label": localization.toggleDensePadding,
+    onClick: function onClick() {
+      return setIsDensePadding(!isDensePadding);
     },
-    selected: row.isSelected
-  }, tableRowProps), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
-    row: row
-  }), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(material.TableCell, {
-    size: "small",
-    sx: _extends({}, commonTableBodyButtonCellStyles(densePadding), {
-      pl: row.depth + 0.5 + "rem",
-      textAlign: 'left'
-    })
-  }, React__default.createElement(MRT_ExpandButton, {
-    row: row
-  })), enableSelection && React__default.createElement(material.TableCell, {
-    sx: _extends({}, commonTableBodyButtonCellStyles(tableInstance.state.densePadding), {
-      maxWidth: '3rem',
-      width: '3rem'
-    })
-  }, React__default.createElement(MRT_SelectCheckbox, {
-    row: row
-  })), enableRowNumbers && React__default.createElement(material.TableCell, {
-    sx: _extends({}, commonTableBodyCellStyles(densePadding))
-  }, row.index + 1), row.cells.map(function (cell) {
-    return React__default.createElement(MRT_TableBodyCell, {
-      key: cell.getCellProps().key,
-      cell: cell
-    });
-  }), (enableRowActions || enableRowEditing) && positionActionsColumn === 'last' && React__default.createElement(MRT_ToggleRowActionMenuButton, {
-    row: row
-  })), renderDetailPanel && !row.isGrouped && React__default.createElement(MRT_TableDetailPanel, {
-    row: row
-  }));
+    size: "small"
+  }, rest), isDensePadding ? React__default.createElement(DensitySmallIcon, null) : React__default.createElement(DensityMediumIcon, null)));
 };
 
-var MRT_TableBody = function MRT_TableBody() {
-  var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      muiTableBodyProps = _useMRT.muiTableBodyProps,
-      manualPagination = _useMRT.manualPagination;
+var _excluded$3 = ["tableInstance"];
+var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
+  var tableInstance = _ref.tableInstance,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
 
-  var rows = manualPagination ? tableInstance.rows : tableInstance.page;
-  var mTableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps(tableInstance) : muiTableBodyProps;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      FilterListIcon = _tableInstance$option2.FilterListIcon,
+      FilterListOffIcon = _tableInstance$option2.FilterListOffIcon,
+      localization = _tableInstance$option.localization,
+      setShowFilters = _tableInstance$option.setShowFilters;
 
-  var tableBodyProps = _extends({}, mTableBodyProps, tableInstance.getTableBodyProps(), {
-    style: _extends({}, tableInstance.getTableBodyProps().style, mTableBodyProps == null ? void 0 : mTableBodyProps.style)
-  });
+  var _getState = getState(),
+      showFilters = _getState.showFilters;
 
-  return React__default.createElement(material.TableBody, Object.assign({}, tableBodyProps, {
-    sx: _extends({}, tableBodyProps == null ? void 0 : tableBodyProps.sx)
-  }), rows.map(function (row) {
-    tableInstance.prepareRow(row);
-    return React__default.createElement(MRT_TableBodyRow, {
-      key: row.getRowProps().key,
-      row: row
-    });
-  }));
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.showHideFilters
+  }, React__default.createElement(material.IconButton, Object.assign({
+    "aria-label": localization.showHideFilters,
+    onClick: function onClick() {
+      return setShowFilters(!showFilters);
+    },
+    size: "small"
+  }, rest), showFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
 };
 
-var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
-  var _column$columns;
+var _excluded$4 = ["tableInstance"];
+var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
+  var tableInstance = _ref.tableInstance,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
+
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      SearchIcon = _tableInstance$option2.SearchIcon,
+      SearchOffIcon = _tableInstance$option2.SearchOffIcon,
+      idPrefix = _tableInstance$option.idPrefix,
+      localization = _tableInstance$option.localization,
+      muiSearchTextFieldProps = _tableInstance$option.muiSearchTextFieldProps,
+      setShowSearch = _tableInstance$option.setShowSearch;
+
+  var _getState = getState(),
+      showSearch = _getState.showSearch;
 
-  var column = _ref.column;
+  var handleToggleSearch = function handleToggleSearch() {
+    setShowSearch(!showSearch);
+    setTimeout(function () {
+      var _document$getElementB, _muiSearchTextFieldPr;
 
-  var _useMRT = useMRT(),
-      muiTableFooterCellProps = _useMRT.muiTableFooterCellProps,
-      enableColumnResizing = _useMRT.enableColumnResizing,
-      densePadding = _useMRT.tableInstance.state.densePadding;
+      return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "mrt-" + idPrefix + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
+    }, 200);
+  };
 
-  var isParentHeader = !!(column != null && (_column$columns = column.columns) != null && _column$columns.length);
-  var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps(column) : muiTableFooterCellProps;
-  var mcTableFooterCellProps = column.muiTableFooterCellProps instanceof Function ? column.muiTableFooterCellProps(column) : column.muiTableFooterCellProps;
+  return React__default.createElement(material.Tooltip, {
+    arrow: true,
+    title: localization.showHideSearch
+  }, React__default.createElement(material.IconButton, Object.assign({
+    size: "small",
+    onClick: handleToggleSearch
+  }, rest), showSearch ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
+};
 
-  var tableCellProps = _extends({}, mTableFooterCellProps, mcTableFooterCellProps, column.getFooterProps(), {
-    style: _extends({}, column.getFooterProps().style, mTableFooterCellProps == null ? void 0 : mTableFooterCellProps.style, mcTableFooterCellProps == null ? void 0 : mcTableFooterCellProps.style)
-  });
+var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      enableColumnFilters = _tableInstance$option.enableColumnFilters,
+      enableHiding = _tableInstance$option.enableHiding,
+      enableDensePaddingToggle = _tableInstance$option.enableDensePaddingToggle,
+      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
+      enableFullScreenToggle = _tableInstance$option.enableFullScreenToggle,
+      renderToolbarInternalActions = _tableInstance$option.renderToolbarInternalActions;
 
-  return React__default.createElement(material.TableCell, Object.assign({
-    align: isParentHeader ? 'center' : 'left',
-    variant: "head"
-  }, tableCellProps, {
+  if (renderToolbarInternalActions) {
+    return React__default.createElement(React__default.Fragment, null, renderToolbarInternalActions(tableInstance, {
+      MRT_ToggleSearchButton: MRT_ToggleSearchButton,
+      MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
+      MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
+      MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
+      MRT_FullScreenToggleButton: MRT_FullScreenToggleButton
+    }));
+  }
+
+  return React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      gap: '0.5rem',
+      alignItems: 'center',
+      p: '0 0.5rem'
+    }
+  }, enableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, {
+    tableInstance: tableInstance
+  }), enableColumnFilters && React__default.createElement(MRT_ToggleFiltersButton, {
+    tableInstance: tableInstance
+  }), enableHiding && React__default.createElement(MRT_ShowHideColumnsButton, {
+    tableInstance: tableInstance
+  }), enableDensePaddingToggle && React__default.createElement(MRT_ToggleDensePaddingButton, {
+    tableInstance: tableInstance
+  }), enableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, {
+    tableInstance: tableInstance
+  }));
+};
+
+var MRT_TablePagination = function MRT_TablePagination(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var getPrePaginationRowModel = tableInstance.getPrePaginationRowModel,
+      getState = tableInstance.getState,
+      setPageIndex = tableInstance.setPageIndex,
+      setPageSize = tableInstance.setPageSize,
+      muiTablePaginationProps = tableInstance.options.muiTablePaginationProps;
+
+  var _getState = getState(),
+      _getState$pagination = _getState.pagination,
+      _getState$pagination$ = _getState$pagination.pageSize,
+      pageSize = _getState$pagination$ === void 0 ? 10 : _getState$pagination$,
+      _getState$pagination$2 = _getState$pagination.pageIndex,
+      pageIndex = _getState$pagination$2 === void 0 ? 0 : _getState$pagination$2;
+
+  var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps(tableInstance) : muiTablePaginationProps;
+
+  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
+    setPageSize(+event.target.value);
+  };
+
+  var showFirstLastPageButtons = getPrePaginationRowModel().rows.length / pageSize > 2;
+  return React__default.createElement(material.TablePagination, Object.assign({
+    component: "div",
+    count: getPrePaginationRowModel().rows.length,
+    onPageChange: function onPageChange(_, newPage) {
+      return setPageIndex(newPage);
+    },
+    onRowsPerPageChange: handleChangeRowsPerPage,
+    page: pageIndex,
+    rowsPerPage: pageSize,
+    SelectProps: {
+      sx: {
+        m: '0 1rem 0 1ch'
+      }
+    },
+    showFirstButton: showFirstLastPageButtons,
+    showLastButton: showFirstLastPageButtons
+  }, tablePaginationProps, {
     sx: _extends({
-      fontWeight: 'bold',
-      verticalAlign: 'text-top',
-      p: densePadding ? '0.5rem' : '1rem',
-      transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out"
-    }, tableCellProps == null ? void 0 : tableCellProps.sx)
-  }), column.render('Footer'));
+      m: '0 0.5rem',
+      position: 'relative',
+      zIndex: 2
+    }, tablePaginationProps == null ? void 0 : tablePaginationProps.sx)
+  }));
 };
 
-var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
-  var footerGroup = _ref.footerGroup;
-
-  var _useMRT = useMRT(),
-      anyRowsCanExpand = _useMRT.anyRowsCanExpand,
-      columns = _useMRT.columns,
-      enableRowActions = _useMRT.enableRowActions,
-      enableRowEditing = _useMRT.enableRowEditing,
-      enableRowNumbers = _useMRT.enableRowNumbers,
-      enableSelection = _useMRT.enableSelection,
-      muiTableFooterRowProps = _useMRT.muiTableFooterRowProps,
-      positionActionsColumn = _useMRT.positionActionsColumn,
-      renderDetailPanel = _useMRT.renderDetailPanel,
-      tableInstance = _useMRT.tableInstance; //if no content in row, skip row
-
-
-  if (!(columns != null && columns.some(function (c) {
-    return c.Footer;
-  }))) return null;
-  var mTableFooterRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps(footerGroup) : muiTableFooterRowProps;
+var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner(_ref) {
+  var _localization$selecte, _localization$selecte2;
 
-  var tableRowProps = _extends({}, mTableFooterRowProps, footerGroup.getFooterGroupProps(), {
-    style: _extends({}, footerGroup.getFooterGroupProps().style, mTableFooterRowProps == null ? void 0 : mTableFooterRowProps.style)
-  });
+  var 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;
+
+  var _getState = getState(),
+      grouping = _getState.grouping;
 
-  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), enableRowNumbers && React__default.createElement(MRT_TableSpacerCell, null), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && React__default.createElement(MRT_TableSpacerCell, null), (anyRowsCanExpand || renderDetailPanel) && React__default.createElement(MRT_TableSpacerCell, {
-    width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
-  }), enableSelection && React__default.createElement(MRT_TableSpacerCell, {
-    width: "1rem"
-  }), footerGroup.headers.map(function (column) {
-    return React__default.createElement(MRT_TableFooterCell, {
-      key: column.getFooterProps().key,
-      column: column
-    });
-  }), (enableRowActions || enableRowEditing) && positionActionsColumn === 'last' && React__default.createElement(MRT_TableSpacerCell, null));
+  var isMobile = material.useMediaQuery('(max-width:720px)');
+  var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps(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__default.createElement("span", null, localization.groupedBy, ' ', grouping.map(function (columnId, index) {
+    var _tableInstance$getAll;
+
+    return React__default.createElement(React.Fragment, {
+      key: index + "-" + columnId
+    }, index > 0 ? localization.thenBy : '', React__default.createElement(material.Chip, {
+      color: "secondary",
+      label: (_tableInstance$getAll = tableInstance.getAllColumns().find(function (column) {
+        return column.id === columnId;
+      })) == null ? void 0 : _tableInstance$getAll.header,
+      onDelete: function onDelete() {
+        return toggleColumnGrouping(columnId);
+      }
+    }));
+  })) : null;
+  var displayAbsolute = !(isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
+  return React__default.createElement(material.Collapse, {
+    "in": !!selectMessage || !!groupedByMessage,
+    timeout: displayAbsolute ? 0 : 200
+  }, React__default.createElement(material.Alert, Object.assign({
+    color: "info",
+    icon: false,
+    sx: _extends({
+      borderRadius: 0,
+      fontSize: '1rem',
+      left: 0,
+      p: 0,
+      position: displayAbsolute ? 'absolute' : 'relative',
+      right: 0,
+      minHeight: '3.5rem',
+      top: 0,
+      width: '100%',
+      zIndex: 2
+    }, alertProps == null ? void 0 : alertProps.sx)
+  }, alertProps), React__default.createElement(material.Box, {
+    sx: {
+      p: '0.5rem 1rem'
+    }
+  }, selectMessage, groupedByMessage)));
 };
 
-var MRT_TableFooter = function MRT_TableFooter() {
-  var _useMRT = useMRT(),
-      muiTableFooterProps = _useMRT.muiTableFooterProps,
-      tableInstance = _useMRT.tableInstance;
+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 linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps(tableInstance) : muiLinearProgressProps;
+  return React__default.createElement(material.Collapse, {
+    "in": isReloading || isLoading,
+    unmountOnExit: true
+  }, React__default.createElement(material.LinearProgress, Object.assign({
+    "aria-label": "Loading",
+    "aria-busy": "true"
+  }, linearProgressProps)));
+};
 
-  var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps(tableInstance) : muiTableFooterProps;
-  return React__default.createElement(material.TableFooter, Object.assign({}, tableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
-    return React__default.createElement(MRT_TableFooterRow, {
-      key: footerGroup.getFooterGroupProps().key,
-      footerGroup: footerGroup
-    });
+var commonToolbarStyles = function commonToolbarStyles(_ref) {
+  var theme = _ref.theme;
+  return {
+    backgroundColor: theme.palette.background["default"],
+    backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.alpha(theme.palette.common.white, 0.05) + ")",
+    display: 'grid',
+    p: '0 !important',
+    width: '100%',
+    zIndex: 1
+  };
+};
+var MRT_ToolbarTop = function MRT_ToolbarTop(_ref2) {
+  var _renderToolbarCustomA;
+
+  var tableInstance = _ref2.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      enableGlobalFilter = _tableInstance$option.enableGlobalFilter,
+      enablePagination = _tableInstance$option.enablePagination,
+      hideToolbarInternalActions = _tableInstance$option.hideToolbarInternalActions,
+      idPrefix = _tableInstance$option.idPrefix,
+      muiTableToolbarTopProps = _tableInstance$option.muiTableToolbarTopProps,
+      positionPagination = _tableInstance$option.positionPagination,
+      positionToolbarActions = _tableInstance$option.positionToolbarActions,
+      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner,
+      renderToolbarCustomActions = _tableInstance$option.renderToolbarCustomActions;
+
+  var _getState = getState(),
+      isFullScreen = _getState.isFullScreen;
+
+  var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
+  return React__default.createElement(material.Toolbar, Object.assign({
+    id: "mrt-" + idPrefix + "-toolbar-top",
+    variant: "dense"
+  }, toolbarProps, {
+    sx: function sx(theme) {
+      return _extends({
+        position: isFullScreen ? 'sticky' : undefined,
+        top: isFullScreen ? '0' : undefined
+      }, commonToolbarStyles({
+        theme: theme
+      }), toolbarProps == null ? void 0 : toolbarProps.sx);
+    }
+  }), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, {
+    tableInstance: tableInstance
+  }), React__default.createElement(material.Box, {
+    sx: {
+      p: '0.5rem',
+      display: 'flex',
+      justifyContent: 'space-between'
+    }
+  }, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React__default.createElement("span", null), React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      gap: '0.5rem',
+      position: 'relative',
+      zIndex: 3
+    }
+  }, enableGlobalFilter && React__default.createElement(MRT_SearchTextField, {
+    tableInstance: tableInstance
+  }), !hideToolbarInternalActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, {
+    tableInstance: tableInstance
+  }))), React__default.createElement("div", null, enablePagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
+    tableInstance: tableInstance
+  })), React__default.createElement(MRT_LinearProgressBar, {
+    tableInstance: tableInstance
   }));
 };
 
-var MRT_Table = function MRT_Table() {
-  var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      muiTableProps = _useMRT.muiTableProps,
-      hideTableHead = _useMRT.hideTableHead,
-      hideTableFooter = _useMRT.hideTableFooter;
+var MRT_ToolbarBottom = function MRT_ToolbarBottom(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      hideToolbarInternalActions = _tableInstance$option.hideToolbarInternalActions,
+      idPrefix = _tableInstance$option.idPrefix,
+      enablePagination = _tableInstance$option.enablePagination,
+      muiTableToolbarBottomProps = _tableInstance$option.muiTableToolbarBottomProps,
+      positionPagination = _tableInstance$option.positionPagination,
+      positionToolbarActions = _tableInstance$option.positionToolbarActions,
+      positionToolbarAlertBanner = _tableInstance$option.positionToolbarAlertBanner;
 
-  var mTableProps = muiTableProps instanceof Function ? muiTableProps(tableInstance) : muiTableProps;
-
-  var tableProps = _extends({}, mTableProps, tableInstance.getTableProps(), {
-    style: _extends({}, tableInstance.getTableProps().style, mTableProps == null ? void 0 : mTableProps.style)
-  });
+  var _getState = getState(),
+      isFullScreen = _getState.isFullScreen;
 
-  return React__default.createElement(material.Table, Object.assign({}, tableProps), !hideTableHead && React__default.createElement(MRT_TableHead, null), React__default.createElement(MRT_TableBody, null), !hideTableFooter && React__default.createElement(MRT_TableFooter, null));
+  var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
+  return React__default.createElement(material.Toolbar, Object.assign({
+    id: "mrt-" + idPrefix + "-toolbar-bottom",
+    variant: "dense"
+  }, toolbarProps, {
+    sx: function sx(theme) {
+      return _extends({}, commonToolbarStyles({
+        theme: theme
+      }), {
+        bottom: isFullScreen ? '0' : undefined,
+        position: isFullScreen ? 'fixed' : undefined,
+        boxShadow: "-3px 0 6px " + material.alpha(theme.palette.common.black, 0.1)
+      }, toolbarProps == null ? void 0 : toolbarProps.sx);
+    }
+  }), React__default.createElement(MRT_LinearProgressBar, {
+    tableInstance: tableInstance
+  }), React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: 'space-between',
+      width: '100%'
+    }
+  }, !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, {
+    tableInstance: tableInstance
+  }) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, {
+    tableInstance: tableInstance
+  }), enablePagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, {
+    tableInstance: tableInstance
+  })));
 };
 
-var MRT_SearchTextField = function MRT_SearchTextField() {
-  var _useMRT = useMRT(),
-      _useMRT$icons = _useMRT.icons,
-      SearchIcon = _useMRT$icons.SearchIcon,
-      CloseIcon = _useMRT$icons.CloseIcon,
-      idPrefix = _useMRT.idPrefix,
-      localization = _useMRT.localization,
-      muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
-      onGlobalFilterChange = _useMRT.onGlobalFilterChange,
-      tableInstance = _useMRT.tableInstance;
+var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
+  var _column$getColumnFilt, _localization$filterB, _localization$filterM, _localization$, _localization$clearFi, _column$filterSelectO;
+
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      FilterListIcon = _tableInstance$option2.FilterListIcon,
+      CloseIcon = _tableInstance$option2.CloseIcon,
+      idPrefix = _tableInstance$option.idPrefix,
+      localization = _tableInstance$option.localization,
+      muiTableHeadCellFilterTextFieldProps = _tableInstance$option.muiTableHeadCellFilterTextFieldProps,
+      setCurrentFilterTypes = _tableInstance$option.setCurrentFilterTypes;
+  var column = header.column;
+
+  var _getState = getState(),
+      currentFilterTypes = _getState.currentFilterTypes;
 
   var _useState = React.useState(null),
       anchorEl = _useState[0],
       setAnchorEl = _useState[1];
 
-  var _useState2 = React.useState(''),
-      searchValue = _useState2[0],
-      setSearchValue = _useState2[1];
+  var mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function ? muiTableHeadCellFilterTextFieldProps(column) : muiTableHeadCellFilterTextFieldProps;
+  var mcTableHeadCellFilterTextFieldProps = column.muiTableHeadCellFilterTextFieldProps instanceof Function ? column.muiTableHeadCellFilterTextFieldProps(column) : column.muiTableHeadCellFilterTextFieldProps;
+
+  var textFieldProps = _extends({}, mTableHeadCellFilterTextFieldProps, mcTableHeadCellFilterTextFieldProps);
+
+  var _useState2 = React.useState((_column$getColumnFilt = column.getColumnFilterValue()) != null ? _column$getColumnFilt : ''),
+      filterValue = _useState2[0],
+      setFilterValue = _useState2[1];
 
-  var handleChange = reactTable.useAsyncDebounce(function (event) {
+  var handleChange = React.useCallback(material.debounce(function (event) {
     var _event$target$value;
 
-    tableInstance.setGlobalFilter((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
-    onGlobalFilterChange == null ? void 0 : onGlobalFilterChange(event);
-  }, 200);
+    return column.setColumnFilterValue((_event$target$value = event.target.value) != null ? _event$target$value : undefined);
+  }, 150), []);
 
-  var handleGlobalFilterMenuOpen = function handleGlobalFilterMenuOpen(event) {
+  var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
     setAnchorEl(event.currentTarget);
   };
 
   var handleClear = function handleClear() {
-    setSearchValue('');
-    tableInstance.setGlobalFilter(undefined);
+    setFilterValue('');
+    column.setColumnFilterValue(undefined);
   };
 
-  return React__default.createElement(material.Collapse, {
-    "in": tableInstance.state.showSearch,
-    orientation: "horizontal"
-  }, React__default.createElement(material.TextField, Object.assign({
-    id: "mrt-" + idPrefix + "-search-text-field",
-    placeholder: localization.search,
+  var handleClearFilterChip = function handleClearFilterChip() {
+    setFilterValue('');
+    column.setColumnFilterValue(undefined);
+    setCurrentFilterTypes(function (prev) {
+      var _extends2;
+
+      return _extends({}, prev, (_extends2 = {}, _extends2[header.id] = MRT_FILTER_TYPE.BEST_MATCH, _extends2));
+    });
+  };
+
+  if (column.Filter) {
+    return React__default.createElement(React__default.Fragment, null, column.Filter == null ? void 0 : column.Filter({
+      header: header,
+      tableInstance: tableInstance
+    }));
+  }
+
+  var filterId = "mrt-" + idPrefix + "-" + header.id + "-filter-text-field";
+  var filterType = currentFilterTypes == null ? void 0 : currentFilterTypes[header.id];
+  var isSelectFilter = !!column.filterSelectOptions;
+  var filterChipLabel = !(filterType instanceof Function) && [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType) ? //@ts-ignore
+  localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))] : '';
+  var filterPlaceholder = (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.header));
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TextField, Object.assign({
+    fullWidth: true,
+    id: filterId,
+    inputProps: {
+      disabled: !!filterChipLabel,
+      sx: {
+        textOverflow: 'ellipsis',
+        width: filterChipLabel ? 0 : undefined
+      },
+      title: filterPlaceholder
+    },
+    helperText: React__default.createElement("label", {
+      htmlFor: filterId
+    }, filterType instanceof Function ? (_localization$filterM = localization.filterMode.replace('{filterType}', // @ts-ignore
+    (_localization$ = localization["filter" + (filterType.name.charAt(0).toUpperCase() + filterType.name.slice(1))]) != null ? _localization$ : '')) != null ? _localization$filterM : '' : localization.filterMode.replace('{filterType}', // @ts-ignore
+    localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))])),
+    FormHelperTextProps: {
+      sx: {
+        fontSize: '0.6rem',
+        lineHeight: '0.8rem'
+      }
+    },
+    label: isSelectFilter && !filterValue ? filterPlaceholder : undefined,
+    margin: "none",
+    placeholder: filterPlaceholder,
     onChange: function onChange(event) {
-      setSearchValue(event.target.value);
+      setFilterValue(event.target.value);
       handleChange(event);
     },
-    value: searchValue != null ? searchValue : '',
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    },
+    select: isSelectFilter,
+    value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React__default.createElement(material.InputAdornment, {
+      startAdornment: !isSelectFilter && React__default.createElement(material.InputAdornment, {
         position: "start"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
-        title: localization.changeSearchMode
+        title: localization.changeFilterMode
       }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
-        "aria-label": localization.changeSearchMode,
-        onClick: handleGlobalFilterMenuOpen,
+        "aria-label": localization.changeFilterMode,
+        onClick: handleFilterMenuOpen,
         size: "small",
         sx: {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React__default.createElement(SearchIcon, {
-        fontSize: "small"
-      }))))),
-      endAdornment: React__default.createElement(material.InputAdornment, {
+      }, React__default.createElement(FilterListIcon, null)))), filterChipLabel && React__default.createElement(material.Chip, {
+        onDelete: handleClearFilterChip,
+        label: filterChipLabel
+      })),
+      endAdornment: !filterChipLabel && React__default.createElement(material.InputAdornment, {
         position: "end"
-      }, React__default.createElement(material.IconButton, {
-        "aria-label": localization.clearSearch,
-        disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
+      }, React__default.createElement(material.Tooltip, {
+        arrow: true,
+        disableHoverListener: isSelectFilter,
+        placement: "right",
+        title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
+      }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
+        "aria-label": localization.clearFilter,
+        disabled: !(filterValue != null && filterValue.length),
         onClick: handleClear,
         size: "small",
-        title: localization.clearSearch
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
       }, React__default.createElement(CloseIcon, {
         fontSize: "small"
-      })))
+      })))))
     }
-  }, muiSearchTextFieldProps, {
+  }, textFieldProps, {
     sx: _extends({
-      justifySelf: 'end'
-    }, muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.sx)
+      m: '-0.25rem',
+      p: 0,
+      minWidth: !filterChipLabel ? '5rem' : 'auto',
+      width: 'calc(100% + 0.5rem)',
+      mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
+      '&	.MuiSelect-icon': {
+        mr: '1.5rem'
+      }
+    }, textFieldProps == null ? void 0 : textFieldProps.sx)
+  }), isSelectFilter && React__default.createElement(material.MenuItem, {
+    divider: true,
+    disabled: !filterValue,
+    value: ""
+  }, localization.clearFilter), column == null ? void 0 : (_column$filterSelectO = column.filterSelectOptions) == null ? void 0 : _column$filterSelectO.map(function (option) {
+    var value;
+    var text;
+
+    if (typeof option === 'string') {
+      value = option;
+      text = option;
+    } else if (typeof option === 'object') {
+      value = option.value;
+      text = option.text;
+    }
+
+    return React__default.createElement(material.MenuItem, {
+      key: value,
+      value: value
+    }, text);
   })), React__default.createElement(MRT_FilterTypeMenu, {
     anchorEl: anchorEl,
-    setAnchorEl: setAnchorEl
+    header: header,
+    setAnchorEl: setAnchorEl,
+    tableInstance: tableInstance
+  }));
+};
+
+var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      MoreVertIcon = _tableInstance$option.icons.MoreVertIcon,
+      localization = _tableInstance$option.localization,
+      muiTableHeadCellColumnActionsButtonProps = _tableInstance$option.muiTableHeadCellColumnActionsButtonProps;
+  var column = header.column;
+
+  var _useState = React.useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[1];
+
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  var mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function ? muiTableHeadCellColumnActionsButtonProps(column) : muiTableHeadCellColumnActionsButtonProps;
+  var mcTableHeadCellColumnActionsButtonProps = column.muiTableHeadCellColumnActionsButtonProps instanceof Function ? column.muiTableHeadCellColumnActionsButtonProps(column) : column.muiTableHeadCellColumnActionsButtonProps;
+
+  var iconButtonProps = _extends({}, mTableHeadCellColumnActionsButtonProps, mcTableHeadCellColumnActionsButtonProps);
+
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
+    title: localization.columnActions
+  }, React__default.createElement(material.IconButton, Object.assign({
+    "aria-label": localization.columnActions,
+    onClick: handleClick,
+    size: "small"
+  }, iconButtonProps, {
+    sx: _extends({
+      height: '2rem',
+      mr: '2px',
+      mt: '-0.2rem',
+      opacity: 0.5,
+      transition: 'opacity 0.2s',
+      width: '2rem',
+      '&:hover': {
+        opacity: 1
+      }
+    }, iconButtonProps.sx)
+  }), React__default.createElement(MoreVertIcon, null))), React__default.createElement(MRT_ColumnActionMenu, {
+    anchorEl: anchorEl,
+    header: header,
+    setAnchorEl: setAnchorEl,
+    tableInstance: tableInstance
   }));
 };
 
-var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
-  var rest = _extends({}, _ref);
+var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
+  var _column$Header;
+
+  var header = _ref.header,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      enableColumnActions = _tableInstance$option.enableColumnActions,
+      enableColumnFilters = _tableInstance$option.enableColumnFilters,
+      enableColumnResizing = _tableInstance$option.enableColumnResizing,
+      _tableInstance$option2 = _tableInstance$option.icons,
+      FilterAltIcon = _tableInstance$option2.FilterAltIcon,
+      FilterAltOff = _tableInstance$option2.FilterAltOff,
+      localization = _tableInstance$option.localization,
+      muiTableHeadCellProps = _tableInstance$option.muiTableHeadCellProps,
+      setShowFilters = _tableInstance$option.setShowFilters;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding,
+      showFilters = _getState.showFilters;
+
+  var column = header.column;
+  var mTableHeadCellProps = muiTableHeadCellProps instanceof Function ? muiTableHeadCellProps(column) : muiTableHeadCellProps;
+  var mcTableHeadCellProps = column.muiTableHeadCellProps instanceof Function ? column.muiTableHeadCellProps(column) : column.muiTableHeadCellProps;
+
+  var tableCellProps = _extends({}, header.getHeaderProps(), mTableHeadCellProps, mcTableHeadCellProps);
+
+  var sortTooltip = !!column.getIsSorted() ? column.getIsSorted() === 'desc' ? localization.clearSort : localization.sortByColumnDesc.replace('{column}', column.header) : localization.sortByColumnAsc.replace('{column}', column.header); // const filterType = getState()?.currentFilterTypes?.[id];
+
+  var filterTooltip = ''; // !!getColumnFilterValue()
+  //   ? localization.filteringByColumn
+  //       .replace('{column}', String(headerString))
+  //       .replace(
+  //         '{filterType}',
+  //         filterType instanceof Function
+  //           ? ''
+  //           : // @ts-ignore
+  //             localization[
+  //               `filter${
+  //                 filterType.charAt(0).toUpperCase() + filterType.slice(1)
+  //               }`
+  //             ],
+  //       )
+  //       .replace(
+  //         '{filterValue}',
+  //         getColumnFilterValue() as string,
+  //       )
+  //       .replace('" "', '')
+  //   : localization.showHideFilters;
+
+  var headerElement = (_column$Header = column == null ? void 0 : column.Header == null ? void 0 : column.Header({
+    header: header,
+    tableInstance: tableInstance
+  })) != null ? _column$Header : column.header;
+  return React__default.createElement(material.TableCell, Object.assign({
+    align: column.columnDefType === 'group' ? 'center' : 'left'
+  }, tableCellProps, {
+    //@ts-ignore
+    sx: function sx(theme) {
+      return _extends({
+        backgroundColor: theme.palette.background["default"],
+        backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.alpha(theme.palette.common.white, 0.05) + ")",
+        boxShadow: "3px 0 6px " + material.alpha(theme.palette.common.black, 0.1),
+        fontWeight: 'bold',
+        height: '100%',
+        minWidth: "max(" + header.getWidth() + ", 100px)",
+        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,
+        transition: "all " + (enableColumnResizing ? 0 : '0.2s') + " ease-in-out",
+        verticalAlign: 'text-top',
+        width: header.getWidth()
+      }, tableCellProps == null ? void 0 : tableCellProps.sx);
+    }
+  }), header.isPlaceholder ? null : column.columnDefType === 'display' ? headerElement : React__default.createElement(material.Box, {
+    sx: {
+      alignItems: 'flex-start',
+      display: 'flex',
+      justifyContent: column.columnDefType === 'group' ? 'center' : 'space-between',
+      width: '100%'
+    }
+  }, React__default.createElement(material.Box, Object.assign({}, column.getToggleSortingProps(), {
+    sx: {
+      alignItems: 'center',
+      cursor: column.getCanSort() && column.columnDefType !== 'group' ? 'pointer' : undefined,
+      display: 'flex',
+      flexWrap: 'nowrap',
+      whiteSpace: column.header.length < 15 ? 'nowrap' : 'normal'
+    },
+    title: undefined
+  }), headerElement, column.columnDefType !== 'group' && column.getCanSort() && React__default.createElement(material.Tooltip, {
+    arrow: true,
+    placement: "top",
+    title: sortTooltip
+  }, React__default.createElement(material.TableSortLabel, {
+    "aria-label": sortTooltip,
+    active: !!column.getIsSorted(),
+    direction: column.getIsSorted() ? column.getIsSorted() : undefined
+  })), column.columnDefType !== 'group' && enableColumnFilters && !!column.getCanColumnFilter() && React__default.createElement(material.Tooltip, {
+    arrow: true,
+    placement: "top",
+    title: filterTooltip
+  }, React__default.createElement(material.IconButton, {
+    disableRipple: true,
+    onClick: function onClick(event) {
+      event.stopPropagation();
+      setShowFilters(!showFilters);
+    },
+    size: "small",
+    sx: {
+      m: 0,
+      opacity: !!column.getColumnFilterValue() ? 0.8 : 0,
+      p: '2px',
+      transition: 'all 0.2s ease-in-out',
+      '&:hover': {
+        backgroundColor: 'transparent',
+        opacity: 0.8
+      }
+    }
+  }, showFilters && !column.getColumnFilterValue() ? React__default.createElement(FilterAltOff, {
+    fontSize: "small"
+  }) : React__default.createElement(FilterAltIcon, {
+    fontSize: "small"
+  })))), React__default.createElement(material.Box, {
+    sx: {
+      alignItems: 'center',
+      display: 'flex',
+      flexWrap: 'nowrap'
+    }
+  }, (enableColumnActions || column.enableColumnActions) && column.enableColumnActions !== false && column.columnDefType !== 'group' && React__default.createElement(MRT_ToggleColumnActionMenuButton, {
+    header: header,
+    tableInstance: tableInstance
+  }), enableColumnResizing && column.columnDefType !== 'group' && React__default.createElement(material.Divider, Object.assign({
+    flexItem: true,
+    orientation: "vertical",
+    onDoubleClick: function onDoubleClick() {
+      return header.resetSize();
+    },
+    sx: function sx(theme) {
+      return {
+        borderRightWidth: '2px',
+        borderRadius: '2px',
+        maxHeight: '2rem',
+        cursor: 'col-resize',
+        userSelect: 'none',
+        touchAction: 'none',
+        '&:active': {
+          backgroundColor: theme.palette.secondary.dark,
+          opacity: 1
+        }
+      };
+    }
+  }, header.getResizerProps(function (props) {
+    return _extends({}, props, {
+      style: {
+        transform: column.getIsResizing() ? "translateX(" + getState().columnSizingInfo.deltaOffset + "px)" : ''
+      }
+    });
+  }))))), column.columnDefType === 'data' && enableColumnFilters && column.getCanColumnFilter() && React__default.createElement(material.Collapse, {
+    "in": showFilters
+  }, React__default.createElement(MRT_FilterTextField, {
+    header: header,
+    tableInstance: tableInstance
+  })));
+};
+
+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(headerGroup) : muiTableHeadRowProps;
 
-  var _useMRT = useMRT(),
-      _useMRT$icons = _useMRT.icons,
-      FullscreenExitIcon = _useMRT$icons.FullscreenExitIcon,
-      FullscreenIcon = _useMRT$icons.FullscreenIcon,
-      localization = _useMRT.localization,
-      setFullScreen = _useMRT.setFullScreen,
-      fullScreen = _useMRT.tableInstance.state.fullScreen;
+  var tableRowProps = _extends({}, headerGroup == null ? void 0 : headerGroup.getHeaderGroupProps(), mTableHeadRowProps);
 
-  return React__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.toggleFullScreen
-  }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.showHideFilters,
-    onClick: function onClick() {
-      return setFullScreen(!fullScreen);
-    },
-    size: "small"
-  }, rest), fullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
+  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), headerGroup.headers.map(function (header, index) {
+    return React__default.createElement(MRT_TableHeadCell, {
+      header: header,
+      key: header.id || index,
+      tableInstance: tableInstance
+    });
+  }));
 };
 
-var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
-  var rest = _extends({}, _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,
+      muiTableHeadProps = tableInstance.options.muiTableHeadProps;
+  var tableHeadProps = muiTableHeadProps instanceof Function ? muiTableHeadProps(tableInstance) : muiTableHeadProps;
+  var getHeaderGroupsMap = {
+    center: getCenterHeaderGroups,
+    left: getLeftHeaderGroups,
+    none: getHeaderGroups,
+    right: getRightHeaderGroups
+  };
+  return React__default.createElement(material.TableHead, Object.assign({}, tableHeadProps), getHeaderGroupsMap[pinned]().map(function (headerGroup) {
+    return React__default.createElement(MRT_TableHeadRow, {
+      headerGroup: headerGroup,
+      key: headerGroup.getHeaderGroupProps().key,
+      tableInstance: tableInstance
+    });
+  }));
+};
 
-  var _useMRT = useMRT(),
-      ViewColumnIcon = _useMRT.icons.ViewColumnIcon,
-      localization = _useMRT.localization;
+var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
+  var cell = _ref.cell,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      muiTableBodyCellEditTextFieldProps = tableInstance.options.muiTableBodyCellEditTextFieldProps;
+  var column = cell.column,
+      row = cell.row;
 
-  var _useState = React.useState(null),
-      anchorEl = _useState[0],
-      setAnchorEl = _useState[1];
+  var handleChange = function handleChange(event) {
+    if (getState().currentEditingRow) {
+      row.values[column.id] = event.target.value; // setCurrentEditingRow({
+      //   ...getState().currentEditingRow,
+      // });
+    }
 
-  var handleClick = function handleClick(event) {
-    setAnchorEl(event.currentTarget);
+    column.onCellEditChange == null ? void 0 : column.onCellEditChange(event, cell);
   };
 
-  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.showHideColumns
-  }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.showHideColumns,
-    onClick: handleClick,
-    size: "small"
-  }, rest), React__default.createElement(ViewColumnIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
-    anchorEl: anchorEl,
-    setAnchorEl: setAnchorEl
-  }));
-};
+  var mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function ? muiTableBodyCellEditTextFieldProps(cell) : muiTableBodyCellEditTextFieldProps;
+  var mcTableBodyCellEditTextFieldProps = column.muiTableBodyCellEditTextFieldProps instanceof Function ? column.muiTableBodyCellEditTextFieldProps(cell) : column.muiTableBodyCellEditTextFieldProps;
 
-var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
-  var rest = _extends({}, _ref);
+  var textFieldProps = _extends({}, mTableBodyCellEditTextFieldProps, mcTableBodyCellEditTextFieldProps); // if (enableEditing && Edit) {
+  //   return <>{Edit({ ...textFieldProps, cell })}</>;
+  // }
 
-  var _useMRT = useMRT(),
-      setDensePadding = _useMRT.setDensePadding,
-      localization = _useMRT.localization,
-      _useMRT$icons = _useMRT.icons,
-      DensityMediumIcon = _useMRT$icons.DensityMediumIcon,
-      DensitySmallIcon = _useMRT$icons.DensitySmallIcon,
-      densePadding = _useMRT.tableInstance.state.densePadding;
 
-  return React__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.toggleDensePadding
-  }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.toggleDensePadding,
-    onClick: function onClick() {
-      return setDensePadding(!densePadding);
+  return React__default.createElement(material.TextField, Object.assign({
+    margin: "dense",
+    onChange: handleChange,
+    onClick: function onClick(e) {
+      return e.stopPropagation();
     },
-    size: "small"
-  }, rest), densePadding ? React__default.createElement(DensitySmallIcon, null) : React__default.createElement(DensityMediumIcon, null)));
+    placeholder: column.header,
+    value: cell.value,
+    variant: "standard"
+  }, textFieldProps));
 };
 
-var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
-  var rest = _extends({}, _ref);
+var MRT_CopyButton = function MRT_CopyButton(_ref) {
+  var cell = _ref.cell,
+      children = _ref.children,
+      tableInstance = _ref.tableInstance;
+  var _tableInstance$option = tableInstance.options,
+      localization = _tableInstance$option.localization,
+      muiTableBodyCellCopyButtonProps = _tableInstance$option.muiTableBodyCellCopyButtonProps;
+
+  var _useState = React.useState(false),
+      copied = _useState[0],
+      setCopied = _useState[1];
+
+  var handleCopy = function handleCopy(text) {
+    navigator.clipboard.writeText(text);
+    setCopied(true);
+    setTimeout(function () {
+      return setCopied(false);
+    }, 4000);
+  };
 
-  var _useMRT = useMRT(),
-      _useMRT$icons = _useMRT.icons,
-      FilterListIcon = _useMRT$icons.FilterListIcon,
-      FilterListOffIcon = _useMRT$icons.FilterListOffIcon,
-      localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters,
-      showFilters = _useMRT.tableInstance.state.showFilters;
+  var mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function ? muiTableBodyCellCopyButtonProps(cell) : muiTableBodyCellCopyButtonProps;
+  var mcTableBodyCellCopyButtonProps = cell.column.muiTableBodyCellCopyButtonProps instanceof Function ? cell.column.muiTableBodyCellCopyButtonProps(cell) : cell.column.muiTableBodyCellCopyButtonProps;
+
+  var buttonProps = _extends({}, mTableBodyCellCopyButtonProps, mcTableBodyCellCopyButtonProps);
 
   return React__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.showHideFilters
-  }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.showHideFilters,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement: "top",
+    title: copied ? localization.copiedToClipboard : localization.clickToCopy
+  }, React__default.createElement(material.Button, Object.assign({
+    "aria-label": localization.clickToCopy,
     onClick: function onClick() {
-      return setShowFilters(!showFilters);
+      return handleCopy(cell.value);
     },
     size: "small"
-  }, rest), showFilters ? React__default.createElement(FilterListOffIcon, null) : React__default.createElement(FilterListIcon, null)));
+  }, buttonProps, {
+    sx: _extends({
+      backgroundColor: 'transparent',
+      border: 'none',
+      color: 'inherit',
+      fontFamily: 'inherit',
+      fontSize: 'inherit',
+      letterSpacing: 'inherit',
+      m: '-0.25rem',
+      minWidth: 'unset',
+      textAlign: 'inherit',
+      textTransform: 'inherit'
+    }, buttonProps == null ? void 0 : buttonProps.sx),
+    variant: "text"
+  }), children));
 };
 
-var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
-  var rest = _extends({}, _ref);
-
-  var _useMRT = useMRT(),
-      _useMRT$icons = _useMRT.icons,
-      SearchIcon = _useMRT$icons.SearchIcon,
-      SearchOffIcon = _useMRT$icons.SearchOffIcon,
-      idPrefix = _useMRT.idPrefix,
-      localization = _useMRT.localization,
-      muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
-      setShowSearch = _useMRT.setShowSearch,
-      showSearch = _useMRT.tableInstance.state.showSearch;
+var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
+  var _row$subRows, _row$subRows2;
 
-  var handleToggleSearch = function handleToggleSearch() {
-    setShowSearch(!showSearch);
-    setTimeout(function () {
-      var _document$getElementB, _muiSearchTextFieldPr;
+  var cell = _ref.cell,
+      tableInstance = _ref.tableInstance;
+  var getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
+      getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      enableClickToCopy = _tableInstance$option.enableClickToCopy,
+      enableColumnPinning = _tableInstance$option.enableColumnPinning,
+      isLoading = _tableInstance$option.isLoading,
+      muiTableBodyCellProps = _tableInstance$option.muiTableBodyCellProps,
+      muiTableBodyCellSkeletonProps = _tableInstance$option.muiTableBodyCellSkeletonProps,
+      onCellClick = _tableInstance$option.onCellClick;
+
+  var _getState = getState(),
+      currentEditingRow = _getState.currentEditingRow,
+      isDensePadding = _getState.isDensePadding;
+
+  var column = cell.column,
+      row = cell.row;
+  var mTableCellBodyProps = muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
+  var mcTableCellBodyProps = column.muiTableBodyCellProps instanceof Function ? column.muiTableBodyCellProps(cell) : column.muiTableBodyCellProps;
 
-      return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "mrt-" + idPrefix + "-search-text-field")) == null ? void 0 : _document$getElementB.focus();
-    }, 200);
-  };
+  var tableCellProps = _extends({}, cell.getCellProps(), mTableCellBodyProps, mcTableCellBodyProps);
 
-  return React__default.createElement(material.Tooltip, {
-    arrow: true,
-    title: localization.showHideSearch
-  }, React__default.createElement(material.IconButton, Object.assign({
-    size: "small",
-    onClick: handleToggleSearch
-  }, rest), showSearch ? React__default.createElement(SearchOffIcon, null) : React__default.createElement(SearchIcon, null)));
+  var skeletonWidth = React.useMemo(function () {
+    return column.columnDefType === 'display' ? column.getWidth() / 2 : Math.random() * (column.getWidth() - column.getWidth() / 3) + column.getWidth() / 3;
+  }, [column.columnDefType, column.getWidth()]);
+  return React__default.createElement(material.TableCell, Object.assign({
+    onClick: function onClick(event) {
+      return onCellClick == null ? void 0 : onCellClick(event, cell);
+    }
+  }, tableCellProps, {
+    sx: _extends({
+      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 || enableColumnPinning && getIsSomeColumnsPinned() ? 'nowrap' : 'normal'
+    }, tableCellProps == null ? void 0 : tableCellProps.sx)
+  }), isLoading ? React__default.createElement(material.Skeleton, Object.assign({
+    animation: "wave",
+    height: 20,
+    width: skeletonWidth
+  }, muiTableBodyCellSkeletonProps)) : column.columnDefType === 'display' ? column.Cell == null ? void 0 : column.Cell({
+    cell: cell,
+    tableInstance: tableInstance
+  }) : cell.getIsPlaceholder() || row.getIsGrouped() && column.id !== row.groupingColumnId ? null : cell.getIsAggregated() ? cell.renderAggregatedCell() : column.enableEditing && (currentEditingRow == null ? void 0 : currentEditingRow.id) === row.id ? React__default.createElement(MRT_EditCellTextField, {
+    cell: cell,
+    tableInstance: tableInstance
+  }) : (enableClickToCopy || column.enableClickToCopy) && column.enableClickToCopy !== false ? React__default.createElement(React__default.Fragment, null, React__default.createElement(MRT_CopyButton, {
+    cell: cell,
+    tableInstance: tableInstance
+  }, cell.renderCell()), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows = row.subRows) == null ? void 0 : _row$subRows.length, ")")) : React__default.createElement(React__default.Fragment, null, cell.renderCell(), row.getIsGrouped() && React__default.createElement(React__default.Fragment, null, " (", (_row$subRows2 = row.subRows) == null ? void 0 : _row$subRows2.length, ")")));
 };
 
-var MRT_ToolbarInternalButtons = function MRT_ToolbarInternalButtons() {
-  var _useMRT = useMRT(),
-      disableFilters = _useMRT.disableFilters,
-      disableColumnHiding = _useMRT.disableColumnHiding,
-      disableDensePaddingToggle = _useMRT.disableDensePaddingToggle,
-      disableGlobalFilter = _useMRT.disableGlobalFilter,
-      disableFullScreenToggle = _useMRT.disableFullScreenToggle,
-      renderToolbarInternalActions = _useMRT.renderToolbarInternalActions,
-      tableInstance = _useMRT.tableInstance;
-
-  if (renderToolbarInternalActions) {
-    return React__default.createElement(React__default.Fragment, null, renderToolbarInternalActions(tableInstance, {
-      MRT_ToggleSearchButton: MRT_ToggleSearchButton,
-      MRT_ToggleFiltersButton: MRT_ToggleFiltersButton,
-      MRT_ShowHideColumnsButton: MRT_ShowHideColumnsButton,
-      MRT_ToggleDensePaddingButton: MRT_ToggleDensePaddingButton,
-      MRT_FullScreenToggleButton: MRT_FullScreenToggleButton
-    }));
-  }
-
-  return React__default.createElement(material.Box, {
-    sx: {
-      display: 'flex',
-      gap: '0.5rem',
-      alignItems: 'center',
-      p: '0 0.5rem'
+var MRT_TableDetailPanel = function MRT_TableDetailPanel(_ref) {
+  var row = _ref.row,
+      tableInstance = _ref.tableInstance;
+  var getVisibleFlatColumns = tableInstance.getVisibleFlatColumns,
+      _tableInstance$option = tableInstance.options,
+      muiTableBodyRowProps = _tableInstance$option.muiTableBodyRowProps,
+      muiTableDetailPanelProps = _tableInstance$option.muiTableDetailPanelProps,
+      onDetailPanelClick = _tableInstance$option.onDetailPanelClick,
+      renderDetailPanel = _tableInstance$option.renderDetailPanel;
+  var tableRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
+  var tableCellProps = muiTableDetailPanelProps instanceof Function ? muiTableDetailPanelProps(row) : muiTableDetailPanelProps;
+  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), React__default.createElement(material.TableCell, Object.assign({
+    colSpan: getVisibleFlatColumns().length + 10,
+    onClick: function onClick(event) {
+      return onDetailPanelClick == null ? void 0 : onDetailPanelClick(event, row);
     }
-  }, !disableGlobalFilter && React__default.createElement(MRT_ToggleSearchButton, null), !disableFilters && React__default.createElement(MRT_ToggleFiltersButton, null), !disableColumnHiding && React__default.createElement(MRT_ShowHideColumnsButton, null), !disableDensePaddingToggle && React__default.createElement(MRT_ToggleDensePaddingButton, null), !disableFullScreenToggle && React__default.createElement(MRT_FullScreenToggleButton, null));
+  }, tableCellProps, {
+    sx: _extends({
+      borderBottom: !row.getIsExpanded() ? 'none' : undefined,
+      pb: row.getIsExpanded() ? '1rem' : 0,
+      pt: row.getIsExpanded() ? '1rem' : 0,
+      transition: 'all 0.2s ease-in-out'
+    }, tableCellProps == null ? void 0 : tableCellProps.sx)
+  }), React__default.createElement(material.Collapse, {
+    "in": row.getIsExpanded()
+  }, renderDetailPanel == null ? void 0 : renderDetailPanel(row))));
 };
 
-var MRT_TablePagination = function MRT_TablePagination() {
-  var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      muiTablePaginationProps = _useMRT.muiTablePaginationProps;
+var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
+  var pinned = _ref.pinned,
+      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(row) : muiTableBodyRowProps;
 
-  var tablePaginationProps = muiTablePaginationProps instanceof Function ? muiTablePaginationProps(tableInstance) : muiTablePaginationProps;
+  var tableRowProps = _extends({}, getRowProps(), mTableBodyRowProps);
 
-  var handleChangeRowsPerPage = function handleChangeRowsPerPage(event) {
-    tableInstance.setPageSize(+event.target.value);
-    tableInstance.gotoPage(0);
+  var getVisibleCellsMap = {
+    center: getCenterVisibleCells,
+    left: getLeftVisibleCells,
+    none: getVisibleCells,
+    right: getRightVisibleCells
   };
-
-  return React__default.createElement(material.TablePagination, Object.assign({
-    component: 'div',
-    count: tableInstance.rows.length,
-    onPageChange: function onPageChange(_, newPage) {
-      return tableInstance.gotoPage(newPage);
-    },
-    onRowsPerPageChange: handleChangeRowsPerPage,
-    page: tableInstance.state.pageIndex,
-    rowsPerPage: tableInstance.state.pageSize,
-    SelectProps: {
-      style: {
-        margin: '0 1rem 0 1ch'
-      }
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.TableRow, Object.assign({
+    hover: true,
+    onClick: function onClick(event) {
+      return onRowClick == null ? void 0 : onRowClick(event, row);
     },
-    showFirstButton: tableInstance.rows.length / tableInstance.state.pageSize > 2,
-    showLastButton: tableInstance.rows.length / tableInstance.state.pageSize > 2
-  }, tablePaginationProps, {
-    sx: _extends({
-      m: '0 0.5rem',
-      position: 'relative',
-      zIndex: 2
-    }, tablePaginationProps == null ? void 0 : tablePaginationProps.sx)
+    selected: getIsSelected()
+  }, tableRowProps), getVisibleCellsMap[pinned]().map(function (cell) {
+    return React__default.createElement(MRT_TableBodyCell, {
+      cell: cell,
+      key: cell.getCellProps().key,
+      tableInstance: tableInstance
+    });
+  })), renderDetailPanel && !getIsGrouped() && React__default.createElement(MRT_TableDetailPanel, {
+    row: row,
+    tableInstance: tableInstance
   }));
 };
 
-var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
-  var _localization$selecte, _localization$selecte2;
+var MRT_TableBody = function MRT_TableBody(_ref) {
+  var pinned = _ref.pinned,
+      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(tableInstance) : muiTableBodyProps;
 
-  var _useMRT = useMRT(),
-      muiTableToolbarAlertBannerProps = _useMRT.muiTableToolbarAlertBannerProps,
-      tableInstance = _useMRT.tableInstance,
-      positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
-      positionToolbarActions = _useMRT.positionToolbarActions,
-      localization = _useMRT.localization,
-      renderToolbarCustomActions = _useMRT.renderToolbarCustomActions;
+  var tableBodyProps = _extends({}, getTableBodyProps(), mTableBodyProps);
 
-  var isMobile = material.useMediaQuery('(max-width:720px)');
-  var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps(tableInstance) : muiTableToolbarAlertBannerProps;
-  var selectMessage = tableInstance.selectedFlatRows.length > 0 ? (_localization$selecte = localization.selectedCountOfRowCountRowsSelected) == null ? void 0 : (_localization$selecte2 = _localization$selecte.replace('{selectedCount}', tableInstance.selectedFlatRows.length.toString())) == null ? void 0 : _localization$selecte2.replace('{rowCount}', tableInstance.flatRows.length.toString()) : null;
-  var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React__default.createElement("span", null, localization.groupedBy, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
-    var _tableInstance$allCol;
+  return React__default.createElement(material.TableBody, Object.assign({}, tableBodyProps), rows.map(function (row) {
+    return React__default.createElement(MRT_TableBodyRow, {
+      key: row.getRowProps().key,
+      pinned: pinned,
+      row: row,
+      tableInstance: tableInstance
+    });
+  }));
+};
 
-    return React__default.createElement(React.Fragment, {
-      key: index + "-" + columnId
-    }, index > 0 ? localization.thenBy : '', React__default.createElement(material.Chip, {
-      color: "secondary",
-      label: (_tableInstance$allCol = tableInstance.allColumns.find(function (column) {
-        return column.id === columnId;
-      })) == null ? void 0 : _tableInstance$allCol.Header,
-      onDelete: function onDelete() {
-        return tableInstance.toggleGroupBy(columnId, false);
-      }
-    }));
-  })) : null;
-  var displayAbsolute = !(isMobile || positionToolbarAlertBanner === 'bottom' && positionToolbarActions === 'bottom' || positionToolbarAlertBanner === 'top' && !!renderToolbarCustomActions);
-  return React__default.createElement(material.Collapse, {
-    "in": !!selectMessage || !!groupedByMessage,
-    timeout: displayAbsolute ? 0 : 200
-  }, React__default.createElement(material.Alert, Object.assign({
-    color: "info",
-    icon: false,
-    sx: _extends({
-      borderRadius: 0,
-      fontSize: '1rem',
-      left: 0,
-      p: 0,
-      position: displayAbsolute ? 'absolute' : 'relative',
-      right: 0,
-      minHeight: '3.5rem',
-      top: 0,
-      width: '100%',
-      zIndex: 2
-    }, alertProps == null ? void 0 : alertProps.sx)
-  }, alertProps), React__default.createElement(material.Box, {
-    sx: {
-      p: '0.5rem 1rem'
+var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
+  var _ref2, _column$Footer;
+
+  var footer = _ref.footer,
+      tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      muiTableFooterCellProps = _tableInstance$option.muiTableFooterCellProps,
+      enableColumnResizing = _tableInstance$option.enableColumnResizing;
+
+  var _getState = getState(),
+      isDensePadding = _getState.isDensePadding;
+
+  var column = footer.column;
+  var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps(column) : muiTableFooterCellProps;
+  var mcTableFooterCellProps = column.muiTableFooterCellProps instanceof Function ? column.muiTableFooterCellProps(column) : column.muiTableFooterCellProps;
+
+  var tableCellProps = _extends({}, footer.getFooterProps(), mTableFooterCellProps, mcTableFooterCellProps);
+
+  return React__default.createElement(material.TableCell, Object.assign({
+    align: column.columnDefType === 'group' ? 'center' : 'left',
+    variant: "head"
+  }, tableCellProps, {
+    //@ts-ignore
+    sx: function sx(theme) {
+      return _extends({
+        backgroundColor: theme.palette.background["default"],
+        backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.alpha(theme.palette.common.white, 0.05) + ")",
+        fontWeight: 'bold',
+        p: isDensePadding ? '0.5rem' : '1rem',
+        transition: "all " + (enableColumnResizing ? '10ms' : '0.2s') + " ease-in-out",
+        verticalAlign: 'text-top'
+      }, tableCellProps == null ? void 0 : tableCellProps.sx);
     }
-  }, selectMessage, groupedByMessage)));
+  }), footer.isPlaceholder ? null : (_ref2 = (_column$Footer = column.Footer == null ? void 0 : column.Footer({
+    footer: footer,
+    tableInstance: tableInstance
+  })) != null ? _column$Footer : column.footer) != null ? _ref2 : null);
 };
 
-var MRT_LinearProgressBar = function MRT_LinearProgressBar() {
-  var _useMRT = useMRT(),
-      muiLinearProgressProps = _useMRT.muiLinearProgressProps,
-      isFetching = _useMRT.isFetching,
-      isLoading = _useMRT.isLoading,
-      tableInstance = _useMRT.tableInstance;
+var MRT_TableFooterRow = function MRT_TableFooterRow(_ref) {
+  var _footerGroup$headers;
 
-  var linearProgressProps = muiLinearProgressProps instanceof Function ? muiLinearProgressProps(tableInstance) : muiLinearProgressProps;
-  return React__default.createElement(material.Collapse, {
-    "in": isFetching || isLoading,
-    unmountOnExit: true
-  }, React__default.createElement(material.LinearProgress, Object.assign({
-    "aria-label": "Loading",
-    "aria-busy": "true"
-  }, linearProgressProps)));
+  var footerGroup = _ref.footerGroup,
+      tableInstance = _ref.tableInstance;
+  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 null;
+  var mTableFooterRowProps = muiTableFooterRowProps instanceof Function ? muiTableFooterRowProps(footerGroup) : muiTableFooterRowProps;
+
+  var tableRowProps = _extends({}, footerGroup.getFooterGroupProps(), mTableFooterRowProps);
+
+  return React__default.createElement(material.TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map(function (footer) {
+    return React__default.createElement(MRT_TableFooterCell, {
+      footer: footer,
+      key: footer.getFooterProps().key,
+      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,
+      muiTableFooterProps = tableInstance.options.muiTableFooterProps;
+  var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps(tableInstance) : muiTableFooterProps;
+  var getFooterGroupsMap = {
+    center: getCenterFooterGroups,
+    left: getLeftFooterGroups,
+    none: getFooterGroups,
+    right: getRightFooterGroups
+  };
+  return React__default.createElement(material.TableFooter, Object.assign({}, tableFooterProps), getFooterGroupsMap[pinned]().map(function (footerGroup) {
+    return React__default.createElement(MRT_TableFooterRow, {
+      footerGroup: footerGroup,
+      key: footerGroup.getFooterGroupProps().key,
+      tableInstance: tableInstance
+    });
+  }));
+};
+
+var MRT_Table = function MRT_Table(_ref) {
+  var pinned = _ref.pinned,
+      tableInstance = _ref.tableInstance;
+  var getTableProps = tableInstance.getTableProps,
+      _tableInstance$option = tableInstance.options,
+      enableStickyHeader = _tableInstance$option.enableStickyHeader,
+      hideTableFooter = _tableInstance$option.hideTableFooter,
+      hideTableHead = _tableInstance$option.hideTableHead,
+      muiTableProps = _tableInstance$option.muiTableProps;
+  var mTableProps = muiTableProps instanceof Function ? muiTableProps(tableInstance) : muiTableProps;
+
+  var tableProps = _extends({}, getTableProps(), mTableProps);
+
+  return React__default.createElement(material.Table, Object.assign({
+    stickyHeader: enableStickyHeader
+  }, tableProps), !hideTableHead && React__default.createElement(MRT_TableHead, {
+    pinned: pinned,
+    tableInstance: tableInstance
+  }), React__default.createElement(MRT_TableBody, {
+    pinned: pinned,
+    tableInstance: tableInstance
+  }), !hideTableFooter && React__default.createElement(MRT_TableFooter, {
+    pinned: pinned,
+    tableInstance: tableInstance
+  }));
 };
 
-var commonToolbarStyles = function commonToolbarStyles(theme, tableInstance) {
+var commonBoxStyles = function commonBoxStyles(_ref) {
+  var pinned = _ref.pinned,
+      theme = _ref.theme,
+      visible = _ref.visible;
   return {
-    backgroundColor: theme.palette.background["default"],
-    backgroundImage: "linear-gradient(" + material.alpha(theme.palette.common.white, 0.05) + "," + material.alpha(theme.palette.common.white, 0.05) + ")",
     display: 'grid',
-    opacity: tableInstance.state.fullScreen ? 0.95 : 1,
-    p: '0 !important',
-    width: '100%',
-    zIndex: 1
+    minWidth: visible ? '200px' : 0,
+    overflowX: 'auto',
+    boxShadow: pinned === 'left' ? "0 1px 12px " + material.alpha(theme.palette.common.black, 0.5) : pinned === 'right' ? "0 -1px 12px " + material.alpha(theme.palette.common.black, 0.5) : 'none'
   };
 };
-var MRT_ToolbarTop = function MRT_ToolbarTop() {
-  var _renderToolbarCustomA;
 
-  var _useMRT = useMRT(),
-      disableGlobalFilter = _useMRT.disableGlobalFilter,
-      hideToolbarInternalActions = _useMRT.hideToolbarInternalActions,
-      manualPagination = _useMRT.manualPagination,
-      muiTableToolbarTopProps = _useMRT.muiTableToolbarTopProps,
-      positionPagination = _useMRT.positionPagination,
-      positionToolbarActions = _useMRT.positionToolbarActions,
-      positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
-      renderToolbarCustomActions = _useMRT.renderToolbarCustomActions,
-      tableInstance = _useMRT.tableInstance;
+var MRT_TableContainer = function MRT_TableContainer(_ref2) {
+  var tableInstance = _ref2.tableInstance;
+  var getCenterTableWidth = tableInstance.getCenterTableWidth,
+      getIsSomeColumnsPinned = tableInstance.getIsSomeColumnsPinned,
+      getLeftTableWidth = tableInstance.getLeftTableWidth,
+      getRightTableWidth = tableInstance.getRightTableWidth,
+      getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      enableColumnPinning = _tableInstance$option.enableColumnPinning,
+      enableStickyHeader = _tableInstance$option.enableStickyHeader,
+      idPrefix = _tableInstance$option.idPrefix,
+      muiTableContainerProps = _tableInstance$option.muiTableContainerProps;
 
-  var toolbarProps = muiTableToolbarTopProps instanceof Function ? muiTableToolbarTopProps(tableInstance) : muiTableToolbarTopProps;
-  return React__default.createElement(material.Toolbar, Object.assign({
-    variant: "dense"
-  }, toolbarProps, {
-    sx: function sx(theme) {
-      return _extends({
-        position: tableInstance.state.fullScreen ? 'sticky' : undefined,
-        top: tableInstance.state.fullScreen ? '0' : undefined
-      }, commonToolbarStyles(theme, tableInstance), toolbarProps == null ? void 0 : toolbarProps.sx);
-    }
-  }), positionToolbarAlertBanner === 'top' && React__default.createElement(MRT_ToolbarAlertBanner, null), React__default.createElement(material.Box, {
-    sx: {
-      p: '0.5rem',
-      display: 'flex',
-      justifyContent: 'space-between'
+  var _getState = getState(),
+      isFullScreen = _getState.isFullScreen,
+      columnPinning = _getState.columnPinning;
+
+  var _useState = React.useState(0),
+      totalToolbarHeight = _useState[0],
+      setTotalToolbarHeight = _useState[1];
+
+  var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
+  React.useLayoutEffect(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);
+  });
+  return React__default.createElement(material.TableContainer, Object.assign({}, tableContainerProps, {
+    sx: _extends({
+      maxWidth: '100%',
+      maxHeight: enableStickyHeader ? "clamp(350px, calc(100vh - " + totalToolbarHeight + "px), 2000px)" : undefined,
+      overflow: 'auto'
+    }, tableContainerProps == null ? void 0 : tableContainerProps.sx),
+    style: {
+      maxHeight: isFullScreen ? "calc(100vh - " + totalToolbarHeight + "px)" : undefined
     }
-  }, (_renderToolbarCustomA = renderToolbarCustomActions == null ? void 0 : renderToolbarCustomActions(tableInstance)) != null ? _renderToolbarCustomA : React__default.createElement("span", null), React__default.createElement(material.Box, {
+  }), enableColumnPinning && getIsSomeColumnsPinned() ? React__default.createElement(material.Box, {
     sx: {
-      display: 'flex',
-      gap: '0.5rem',
-      position: 'relative',
-      zIndex: 3
+      display: 'grid',
+      gridTemplateColumns: getLeftTableWidth() + "fr " + getCenterTableWidth() + "fr " + getRightTableWidth() + "fr"
     }
-  }, !disableGlobalFilter && React__default.createElement(MRT_SearchTextField, null), !hideToolbarInternalActions && positionToolbarActions === 'top' && React__default.createElement(MRT_ToolbarInternalButtons, null))), React__default.createElement("div", null, !manualPagination && ['top', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)), React__default.createElement(MRT_LinearProgressBar, null));
-};
-
-var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
-  var _useMRT = useMRT(),
-      hideToolbarInternalActions = _useMRT.hideToolbarInternalActions,
-      manualPagination = _useMRT.manualPagination,
-      muiTableToolbarBottomProps = _useMRT.muiTableToolbarBottomProps,
-      positionPagination = _useMRT.positionPagination,
-      positionToolbarActions = _useMRT.positionToolbarActions,
-      positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
-      tableInstance = _useMRT.tableInstance;
+  }, React__default.createElement(material.Box // @ts-ignore
+  , {
+    // @ts-ignore
+    sx: function sx(theme) {
+      var _columnPinning$left;
 
-  var toolbarProps = muiTableToolbarBottomProps instanceof Function ? muiTableToolbarBottomProps(tableInstance) : muiTableToolbarBottomProps;
-  return React__default.createElement(material.Toolbar, Object.assign({
-    variant: "dense"
-  }, toolbarProps, {
+      return commonBoxStyles({
+        pinned: 'left',
+        theme: theme,
+        visible: !!((_columnPinning$left = columnPinning.left) != null && _columnPinning$left.length)
+      });
+    }
+  }, React__default.createElement(MRT_Table, {
+    pinned: "left",
+    tableInstance: tableInstance
+  })), React__default.createElement(material.Box // @ts-ignore
+  , {
     sx: function sx(theme) {
-      return _extends({
-        bottom: tableInstance.state.fullScreen ? '0' : undefined,
-        position: tableInstance.state.fullScreen ? 'fixed' : undefined
-      }, commonToolbarStyles(theme, tableInstance), toolbarProps == null ? void 0 : toolbarProps.sx);
+      return commonBoxStyles({
+        theme: theme
+      });
     }
-  }), React__default.createElement(MRT_LinearProgressBar, null), React__default.createElement(material.Box, {
-    sx: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      width: '100%'
+  }, React__default.createElement(MRT_Table, {
+    pinned: "center",
+    tableInstance: tableInstance
+  })), React__default.createElement(material.Box // @ts-ignore
+  , {
+    // @ts-ignore
+    sx: function sx(theme) {
+      var _columnPinning$right;
+
+      return commonBoxStyles({
+        pinned: 'right',
+        theme: theme,
+        visible: !!((_columnPinning$right = columnPinning.right) != null && _columnPinning$right.length)
+      });
     }
-  }, !hideToolbarInternalActions && positionToolbarActions === 'bottom' ? React__default.createElement(MRT_ToolbarInternalButtons, null) : React__default.createElement("span", null), positionToolbarAlertBanner === 'bottom' && React__default.createElement(MRT_ToolbarAlertBanner, null), !manualPagination && ['bottom', 'both'].includes(positionPagination != null ? positionPagination : '') && React__default.createElement(MRT_TablePagination, null)));
+  }, React__default.createElement(MRT_Table, {
+    pinned: "right",
+    tableInstance: tableInstance
+  }))) : React__default.createElement(MRT_Table, {
+    pinned: "none",
+    tableInstance: tableInstance
+  }));
 };
 
-var MRT_TableContainer = function MRT_TableContainer() {
-  var _useMRT = useMRT(),
-      hideToolbarBottom = _useMRT.hideToolbarBottom,
-      hideToolbarTop = _useMRT.hideToolbarTop,
-      muiTableContainerProps = _useMRT.muiTableContainerProps,
-      tableInstance = _useMRT.tableInstance;
+var MRT_TablePaper = function MRT_TablePaper(_ref) {
+  var tableInstance = _ref.tableInstance;
+  var getState = tableInstance.getState,
+      _tableInstance$option = tableInstance.options,
+      hideToolbarBottom = _tableInstance$option.hideToolbarBottom,
+      hideToolbarTop = _tableInstance$option.hideToolbarTop,
+      muiTablePaperProps = _tableInstance$option.muiTablePaperProps;
+
+  var _getState = getState(),
+      isFullScreen = _getState.isFullScreen;
 
-  var fullScreen = tableInstance.state.fullScreen;
   React.useEffect(function () {
     if (typeof window !== 'undefined') {
-      if (fullScreen) {
+      if (isFullScreen) {
         document.body.style.overflow = 'hidden';
       } else {
         document.body.style.overflow = 'auto';
       }
     }
-  }, [fullScreen]);
-  var tableContainerProps = muiTableContainerProps instanceof Function ? muiTableContainerProps(tableInstance) : muiTableContainerProps;
-  return React__default.createElement(material.TableContainer, Object.assign({
-    component: material.Paper
-  }, tableContainerProps, {
+  }, [isFullScreen]);
+  var tablePaperProps = muiTablePaperProps instanceof Function ? muiTablePaperProps(tableInstance) : muiTablePaperProps;
+  return React__default.createElement(material.Paper, Object.assign({
+    elevation: 2
+  }, tablePaperProps, {
     sx: _extends({
-      bottom: fullScreen ? '0' : undefined,
-      height: fullScreen ? '100%' : undefined,
-      left: fullScreen ? '0' : undefined,
-      m: fullScreen ? '0' : undefined,
-      overflowY: !fullScreen ? 'hidden' : undefined,
-      position: fullScreen ? 'fixed' : undefined,
-      right: fullScreen ? '0' : undefined,
-      top: fullScreen ? '0' : undefined,
+      bottom: isFullScreen ? '0' : undefined,
+      height: isFullScreen ? '100%' : undefined,
+      left: isFullScreen ? '0' : undefined,
+      m: isFullScreen ? '0' : undefined,
+      overflowY: !isFullScreen ? 'hidden' : undefined,
+      position: isFullScreen ? 'fixed' : undefined,
+      right: isFullScreen ? '0' : undefined,
+      top: isFullScreen ? '0' : undefined,
       transition: 'all 0.2s ease-in-out',
-      width: fullScreen ? '100vw' : undefined,
-      zIndex: fullScreen ? 1200 : 1
-    }, tableContainerProps == null ? void 0 : tableContainerProps.sx)
-  }), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, null), React__default.createElement(material.Box, {
-    sx: {
-      maxWidth: '100%',
-      overflowX: 'auto'
+      width: isFullScreen ? '100vw' : undefined,
+      zIndex: isFullScreen ? 1200 : 1
+    }, tablePaperProps == null ? void 0 : tablePaperProps.sx)
+  }), !hideToolbarTop && React__default.createElement(MRT_ToolbarTop, {
+    tableInstance: tableInstance
+  }), React__default.createElement(MRT_TableContainer, {
+    tableInstance: tableInstance
+  }), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, {
+    tableInstance: tableInstance
+  }));
+};
+
+var getAllLeafColumnDefs = function getAllLeafColumnDefs(columns) {
+  var lowestLevelColumns = columns;
+  var currentCols = columns;
+
+  while (!!((_currentCols = currentCols) != null && _currentCols.length) && currentCols.some(function (col) {
+    return col.columns;
+  })) {
+    var _currentCols;
+
+    var nextCols = currentCols.filter(function (col) {
+      return !!col.columns;
+    }).map(function (col) {
+      return col.columns;
+    }).flat();
+
+    if (nextCols.every(function (col) {
+      return !(col != null && col.columns);
+    })) {
+      lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
     }
-  }, React__default.createElement(MRT_Table, null)), !hideToolbarBottom && React__default.createElement(MRT_ToolbarBottom, null));
+
+    currentCols = nextCols;
+  }
+
+  return lowestLevelColumns.filter(function (col) {
+    return !col.columns;
+  });
 };
+var createGroup = function createGroup(table, column, currentFilterTypes) {
+  var _column$columns;
 
-var MRT_DefaultLocalization_EN = {
-  actions: 'Actions',
-  cancel: 'Cancel',
-  changeFilterMode: 'Change filter mode',
-  changeSearchMode: 'Change search mode',
-  clearFilter: 'Clear filter',
-  clearSearch: 'Clear search',
-  clearSort: 'Clear sort',
-  clickToCopy: 'Click to copy',
-  columnActions: 'Column Actions',
-  copiedToClipboard: 'Copied to clipboard',
-  edit: 'Edit',
-  expand: 'Expand',
-  expandAll: 'Expand all',
-  filterBestMatch: 'Best Match',
-  filterBestMatchFirst: 'Best Match First',
-  filterByColumn: 'Filter by {column}',
-  filterContains: 'Contains',
-  filterEmpty: 'Empty',
-  filterEndsWith: 'Ends With',
-  filterEquals: 'Equals',
-  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}"',
-  groupByColumn: 'Group by {column}',
-  groupedBy: 'Grouped by ',
-  hideAll: 'Hide all',
-  hideColumn: 'Hide {column} column',
-  rowActions: 'Row Actions',
-  save: 'Save',
-  search: 'Search',
-  selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
-  showAll: 'Show all',
-  showAllColumns: 'Show all columns',
-  showHideColumns: 'Show/Hide columns',
-  showHideFilters: 'Show/Hide filters',
-  showHideSearch: 'Show/Hide search',
-  sortByColumnAsc: 'Sort by {column} ascending',
-  sortByColumnDesc: 'Sort by {column} descending',
-  thenBy: ', then by ',
-  toggleDensePadding: 'Toggle dense padding',
-  toggleFullScreen: 'Toggle full screen',
-  toggleSelectAll: 'Toggle select all',
-  toggleSelectRow: 'Toggle select row',
-  ungroupByColumn: 'Ungroup by {column}'
+  return table.createGroup(_extends({}, column, {
+    columns: column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.map == null ? void 0 : _column$columns.map(function (col) {
+      return col.columns ? createGroup(table, col, currentFilterTypes) : createDataColumn(table, col, currentFilterTypes);
+    })
+  }));
+};
+var createDataColumn = function createDataColumn(table, column, currentFilterTypes) {
+  return (// @ts-ignore
+    table.createDataColumn(column.id, _extends({
+      filterType: currentFilterTypes[column.id] || MRT_FILTER_TYPE.BEST_MATCH
+    }, column))
+  );
+};
+var createDisplayColumn = function createDisplayColumn(table, column) {
+  return table.createDisplayColumn(column);
 };
 
-var MRT_Default_Icons = {
-  ArrowRightIcon: ArrowRightIcon,
-  CancelIcon: CancelIcon,
-  CheckBoxIcon: CheckBoxIcon,
-  ClearAllIcon: ClearAllIcon,
-  CloseIcon: CloseIcon,
-  ContentCopyIcon: ContentCopyIcon,
-  DensityMediumIcon: DensityMediumIcon,
-  DensitySmallIcon: DensitySmallIcon,
-  DoubleArrowDownIcon: DoubleArrowDownIcon,
-  DynamicFeedIcon: DynamicFeedIcon,
-  EditIcon: EditIcon,
-  ExpandLessIcon: ExpandLessIcon,
-  ExpandMoreIcon: ExpandMoreIcon,
-  FilterAltIcon: FilterAltIcon,
-  FilterAltOff: FilterAltOff,
-  FilterListIcon: FilterListIcon,
-  FilterListOffIcon: FilterListOffIcon,
-  FullscreenExitIcon: FullscreenExitIcon,
-  FullscreenIcon: FullscreenIcon,
-  MoreHorizIcon: MoreHorizIcon,
-  MoreVertIcon: MoreVertIcon,
-  SaveIcon: SaveIcon,
-  SearchIcon: SearchIcon,
-  SearchOffIcon: SearchOffIcon,
-  SortIcon: SortIcon,
-  ViewColumnIcon: ViewColumnIcon,
-  VisibilityOffIcon: VisibilityOffIcon
+var MRT_TableRoot = function MRT_TableRoot(props) {
+  var _props$initialState$i, _props$initialState, _props$initialState$i2, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$initialState$p, _props$initialState5, _props$initialState5$, _props$initialState$p2, _props$initialState6, _props$initialState6$, _props$initialState$p3, _props$initialState7, _props$initialState7$, _props$globalFilterTy, _props$getSubRows;
+
+  var idPrefix = React.useMemo(function () {
+    var _props$idPrefix;
+
+    return (_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9);
+  }, [props.idPrefix]);
+
+  var _useState = React.useState(null),
+      currentEditingRow = _useState[0],
+      setCurrentEditingRow = _useState[1];
+
+  var _useState2 = React.useState((_props$initialState$i = (_props$initialState = props.initialState) == null ? void 0 : _props$initialState.isDensePadding) != null ? _props$initialState$i : false),
+      isDensePadding = _useState2[0],
+      setIsDensePadding = _useState2[1];
+
+  var _useState3 = React.useState((_props$initialState$i2 = (_props$initialState2 = props.initialState) == null ? void 0 : _props$initialState2.isFullScreen) != null ? _props$initialState$i2 : false),
+      isFullScreen = _useState3[0],
+      setIsFullScreen = _useState3[1];
+
+  var _useState4 = React.useState((_props$initialState$s = (_props$initialState3 = props.initialState) == null ? void 0 : _props$initialState3.showFilters) != null ? _props$initialState$s : false),
+      showFilters = _useState4[0],
+      setShowFilters = _useState4[1];
+
+  var _useState5 = React.useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearch) != null ? _props$initialState$s2 : false),
+      showSearch = _useState5[0],
+      setShowSearch = _useState5[1];
+
+  var _useState6 = React.useState({
+    pageIndex: (_props$initialState$p = (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.pagination) == null ? void 0 : _props$initialState5$.pageIndex) != null ? _props$initialState$p : 0,
+    pageSize: (_props$initialState$p2 = (_props$initialState6 = props.initialState) == null ? void 0 : (_props$initialState6$ = _props$initialState6.pagination) == null ? void 0 : _props$initialState6$.pageSize) != null ? _props$initialState$p2 : 10,
+    pageCount: (_props$initialState$p3 = (_props$initialState7 = props.initialState) == null ? void 0 : (_props$initialState7$ = _props$initialState7.pagination) == null ? void 0 : _props$initialState7$.pageCount) != null ? _props$initialState$p3 : -1
+  }),
+      pagination = _useState6[0],
+      setPagination = _useState6[1];
+
+  var _useState7 = React.useState(function () {
+    return Object.assign.apply(Object, [{}].concat(getAllLeafColumnDefs(props.columns).map(function (c) {
+      var _ref, _c$filter, _props$initialState8, _props$initialState8$, _c$filterSelectOption, _ref2;
+
+      return _ref2 = {}, _ref2[c.id] = (_ref = (_c$filter = c.filter) != null ? _c$filter : props == null ? void 0 : (_props$initialState8 = props.initialState) == null ? void 0 : (_props$initialState8$ = _props$initialState8.columnFilters) == null ? void 0 : _props$initialState8$[c.id]) != null ? _ref : !!((_c$filterSelectOption = c.filterSelectOptions) != null && _c$filterSelectOption.length) ? MRT_FILTER_TYPE.EQUALS : MRT_FILTER_TYPE.BEST_MATCH, _ref2;
+    })));
+  }),
+      currentFilterTypes = _useState7[0],
+      setCurrentFilterTypes = _useState7[1];
+
+  var _useState8 = React.useState((_props$globalFilterTy = props.globalFilterType) != null ? _props$globalFilterTy : MRT_FILTER_TYPE.BEST_MATCH_FIRST),
+      currentGlobalFilterType = _useState8[0],
+      setCurrentGlobalFilterType = _useState8[1];
+
+  var table = React.useMemo(function () {
+    return reactTable.createTable();
+  }, []);
+  var displayColumns = React.useMemo(function () {
+    var _props$localization, _props$localization2, _props$localization3, _props$localization4;
+
+    return [(props.enableRowActions || props.enableRowEditing) && createDisplayColumn(table, {
+      Cell: function Cell(_ref3) {
+        var cell = _ref3.cell;
+        return React__default.createElement(MRT_ToggleRowActionMenuButton, {
+          row: cell.row,
+          tableInstance: tableInstance
+        });
+      },
+      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, {
+      Cell: function Cell(_ref4) {
+        var cell = _ref4.cell;
+        return React__default.createElement(MRT_ExpandButton, {
+          row: cell.row,
+          tableInstance: tableInstance
+        });
+      },
+      Header: function Header() {
+        return props.enableExpandAll ? React__default.createElement(MRT_ExpandAllButton, {
+          tableInstance: tableInstance
+        }) : null;
+      },
+      header: (_props$localization2 = props.localization) == null ? void 0 : _props$localization2.expand,
+      id: 'mrt-expand',
+      maxWidth: 40,
+      width: 40
+    }), props.enableRowSelection && createDisplayColumn(table, {
+      Cell: function Cell(_ref5) {
+        var cell = _ref5.cell;
+        return React__default.createElement(MRT_SelectCheckbox, {
+          row: cell.row,
+          tableInstance: tableInstance
+        });
+      },
+      Header: function Header() {
+        return props.enableSelectAll ? React__default.createElement(MRT_SelectCheckbox, {
+          selectAll: true,
+          tableInstance: tableInstance
+        }) : null;
+      },
+      header: (_props$localization3 = props.localization) == null ? void 0 : _props$localization3.select,
+      id: 'mrt-select',
+      maxWidth: 40,
+      width: 40
+    }), props.enableRowNumbers && createDisplayColumn(table, {
+      Cell: function Cell(_ref6) {
+        var cell = _ref6.cell;
+        return cell.row.index + 1;
+      },
+      Header: function Header() {
+        return '#';
+      },
+      header: (_props$localization4 = props.localization) == null ? void 0 : _props$localization4.rowNumbers,
+      id: 'mrt-row-numbers',
+      maxWidth: 40,
+      width: 40,
+      minWidth: 40
+    })].filter(Boolean);
+  }, [props.enableExpandAll, props.enableExpanded, props.enableRowActions, props.enableRowEditing, props.enableRowNumbers, props.enableRowSelection, props.enableSelectAll, props.localization]);
+  var columns = React.useMemo(function () {
+    return table.createColumns([].concat(displayColumns, props.columns.map(function (column) {
+      return column.columns ? createGroup(table, column, currentFilterTypes) : createDataColumn(table, column, currentFilterTypes);
+    })));
+  }, [table, props.columns, currentFilterTypes]);
+  var data = React.useMemo(function () {
+    return props.isLoading && !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
+
+  var tableInstance = reactTable.useTable(table, _extends({}, props, {
+    //@ts-ignore
+    filterTypes: defaultFilterFNs,
+    globalFilterType: currentGlobalFilterType,
+    columnFilterRowsFn: reactTable.columnFilterRowsFn,
+    columns: columns,
+    data: data,
+    expandRowsFn: reactTable.expandRowsFn,
+    getSubRows: (_props$getSubRows = props.getSubRows) != null ? _props$getSubRows : function (originalRow) {
+      return originalRow.subRows;
+    },
+    globalFilterRowsFn: reactTable.globalFilterRowsFn,
+    groupRowsFn: reactTable.groupRowsFn,
+    idPrefix: idPrefix,
+    onPaginationChange: function onPaginationChange(updater) {
+      return setPagination(function (old) {
+        return reactTable.functionalUpdate(updater, old);
+      });
+    },
+    paginateRowsFn: reactTable.paginateRowsFn,
+    setCurrentEditingRow: setCurrentEditingRow,
+    setCurrentFilterTypes: setCurrentFilterTypes,
+    setCurrentGlobalFilterType: setCurrentGlobalFilterType,
+    setIsDensePadding: setIsDensePadding,
+    setIsFullScreen: setIsFullScreen,
+    setShowFilters: setShowFilters,
+    setShowSearch: setShowSearch,
+    sortRowsFn: reactTable.sortRowsFn,
+    state: _extends({}, props.initialState, {
+      currentEditingRow: currentEditingRow,
+      currentFilterTypes: currentFilterTypes,
+      currentGlobalFilterType: currentGlobalFilterType,
+      isDensePadding: isDensePadding,
+      isFullScreen: isFullScreen,
+      //@ts-ignore
+      pagination: pagination,
+      showFilters: showFilters,
+      showSearch: showSearch
+    }, props.state)
+  }));
+  return React__default.createElement(MRT_TablePaper, {
+    tableInstance: tableInstance
+  });
 };
 
-var _excluded = ["defaultColumn", "filterTypes", "globalFilter", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
+var _excluded$5 = ["enableColumnActions", "enableColumnFilters", "enableDensePaddingToggle", "enableExpandAll", "enableFullScreenToggle", "enableGlobalFilter", "enableHiding", "enablePagination", "enableSelectAll", "enableSorting", "enableStickyHeader", "filterTypes", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
 var MaterialReactTable = (function (_ref) {
-  var _ref$defaultColumn = _ref.defaultColumn,
-      defaultColumn = _ref$defaultColumn === void 0 ? {
-    minWidth: 50,
-    maxWidth: 1000
-  } : _ref$defaultColumn,
-      filterTypes = _ref.filterTypes,
-      _ref$globalFilter = _ref.globalFilter,
-      globalFilter = _ref$globalFilter === void 0 ? MRT_FILTER_TYPE.BEST_MATCH_FIRST : _ref$globalFilter,
+  var _ref$enableColumnActi = _ref.enableColumnActions,
+      enableColumnActions = _ref$enableColumnActi === void 0 ? true : _ref$enableColumnActi,
+      _ref$enableColumnFilt = _ref.enableColumnFilters,
+      enableColumnFilters = _ref$enableColumnFilt === void 0 ? true : _ref$enableColumnFilt,
+      _ref$enableDensePaddi = _ref.enableDensePaddingToggle,
+      enableDensePaddingToggle = _ref$enableDensePaddi === void 0 ? true : _ref$enableDensePaddi,
+      _ref$enableExpandAll = _ref.enableExpandAll,
+      enableExpandAll = _ref$enableExpandAll === void 0 ? true : _ref$enableExpandAll,
+      _ref$enableFullScreen = _ref.enableFullScreenToggle,
+      enableFullScreenToggle = _ref$enableFullScreen === void 0 ? true : _ref$enableFullScreen,
+      _ref$enableGlobalFilt = _ref.enableGlobalFilter,
+      enableGlobalFilter = _ref$enableGlobalFilt === void 0 ? true : _ref$enableGlobalFilt,
+      _ref$enableHiding = _ref.enableHiding,
+      enableHiding = _ref$enableHiding === void 0 ? true : _ref$enableHiding,
+      _ref$enablePagination = _ref.enablePagination,
+      enablePagination = _ref$enablePagination === void 0 ? true : _ref$enablePagination,
+      _ref$enableSelectAll = _ref.enableSelectAll,
+      enableSelectAll = _ref$enableSelectAll === void 0 ? true : _ref$enableSelectAll,
+      _ref$enableSorting = _ref.enableSorting,
+      enableSorting = _ref$enableSorting === void 0 ? true : _ref$enableSorting,
+      _ref$enableStickyHead = _ref.enableStickyHeader,
+      enableStickyHeader = _ref$enableStickyHead === void 0 ? true : _ref$enableStickyHead,
       icons = _ref.icons,
       localization = _ref.localization,
       _ref$positionActionsC = _ref.positionActionsColumn,
@@ -3260,23 +3669,27 @@ var MaterialReactTable = (function (_ref) {
       positionToolbarActions = _ref$positionToolbarA === void 0 ? 'top' : _ref$positionToolbarA,
       _ref$positionToolbarA2 = _ref.positionToolbarAlertBanner,
       positionToolbarAlertBanner = _ref$positionToolbarA2 === void 0 ? 'top' : _ref$positionToolbarA2,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return React__default.createElement(MaterialReactTableProvider //@ts-ignore
-  , Object.assign({
-    //@ts-ignore
-    defaultColumn: defaultColumn,
-    //@ts-ignore
-    filterTypes: _extends({}, defaultFilterFNs, filterTypes),
-    //@ts-ignore
-    globalFilter: globalFilter,
+      rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
+
+  return React__default.createElement(MRT_TableRoot, Object.assign({
+    enableColumnActions: enableColumnActions,
+    enableColumnFilters: enableColumnFilters,
+    enableDensePaddingToggle: enableDensePaddingToggle,
+    enableExpandAll: enableExpandAll,
+    enableFullScreenToggle: enableFullScreenToggle,
+    enableGlobalFilter: enableGlobalFilter,
+    enableHiding: enableHiding,
+    enablePagination: enablePagination,
+    enableSelectAll: enableSelectAll,
+    enableSorting: enableSorting,
+    enableStickyHeader: enableStickyHeader,
     icons: _extends({}, MRT_Default_Icons, icons),
     localization: _extends({}, MRT_DefaultLocalization_EN, localization),
     positionActionsColumn: positionActionsColumn,
     positionPagination: positionPagination,
     positionToolbarActions: positionToolbarActions,
     positionToolbarAlertBanner: positionToolbarAlertBanner
-  }, rest), React__default.createElement(MRT_TableContainer, null));
+  }, rest));
 });
 
 exports.default = MaterialReactTable;