material-react-table 0.5.8 → 0.6.1

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

@@ -104,6 +104,21 @@ function _objectWithoutPropertiesLoose(source, excluded) {
   return target;
 }
 
+var fuzzySearchFN = function fuzzySearchFN(rows, columnIds, filterValue) {
+  return matchSorter.matchSorter(rows, filterValue.toString().trim(), {
+    keys: columnIds.map(function (c) {
+      return "values." + c;
+    }),
+    sorter: function sorter(rankedItems) {
+      return rankedItems;
+    }
+  });
+};
+
+fuzzySearchFN.autoRemove = function (val) {
+  return !val;
+};
+
 var fuzzyFilterFN = function fuzzyFilterFN(rows, id, filterValue) {
   return matchSorter.matchSorter(rows, filterValue.toString().trim(), {
     keys: ["values." + id],
@@ -167,6 +182,26 @@ notEqualsFilterFN.autoRemove = function (val) {
   return !val;
 };
 
+var greaterThanFilterFN = function greaterThanFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] > +filterValue : row.values[id].toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
+  });
+};
+
+greaterThanFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
+var lessThanFilterFN = function lessThanFilterFN(rows, id, filterValue) {
+  return rows.filter(function (row) {
+    return !isNaN(+filterValue) && !isNaN(+row.values[id]) ? +row.values[id] < +filterValue : row.values[id].toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
+  });
+};
+
+lessThanFilterFN.autoRemove = function (val) {
+  return !val;
+};
+
 var emptyFilterFN = function emptyFilterFN(rows, id, _filterValue) {
   return rows.filter(function (row) {
     return !row.values[id].toString().toLowerCase().trim();
@@ -193,6 +228,9 @@ var defaultFilterFNs = {
   endsWith: endsWithFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
+  globalFuzzy: fuzzySearchFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
   notEmpty: notEmptyFilterFN,
   notEquals: notEqualsFilterFN,
   startsWith: startsWithFilterFN
@@ -203,7 +241,7 @@ var MaterialReactTableContext = /*#__PURE__*/function () {
 }();
 
 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 _props$initialState$d, _props$initialState, _props$initialState$f, _props$initialState2, _props$initialState$s, _props$initialState3, _props$initialState$s2, _props$initialState4, _props$globalFilter;
 
   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);
@@ -231,9 +269,35 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
   var filterTypes = React.useMemo(function () {
     return _extends({}, defaultFilterFNs, props.filterTypes);
   }, [props.filterTypes]);
+  var findLowestLevelCols = React.useCallback(function () {
+    var lowestLevelColumns = props.columns;
+    var currentCols = props.columns;
+
+    while (!!currentCols.length && currentCols.some(function (col) {
+      return col.columns;
+    })) {
+      var nextCols = currentCols.filter(function (col) {
+        return !!col.columns;
+      }).map(function (col) {
+        return col.columns;
+      }).flat();
+
+      if (nextCols.every(function (col) {
+        return !col.columns;
+      })) {
+        lowestLevelColumns = [].concat(lowestLevelColumns, nextCols);
+      }
+
+      currentCols = nextCols;
+    }
+
+    return lowestLevelColumns.filter(function (col) {
+      return !col.columns;
+    });
+  }, [props.columns]);
 
   var _useState6 = React.useState(function () {
-    return Object.assign.apply(Object, [{}].concat(props.columns.map(function (c) {
+    return Object.assign.apply(Object, [{}].concat(findLowestLevelCols().map(function (c) {
       var _ref, _c$filter, _props$initialState5, _props$initialState5$, _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.filterSelectOptions ? 'equals' : 'fuzzy', _ref2;
@@ -243,7 +307,7 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
       setCurrentFilterTypes = _useState6[1];
 
   var columns = React.useMemo(function () {
-    return props.columns.map(function (column) {
+    return findLowestLevelCols().map(function (column) {
       column.filter = filterTypes[currentFilterTypes[column.accessor]];
       return column;
     });
@@ -252,7 +316,7 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     columns: columns,
     // @ts-ignore
     filterTypes: filterTypes,
-    globalFilterValue: 'fuzzy',
+    globalFilter: (_props$globalFilter = props.globalFilter) != null ? _props$globalFilter : 'globalFuzzy',
     useControlledState: function useControlledState(state) {
       return React.useMemo(function () {
         return _extends({}, state, {
@@ -302,6 +366,21 @@ var useMRT = function useMRT() {
   return React.useContext(MaterialReactTableContext);
 };
 
+var MRT_FILTER_TYPE;
+
+(function (MRT_FILTER_TYPE) {
+  MRT_FILTER_TYPE["CONTAINS"] = "contains";
+  MRT_FILTER_TYPE["EMPTY"] = "empty";
+  MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
+  MRT_FILTER_TYPE["EQUALS"] = "equals";
+  MRT_FILTER_TYPE["FUZZY"] = "fuzzy";
+  MRT_FILTER_TYPE["GREATER_THAN"] = "greaterThan";
+  MRT_FILTER_TYPE["LESS_THAN"] = "lessThan";
+  MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
+  MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
+  MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
+})(MRT_FILTER_TYPE || (MRT_FILTER_TYPE = {}));
+
 var commonMenuItemStyles = {
   py: '6px',
   my: 0,
@@ -320,37 +399,55 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
 
   var filterTypes = React.useMemo(function () {
     return [{
-      type: exports.MRT_FILTER_TYPE.FUZZY,
-      label: localization.filterMenuItemFuzzy,
-      divider: false
+      type: MRT_FILTER_TYPE.FUZZY,
+      label: localization.filterFuzzy,
+      divider: false,
+      fn: fuzzyFilterFN
+    }, {
+      type: MRT_FILTER_TYPE.CONTAINS,
+      label: localization.filterContains,
+      divider: true,
+      fn: containsFilterFN
+    }, {
+      type: MRT_FILTER_TYPE.STARTS_WITH,
+      label: localization.filterStartsWith,
+      divider: false,
+      fn: startsWithFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.CONTAINS,
-      label: localization.filterMenuItemContains,
-      divider: true
+      type: MRT_FILTER_TYPE.ENDS_WITH,
+      label: localization.filterEndsWith,
+      divider: true,
+      fn: endsWithFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.STARTS_WITH,
-      label: localization.filterMenuItemStartsWith,
-      divider: false
+      type: MRT_FILTER_TYPE.EQUALS,
+      label: localization.filterEquals,
+      divider: false,
+      fn: equalsFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.ENDS_WITH,
-      label: localization.filterMenuItemEndsWith,
-      divider: true
+      type: MRT_FILTER_TYPE.NOT_EQUALS,
+      label: localization.filterNotEquals,
+      divider: true,
+      fn: notEqualsFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.EQUALS,
-      label: localization.filterMenuItemEquals,
-      divider: false
+      type: MRT_FILTER_TYPE.GREATER_THAN,
+      label: localization.filterGreaterThan,
+      divider: false,
+      fn: greaterThanFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.NOT_EQUALS,
-      label: localization.filterMenuItemNotEquals,
-      divider: true
+      type: MRT_FILTER_TYPE.LESS_THAN,
+      label: localization.filterLessThan,
+      divider: true,
+      fn: lessThanFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.EMPTY,
-      label: localization.filterMenuItemEmpty,
-      divider: false
+      type: MRT_FILTER_TYPE.EMPTY,
+      label: localization.filterEmpty,
+      divider: false,
+      fn: emptyFilterFN
     }, {
-      type: exports.MRT_FILTER_TYPE.NOT_EMPTY,
-      label: localization.filterMenuItemNotEmpty,
-      divider: false
+      type: MRT_FILTER_TYPE.NOT_EMPTY,
+      label: localization.filterNotEmpty,
+      divider: false,
+      fn: notEmptyFilterFN
     }];
   }, []);
 
@@ -362,7 +459,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
     });
 
-    if ([exports.MRT_FILTER_TYPE.EMPTY, exports.MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
+    if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
       column.setFilter(' ');
     }
 
@@ -386,14 +483,15 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   }, filterTypes.map(function (_ref2, index) {
     var type = _ref2.type,
         label = _ref2.label,
-        divider = _ref2.divider;
+        divider = _ref2.divider,
+        fn = _ref2.fn;
     return React__default.createElement(material.MenuItem, {
       divider: divider,
       key: index,
       onClick: function onClick() {
         return handleSelectFilterType(type);
       },
-      selected: type === filterType,
+      selected: type === filterType || fn === filterType,
       sx: commonMenuItemStyles,
       value: type
     }, label);
@@ -401,7 +499,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterT, _localization$filterT2, _column$filterSelectO;
+  var _localization$filterB, _localization$clearFi, _column$filterSelectO;
 
   var column = _ref.column;
 
@@ -449,7 +547,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     setCurrentFilterTypes(function (prev) {
       var _extends2;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = exports.MRT_FILTER_TYPE.FUZZY, _extends2));
+      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = MRT_FILTER_TYPE.FUZZY, _extends2));
     });
   };
 
@@ -460,10 +558,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }
 
   var filterType = tableInstance.state.currentFilterTypes[column.id];
-  var isCustomFilterType = filterType instanceof Function;
   var isSelectFilter = !!column.filterSelectOptions;
-  var filterChipLabel = !isCustomFilterType && [exports.MRT_FILTER_TYPE.EMPTY, exports.MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType);
-  var filterPlaceholder = (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header));
+  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: "mrt-" + idPrefix + "-" + column.id + "-filter-text-field",
@@ -475,6 +573,14 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
       },
       title: filterPlaceholder
     },
+    helperText: filterType instanceof Function ? '' : 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,
     InputLabelProps: {
       shrink: false,
@@ -502,7 +608,6 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         arrow: true,
         title: localization.changeFilterMode
       }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
-        disabled: isCustomFilterType,
         onClick: handleFilterMenuOpen,
         size: "small",
         sx: {
@@ -511,7 +616,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         }
       }, React__default.createElement(FilterListIcon, null)))), filterChipLabel && React__default.createElement(material.Chip, {
         onDelete: handleClearFilterChip,
-        label: filterType
+        label: filterChipLabel
       })),
       endAdornment: !filterChipLabel && React__default.createElement(material.InputAdornment, {
         position: "end"
@@ -519,9 +624,9 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         arrow: true,
         disableHoverListener: isSelectFilter,
         placement: "right",
-        title: (_localization$filterT2 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT2 : ''
+        title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
       }, React__default.createElement("span", null, React__default.createElement(material.IconButton, {
-        "aria-label": localization.filterTextFieldClearButtonTitle,
+        "aria-label": localization.clearFilter,
         disabled: !(filterValue != null && filterValue.length),
         onClick: handleClear,
         size: "small",
@@ -535,7 +640,8 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     }
   }, textFieldProps, {
     sx: _extends({
-      m: '0 -0.25rem',
+      m: '-0.25rem',
+      p: 0,
       minWidth: !filterChipLabel ? '5rem' : 'auto',
       width: 'calc(100% + 0.5rem)',
       mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
@@ -547,7 +653,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     divider: true,
     disabled: !filterValue,
     value: ""
-  }, localization.filterTextFieldClearButtonTitle), column == null ? void 0 : (_column$filterSelectO = column.filterSelectOptions) == null ? void 0 : _column$filterSelectO.map(function (option) {
+  }, localization.clearFilter), column == null ? void 0 : (_column$filterSelectO = column.filterSelectOptions) == null ? void 0 : _column$filterSelectO.map(function (option) {
     var value;
     var text;
 
@@ -570,6 +676,101 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }));
 };
 
+var MRT_ShowHideColumnsMenuItems = function MRT_ShowHideColumnsMenuItems(_ref) {
+  var _column$columns, _column$columns2, _column$isVisible, _column$columns4;
+
+  var column = _ref.column,
+      isSubMenu = _ref.isSubMenu;
+  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();
+    }
+  };
+
+  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,
+    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 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;
+
+  return React__default.createElement(material.Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding
+    }
+  }, React__default.createElement(material.Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: isSubMenu ? 'center' : 'space-between',
+      p: '0.5rem',
+      pt: 0
+    }
+  }, !isSubMenu && React__default.createElement(material.Button, {
+    disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
+    onClick: function onClick() {
+      return tableInstance.toggleHideAllColumns(true);
+    }
+  }, localization.hideAll), React__default.createElement(material.Button, {
+    disabled: tableInstance.getToggleHideAllColumnsProps().checked,
+    onClick: function onClick() {
+      return tableInstance.toggleHideAllColumns(false);
+    }
+  }, localization.showAll)), React__default.createElement(material.Divider, null), tableInstance.columns.map(function (column, index) {
+    return React__default.createElement(MRT_ShowHideColumnsMenuItems, {
+      column: column,
+      isSubMenu: isSubMenu,
+      key: index + "-" + column.id
+    });
+  }));
+};
+
 var commonMenuItemStyles$1 = {
   py: '6px',
   my: 0,
@@ -582,7 +783,7 @@ var commonListItemStyles = {
   alignItems: 'center'
 };
 var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
+  var _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _tableInstance$state$, _localization$showAll;
 
   var anchorEl = _ref.anchorEl,
       column = _ref.column,
@@ -596,6 +797,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       _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,
@@ -610,6 +812,10 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       filterMenuAnchorEl = _useState[0],
       setFilterMenuAnchorEl = _useState[1];
 
+  var _useState2 = React.useState(null),
+      showHideColumnsMenuAnchorEl = _useState2[0],
+      setShowHideColumnsMenuAnchorEl = _useState2[1];
+
   var handleClearSort = function handleClearSort() {
     column.clearSortBy();
     setAnchorEl(null);
@@ -656,6 +862,15 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
+  var handleShowAllColumns = function handleShowAllColumns() {
+    tableInstance.toggleHideAllColumns(false);
+  };
+
+  var handleOpenShowHideColumnsMenu = function handleOpenShowHideColumnsMenu(event) {
+    event.stopPropagation();
+    setShowHideColumnsMenuAnchorEl(event.currentTarget);
+  };
+
   return React__default.createElement(material.Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -667,21 +882,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     }
   }, !disableSortBy && column.canSort && [React__default.createElement(material.MenuItem, {
     disabled: !column.isSorted,
-    key: 1,
+    key: 0,
     onClick: handleClearSort,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(ClearAllIcon, null), localization.columnActionMenuItemClearSort)), React__default.createElement(material.MenuItem, {
+  }, React__default.createElement(ClearAllIcon, null), localization.clearSort)), React__default.createElement(material.MenuItem, {
     disabled: column.isSorted && !column.isSortedDesc,
-    key: 2,
+    key: 1,
     onClick: handleSortAsc,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(SortIcon, null), (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React__default.createElement(material.MenuItem, {
+  }, 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,
-    key: 3,
+    key: 2,
     disabled: column.isSorted && column.isSortedDesc,
     onClick: handleSortDesc,
     sx: commonMenuItemStyles$1
@@ -691,21 +906,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     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.MenuItem, {
+  }), (_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,
     key: 0,
     onClick: handleClearFilter,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(FilterListOffIcon, null), localization.filterTextFieldClearButtonTitle)), React__default.createElement(material.MenuItem, {
+  }, React__default.createElement(FilterListOffIcon, null), localization.clearFilter)), React__default.createElement(material.MenuItem, {
     divider: enableColumnGrouping || !disableColumnHiding,
     key: 1,
     onClick: handleFilterByColumn,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(FilterListIcon, null), (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), !column.filterSelectOptions && React__default.createElement(material.IconButton, {
+  }, 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",
@@ -720,18 +935,37 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onSelect: handleFilterByColumn
   })], enableColumnGrouping && column.canGroupBy && [React__default.createElement(material.MenuItem, {
     divider: !disableColumnHiding,
-    key: 2,
+    key: 0,
     onClick: handleGroupByColumn,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, 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.MenuItem, {
-    key: 1,
+  }, 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, {
+    key: 0,
     onClick: handleHideColumn,
     sx: commonMenuItemStyles$1
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
-  }, React__default.createElement(VisibilityOffIcon, null), (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]);
+  }, 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),
+    key: 1,
+    onClick: handleShowAllColumns,
+    sx: commonMenuItemStyles$1
+  }, React__default.createElement(material.Box, {
+    sx: commonListItemStyles
+  }, 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, {
+    onClick: handleOpenShowHideColumnsMenu,
+    onMouseEnter: handleOpenShowHideColumnsMenu,
+    size: "small",
+    sx: {
+      p: 0
+    }
+  }, React__default.createElement(ArrowRightIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
+    anchorEl: showHideColumnsMenuAnchorEl,
+    isSubMenu: true,
+    key: 2,
+    setAnchorEl: setShowHideColumnsMenuAnchorEl
+  })]);
 };
 
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
@@ -755,9 +989,10 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
-    title: localization.columnActionMenuButtonTitle
+    placement: "top",
+    title: localization.columnActions
   }, React__default.createElement(material.IconButton, {
-    "aria-label": localization.columnActionMenuButtonTitle,
+    "aria-label": localization.columnActions,
     onClick: handleClick,
     size: "small",
     sx: {
@@ -789,7 +1024,7 @@ var commonTableHeadCellStyles = function commonTableHeadCellStyles(densePadding,
   };
 };
 var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
-  var _column$columns, _localization$columnA, _localization$columnA2;
+  var _column$columns, _localization$sortByC, _localization$sortByC2;
 
   var column = _ref.column;
 
@@ -813,8 +1048,10 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     style: _extends({}, column.getHeaderProps().style, mTableHeadCellProps == null ? void 0 : mTableHeadCellProps.style, mcTableHeadCellProps == null ? void 0 : mcTableHeadCellProps.style)
   });
 
-  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 filterTooltip = !!column.filterValue ? localization.filterApplied.replace('{column}', String(column.Header)).replace('{filterType}', column.filterValue) : localization.toggleFilterButtonTitle;
+  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) : localization.showHideFilters;
   var columnHeader = column.render('Header');
   return React__default.createElement(material.TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
@@ -1018,10 +1255,10 @@ var MRT_SelectCheckbox = function MRT_SelectCheckbox(_ref) {
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
-    title: selectAll ? localization.selectAllCheckboxTitle : localization.selectCheckboxTitle
+    title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
   }, React__default.createElement(material.Checkbox, Object.assign({
     inputProps: {
-      'aria-label': selectAll ? localization.selectAllCheckboxTitle : localization.selectCheckboxTitle
+      'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
     },
     onChange: onSelectChange
   }, checkboxProps, {
@@ -1041,8 +1278,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
   }, tableInstance.getToggleAllRowsExpandedProps(), {
     sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
   }), React__default.createElement(material.IconButton, {
-    "aria-label": localization.expandAllButtonTitle,
-    title: localization.expandAllButtonTitle
+    "aria-label": localization.expandAll,
+    title: localization.expandAll
   }, React__default.createElement(DoubleArrowDownIcon, {
     style: {
       transform: "rotate(" + (tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0) + "deg)",
@@ -1082,7 +1319,7 @@ var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
     sx: _extends({}, commonTableHeadCellStyles(densePadding), {
       textAlign: 'center'
     })
-  }, localization.actionsHeadColumnTitle);
+  }, localization.actions);
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
@@ -1188,9 +1425,9 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       textAlign: 'left'
     })
   }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.expandButtonTitle,
