material-react-table 0.5.7 → 0.6.0

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

@@ -1,7 +1,7 @@
 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 { matchSorter } from 'match-sorter';
-import { Menu, MenuItem, ListItemIcon, ListItemText, IconButton, TextField, InputAdornment, Tooltip, Chip, TableCell, Box, TableSortLabel, Divider, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, FormControlLabel, Switch, Button, TablePagination, useMediaQuery, Alert, Toolbar, TableContainer, Paper, LinearProgress } from '@mui/material';
+import { Menu, MenuItem, TextField, InputAdornment, Tooltip, IconButton, Chip, FormControlLabel, Switch, Box, Button, Divider, TableCell, TableSortLabel, Collapse, Skeleton, Checkbox, TableRow, TableHead, alpha, TableBody, TableFooter, Table, 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';
@@ -160,6 +160,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();
@@ -184,6 +204,8 @@ var defaultFilterFNs = {
   contains: containsFilterFN,
   empty: emptyFilterFN,
   endsWith: endsWithFilterFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
   notEmpty: notEmptyFilterFN,
@@ -225,16 +247,40 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     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;
+  var getInitialFilterTypeState = function getInitialFilterTypeState() {
+    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);
+      }
 
-      return (_c$accessor = c.accessor) == null ? void 0 : _c$accessor.toString();
-    }).map(function (accessor) {
-      var _props$initialState$f2, _props$initialState5, _props$initialState5$, _ref;
+      currentCols = nextCols;
+    }
 
-      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;
+    lowestLevelColumns = lowestLevelColumns.filter(function (col) {
+      return !col.columns;
+    });
+    return Object.assign.apply(Object, [{}].concat(lowestLevelColumns.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;
     })));
+  };
+
+  var _useState6 = useState(function () {
+    return getInitialFilterTypeState();
   }),
       currentFilterTypes = _useState6[0],
       setCurrentFilterTypes = _useState6[1];
