material-react-table 0.5.1 → 0.5.4

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

@@ -1,6 +1,8 @@
-import React, { useMemo, useState, useContext, createContext, Fragment, useRef, useEffect } from 'react';
+import React, { useState, useMemo, useContext, createContext, Fragment, useRef, useEffect } from 'react';
 import { useTable, useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect, useResizeColumns, useFlexLayout, useAsyncDebounce } from 'react-table';
-import { TextField, Tooltip, InputAdornment, IconButton, Menu, MenuItem, Divider, TableCell, Box, TableSortLabel, Collapse, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Chip, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
+import { matchSorter } from 'match-sorter';
+import { Menu, Typography, Divider, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, MenuList, ListItemIcon, ListItemText, TableCell, Box, TableSortLabel, Collapse, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
@@ -93,6 +95,100 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var fuzzyFilterFN = function fuzzyFilterFN(rows, id, filterValue) {
+  return matchSorter(rows, filterValue.toString().trim(), {
+    keys: ["values." + id],
+    sorter: function sorter(rankedItems) {
+      return rankedItems;
+    }
+  });
+};
+
+fuzzyFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var containsFilterFN = function containsFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim().includes(filterValue.toString().toLowerCase().trim());
+  });
+};
+
+containsFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var startsWithFilterFN = function startsWithFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim().startsWith(filterValue.toString().toLowerCase().trim());
+  });
+};
+
+startsWithFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var endsWithFilterFN = function endsWithFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim().endsWith(filterValue.toString().toLowerCase().trim());
+  });
+};
+
+endsWithFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var equalsFilterFN = function equalsFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim() === filterValue.toString().toLowerCase().trim();
+  });
+};
+
+equalsFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var notEqualsFilterFN = function notEqualsFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return row.values[id].toString().toLowerCase().trim() !== filterValue.toString().toLowerCase().trim();
+  });
+};
+
+notEqualsFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var emptyFilterFN = function emptyFilterFN(rows, id, _filterValue) {
+  return rows.filter(function (row) {
+    return !row.values[id].toString().toLowerCase().trim();
+  });
+};
+
+emptyFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var notEmptyFilterFN = function notEmptyFilterFN(rows, id, _filterValue) {
+  return rows.filter(function (row) {
+    return !!row.values[id].toString().toLowerCase().trim();
+  });
+};
+
+notEmptyFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var defaultFilterFNs = {
+  contains: containsFilterFN,
+  empty: emptyFilterFN,
+  endsWith: endsWithFilterFN,
+  equals: equalsFilterFN,
+  fuzzy: fuzzyFilterFN,
+  notEmpty: notEmptyFilterFN,
+  notEquals: notEqualsFilterFN,
+  startsWith: startsWithFilterFN
+};
+
 var MaterialReactTableContext = /*#__PURE__*/function () {
   return createContext({});
 }();
@@ -102,19 +198,6 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
 
   var hooks = [useFilters, useGlobalFilter, useGroupBy, useSortBy, useExpanded, usePagination, useRowSelect];
   if (props.enableColumnResizing) hooks.unshift(useResizeColumns, useFlexLayout);
-  var tableInstance = useTable.apply(void 0, [props].concat(hooks));
-  var anyRowsCanExpand = useMemo( // @ts-ignore
-  function () {
-    return tableInstance.rows.some(function (row) {
-      return row.canExpand;
-    });
-  }, [tableInstance.rows]);
-  var anyRowsExpanded = useMemo( // @ts-ignore
-  function () {
-    return tableInstance.rows.some(function (row) {
-      return row.isExpanded;
-    });
-  }, [tableInstance.rows]);
 
   var _useState = useState(null),
       currentEditingRow = _useState[0],
@@ -132,37 +215,184 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       showFilters = _useState4[0],
       setShowFilters = _useState4[1];
 