+    "aria-label": localization.expand,
     disabled: !row.canExpand && !renderDetailPanel,
-    title: localization.expandButtonTitle
+    title: localization.expand
   }, row.getToggleRowExpandedProps()), React__default.createElement(ExpandMoreIcon, {
     style: {
       transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
@@ -1226,7 +1463,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
   }, enableRowEditing && React__default.createElement(material.MenuItem, {
     onClick: handleEdit,
     sx: commonMenuItemStyles$1
-  }, React__default.createElement(EditIcon, null), localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+  }, React__default.createElement(EditIcon, null), localization.edit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
   })) != null ? _renderRowActionMenuI : null);
 };
@@ -2040,15 +2277,15 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
     }
   }, React__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.rowActionButtonCancel
+    title: localization.cancel
   }, React__default.createElement(material.IconButton, {
-    "aria-label": localization.rowActionButtonCancel,
+    "aria-label": localization.cancel,
     onClick: handleCancel
   }, React__default.createElement(CancelIcon, null))), React__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.rowActionButtonSave
+    title: localization.save
   }, React__default.createElement(material.IconButton, {
-    "aria-label": localization.rowActionButtonSave,
+    "aria-label": localization.save,
     color: "info",
     onClick: handleSave
   }, React__default.createElement(SaveIcon, null))));