@@ -249,6 +295,7 @@ var MaterialReactTableProvider = function MaterialReactTableProvider(props) {
     columns: columns,
     // @ts-ignore
     filterTypes: filterTypes,
+    globalFilterValue: 'fuzzy',
     useControlledState: function useControlledState(state) {
       return useMemo(function () {
         return _extends({}, state, {
@@ -298,151 +345,26 @@ var useMRT = function useMRT() {
   return useContext(MaterialReactTableContext);
 };
 
-var commonMenuItemStyles = {
-  py: '0 !important',
-  my: '0 !important'
-};
-var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
-  var _localization$columnA, _localization$columnA2, _localization$filterT, _localization, _localization$columnA3;
-
-  var anchorEl = _ref.anchorEl,
-      column = _ref.column,
-      setAnchorEl = _ref.setAnchorEl;
-
-  var _useMRT = useMRT(),
-      disableColumnHiding = _useMRT.disableColumnHiding,
-      disableFilters = _useMRT.disableFilters,
-      disableSortBy = _useMRT.disableSortBy,
-      enableColumnGrouping = _useMRT.enableColumnGrouping,
-      _useMRT$icons = _useMRT.icons,
-      ArrowRightIcon = _useMRT$icons.ArrowRightIcon,
-      ClearAllIcon = _useMRT$icons.ClearAllIcon,
-      DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
-      FilterListIcon = _useMRT$icons.FilterListIcon,
-      SortIcon = _useMRT$icons.SortIcon,
-      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon,
-      idPrefix = _useMRT.idPrefix,
-      localization = _useMRT.localization,
-      setShowFilters = _useMRT.setShowFilters,
-      tableInstance = _useMRT.tableInstance;
+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 _useState = useState(null),
-      filterMenuAnchorEl = _useState[0],
-      setFilterMenuAnchorEl = _useState[1];
-
-  var handleClearSort = function handleClearSort() {
-    column.clearSortBy();
-    setAnchorEl(null);
-  };
-
-  var handleSortAsc = function handleSortAsc() {
-    column.toggleSortBy(false);
-    setAnchorEl(null);
-  };
-
-  var handleSortDesc = function handleSortDesc() {
-    column.toggleSortBy(true);
-    setAnchorEl(null);
-  };
-
-  var handleHideColumn = function handleHideColumn() {
-    column.toggleHidden();
-    setAnchorEl(null);
-  };
-
-  var handleGroupByColumn = function handleGroupByColumn() {
-    column.toggleGroupBy();
-    setAnchorEl(null);
-  };
-
-  var handleFilterByColumn = function handleFilterByColumn() {
-    setShowFilters(true);
-    setTimeout(function () {
-      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 : "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);
-    },
-    MenuListProps: {
-      dense: tableInstance.state.densePadding,
-      disablePadding: true
-    }
-  }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
-    key: 1,
-    disabled: !column.isSorted,
-    onClick: handleClearSort,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(ClearAllIcon, null)), React.createElement(ListItemText, {
-    sx: commonMenuItemStyles
-  }, localization.columnActionMenuItemClearSort)), React.createElement(MenuItem, {
-    disabled: column.isSorted && !column.isSortedDesc,
-    key: 2,
-    onClick: handleSortAsc,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, null)), React.createElement(ListItemText, {
-    sx: commonMenuItemStyles
-  }, (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
-    divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
-    key: 3,
-    disabled: column.isSorted && column.isSortedDesc,
-    onClick: handleSortDesc,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(SortIcon, {
-    style: {
-      transform: 'rotate(180deg) scaleX(-1)'
-    }
-  })), React.createElement(ListItemText, {
-    sx: commonMenuItemStyles
-  }, (_localization$columnA2 = localization.columnActionMenuItemSortDesc) == null ? void 0 : _localization$columnA2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
-    divider: enableColumnGrouping || !disableColumnHiding,
-    key: 1,
-    onClick: handleFilterByColumn,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(FilterListIcon, null)), React.createElement(ListItemText, {
-    sx: commonMenuItemStyles
-  }, (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), React.createElement(IconButton, {
-    onClick: handleOpenFilterModeMenu,
-    onMouseEnter: handleOpenFilterModeMenu,
-    size: "small",
-    sx: {
-      p: 0
-    }
-  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterTypeMenu, {
-    anchorEl: filterMenuAnchorEl,
-    column: column,
-    key: 2,
-    setAnchorEl: setFilterMenuAnchorEl,
-    onSelect: handleFilterByColumn
-  })], enableColumnGrouping && column.canGroupBy && [React.createElement(MenuItem, {
-    divider: !disableColumnHiding,
-    key: 2,
-    onClick: handleGroupByColumn,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(DynamicFeedIcon, null)), React.createElement(ListItemText, {
-    sx: commonMenuItemStyles
-  }, (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
-    key: 1,
-    onClick: handleHideColumn,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(VisibilityOffIcon, null)), React.createElement(ListItemText, {
-    sx: commonMenuItemStyles
-  }, (_localization$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]);
+var commonMenuItemStyles = {
+  py: '6px',
+  my: 0,
+  alignItems: 'center'
 };
-
 var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   var anchorEl = _ref.anchorEl,
       column = _ref.column,
@@ -456,37 +378,55 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
 
   var filterTypes = useMemo(function () {
     return [{
-      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: 'contains',
-      label: localization.filterMenuItemContains,
-      divider: true
+      type: MRT_FILTER_TYPE.STARTS_WITH,
+      label: localization.filterStartsWith,
+      divider: false,
+      fn: startsWithFilterFN
     }, {
-      type: 'startsWith',
-      label: localization.filterMenuItemStartsWith,
-      divider: false
+      type: MRT_FILTER_TYPE.ENDS_WITH,
+      label: localization.filterEndsWith,
+      divider: true,
+      fn: endsWithFilterFN
     }, {
-      type: 'endsWith',
-      label: localization.filterMenuItemEndsWith,
-      divider: true
+      type: MRT_FILTER_TYPE.EQUALS,
+      label: localization.filterEquals,
+      divider: false,
+      fn: equalsFilterFN
     }, {
-      type: 'equals',
-      label: localization.filterMenuItemEquals,
-      divider: false
+      type: MRT_FILTER_TYPE.NOT_EQUALS,
+      label: localization.filterNotEquals,
+      divider: true,
+      fn: notEqualsFilterFN
     }, {
-      type: 'notEquals',
-      label: localization.filterMenuItemNotEquals,
-      divider: true
+      type: MRT_FILTER_TYPE.GREATER_THAN,
+      label: localization.filterGreaterThan,
+      divider: false,
+      fn: greaterThanFilterFN
     }, {
-      type: 'empty',
-      label: localization.filterMenuItemEmpty,
-      divider: false
+      type: MRT_FILTER_TYPE.LESS_THAN,
+      label: localization.filterLessThan,
+      divider: true,
+      fn: lessThanFilterFN
     }, {
-      type: 'notEmpty',
-      label: localization.filterMenuItemNotEmpty,
-      divider: false
+      type: MRT_FILTER_TYPE.EMPTY,
+      label: localization.filterEmpty,
+      divider: false,
+      fn: emptyFilterFN
+    }, {
+      type: MRT_FILTER_TYPE.NOT_EMPTY,
+      label: localization.filterNotEmpty,
+      divider: false,
+      fn: notEmptyFilterFN
     }];
   }, []);
 
@@ -498,7 +438,7 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
       return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = value, _extends2));
     });
 
-    if (['empty', 'notEmpty'].includes(value)) {
+    if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
       column.setFilter(' ');
     }
 
@@ -517,28 +457,28 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
     },
     open: !!anchorEl,
     MenuListProps: {
-      dense: tableInstance.state.densePadding,
-      disablePadding: true
+      dense: tableInstance.state.densePadding
     }
-  }, filterTypes.map(function (_ref2) {
+  }, filterTypes.map(function (_ref2, index) {
     var type = _ref2.type,
         label = _ref2.label,
-        divider = _ref2.divider;
+        divider = _ref2.divider,
+        fn = _ref2.fn;
     return React.createElement(MenuItem, {
       divider: divider,
-      key: type,
+      key: index,
       onClick: function onClick() {
         return handleSelectFilterType(type);
       },
-      selected: type === filterType,
-      value: type,
-      sx: commonMenuItemStyles
+      selected: type === filterType || fn === filterType,
+      sx: commonMenuItemStyles,
+      value: type
     }, label);
   }));
 };
 
 var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
-  var _localization$filterT, _localization$filterT2;
+  var _localization$filterB, _localization$clearFi, _column$filterSelectO;
 
   var column = _ref.column;
 
@@ -586,7 +526,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     setCurrentFilterTypes(function (prev) {
       var _extends2;
 
-      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = 'fuzzy', _extends2));
+      return _extends({}, prev, (_extends2 = {}, _extends2[column.id] = MRT_FILTER_TYPE.FUZZY, _extends2));
     });
   };
 