-  var _useState5 = useState((_props$initialState$s2 = (_props$initialState4 = props.initialState) == null ? void 0 : _props$initialState4.showSearchTextField) != null ? _props$initialState$s2 : false),
+  var _useState5 = 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 filterTypes = useMemo(function () {
+    return _extends({}, defaultFilterFNs, props.filterTypes);
+  }, [props.filterTypes]);
+
+  var _useState6 = useState(function () {
+    return Object.assign.apply(Object, [{}].concat(props.columns.map(function (c) {
+      var _c$accessor;
+
+      return (_c$accessor = c.accessor) == null ? void 0 : _c$accessor.toString();
+    }).map(function (accessor) {
+      var _props$initialState$f2, _props$initialState5, _props$initialState5$, _ref;
+
+      return _ref = {}, _ref[accessor] = (_props$initialState$f2 = props == null ? void 0 : (_props$initialState5 = props.initialState) == null ? void 0 : (_props$initialState5$ = _props$initialState5.filters) == null ? void 0 : _props$initialState5$[accessor]) != null ? _props$initialState$f2 : 'fuzzy', _ref;
+    })));
+  }),
+      currentFilterTypes = _useState6[0],
+      setCurrentFilterTypes = _useState6[1];
+
+  var columns = useMemo(function () {
+    return props.columns.map(function (column) {
+      column.filter = filterTypes[currentFilterTypes[column.accessor]];
+      return column;
+    });
+  }, [props.columns, filterTypes, currentFilterTypes]);
+  var tableInstance = useTable.apply(void 0, [_extends({}, props, {
+    columns: columns,
+    // @ts-ignore
+    filterTypes: filterTypes,
+    useControlledState: function useControlledState(state) {
+      return useMemo(function () {
+        return _extends({}, state, {
+          currentEditingRow: currentEditingRow,
+          currentFilterTypes: currentFilterTypes,
+          densePadding: densePadding,
+          fullScreen: fullScreen,
+          showFilters: showFilters,
+          showSearch: showSearch
+        }, props == null ? void 0 : props.useControlledState == null ? void 0 : props.useControlledState(state));
+      }, [currentEditingRow, currentFilterTypes, densePadding, fullScreen, showFilters, showSearch, state]);
+    }
+  })].concat(hooks));
+  var idPrefix = useMemo(function () {
+    var _props$idPrefix;
+
+    return (_props$idPrefix = props.idPrefix) != null ? _props$idPrefix : Math.random().toString(36).substring(2, 9);
+  }, [props.idPrefix]);
+  var anyRowsCanExpand = useMemo(function () {
+    return tableInstance.rows.some(function (row) {
+      return row.canExpand;
+    });
+  }, [tableInstance.rows]);
+  var anyRowsExpanded = useMemo(function () {
+    return tableInstance.rows.some(function (row) {
+      return row.isExpanded;
+    });
+  }, [tableInstance.rows]);
   return React.createElement(MaterialReactTableContext.Provider, {
     value: _extends({}, props, {
       anyRowsCanExpand: anyRowsCanExpand,
       anyRowsExpanded: anyRowsExpanded,
-      currentEditingRow: currentEditingRow,
-      densePadding: densePadding,
+      idPrefix: idPrefix,
+      //@ts-ignore
       setCurrentEditingRow: setCurrentEditingRow,
+      setCurrentFilterTypes: setCurrentFilterTypes,
       setDensePadding: setDensePadding,
-      fullScreen: fullScreen,
       setFullScreen: setFullScreen,
       setShowFilters: setShowFilters,
       setShowSearch: setShowSearch,
-      showFilters: showFilters,
-      showSearch: showSearch,
       //@ts-ignore
       tableInstance: tableInstance
     })
   }, props.children);
 };
 var useMRT = function useMRT() {
-  return (// @ts-ignore
-    useContext(MaterialReactTableContext)
-  );
+  return useContext(MaterialReactTableContext);
+};
+
+var MRT_FilterMenu = function MRT_FilterMenu(_ref) {
+  var anchorEl = _ref.anchorEl,
+      column = _ref.column,
+      onSelect = _ref.onSelect,
+      setAnchorEl = _ref.setAnchorEl;
+
+  var _useMRT = useMRT(),
+      localization = _useMRT.localization,
+      setCurrentFilterTypes = _useMRT.setCurrentFilterTypes,
+      tableInstance = _useMRT.tableInstance;
+
+  var filterTypes = useMemo(function () {
+    return [{
+      type: 'fuzzy',
+      label: localization.filterMenuItemFuzzy,
+      divider: false
+    }, {
+      type: 'contains',
+      label: localization.filterMenuItemContains,
+      divider: true
+    }, {
+      type: 'startsWith',
+      label: localization.filterMenuItemStartsWith,
+      divider: false
+    }, {
+      type: 'endsWith',
+      label: localization.filterMenuItemEndsWith,
+      divider: true
+    }, {
+      type: 'equals',
+      label: localization.filterMenuItemEquals,
+      divider: false
+    }, {
+      type: 'notEquals',
+      label: localization.filterMenuItemNotEquals,
+      divider: true
+    }, {
+      type: 'empty',
+      label: localization.filterMenuItemEmpty,
+      divider: false
+    }, {
+      type: 'notEmpty',
+      label: localization.filterMenuItemNotEmpty,
+      divider: false
+    }];
+  }, []);
+
+  var handleSelectMenuItem = function handleSelectMenuItem(value) {
+    setAnchorEl(null);
+    setCurrentFilterTypes(function (prev) {
+      var _extends2;
+
+      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
+    });
+
+    if (['empty', 'notEmpty'].includes(value)) {
+      column.setFilter(' ');
+    }
+
+    onSelect == null ? void 0 : onSelect();
+  };
+
+  var filterType = tableInstance.state.currentFilterTypes[column.id];
+  return React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    anchorOrigin: {
+      vertical: 'center',
+      horizontal: 'right'
+    },
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    }
+  }, React.createElement(Typography, {
+    sx: {
+      fontWeight: 'bold',
+      p: '1rem',
+      fontSize: '1.1rem'
+    }
+  }, localization.filterMenuTitle), React.createElement(Divider, null), filterTypes.map(function (_ref2) {
+    var type = _ref2.type,
+        label = _ref2.label,
+        divider = _ref2.divider;
+    return React.createElement(MenuItem, {
+      divider: divider,
+      key: type,
+      onClick: function onClick() {
+        return handleSelectMenuItem(type);
+      },
+      selected: type === filterType,
+      value: type
+    }, label);
+  }));
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterT, _localization$filterT2, _localization$filterT3;
+  var _localization$filterT, _localization$filterT2;
 
   var column = _ref.column;
 