@@ -2102,7 +2339,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   }) : !renderRowActionMenuItems && enableRowEditing ? React__default.createElement(material.Tooltip, {
     placement: "right",
     arrow: true,
-    title: localization.rowActionMenuItemEdit
+    title: localization.edit
   }, React__default.createElement(material.IconButton, {
     sx: commonIconButtonStyles,
     onClick: handleEdit
@@ -2110,9 +2347,9 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
-    title: localization.rowActionMenuButtonTitle
+    title: localization.rowActions
   }, React__default.createElement(material.IconButton, {
-    "aria-label": localization.rowActionMenuButtonTitle,
+    "aria-label": localization.rowActions,
     onClick: handleOpenRowActionMenu,
     size: "small",
     sx: commonIconButtonStyles
@@ -2332,7 +2569,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     orientation: "horizontal"
   }, React__default.createElement(material.TextField, Object.assign({
     id: "mrt-" + idPrefix + "-search-text-field",
-    placeholder: localization.searchTextFieldPlaceholder,
+    placeholder: localization.search,
     onChange: function onChange(event) {
       setSearchValue(event.target.value);
       handleChange(event);
@@ -2348,11 +2585,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       endAdornment: React__default.createElement(material.InputAdornment, {
         position: "end"
       }, React__default.createElement(material.IconButton, {
-        "aria-label": localization.searchTextFieldClearButtonTitle,
+        "aria-label": localization.clearSearch,
         disabled: (searchValue == null ? void 0 : searchValue.length) === 0,
         onClick: handleClear,
         size: "small",
-        title: localization.searchTextFieldClearButtonTitle
+        title: localization.clearSearch
       }, React__default.createElement(CloseIcon, {
         fontSize: "small"
       })))
@@ -2377,9 +2614,9 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
 
   return React__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.toggleFullScreenButtonTitle
+    title: localization.toggleFullScreen
   }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.toggleFilterButtonTitle,
+    "aria-label": localization.showHideFilters,
     onClick: function onClick() {
       return setFullScreen(!fullScreen);
     },
@@ -2387,61 +2624,12 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   }, rest), fullScreen ? React__default.createElement(FullscreenExitIcon, null) : React__default.createElement(FullscreenIcon, null)));
 };
 
-var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
-  var _column$columns, _column$columns2, _column$isVisible, _column$columns4;
-
-  var column = _ref.column;
-  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();
-    }
-  };
-
-  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),
-    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_ShowHideColumnsMenu, {
-      key: i + "-" + c.id,
-      column: c
-    });
-  }));
-};
-
 var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
   var rest = _extends({}, _ref);
 
   var _useMRT = useMRT(),
       ViewColumnIcon = _useMRT.icons.ViewColumnIcon,