@@ -597,8 +537,10 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
   }
 
   var filterType = tableInstance.state.currentFilterTypes[column.id];
-  var filterChipLabel = ['empty', 'notEmpty'].includes(filterType);
-  var filterPlaceholder = (_localization$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header));
+  var isSelectFilter = !!column.filterSelectOptions;
+  var filterChipLabel = !(filterType instanceof Function) && [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(filterType) ? //@ts-ignore
+  localization["filter" + (filterType.charAt(0).toUpperCase() + filterType.slice(1))] : '';
+  var filterPlaceholder = (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header));
   return React.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: "mrt-" + idPrefix + "-" + column.id + "-filter-text-field",
@@ -610,8 +552,24 @@ 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,
+      sx: {
+        maxWidth: 'calc(100% - 2.5rem)'
+      },
+      title: filterPlaceholder
+    },
     margin: "none",
-    placeholder: filterChipLabel ? '' : filterPlaceholder,
+    placeholder: filterChipLabel || isSelectFilter ? undefined : filterPlaceholder,
     onChange: function onChange(e) {
       setFilterValue(e.target.value);
       handleChange(e.target.value);
@@ -619,34 +577,36 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
+    select: isSelectFilter,
     value: filterValue != null ? filterValue : '',
     variant: "standard",
     InputProps: {
-      startAdornment: React.createElement(InputAdornment, {
+      startAdornment: !isSelectFilter && React.createElement(InputAdornment, {
         position: "start"
       }, React.createElement(Tooltip, {
         arrow: true,
-        title: "Change Filter Mode"
-      }, React.createElement(IconButton, {
+        title: localization.changeFilterMode
+      }, React.createElement("span", null, React.createElement(IconButton, {
         onClick: handleFilterMenuOpen,
         size: "small",
         sx: {
           height: '1.75rem',
           width: '1.75rem'
         }
-      }, React.createElement(FilterListIcon, null))), filterChipLabel && React.createElement(Chip, {
+      }, React.createElement(FilterListIcon, null)))), filterChipLabel && React.createElement(Chip, {
         onDelete: handleClearFilterChip,
-        label: filterType
+        label: filterChipLabel
       })),
       endAdornment: !filterChipLabel && React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(Tooltip, {
         arrow: true,
+        disableHoverListener: isSelectFilter,
         placement: "right",
-        title: (_localization$filterT2 = localization.filterTextFieldClearButtonTitle) != null ? _localization$filterT2 : ''
+        title: (_localization$clearFi = localization.clearFilter) != null ? _localization$clearFi : ''
       }, React.createElement("span", null, React.createElement(IconButton, {
-        "aria-label": localization.filterTextFieldClearButtonTitle,
-        disabled: (filterValue == null ? void 0 : filterValue.length) === 0,
+        "aria-label": localization.clearFilter,
+        disabled: !(filterValue != null && filterValue.length),
         onClick: handleClear,
         size: "small",
         sx: {
@@ -659,10 +619,35 @@ 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)'
+      width: 'calc(100% + 0.5rem)',
+      mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
+      '&	.MuiSelect-icon': {
+        mr: '1.5rem'
+      }
     }, textFieldProps == null ? void 0 : textFieldProps.sx)
+  }), isSelectFilter && React.createElement(MenuItem, {
+    divider: true,
+    disabled: !filterValue,
+    value: ""
+  }, localization.clearFilter), column == null ? void 0 : (_column$filterSelectO = column.filterSelectOptions) == null ? void 0 : _column$filterSelectO.map(function (option) {
+    var value;
+    var text;
+
+    if (typeof option === 'string') {
+      value = option;
+      text = option;
+    } else if (typeof option === 'object') {
+      value = option.value;
+      text = option.text;
+    }
+
+    return React.createElement(MenuItem, {
+      key: value,
+      value: value
+    }, text);
   })), React.createElement(MRT_FilterTypeMenu, {
     anchorEl: anchorEl,
     column: column,
@@ -670,6 +655,298 @@ 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.createElement(React.Fragment, null, React.createElement(MenuItem, {
+    sx: _extends({}, commonMenuItemStyles$1, {
+      pl: (column.depth + 0.5) * 2 + "rem"
+    })
+  }, React.createElement(FormControlLabel, {
+    componentsProps: {
+      typography: {
+        sx: {
+          marginBottom: 0
+        }
+      }
+    },
+    checked: switchChecked,
+    control: React.createElement(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.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.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding
+    }
+  }, React.createElement(Box, {
+    sx: {
+      display: 'flex',
+      justifyContent: isSubMenu ? 'center' : 'space-between',
+      p: '0.5rem',
+      pt: 0
+    }
+  }, !isSubMenu && React.createElement(Button, {
+    disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
+    onClick: function onClick() {
+      return tableInstance.toggleHideAllColumns(true);
+    }
+  }, localization.hideAll), React.createElement(Button, {
+    disabled: tableInstance.getToggleHideAllColumnsProps().checked,
+    onClick: function onClick() {
+      return tableInstance.toggleHideAllColumns(false);
+    }
+  }, localization.showAll)), React.createElement(Divider, null), tableInstance.columns.map(function (column, index) {
+    return React.createElement(MRT_ShowHideColumnsMenuItems, {
+      column: column,
+      isSubMenu: isSubMenu,
+      key: index + "-" + column.id
+    });
+  }));
+};
+
+var commonMenuItemStyles$1 = {
+  py: '6px',
+  my: 0,
+  justifyContent: 'space-between',
+  alignItems: 'center'
+};
+var commonListItemStyles = {
+  display: 'flex',
+  gap: '0.75rem',
+  alignItems: 'center'
+};
+var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
+  var _localization$sortByC, _localization$sortByC2, _localization$filterB, _localization, _localization$hideCol, _tableInstance$state$, _localization$showAll;
+
+  var anchorEl = _ref.anchorEl,
+      column = _ref.column,
+      setAnchorEl = _ref.setAnchorEl;
+
+  var _useMRT = useMRT(),
+      disableColumnHiding = _useMRT.disableColumnHiding,
+      disableFilters = _useMRT.disableFilters,
+      disableSortBy = _useMRT.disableSortBy,
+      enableColumnGrouping = _useMRT.enableColumnGrouping,
+      _useMRT$icons = _useMRT.icons,
+      ArrowRightIcon = _useMRT$icons.ArrowRightIcon,
+      ClearAllIcon = _useMRT$icons.ClearAllIcon,
+      ViewColumnIcon = _useMRT$icons.ViewColumnIcon,
+      DynamicFeedIcon = _useMRT$icons.DynamicFeedIcon,
+      FilterListIcon = _useMRT$icons.FilterListIcon,
+      FilterListOffIcon = _useMRT$icons.FilterListOffIcon,
+      SortIcon = _useMRT$icons.SortIcon,
+      VisibilityOffIcon = _useMRT$icons.VisibilityOffIcon,
+      idPrefix = _useMRT.idPrefix,
+      localization = _useMRT.localization,
+      setShowFilters = _useMRT.setShowFilters,
+      tableInstance = _useMRT.tableInstance;
+
+  var _useState = useState(null),
+      filterMenuAnchorEl = _useState[0],
+      setFilterMenuAnchorEl = _useState[1];
+
+  var _useState2 = useState(null),
+      showHideColumnsMenuAnchorEl = _useState2[0],
+      setShowHideColumnsMenuAnchorEl = _useState2[1];
+
+  var handleClearSort = function handleClearSort() {
+    column.clearSortBy();
+    setAnchorEl(null);
+  };
+
+  var handleSortAsc = function handleSortAsc() {
+    column.toggleSortBy(false);
+    setAnchorEl(null);
+  };
+
+  var handleSortDesc = function handleSortDesc() {
+    column.toggleSortBy(true);
+    setAnchorEl(null);
+  };
+
+  var handleHideColumn = function handleHideColumn() {
+    column.toggleHidden();
+    setAnchorEl(null);
+  };
+
+  var handleGroupByColumn = function handleGroupByColumn() {
+    column.toggleGroupBy();
+    setAnchorEl(null);
+  };
+
+  var handleClearFilter = function handleClearFilter() {
+    column.setFilter('');
+    setAnchorEl(null);
+  };
+
+  var handleFilterByColumn = function handleFilterByColumn() {
+    setShowFilters(true);
+    setTimeout(function () {
+      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 : "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);
+  };
+
+  var handleShowAllColumns = function handleShowAllColumns() {
+    tableInstance.toggleHideAllColumns(false);
+  };
+
+  var handleOpenShowHideColumnsMenu = function handleOpenShowHideColumnsMenu(event) {
+    event.stopPropagation();
+    setShowHideColumnsMenuAnchorEl(event.currentTarget);
+  };
+
+  return React.createElement(Menu, {
+    anchorEl: anchorEl,
+    open: !!anchorEl,
+    onClose: function onClose() {
+      return setAnchorEl(null);
+    },
+    MenuListProps: {
+      dense: tableInstance.state.densePadding
+    }
+  }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
+    disabled: !column.isSorted,
+    key: 0,
+    onClick: handleClearSort,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(ClearAllIcon, null), localization.clearSort)), React.createElement(MenuItem, {
+    disabled: column.isSorted && !column.isSortedDesc,
+    key: 1,
+    onClick: handleSortAsc,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(SortIcon, null), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
+    divider: !disableFilters || enableColumnGrouping || !disableColumnHiding,
+    key: 2,
+    disabled: column.isSorted && column.isSortedDesc,
+    onClick: handleSortDesc,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(SortIcon, {
+    style: {
+      transform: 'rotate(180deg) scaleX(-1)'
+    }
+  }), (_localization$sortByC2 = localization.sortByColumnDesc) == null ? void 0 : _localization$sortByC2.replace('{column}', String(column.Header))))], !disableFilters && column.canFilter && [React.createElement(MenuItem, {
+    disabled: !column.filterValue,
+    key: 0,
+    onClick: handleClearFilter,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(FilterListOffIcon, null), localization.clearFilter)), React.createElement(MenuItem, {
+    divider: enableColumnGrouping || !disableColumnHiding,
+    key: 1,
+    onClick: handleFilterByColumn,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(FilterListIcon, null), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
+    onClick: handleOpenFilterModeMenu,
+    onMouseEnter: handleOpenFilterModeMenu,
+    size: "small",
+    sx: {
+      p: 0
+    }
+  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_FilterTypeMenu, {
+    anchorEl: filterMenuAnchorEl,
+    column: column,
+    key: 2,
+    setAnchorEl: setFilterMenuAnchorEl,
+    onSelect: handleFilterByColumn
+  })], enableColumnGrouping && column.canGroupBy && [React.createElement(MenuItem, {
+    divider: !disableColumnHiding,
+    key: 0,
+    onClick: handleGroupByColumn,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(DynamicFeedIcon, null), (_localization = localization[column.isGrouped ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
+    key: 0,
+    onClick: handleHideColumn,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(VisibilityOffIcon, null), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
+    disabled: !((_tableInstance$state$ = tableInstance.state.hiddenColumns) != null && _tableInstance$state$.length),
+    key: 1,
+    onClick: handleShowAllColumns,
+    sx: commonMenuItemStyles$1
+  }, React.createElement(Box, {
+    sx: commonListItemStyles
+  }, React.createElement(ViewColumnIcon, null), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
+    onClick: handleOpenShowHideColumnsMenu,
+    onMouseEnter: handleOpenShowHideColumnsMenu,
+    size: "small",
+    sx: {
+      p: 0
+    }
+  }, React.createElement(ArrowRightIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
+    anchorEl: showHideColumnsMenuAnchorEl,
+    isSubMenu: true,
+    key: 2,
+    setAnchorEl: setShowHideColumnsMenuAnchorEl
+  })]);
+};
+
 var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton(_ref) {
   var column = _ref.column;
 
@@ -691,9 +968,10 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
-    title: localization.columnActionMenuButtonTitle
+    placement: "top",
+    title: localization.columnActions
   }, React.createElement(IconButton, {
-    "aria-label": localization.columnActionMenuButtonTitle,
+    "aria-label": localization.columnActions,
     onClick: handleClick,
     size: "small",
     sx: {
@@ -725,7 +1003,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;
 
@@ -749,9 +1027,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}', // @ts-ignore
-  localization["filterMenuItem" + (tableInstance.state.currentFilterTypes[column.id].charAt(0).toUpperCase() + tableInstance.state.currentFilterTypes[column.id].slice(1))]) : 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.createElement(TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
@@ -774,6 +1053,7 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     title: undefined
   }), column.render('Header'), !isParentHeader && column.canSort && React.createElement(Tooltip, {
     arrow: true,
+    placement: "top",
     title: sortTooltip
   }, React.createElement(TableSortLabel, {
     "aria-label": sortTooltip,
@@ -781,19 +1061,22 @@ var MRT_TableHeadCell = function MRT_TableHeadCell(_ref) {
     direction: column.isSortedDesc ? 'desc' : 'asc'
   })), !isParentHeader && !!column.canFilter && React.createElement(Tooltip, {
     arrow: true,
+    placement: "top",
     title: filterTooltip
   }, React.createElement(IconButton, {
+    disableRipple: true,
     onClick: function onClick(event) {
       event.stopPropagation();
       setShowFilters(!tableInstance.state.showFilters);
     },
     size: "small",
     sx: {
+      m: 0,
       opacity: !!column.filterValue ? 0.8 : 0,
       p: '2px',
-      m: 0,
       transition: 'all 0.2s ease-in-out',
       '&:hover': {
+        backgroundColor: 'transparent',
         opacity: 0.8
       }
     }
@@ -951,10 +1234,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.createElement(Checkbox, Object.assign({
     inputProps: {
-      'aria-label': selectAll ? localization.selectAllCheckboxTitle : localization.selectCheckboxTitle
+      'aria-label': selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
     },
     onChange: onSelectChange
   }, checkboxProps, {
@@ -974,8 +1257,8 @@ var MRT_ExpandAllButton = function MRT_ExpandAllButton() {
   }, tableInstance.getToggleAllRowsExpandedProps(), {
     sx: commonTableBodyButtonCellStyles(tableInstance.state.densePadding)
   }), React.createElement(IconButton, {
-    "aria-label": localization.expandAllButtonTitle,
-    title: localization.expandAllButtonTitle
+    "aria-label": localization.expandAll,
+    title: localization.expandAll
   }, React.createElement(DoubleArrowDownIcon, {
     style: {
       transform: "rotate(" + (tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0) + "deg)",
@@ -1015,7 +1298,7 @@ var MRT_TableHeadCellActions = function MRT_TableHeadCellActions() {
     sx: _extends({}, commonTableHeadCellStyles(densePadding), {
       textAlign: 'center'
     })
-  }, localization.actionsHeadColumnTitle);
+  }, localization.actions);
 };
 
 var MRT_TableHeadRow = function MRT_TableHeadRow(_ref) {
@@ -1121,9 +1404,9 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
       textAlign: 'left'
     })
   }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.expandButtonTitle,
+    "aria-label": localization.expand,
     disabled: !row.canExpand && !renderDetailPanel,
-    title: localization.expandButtonTitle
+    title: localization.expand
   }, row.getToggleRowExpandedProps()), React.createElement(ExpandMoreIcon, {
     style: {
       transform: "rotate(" + (!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0) + "deg)",
@@ -1154,15 +1437,12 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
       return setAnchorEl(null);
     },
     MenuListProps: {
-      dense: tableInstance.state.densePadding,
-      disablePadding: true
+      dense: tableInstance.state.densePadding
     }
   }, enableRowEditing && React.createElement(MenuItem, {
     onClick: handleEdit,
-    sx: commonMenuItemStyles
-  }, React.createElement(ListItemIcon, null, React.createElement(EditIcon, null)), React.createElement(ListItemText, {
-    sx: commonMenuItemStyles
-  }, localization.rowActionMenuItemEdit)), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+    sx: commonMenuItemStyles$1
+  }, React.createElement(EditIcon, null), localization.edit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
   })) != null ? _renderRowActionMenuI : null);
 };
@@ -1976,15 +2256,15 @@ var MRT_EditActionButtons = function MRT_EditActionButtons(_ref) {
     }
   }, React.createElement(Tooltip, {
     arrow: true,
-    title: localization.rowActionButtonCancel
+    title: localization.cancel
   }, React.createElement(IconButton, {
-    "aria-label": localization.rowActionButtonCancel,
+    "aria-label": localization.cancel,
     onClick: handleCancel
   }, React.createElement(CancelIcon, null))), React.createElement(Tooltip, {
     arrow: true,
-    title: localization.rowActionButtonSave
+    title: localization.save
   }, React.createElement(IconButton, {
-    "aria-label": localization.rowActionButtonSave,
+    "aria-label": localization.save,
     color: "info",
     onClick: handleSave
   }, React.createElement(SaveIcon, null))));
@@ -2038,7 +2318,7 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
   }) : !renderRowActionMenuItems && enableRowEditing ? React.createElement(Tooltip, {
     placement: "right",
     arrow: true,
-    title: localization.rowActionMenuItemEdit
+    title: localization.edit
   }, React.createElement(IconButton, {
     sx: commonIconButtonStyles,
     onClick: handleEdit
@@ -2046,9 +2326,9 @@ var MRT_ToggleRowActionMenuButton = function MRT_ToggleRowActionMenuButton(_ref)
     arrow: true,
     enterDelay: 1000,
     enterNextDelay: 1000,
-    title: localization.rowActionMenuButtonTitle
+    title: localization.rowActions
   }, React.createElement(IconButton, {
-    "aria-label": localization.rowActionMenuButtonTitle,
+    "aria-label": localization.rowActions,
     onClick: handleOpenRowActionMenu,
     size: "small",
     sx: commonIconButtonStyles
@@ -2268,7 +2548,7 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
     orientation: "horizontal"
   }, React.createElement(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);
@@ -2284,11 +2564,11 @@ var MRT_SearchTextField = function MRT_SearchTextField() {
       endAdornment: React.createElement(InputAdornment, {
         position: "end"
       }, React.createElement(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.createElement(CloseIcon, {
         fontSize: "small"
       })))
@@ -2313,9 +2593,9 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: localization.toggleFullScreenButtonTitle
+    title: localization.toggleFullScreen
   }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.toggleFilterButtonTitle,
+    "aria-label": localization.showHideFilters,
     onClick: function onClick() {
       return setFullScreen(!fullScreen);
     },
@@ -2323,54 +2603,12 @@ var MRT_FullScreenToggleButton = function MRT_FullScreenToggleButton(_ref) {
   }, rest), fullScreen ? React.createElement(FullscreenExitIcon, null) : React.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.createElement(React.Fragment, null, React.createElement(MenuItem, {
-    sx: {
-      pl: (column.depth + 0.5) * 2 + "rem"
-    }
-  }, React.createElement(FormControlLabel, {
-    checked: switchChecked,
-    control: React.createElement(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.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 = useState(null),
       anchorEl = _useState[0],
@@ -2382,44 +2620,15 @@ var MRT_ShowHideColumnsButton = function MRT_ShowHideColumnsButton(_ref) {
 
   return React.createElement(React.Fragment, null, React.createElement(Tooltip, {
     arrow: true,
-    title: localization.showHideColumnsButtonTitle
+    title: localization.showHideColumns
   }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.showHideColumnsButtonTitle,
+    "aria-label": localization.showHideColumns,
     onClick: handleClick,
     size: "small"
-  }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(Menu, {
+  }, rest), React.createElement(ViewColumnIcon, null))), React.createElement(MRT_ShowHideColumnsMenu, {
     anchorEl: anchorEl,
-    open: !!anchorEl,
-    onClose: function onClose() {
-      return setAnchorEl(null);
-    },
-    MenuListProps: {
-      dense: tableInstance.state.densePadding,
-      disablePadding: true
-    },
-    sx: commonMenuItemStyles
-  }, React.createElement(Box, {
-    sx: {
-      display: 'flex',
-      justifyContent: 'space-between',
-      p: '0.5rem'
-    }
-  }, React.createElement(Button, {
-    disabled: !tableInstance.getToggleHideAllColumnsProps().checked && !tableInstance.getToggleHideAllColumnsProps().indeterminate,
-    onClick: function onClick() {
-      return tableInstance.toggleHideAllColumns(true);
-    }
-  }, localization.columnShowHideMenuHideAll), React.createElement(Button, {
-    disabled: tableInstance.getToggleHideAllColumnsProps().checked,
-    onClick: function onClick() {
-      return tableInstance.toggleHideAllColumns(false);
-    }
-  }, localization.columnShowHideMenuShowAll)), React.createElement(Divider, null), tableInstance.columns.map(function (column, index) {
-    return React.createElement(MRT_ShowHideColumnsMenu, {
-      key: index + "-" + column.id,
-      column: column
-    });
-  })));
+    setAnchorEl: setAnchorEl
+  }));
 };
 
 var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
@@ -2435,9 +2644,9 @@ var MRT_ToggleDensePaddingButton = function MRT_ToggleDensePaddingButton(_ref) {
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: localization.toggleDensePaddingSwitchTitle
+    title: localization.toggleDensePadding
   }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.toggleDensePaddingSwitchTitle,
+    "aria-label": localization.toggleDensePadding,
     onClick: function onClick() {
       return setDensePadding(!densePadding);
     },
@@ -2458,9 +2667,9 @@ var MRT_ToggleFiltersButton = function MRT_ToggleFiltersButton(_ref) {
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: localization.toggleFilterButtonTitle
+    title: localization.showHideFilters
   }, React.createElement(IconButton, Object.assign({
-    "aria-label": localization.toggleFilterButtonTitle,
+    "aria-label": localization.showHideFilters,
     onClick: function onClick() {
       return setShowFilters(!showFilters);
     },
@@ -2492,7 +2701,7 @@ var MRT_ToggleSearchButton = function MRT_ToggleSearchButton(_ref) {
 
   return React.createElement(Tooltip, {
     arrow: true,
-    title: localization.toggleSearchButtonTitle
+    title: localization.showHideSearch
   }, React.createElement(IconButton, Object.assign({
     size: "small",
     onClick: handleToggleSearch
@@ -2567,7 +2776,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,
@@ -2579,13 +2788,13 @@ var MRT_ToolbarAlertBanner = function MRT_ToolbarAlertBanner() {
 
   var isMobile = 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.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.createElement("span", null, localization.groupedBy, ' ', tableInstance.state.groupBy.map(function (columnId, index) {
     var _tableInstance$allCol;
 
     return React.createElement(Fragment, {
       key: index + "-" + columnId
-    }, index > 0 ? localization.toolbarAlertGroupedThenByMessage : '', React.createElement(Chip, {
+    }, index > 0 ? localization.thenBy : '', React.createElement(Chip, {
       color: "secondary",
       label: (_tableInstance$allCol = tableInstance.allColumns.find(function (column) {
         return column.id === columnId;
@@ -2757,50 +2966,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',
-  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'
+  actions: 'Actions',
+  cancel: 'Cancel',
+  changeFilterMode: 'Change filter mode',
+  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 = {