@@ -170,37 +400,70 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       _useMRT$icons = _useMRT.icons,
       FilterListIcon = _useMRT$icons.FilterListIcon,
       CloseIcon = _useMRT$icons.CloseIcon,
-      localization = _useMRT.localization;
+      idPrefix = _useMRT.idPrefix,
+      localization = _useMRT.localization,
+      muiTableHeadCellFilterTextFieldProps = _useMRT.muiTableHeadCellFilterTextFieldProps,
+      setCurrentFilterTypes = _useMRT.setCurrentFilterTypes,
+      tableInstance = _useMRT.tableInstance;
 
-  var _useState = useState(''),
-      filterValue = _useState[0],
-      setFilterValue = _useState[1];
+  var _useState = useState(null),
+      anchorEl = _useState[0],
+      setAnchorEl = _useState[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, {
+    style: _extends({}, mTableHeadCellFilterTextFieldProps == null ? void 0 : mTableHeadCellFilterTextFieldProps.style, mcTableHeadCellFilterTextFieldProps == null ? void 0 : mcTableHeadCellFilterTextFieldProps.style)
+  });
+
+  var _useState2 = useState(''),
+      filterValue = _useState2[0],
+      setFilterValue = _useState2[1];
 
   var handleChange = useAsyncDebounce(function (value) {
     column.setFilter(value != null ? value : undefined);
   }, 150);
 
+  var handleFilterMenuOpen = function handleFilterMenuOpen(event) {
+    setAnchorEl(event.currentTarget);
+  };
+
   var handleClear = function handleClear() {
     setFilterValue('');
     column.setFilter(undefined);
   };
 
+  var handleClearFilterChip = function handleClearFilterChip() {
+    setFilterValue('');
+    column.setFilter(undefined);
+    setCurrentFilterTypes(function (prev) {
+      var _extends2;
+
+      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = 'fuzzy', _extends2));
+    });
+  };
+
   if (column.Filter) {
     return React.createElement(React.Fragment, null, column.Filter == null ? void 0 : column.Filter({
       column: column
     }));
   }
 
-  return React.createElement(TextField, {
+  var filterType = tableInstance.state.currentFilterTypes[column.id];
+  var showFilterChip = ['empty', 'notEmpty'].includes(filterType);
+  var filterPlaceholder = (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header));
+  return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
-    id: "filter-" + column.id + "-column",
+    id: "mrt-" + idPrefix + "-" + column.id + "-filter-text-field",
     inputProps: {
-      style: {
+      sx: {
         textOverflow: 'ellipsis'
-      }
+      },
+      title: filterPlaceholder
     },
-    margin: "dense",
-    placeholder: (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)),
+    margin: "none",
+    placeholder: showFilterChip ? '' : filterPlaceholder,
     onChange: function onChange(e) {
       setFilterValue(e.target.value);
       handleChange(e.target.value);
@@ -211,33 +474,52 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React.createElement(Tooltip, {
-        arrow: true,
-        title: (_localization$filterT2 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT2.replace('{column}', String(column.Header))
-      }, React.createElement(InputAdornment, {
+      startAdornment: React.createElement(InputAdornment, {
         position: "start"
-      }, React.createElement(FilterListIcon, null))),
-      endAdornment: React.createElement(InputAdornment, {
+      }, React.createElement(Tooltip, {
+        arrow: true,
+        title: "Change Filter Mode"
+      }, React.createElement(IconButton, {
+        onClick: handleFilterMenuOpen,
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
+      }, React.createElement(FilterListIcon, null))), showFilterChip && React.createElement(Chip, {
+        onDelete: handleClearFilterChip,
+        label: filterType
+      })),
+      endAdornment: !showFilterChip && React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(Tooltip, {
         arrow: true,
-        title: (_localization$filterT3 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT3 : ''
+        placement: "right",
+        title: (_localization$filterT2 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT2 : ''
       }, React.createElement("span", null, React.createElement(IconButton, {
         "aria-label": localization.filterTextFieldClearButtonTitle,
         disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
         onClick: handleClear,
-        size: "small"
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
       }, React.createElement(CloseIcon, {
         fontSize: "small"
       })))))
     }
-  });
+  }, textFieldProps, {
+    sx: _extends({
+      minWidth: '6rem'
+    }, textFieldProps == null ? void 0 : textFieldProps.sx)
+  })), React.createElement(MRT_FilterMenu, {
+    anchorEl: anchorEl,
+    column: column,
+    setAnchorEl: setAnchorEl
+  }));
 };
 
-var commonMenuItemStyles = {
-  display: 'flex',
-  gap: '0.75rem'
-};
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
   var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
 
@@ -250,14 +532,19 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       disableFilters = _useMRT.disableFilters,
       disableSortBy = _useMRT.disableSortBy,
       enableColumnGrouping = _useMRT.enableColumnGrouping,
-      localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters,
       _useMRT$icons = _useMRT.icons,
-      FilterListIcon = _useMRT$icons.FilterListIcon,
-      SortIcon = _useMRT$icons.SortIcon,
       ClearAllIcon = _useMRT$icons.ClearAllIcon,
       DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