-      localization = _useMRT.localization,
-      tableInstance = _useMRT.tableInstance;
+      localization = _useMRT.localization;
 
   var _useState = React.useState(null),
       anchorEl = _useState[0],
@@ -2453,42 +2641,15 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
 
   return React__default.createElement(React__default.Fragment, null, React__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.showHideColumnsButtonTitle
+    title: localization.showHideColumns
   }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.showHideColumnsButtonTitle,
+    "aria-label": localization.showHideColumns,
     onClick: handleClick,
     size: "small"
-  }, rest), React__default.createElement(ViewColumnIcon, null))), React__default.createElement(material.Menu, {
+  }, rest), React__default.createElement(ViewColumnIcon, null))), React__default.createElement(MRT_ShowHideColumnsMenu, {
     anchorEl: anchorEl,
-    open: !!anchorEl,
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    },
-    MenuListProps: {
-      dense: tableInstance.state.densePadding
-    }
-  }, React__default.createElement(material.Box, {
-    sx: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      p: '0.5rem'
-    }
-  }, React__default.createElement(material.Button, {
-    disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
-    onClick: function onClick() {
-      return tableInstance.toggleHideAllColumns(true);
-    }
-  }, localization.columnShowHideMenuHideAll), React__default.createElement(material.Button, {
-    disabled: tableInstance.getToggleHideAllColumnsProps().checked,
-    onClick: function onClick() {
-      return tableInstance.toggleHideAllColumns(false);
-    }
-  }, localization.columnShowHideMenuShowAll)), React__default.createElement(material.Divider, null), tableInstance.columns.map(function (column, index) {
-    return React__default.createElement(MRT_ShowHideColumnsMenu, {
-      key: index + "-" + column.id,
-      column: column
-    });
-  })));
+    setAnchorEl: setAnchorEl
+  }));
 };
 
 var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
