material-react-table 0.5.3 → 0.5.4

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

@@ -7,7 +7,9 @@ function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'defau
 var React = require('react');
 var React__default = _interopDefault(React);
 var reactTable = require('react-table');
+var matchSorter = require('match-sorter');
 var material = require('@mui/material');
+var ArrowRightIcon = _interopDefault(require('@mui/icons-material/ArrowRight'));
 var CancelIcon = _interopDefault(require('@mui/icons-material/Cancel'));
 var ClearAllIcon = _interopDefault(require('@mui/icons-material/ClearAll'));
 var CloseIcon = _interopDefault(require('@mui/icons-material/Close'));
@@ -100,6 +102,100 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var fuzzyFilterFN = function fuzzyFilterFN(rows, id, filterValue) {
+  return matchSorter.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 React.createContext({});
 }();
@@ -130,19 +226,52 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       showSearch = _useState5[0],
       setShowSearch = _useState5[1];
 
+  var filterTypes = React.useMemo(function () {
+    return _extends({}, defaultFilterFNs, props.filterTypes);
+  }, [props.filterTypes]);
+
+  var _useState6 = React.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 = React.useMemo(function () {
+    return props.columns.map(function (column) {
+      column.filter = filterTypes[currentFilterTypes[column.accessor]];
+      return column;
+    });
+  }, [props.columns, filterTypes, currentFilterTypes]);
   var tableInstance = reactTable.useTable.apply(void 0, [_extends({}, props, {
+    columns: columns,
+    // @ts-ignore
+    filterTypes: filterTypes,
     useControlledState: function useControlledState(state) {
       return React.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, densePadding, fullScreen, showFilters, showSearch, state]);
+      }, [currentEditingRow, currentFilterTypes, 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;
@@ -157,7 +286,10 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     value: _extends({}, props, {
       anyRowsCanExpand: anyRowsCanExpand,
       anyRowsExpanded: anyRowsExpanded,
+      idPrefix: idPrefix,
+      //@ts-ignore
       setCurrentEditingRow: setCurrentEditingRow,
+      setCurrentFilterTypes: setCurrentFilterTypes,
       setDensePadding: setDensePadding,
       setFullScreen: setFullScreen,
       setShowFilters: setShowFilters,
@@ -168,13 +300,106 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
   }, props.children);
 };
 var useMRT = function useMRT() {
-  return (// @ts-ignore
-    React.useContext(MaterialReactTableContext)
-  );
+  return React.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 = React.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__default.createElement(material.Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    anchorOrigin: {
+      vertical: 'center',
+      horizontal: 'right'
+    },
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    }
+  }, React__default.createElement(material.Typography, {
+    sx: {
+      fontWeight: 'bold',
+      p: '1rem',
+      fontSize: '1.1rem'
+    }
+  }, localization.filterMenuTitle), React__default.createElement(material.Divider, null), filterTypes.map(function (_ref2) {
+    var type = _ref2.type,
+        label = _ref2.label,
+        divider = _ref2.divider;
+    return React__default.createElement(material.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;
 
@@ -182,37 +407,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 = React.useState(''),
-      filterValue = _useState[0],
-      setFilterValue = _useState[1];
+  var _useState = React.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 = React.useState(''),
+      filterValue = _useState2[0],
+      setFilterValue = _useState2[1];
 
   var handleChange = reactTable.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__default.createElement(React__default.Fragment, null, column.Filter == null ? void 0 : column.Filter({
       column: column
     }));
   }
 
-  return React__default.createElement(material.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__default.createElement(React__default.Fragment, null, React__default.createElement(material.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);
@@ -223,33 +481,52 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React__default.createElement(material.Tooltip, {
-        arrow: true,
-        title: (_localization$filterT2 = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT2.replace('{column}', String(column.Header))
-      }, React__default.createElement(material.InputAdornment, {
+      startAdornment: React__default.createElement(material.InputAdornment, {
         position: "start"
-      }, React__default.createElement(FilterListIcon, null))),
-      endAdornment: React__default.createElement(material.InputAdornment, {
+      }, React__default.createElement(material.Tooltip, {
+        arrow: true,
+        title: "Change Filter Mode"
+      }, React__default.createElement(material.IconButton, {
+        onClick: handleFilterMenuOpen,
+        size: "small",
+        sx: {
+          height: '1.75rem',
+          width: '1.75rem'
+        }
+      }, React__default.createElement(FilterListIcon, null))), showFilterChip && React__default.createElement(material.Chip, {
+        onDelete: handleClearFilterChip,
+        label: filterType
+      })),
+      endAdornment: !showFilterChip && React__default.createElement(material.InputAdornment, {
         position: "end"
       }, React__default.createElement(material.Tooltip, {
         arrow: true,
-        title: (_localization$filterT3 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT3 : ''
+        placement: "right",
+        title: (_localization$filterT2 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT2 : ''
       }, React__default.createElement("span", null, React__default.createElement(material.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__default.createElement(CloseIcon, {
         fontSize: "small"
       })))))
     }
-  });
+  }, textFieldProps, {
+    sx: _extends({
+      minWidth: '6rem'
+    }, textFieldProps == null ? void 0 : textFieldProps.sx)
+  })), React__default.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;
 
@@ -262,14 +539,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 = React.useState(null),
+      filterMenuAnchorEl = _useState[0],
+      setFilterMenuAnchorEl = _useState[1];
 
   var handleClearSort = function handleClearSort() {
     column.clearSortBy();
@@ -302,55 +584,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__default.createElement(material.Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
     onClose: function onClose() {
       return setAnchorEl(null);
     }
-  }, !disableSortBy && column.canSort && [React__default.createElement(material.MenuItem, {
+  }, React__default.createElement(material.MenuList, null, !disableSortBy && column.canSort && [React__default.createElement(material.MenuItem, {
     key: 1,
     disabled: !column.isSorted,
-    onClick: handleClearSort,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(ClearAllIcon, null), " ", localization.columnActionMenuItemClearSort), React__default.createElement(material.MenuItem, {
+    onClick: handleClearSort
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), React__default.createElement(material.ListItemText, null, localization.columnActionMenuItemClearSort)), React__default.createElement(material.MenuItem, {
     key: 2,
     disabled: column.isSorted && !column.isSortedDesc,
-    onClick: handleSortAsc,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(SortIcon, null), ' ', (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header))), React__default.createElement(material.MenuItem, {
+    onClick: handleSortAsc
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), React__default.createElement(material.ListItemText, null, (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React__default.createElement(material.MenuItem, {
     key: 3,
     disabled: column.isSorted && column.isSortedDesc,
-    onClick: handleSortDesc,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(SortIcon, {
+    onClick: handleSortDesc
+  }, React__default.createElement(material.ListItemIcon, null, React__default.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__default.createElement(material.Divider, {
+  })), React__default.createElement(material.ListItemText, null, (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React__default.createElement(material.Divider, {
     key: 0
   }), React__default.createElement(material.MenuItem, {
     key: 1,
-    onClick: handleFilterByColumn,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(FilterListIcon, null), ' ', (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header)))], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.Divider, {
+    onClick: handleFilterByColumn
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), React__default.createElement(material.ListItemText, null, (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), React__default.createElement(material.IconButton, {
+    size: "small",
+    onMouseEnter: handleOpenFilterModeMenu
+  }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_FilterMenu, {
+    anchorEl: filterMenuAnchorEl,
+    column: column,
+    key: 2,
+    setAnchorEl: setFilterMenuAnchorEl,
+    onSelect: handleFilterByColumn
+  })], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.Divider, {
     key: 1
   }), React__default.createElement(material.MenuItem, {
     key: 2,
-    onClick: handleGroupByColumn,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(DynamicFeedIcon, null), ' ', (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header)))], !disableColumnHiding && [React__default.createElement(material.Divider, {
+    onClick: handleGroupByColumn
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), React__default.createElement(material.ListItemText, null, (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React__default.createElement(material.Divider, {
     key: 0
   }), React__default.createElement(material.MenuItem, {
     key: 1,
-    onClick: handleHideColumn,
-    sx: commonMenuItemStyles
-  }, React__default.createElement(VisibilityOffIcon, null), ' ', (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header)))]);
+    onClick: handleHideColumn
+  }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), React__default.createElement(material.ListItemText, null, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]));
 };
 
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
@@ -380,11 +670,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
       }
@@ -428,17 +719,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__default.createElement(material.TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
   }, tableCellProps, {
     sx: _extends({}, commonTableHeadCellStyles(tableInstance.state.densePadding, enableColumnResizing), tableCellProps == null ? void 0 : tableCellProps.sx)
   }), React__default.createElement(material.Box, {
-    sx: {
-      alignContent: 'space-between',
-      display: 'grid',
-      height: '100%'
-    }
-  }, React__default.createElement(material.Box, {
     sx: {
       alignItems: 'flex-start',
       display: 'flex',
@@ -449,7 +735,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__default.createElement(material.Tooltip, {
@@ -483,7 +770,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     "in": tableInstance.state.showFilters
   }, React__default.createElement(MRT_FilterTextField, {
     column: column
-  }))));
+  })));
 };
 
 var MRT_EditCellTextField = function MRT_EditCellTextField(_ref) {
@@ -1890,6 +2177,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       _useMRT$icons = _useMRT.icons,
       SearchIcon = _useMRT$icons.SearchIcon,
       CloseIcon = _useMRT$icons.CloseIcon,
+      idPrefix = _useMRT.idPrefix,
       localization = _useMRT.localization,
       muiSearchTextFieldProps = _useMRT.muiSearchTextFieldProps,
       onGlobalFilterChange = _useMRT.onGlobalFilterChange,
@@ -1915,7 +2203,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     "in": tableInstance.state.showSearch,
     orientation: "horizontal"
   }, React__default.createElement(material.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);
@@ -2118,6 +2406,7 @@ 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,
@@ -2128,7 +2417,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
     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);
   };
 
@@ -2409,6 +2698,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',
@@ -2425,9 +2723,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 = {