-      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon;
+      FilterListIcon = _useMRT$icons.FilterListIcon,
+      SortIcon = _useMRT$icons.SortIcon,
+      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon,
+      idPrefix = _useMRT.idPrefix,
+      localization = _useMRT.localization,
+      setShowFilters = _useMRT.setShowFilters;
+
+  var _useState = useState(null),
+      filterMenuAnchorEl = _useState[0],
+      setFilterMenuAnchorEl = _useState[1];
 
   var handleClearSort = function handleClearSort() {
     column.clearSortBy();
@@ -290,55 +577,63 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       var _document$getElementB, _column$muiTableHeadC, _column$muiTableHeadC2;
 
       return (_document$getElementB = document.getElementById( // @ts-ignore
-      (_column$muiTableHeadC = (_column$muiTableHeadC2 = column.muiTableHeadCellFilterTextFieldProps) == null ? void 0 : _column$muiTableHeadC2.id) != null ? _column$muiTableHeadC : "filter-" + column.id + "-column")) == null ? void 0 : _document$getElementB.focus();
+      (_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();
     }, 200);
     setAnchorEl(null);
   };
 
+  var handleOpenFilterModeMenu = function handleOpenFilterModeMenu(event) {
+    event.stopPropagation();
+    setFilterMenuAnchorEl(event.currentTarget);
+  };
+
   return React.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