@@ -2504,9 +2665,9 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
 
   return React__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.toggleDensePaddingSwitchTitle
+    title: localization.toggleDensePadding
   }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.toggleDensePaddingSwitchTitle,
+    "aria-label": localization.toggleDensePadding,
     onClick: function onClick() {
       return setDensePadding(!densePadding);
     },
@@ -2527,9 +2688,9 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
 
   return React__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.toggleFilterButtonTitle
+    title: localization.showHideFilters
   }, React__default.createElement(material.IconButton, Object.assign({
-    "aria-label": localization.toggleFilterButtonTitle,
+    "aria-label": localization.showHideFilters,
     onClick: function onClick() {
       return setShowFilters(!showFilters);
     },
@@ -2561,7 +2722,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
 
   return React__default.createElement(material.Tooltip, {
     arrow: true,
-    title: localization.toggleSearchButtonTitle
+    title: localization.showHideSearch
   }, React__default.createElement(material.IconButton, Object.assign({
     size: "small",
     onClick: handleToggleSearch
@@ -2636,7 +2797,7 @@ var MRT_TablePagination = function MRT_TablePagination() {
 };
 
 var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
-  var _localization$toolbar, _localization$toolbar2;
+  var _localization$selecte, _localization$selecte2;
 
   var _useMRT = useMRT(),
       muiTableToolbarAlertBannerProps = _useMRT.muiTableToolbarAlertBannerProps,
@@ -2648,13 +2809,13 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
 
   var isMobile = material.useMediaQuery('(max-width:720px)');
   var alertProps = muiTableToolbarAlertBannerProps instanceof Function ? muiTableToolbarAlertBannerProps(tableInstance) : muiTableToolbarAlertBannerProps;
-  var selectMessage = tableInstance.selectedFlatRows.length > 0 ? (_localization$toolbar = localization.toolbarAlertSelectionMessage) == null ? void 0 : (_localization$toolbar2 = _localization$toolbar.replace('{selectedCount}', tableInstance.selectedFlatRows.length.toString())) == null ? void 0 : _localization$toolbar2.replace('{rowCount}', tableInstance.flatRows.length.toString()) : null;
-  var groupedByMessage = tableInstance.state.groupBy.length > 0 ? React__default.createElement("span", null, localization.toolbarAlertGroupedByMessage, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
+  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(React.Fragment, {
       key: index + "-" + columnId
-    }, index > 0 ? localization.toolbarAlertGroupedThenByMessage : '', React__default.createElement(material.Chip, {
+    }, index > 0 ? localization.thenBy : '', React__default.createElement(material.Chip, {
       color: "secondary",
       label: (_tableInstance$allCol = tableInstance.allColumns.find(function (column) {
         return column.id === columnId;
@@ -2826,51 +2987,50 @@ var MRT_TableContainer = function MRT_TableContainer() {
 };
 
 var MRT_DefaultLocalization_EN = {
-  actionsHeadColumnTitle: 'Actions',
-  columnActionMenuButtonTitle: 'Column Actions',
-  columnActionMenuItemClearSort: 'Clear sort',
-  columnActionMenuItemGroupBy: 'Group by {column}',
-  columnActionMenuItemHideColumn: 'Hide {column} column',
-  columnActionMenuItemSortAsc: 'Sort by {column} ascending',
-  columnActionMenuItemSortDesc: 'Sort by {column} descending',
-  columnActionMenuItemUnGroupBy: 'Ungroup by {column}',
-  columnShowHideMenuHideAll: 'Hide all',
-  columnShowHideMenuShowAll: 'Show all',
-  expandAllButtonTitle: 'Expand all',
-  expandButtonTitle: 'Expand',
-  filterApplied: 'Filtering by {column} - ({filterType})',
-  filterMenuItemContains: 'Contains Exact',
-  filterMenuItemEmpty: 'Empty',
-  filterMenuItemEndsWith: 'Ends With',
-  filterMenuItemEquals: 'Equals',
+  actions: 'Actions',
+  cancel: 'Cancel',
   changeFilterMode: 'Change filter mode',
-  filterMenuItemFuzzy: 'Fuzzy Match (Default)',
-  filterMenuItemNotEmpty: 'Not Empty',
-  filterMenuItemNotEquals: 'Not Equals',
-  filterMenuItemStartsWith: 'Starts With',
-  filterMenuTitle: 'Filter Mode',
-  filterTextFieldChangeFilterButtonTitle: 'Change Filter Mode',
-  filterTextFieldChipLabelEmpty: 'Empty',
-  filterTextFieldChipLabelNotEmpty: 'Not Empty',
-  filterTextFieldClearButtonTitle: 'Clear filter',
-  filterTextFieldPlaceholder: 'Filter by {column}',
-  rowActionButtonCancel: 'Cancel',
-  rowActionButtonSave: 'Save',
-  rowActionMenuButtonTitle: 'Row Actions',
-  rowActionMenuItemEdit: 'Edit',
-  rowActionsColumnTitle: 'Actions',
-  searchTextFieldClearButtonTitle: 'Clear search',
-  searchTextFieldPlaceholder: 'Search',
-  selectAllCheckboxTitle: 'Toggle select all',
-  selectCheckboxTitle: 'Toggle select row',
-  showHideColumnsButtonTitle: 'Show/Hide columns',
-  toggleDensePaddingSwitchTitle: 'Toggle dense padding',
-  toggleFilterButtonTitle: 'Show/Hide filters',
-  toggleFullScreenButtonTitle: 'Toggle full screen',
-  toggleSearchButtonTitle: 'Show/Hide search',
-  toolbarAlertGroupedByMessage: 'Grouped by ',
-  toolbarAlertGroupedThenByMessage: ', then by ',
-  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected'
+  clearFilter: 'Clear filter',
+  clearSearch: 'Clear search',
+  clearSort: 'Clear sort',
+  columnActions: 'Column Actions',
+  edit: 'Edit',
+  expand: 'Expand',
+  expandAll: 'Expand all',
+  filterByColumn: 'Filter by {column}',
+  filterContains: 'Contains Exact',
+  filterEmpty: 'Empty',
+  filterEndsWith: 'Ends With',
+  filterEquals: 'Equals',
+  filterFuzzy: 'Fuzzy Match',
+  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}'
 };
 
 var MRT_Default_Icons = {
@@ -2902,18 +3062,6 @@ var MRT_Default_Icons = {
 };
 
 var _excluded = ["defaultColumn", "icons", "localization", "positionActionsColumn", "positionPagination", "positionToolbarActions", "positionToolbarAlertBanner"];
-
-(function (MRT_FILTER_TYPE) {
-  MRT_FILTER_TYPE["CONTAINS"] = "contains";
-  MRT_FILTER_TYPE["EMPTY"] = "empty";
-  MRT_FILTER_TYPE["ENDS_WITH"] = "endsWith";
-  MRT_FILTER_TYPE["EQUALS"] = "equals";
-  MRT_FILTER_TYPE["FUZZY"] = "fuzzy";
-  MRT_FILTER_TYPE["NOT_EMPTY"] = "notEmpty";
-  MRT_FILTER_TYPE["NOT_EQUALS"] = "notEquals";
-  MRT_FILTER_TYPE["STARTS_WITH"] = "startsWith";
-})(exports.MRT_FILTER_TYPE || (exports.MRT_FILTER_TYPE = {}));
-
 var MaterialReactTable = (function (_ref) {
   var _ref$defaultColumn = _ref.defaultColumn,
       defaultColumn = _ref$defaultColumn === void 0 ? {