+  }, React.createElement(MenuList, null, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
     key: 1,
     disabled: !column.isSorted,
-    onClick: handleClearSort,
-    sx: commonMenuItemStyles
-  }, React.createElement(ClearAllIcon, null), " ", localization.columnActionMenuItemClearSort), React.createElement(MenuItem, {
+    onClick: handleClearSort
+  }, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), React.createElement(ListItemText, null, localization.columnActionMenuItemClearSort)), React.createElement(MenuItem, {
     key: 2,
     disabled: column.isSorted && !column.isSortedDesc,
-    onClick: handleSortAsc,
-    sx: commonMenuItemStyles
-  }, React.createElement(SortIcon, null), ' ', (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React.createElement(MenuItem, {
+    onClick: handleSortAsc
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), React.createElement(ListItemText, null, (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
     key: 3,
     disabled: column.isSorted && column.isSortedDesc,
-    onClick: handleSortDesc,
-    sx: commonMenuItemStyles
-  }, React.createElement(SortIcon, {
+    onClick: handleSortDesc
+  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
     style: {
       transform: 'rotate(180deg) scaleX(-1)'
     }
-  }), ' ', (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header)))], !disableFilters && column.canFilter && [React.createElement(Divider, {
+  })), React.createElement(ListItemText, null, (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(Divider, {
     key: 0
   }), React.createElement(MenuItem, {
     key: 1,
-    onClick: handleFilterByColumn,
-    sx: commonMenuItemStyles
-  }, React.createElement(FilterListIcon, null), ' ', (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React.createElement(Divider, {
+    onClick: handleFilterByColumn
+  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), React.createElement(ListItemText, null, (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), React.createElement(IconButton, {
+    size: "small",
+    onMouseEnter: handleOpenFilterModeMenu
+  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterMenu, {
+    anchorEl: filterMenuAnchorEl,
+    column: column,
+    key: 2,
+    setAnchorEl: setFilterMenuAnchorEl,
+    onSelect: handleFilterByColumn
+  })], enableColumnGrouping && column.canGroupBy && [React.createElement(Divider, {
     key: 1
   }), React.createElement(MenuItem, {
     key: 2,
-    onClick: handleGroupByColumn,
-    sx: commonMenuItemStyles
-  }, React.createElement(DynamicFeedIcon, null), ' ', (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React.createElement(Divider, {
+    onClick: handleGroupByColumn
+  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), React.createElement(ListItemText, null, (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(Divider, {
     key: 0
   }), React.createElement(MenuItem, {
     key: 1,
-    onClick: handleHideColumn,
-    sx: commonMenuItemStyles
-  }, React.createElement(VisibilityOffIcon, null), ' ', (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
+    onClick: handleHideColumn
+  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), React.createElement(ListItemText, null, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]));
 };
 
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
@@ -368,11 +663,12 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     onClick: handleClick,
     size: "small",
     sx: {
+      height: '2rem',
+      mr: '2px',
+      mt: '-0.2rem',
       opacity: 0.5,
       transition: 'opacity 0.2s',
-      marginRight: '2px',
-      height: '1.6rem',
-      width: '1.6rem',
+      width: '2rem',
       '&:hover': {
         opacity: 1
       }
@@ -400,13 +696,11 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   var column = _ref.column;
 
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
       disableColumnActions = _useMRT.disableColumnActions,
       disableFilters = _useMRT.disableFilters,
       enableColumnResizing = _useMRT.enableColumnResizing,
       localization = _useMRT.localization,
       muiTableHeadCellProps = _useMRT.muiTableHeadCellProps,
-      showFilters = _useMRT.showFilters,
       tableInstance = _useMRT.tableInstance;
 
   var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
@@ -418,17 +712,12 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
   });
 
   var sortTooltip = column.isSorted ? column.isSortedDesc ? localization.columnActionMenuItemClearSort : (_localization$columnA = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA.replace('{column}', column.Header) : (_localization$columnA2 = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA2.replace('{column}', column.Header);
+  var columnHeader = column.render('Header');
   return React.createElement(TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
   }, tableCellProps, {
-    sx: _extends({}, commonTableHeadCellStyles(densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
   }), React.createElement(Box, {
-    sx: {
-      alignContent: 'space-between',
-      display: 'grid',
-      height: '100%'
-    }
-  }, React.createElement(Box, {
     sx: {
       alignItems: 'flex-start',
       display: 'flex',
@@ -439,7 +728,8 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     sx: {
       alignItems: 'center',
       display: 'flex',
-      flexWrap: 'nowrap'
+      flexWrap: 'nowrap',
+      whiteSpace: columnHeader.length < 15 ? 'nowrap' : 'normal'
     },
     title: undefined
   }), column.render('Header'), !isParentHeader && column.canSort && React.createElement(Tooltip, {
@@ -470,10 +760,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
       maxHeight: '2rem'
     }
   })))), !disableFilters && column.canFilter && React.createElement(Collapse, {
-    "in": showFilters
+    "in": tableInstance.state.showFilters
   }, React.createElement(MRT_FilterTextField, {
     column: column
-  }))));
+  })));
 };
 
 var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
@@ -482,9 +772,9 @@ var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
   var cell = _ref.cell;
 
   var _useMRT = useMRT(),
-      currentEditingRow = _useMRT.currentEditingRow,
       muiTableBodyCellEditTextFieldProps = _useMRT.muiTableBodyCellEditTextFieldProps,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow;
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
+      currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
 
   var handleChange = function handleChange(event) {
     if (currentEditingRow) {
@@ -540,8 +830,9 @@ var MRT_TableBodyCell = function MRT_TableBodyCell(_ref) {
   var _useMRT = useMRT(),
       onCellClick = _useMRT.onCellClick,
       muiTableBodyCellProps = _useMRT.muiTableBodyCellProps,
-      densePadding = _useMRT.densePadding,
-      currentEditingRow = _useMRT.currentEditingRow;
+      _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;
@@ -566,7 +857,6 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
       selectAll = _ref.selectAll;
 
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
       localization = _useMRT.localization,
       onRowSelectChange = _useMRT.onRowSelectChange,
       onSelectAllChange = _useMRT.onSelectAllChange,
@@ -588,7 +878,7 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
   var checkboxProps = selectAll ? tableInstance.getToggleAllRowsSelectedProps() : row == null ? void 0 : row.getToggleRowSelectedProps();
   return React.createElement(TableCell, {
-    sx: commonTableBodyButtonCellStyles(densePadding)
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
   }, React.createElement(Tooltip, {
     arrow: true,
     enterDelay: 1000,
@@ -606,16 +896,15 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
 
 var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
   var _useMRT = useMRT(),
-      tableInstance = _useMRT.tableInstance,
-      localization = _useMRT.localization,
       anyRowsExpanded = _useMRT.anyRowsExpanded,
-      densePadding = _useMRT.densePadding,
-      DoubleArrowDownIcon = _useMRT.icons.DoubleArrowDownIcon;
+      DoubleArrowDownIcon = _useMRT.icons.DoubleArrowDownIcon,
+      localization = _useMRT.localization,
+      tableInstance = _useMRT.tableInstance;
 
   return React.createElement(TableCell, Object.assign({
     size: "small"
   }, tableInstance.getToggleAllRowsExpandedProps(), {
-    sx: commonTableBodyButtonCellStyles(densePadding)
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
   }), React.createElement(IconButton, {
     "aria-label": localization.expandAllButtonTitle,
     title: localization.expandAllButtonTitle
@@ -648,8 +937,8 @@ var MRT_TableSpacerCell = function MRT_TableSpacerCell(_ref) {
 
 var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
-      localization = _useMRT.localization;
+      localization = _useMRT.localization,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   return React.createElement(TableCell, {
     style: {
@@ -666,7 +955,6 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
 
   var _useMRT = useMRT(),
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
-      densePadding = _useMRT.densePadding,
       disableExpandAll = _useMRT.disableExpandAll,
       enableRowActions = _useMRT.enableRowActions,
       enableRowEditing = _useMRT.enableRowEditing,
@@ -691,7 +979,7 @@ var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
   });
 
   return React.createElement(TableRow, Object.assign({}, tableRowProps), enableRowNumbers && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(TableCell, {
-    sx: _extends({}, commonTableHeadCellStyles(densePadding))
+    sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding))
   }, "#")), (enableRowActions || enableRowEditing) && positionActionsColumn === 'first' && (isParentHeader ? React.createElement(MRT_TableSpacerCell, null) : React.createElement(MRT_TableHeadCellActions, null)), anyRowsCanExpand || renderDetailPanel ? !disableExpandAll && !isParentHeader ? React.createElement(MRT_ExpandAllButton, null) : React.createElement(MRT_TableSpacerCell, {
     width: (renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5) + "rem"
   }) : null, enableSelection ? !isParentHeader ? React.createElement(MRT_SelectCheckbox, {
@@ -753,10 +1041,10 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   var row = _ref.row;
 
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
       ExpandMoreIcon = _useMRT.icons.ExpandMoreIcon,
       localization = _useMRT.localization,
-      renderDetailPanel = _useMRT.renderDetailPanel;
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   return React.createElement(TableCell, {
     size: "small",
@@ -1576,9 +1864,9 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
       CancelIcon = _useMRT$icons.CancelIcon,
       SaveIcon = _useMRT$icons.SaveIcon,
       localization = _useMRT.localization,
-      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
       onRowEditSubmit = _useMRT.onRowEditSubmit,
-      currentEditingRow = _useMRT.currentEditingRow;
+      setCurrentEditingRow = _useMRT.setCurrentEditingRow,
+      currentEditingRow = _useMRT.tableInstance.state.currentEditingRow;
 
   var handleCancel = function handleCancel() {
     row.values = row.original;
@@ -1642,11 +1930,11 @@ var commonIconButtonStyles = {
   }
 };
 var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref) {
+  var _tableInstance$state$;
+
   var row = _ref.row;
 
   var _useMRT = useMRT(),
-      currentEditingRow = _useMRT.currentEditingRow,
-      densePadding = _useMRT.densePadding,
       enableRowEditing = _useMRT.enableRowEditing,
       _useMRT$icons = _useMRT.icons,
       EditIcon = _useMRT$icons.EditIcon,
@@ -1673,8 +1961,8 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   };
 
   return React.createElement(TableCell, {
-    sx: commonTableBodyButtonCellStyles(densePadding)
-  }, renderRowActions ? React.createElement(React.Fragment, null, renderRowActions(row, tableInstance)) : row.id === (currentEditingRow == null ? void 0 : currentEditingRow.id) ? React.createElement(MRT_EditActionButtons, {
+    sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
+  }, renderRowActions ? React.createElement(React.Fragment, null, renderRowActions(row, tableInstance)) : row.id === ((_tableInstance$state$ = tableInstance.state.currentEditingRow) == null ? void 0 : _tableInstance$state$.id) ? React.createElement(MRT_EditActionButtons, {
     row: row
   }) : !renderRowActionMenuItems && enableRowEditing ? React.createElement(Tooltip, {
     placement: "right",
@@ -1683,13 +1971,17 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   }, React.createElement(IconButton, {
     sx: commonIconButtonStyles,
     onClick: handleEdit
-  }, React.createElement(EditIcon, null))) : renderRowActionMenuItems ? React.createElement(React.Fragment, null, React.createElement(IconButton, {
+  }, React.createElement(EditIcon, null))) : renderRowActionMenuItems ? React.createElement(React.Fragment, null, React.createElement(Tooltip, {
+    arrow: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    title: localization.rowActionMenuButtonTitle
+  }, React.createElement(IconButton, {
     "aria-label": localization.rowActionMenuButtonTitle,
     onClick: handleOpenRowActionMenu,
     size: "small",
-    sx: commonIconButtonStyles,
-    title: localization.rowActionMenuButtonTitle
-  }, React.createElement(MoreHorizIcon, null)), React.createElement(MRT_RowActionMenu, {
+    sx: commonIconButtonStyles
+  }, React.createElement(MoreHorizIcon, null))), React.createElement(MRT_RowActionMenu, {
     anchorEl: anchorEl,
     handleEdit: handleEdit,
     row: row,
@@ -1702,7 +1994,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
 
   var _useMRT = useMRT(),
       anyRowsCanExpand = _useMRT.anyRowsCanExpand,
-      densePadding = _useMRT.densePadding,
       enableRowActions = _useMRT.enableRowActions,
       enableRowEditing = _useMRT.enableRowEditing,
       enableRowNumbers = _useMRT.enableRowNumbers,
@@ -1710,7 +2001,8 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       muiTableBodyRowProps = _useMRT.muiTableBodyRowProps,
       onRowClick = _useMRT.onRowClick,
       positionActionsColumn = _useMRT.positionActionsColumn,
-      renderDetailPanel = _useMRT.renderDetailPanel;
+      renderDetailPanel = _useMRT.renderDetailPanel,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   var mTableBodyRowProps = muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
 
@@ -1724,7 +2016,6 @@ var MRT_TableBodyRow = function MRT_TableBodyRow(_ref) {
       return onRowClick == null ? void 0 : onRowClick(event, row);
     }
   }, tableRowProps, {
-    //@ts-ignore
     sx: function sx(theme) {
       return _extends({
         backgroundColor: row.isSelected ? alpha(theme.palette.primary.light, 0.1) : 'transparent'
@@ -1757,9 +2048,10 @@ var MRT_TableBody = function MRT_TableBody() {
       manualPagination = _useMRT.manualPagination;
 
   var rows = manualPagination ? tableInstance.rows : tableInstance.page;
+  var mTableBodyProps = muiTableBodyProps instanceof Function ? muiTableBodyProps(tableInstance) : muiTableBodyProps;
 
-  var tableBodyProps = _extends({}, muiTableBodyProps, tableInstance.getTableBodyProps(), {
-    style: _extends({}, tableInstance.getTableBodyProps().style, muiTableBodyProps == null ? void 0 : muiTableBodyProps.style)
+  var tableBodyProps = _extends({}, mTableBodyProps, tableInstance.getTableBodyProps(), {
+    style: _extends({}, tableInstance.getTableBodyProps().style, mTableBodyProps == null ? void 0 : mTableBodyProps.style)
   });
 
   return React.createElement(TableBody, Object.assign({}, tableBodyProps, {
@@ -1782,8 +2074,8 @@ var MRT_TableFooterCell = function MRT_TableFooterCell(_ref) {
 
   var _useMRT = useMRT(),
       muiTableFooterCellProps = _useMRT.muiTableFooterCellProps,
-      densePadding = _useMRT.densePadding,
-      enableColumnResizing = _useMRT.enableColumnResizing;
+      enableColumnResizing = _useMRT.enableColumnResizing,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   var isParentHeader = ((_column$columns$lengt = column == null ? void 0 : (_column$columns = column.columns) == null ? void 0 : _column$columns.length) != null ? _column$columns$lengt : 0) > 0;
   var mTableFooterCellProps = muiTableFooterCellProps instanceof Function ? muiTableFooterCellProps(column) : muiTableFooterCellProps;
@@ -1848,7 +2140,8 @@ var MRT_TableFooter = function MRT_TableFooter() {
       muiTableFooterProps = _useMRT.muiTableFooterProps,
       tableInstance = _useMRT.tableInstance;
 
-  return React.createElement(TableFooter, Object.assign({}, muiTableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
+  var tableFooterProps = muiTableFooterProps instanceof Function ? muiTableFooterProps(tableInstance) : muiTableFooterProps;
+  return React.createElement(TableFooter, Object.assign({}, tableFooterProps), tableInstance.footerGroups.map(function (footerGroup) {
     return React.createElement(MRT_TableFooterRow, {
       key: footerGroup.getFooterGroupProps().key,
       footerGroup: footerGroup
@@ -1863,8 +2156,10 @@ var MRT_Table = function MRT_Table() {
       hideTableHead = _useMRT.hideTableHead,
       hideTableFooter = _useMRT.hideTableFooter;
 
-  var tableProps = _extends({}, muiTableProps, tableInstance.getTableProps(), {
-    style: _extends({}, tableInstance.getTableProps().style, muiTableProps == null ? void 0 : muiTableProps.style)
+  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)
   });
 
   return React.createElement(Table, Object.assign({}, tableProps), !hideTableHead && React.createElement(MRT_TableHead, null), React.createElement(MRT_TableBody, null), !hideTableFooter && React.createElement(MRT_TableFooter, null));
@@ -1875,7 +2170,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       _useMRT$icons = _useMRT.icons,
       SearchIcon = _useMRT$icons.SearchIcon,
       CloseIcon = _useMRT$icons.CloseIcon,
-      showSearch = _useMRT.showSearch,
+      idPrefix = _useMRT.idPrefix,
       localization = _useMRT.localization,
       muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
       onGlobalFilterChange = _useMRT.onGlobalFilterChange,
@@ -1898,10 +2193,10 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
   };
 
   return React.createElement(Collapse, {
-    "in": showSearch,
+    "in": tableInstance.state.showSearch,
     orientation: "horizontal"
   }, React.createElement(TextField, Object.assign({
-    id: "global-search-text-field",
+    id: "mrt-" + idPrefix + "-search-text-field",
     placeholder: localization.searchTextFieldPlaceholder,
     onChange: function onChange(event) {
       setSearchValue(event.target.value);
@@ -1938,12 +2233,12 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
-      fullScreen = _useMRT.fullScreen,
       _useMRT$icons = _useMRT.icons,
       FullscreenExitIcon = _useMRT$icons.FullscreenExitIcon,
       FullscreenIcon = _useMRT$icons.FullscreenIcon,
       localization = _useMRT.localization,
-      setFullScreen = _useMRT.setFullScreen;
+      setFullScreen = _useMRT.setFullScreen,
+      fullScreen = _useMRT.tableInstance.state.fullScreen;
 
   return React.createElement(Tooltip, {
     arrow: true,
@@ -2055,12 +2350,12 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
   var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
-      densePadding = _useMRT.densePadding,
       setDensePadding = _useMRT.setDensePadding,
       localization = _useMRT.localization,
       _useMRT$icons = _useMRT.icons,
       DensityMediumIcon = _useMRT$icons.DensityMediumIcon,
-      DensitySmallIcon = _useMRT$icons.DensitySmallIcon;
+      DensitySmallIcon = _useMRT$icons.DensitySmallIcon,
+      densePadding = _useMRT.tableInstance.state.densePadding;
 
   return React.createElement(Tooltip, {
     arrow: true,
@@ -2078,12 +2373,12 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
   var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
-      localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters,
-      showFilters = _useMRT.showFilters,
       _useMRT$icons = _useMRT.icons,
       FilterListIcon = _useMRT$icons.FilterListIcon,
-      FilterListOffIcon = _useMRT$icons.FilterListOffIcon;
+      FilterListOffIcon = _useMRT$icons.FilterListOffIcon,
+      localization = _useMRT.localization,
+      setShowFilters = _useMRT.setShowFilters,
+      showFilters = _useMRT.tableInstance.state.showFilters;
 
   return React.createElement(Tooltip, {
     arrow: true,
@@ -2104,17 +2399,18 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
       _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.showSearch;
+      showSearch = _useMRT.tableInstance.state.showSearch;
 
   var handleToggleSearch = function handleToggleSearch() {
     setShowSearch(!showSearch);
     setTimeout(function () {
       var _document$getElementB, _muiSearchTextFieldPr;
 
-      return (_document$getElementB = document.getElementById((_muiSearchTextFieldPr = muiSearchTextFieldProps == null ? void 0 : muiSearchTextFieldProps.id) != null ? _muiSearchTextFieldPr : "global-search-text-field")) == null ? void 0 : _document$getElementB.focus();
+      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);
   };
 
@@ -2259,7 +2555,6 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
       muiTableToolbarTopProps = _useMRT.muiTableToolbarTopProps,
       positionPagination = _useMRT.positionPagination,
       positionToolbarActions = _useMRT.positionToolbarActions,
-      fullScreen = _useMRT.fullScreen,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       renderToolbarCustomActions = _useMRT.renderToolbarCustomActions,
       tableInstance = _useMRT.tableInstance;
@@ -2274,8 +2569,8 @@ var MRT_ToolbarTop = function MRT_ToolbarTop() {
         backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
         display: 'grid',
         p: '0 !important',
-        position: fullScreen ? 'sticky' : undefined,
-        top: fullScreen ? '0' : undefined,
+        position: tableInstance.state.fullScreen ? 'sticky' : undefined,
+        top: tableInstance.state.fullScreen ? '0' : undefined,
         width: '100%',
         zIndex: 1
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
@@ -2302,7 +2597,6 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
       manualPagination = _useMRT.manualPagination,
       muiTableToolbarBottomProps = _useMRT.muiTableToolbarBottomProps,
       positionPagination = _useMRT.positionPagination,
-      fullScreen = _useMRT.fullScreen,
       positionToolbarActions = _useMRT.positionToolbarActions,
       positionToolbarAlertBanner = _useMRT.positionToolbarAlertBanner,
       tableInstance = _useMRT.tableInstance;
@@ -2315,12 +2609,12 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
       return _extends({
         backgroundColor: theme.palette.background["default"],
         backgroundImage: "linear-gradient(" + alpha(theme.palette.common.white, 0.05) + "," + alpha(theme.palette.common.white, 0.05) + ")",
-        bottom: fullScreen ? '0' : undefined,
+        bottom: tableInstance.state.fullScreen ? '0' : undefined,
         display: 'flex',
         justifyContent: 'space-between',
         overflowY: 'hidden',
         p: '0 0.5rem !important',
-        position: fullScreen ? 'fixed' : undefined,
+        position: tableInstance.state.fullScreen ? 'fixed' : undefined,
         width: 'calc(100% - 1rem)',
         zIndex: 1
       }, toolbarProps == null ? void 0 : toolbarProps.sx);
@@ -2330,7 +2624,6 @@ var MRT_ToolbarBottom = function MRT_ToolbarBottom() {
 
 var MRT_TableContainer = function MRT_TableContainer() {
   var _useMRT = useMRT(),
-      fullScreen = _useMRT.fullScreen,
       hideToolbarBottom = _useMRT.hideToolbarBottom,
       hideToolbarTop = _useMRT.hideToolbarTop,
       isFetching = _useMRT.isFetching,
@@ -2338,6 +2631,7 @@ var MRT_TableContainer = function MRT_TableContainer() {
       muiTableContainerProps = _useMRT.muiTableContainerProps,
       tableInstance = _useMRT.tableInstance;
 
+  var fullScreen = tableInstance.state.fullScreen;
   var originalBodyOverflowStyle = useRef();
   useEffect(function () {
     if (typeof window !== 'undefined') {
@@ -2376,7 +2670,12 @@ var MRT_TableContainer = function MRT_TableContainer() {
   }), !hideToolbarTop && React.createElement(MRT_ToolbarTop, null), React.createElement(Collapse, {
     "in": isFetching || isLoading,
     unmountOnExit: true
-  }, React.createElement(LinearProgress, null)), React.createElement(MRT_Table, null), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
+  }, React.createElement(LinearProgress, null)), React.createElement(Box, {
+    sx: {
+      maxWidth: '100%',
+      overflowX: 'auto'
+    }
+  }, React.createElement(MRT_Table, null)), !hideToolbarBottom && React.createElement(MRT_ToolbarBottom, null));
 };
 
 var MRT_DefaultLocalization_EN = {
@@ -2392,6 +2691,15 @@ var MRT_DefaultLocalization_EN = {
   columnShowHideMenuShowAll: 'Show all',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
+  filterMenuItemContains: 'Contains Exact',
+  filterMenuItemEmpty: 'Empty',
+  filterMenuItemEndsWith: 'Ends With',
+  filterMenuItemEquals: 'Equals',
+  filterMenuItemFuzzy: 'Fuzzy Match',
+  filterMenuItemNotEmpty: 'Not Empty',
+  filterMenuItemNotEquals: 'Not Equals',
+  filterMenuItemStartsWith: 'Starts With',
+  filterMenuTitle: 'Filter Mode',
   filterTextFieldClearButtonTitle: 'Clear filter',
   filterTextFieldPlaceholder: 'Filter by {column}',
   rowActionButtonCancel: 'Cancel',
@@ -2408,9 +2716,9 @@ var MRT_DefaultLocalization_EN = {
   toggleFilterButtonTitle: 'Toggle filters',
   toggleFullScreenButtonTitle: 'Toggle full screen',
   toggleSearchButtonTitle: 'Toggle search',
-  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
   toolbarAlertGroupedByMessage: 'Grouped by ',
-  toolbarAlertGroupedThenByMessage: ', then by '
+  toolbarAlertGroupedThenByMessage: ', then by ',
+  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected'
 };
 
 var MRT_Default_Icons = {