material-react-table 0.5.9 → 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, TextField, InputAdornment, Tooltip, IconButton, Chip, Box, TableCell, 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';
@@ -379,52 +379,52 @@ var MRT_FilterTypeMenu = function MRT_FilterTypeMenu(_ref) {
   var filterTypes = useMemo(function () {
     return [{
       type: MRT_FILTER_TYPE.FUZZY,
-      label: localization.filterMenuItemFuzzy,
+      label: localization.filterFuzzy,
       divider: false,
       fn: fuzzyFilterFN
     }, {
       type: MRT_FILTER_TYPE.CONTAINS,
-      label: localization.filterMenuItemContains,
+      label: localization.filterContains,
       divider: true,
       fn: containsFilterFN
     }, {
       type: MRT_FILTER_TYPE.STARTS_WITH,
-      label: localization.filterMenuItemStartsWith,
+      label: localization.filterStartsWith,
       divider: false,
       fn: startsWithFilterFN
     }, {
       type: MRT_FILTER_TYPE.ENDS_WITH,
-      label: localization.filterMenuItemEndsWith,
+      label: localization.filterEndsWith,
       divider: true,
       fn: endsWithFilterFN
     }, {
       type: MRT_FILTER_TYPE.EQUALS,
-      label: localization.filterMenuItemEquals,
+      label: localization.filterEquals,
       divider: false,
       fn: equalsFilterFN
     }, {
       type: MRT_FILTER_TYPE.NOT_EQUALS,
-      label: localization.filterMenuItemNotEquals,
+      label: localization.filterNotEquals,
       divider: true,
       fn: notEqualsFilterFN
     }, {
       type: MRT_FILTER_TYPE.GREATER_THAN,
-      label: localization.filterMenuItemGreaterThan,
+      label: localization.filterGreaterThan,
       divider: false,
       fn: greaterThanFilterFN
     }, {
       type: MRT_FILTER_TYPE.LESS_THAN,
-      label: localization.filterMenuItemLessThan,
+      label: localization.filterLessThan,
       divider: true,
       fn: lessThanFilterFN
     }, {
       type: MRT_FILTER_TYPE.EMPTY,
-      label: localization.filterMenuItemEmpty,
+      label: localization.filterEmpty,
       divider: false,
       fn: emptyFilterFN
     }, {
       type: MRT_FILTER_TYPE.NOT_EMPTY,
-      label: localization.filterMenuItemNotEmpty,
+      label: localization.filterNotEmpty,
       divider: false,
       fn: notEmptyFilterFN
     }];
@@ -478,7 +478,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;
 
@@ -537,10 +537,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 && [MRT_FILTER_TYPE.EMPTY, 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.createElement(React.Fragment, null, React.createElement(TextField, Object.assign({
     fullWidth: true,
     id: "mrt-" + idPrefix + "-" + column.id + "-filter-text-field",
@@ -552,6 +552,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,
@@ -587,7 +595,7 @@ var MRT_FilterTextField = function MRT_FilterTextField(_ref) {
         }
       }, React.createElement(FilterListIcon, null)))), filterChipLabel && React.createElement(Chip, {
         onDelete: handleClearFilterChip,
-        label: filterType
+        label: filterChipLabel
       })),
       endAdornment: !filterChipLabel && React.createElement(InputAdornment, {
         position: "end"
@@ -595,9 +603,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.createElement("span", null, React.createElement(IconButton, {
-        "aria-label": localization.filterTextFieldClearButtonTitle,
+        "aria-label": localization.clearFilter,
         disabled: !(filterValue != null && filterValue.length),
         onClick: handleClear,
         size: "small",
@@ -611,7 +619,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,
@@ -623,7 +632,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;
 
@@ -646,6 +655,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.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,
@@ -658,7 +762,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,
@@ -672,6 +776,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,
@@ -686,6 +791,10 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
       filterMenuAnchorEl = _useState[0],
       setFilterMenuAnchorEl = _useState[1];
 
+  var _useState2 = useState(null),
+      showHideColumnsMenuAnchorEl = _useState2[0],
+      setShowHideColumnsMenuAnchorEl = _useState2[1];
+
   var handleClearSort = function handleClearSort() {
     column.clearSortBy();
     setAnchorEl(null);
@@ -732,6 +841,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.createElement(Menu, {
     anchorEl: anchorEl,
     open: !!anchorEl,
@@ -743,21 +861,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     }
   }, !disableSortBy && column.canSort && [React.createElement(MenuItem, {
     disabled: !column.isSorted,
-    key: 1,
+    key: 0,
     onClick: handleClearSort,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(ClearAllIcon, null), localization.columnActionMenuItemClearSort)), React.createElement(MenuItem, {
+  }, React.createElement(ClearAllIcon, null), localization.clearSort)), React.createElement(MenuItem, {
     disabled: column.isSorted && !column.isSortedDesc,
-    key: 2,
+    key: 1,
     onClick: handleSortAsc,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(SortIcon, null), (_localization$columnA = localization.columnActionMenuItemSortAsc) == null ? void 0 : _localization$columnA.replace('{column}', String(column.Header)))), React.createElement(MenuItem, {
+  }, 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: 3,
+    key: 2,
     disabled: column.isSorted && column.isSortedDesc,
     onClick: handleSortDesc,
     sx: commonMenuItemStyles$1
@@ -767,21 +885,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.createElement(MenuItem, {
+  }), (_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.filterTextFieldClearButtonTitle)), React.createElement(MenuItem, {
+  }, 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$filterT = localization.filterTextFieldPlaceholder) == null ? void 0 : _localization$filterT.replace('{column}', String(column.Header))), !column.filterSelectOptions && React.createElement(IconButton, {
+  }, 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",
@@ -796,18 +914,37 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onSelect: handleFilterByColumn
   })], enableColumnGrouping && column.canGroupBy && [React.createElement(MenuItem, {
     divider: !disableColumnHiding,
-    key: 2,
+    key: 0,
     onClick: handleGroupByColumn,
     sx: commonMenuItemStyles$1
   }, React.createElement(Box, {
     sx: commonListItemStyles
-  }, React.createElement(DynamicFeedIcon, null), (_localization = localization[column.isGrouped ? 'columnActionMenuItemUnGroupBy' : 'columnActionMenuItemGroupBy']) == null ? void 0 : _localization.replace('{column}', String(column.Header))))], !disableColumnHiding && [React.createElement(MenuItem, {
-    key: 1,
+  }, 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$columnA3 = localization.columnActionMenuItemHideColumn) == null ? void 0 : _localization$columnA3.replace('{column}', String(column.Header))))]);
+  }, 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) {
@@ -832,9 +969,9 @@ var MRT_ToggleColumnActionMenuButton = function MRT_ToggleColumnActionMenuButton
     enterDelay: 1000,
     enterNextDelay: 1000,
     placement: "top",
-    title: localization.columnActionMenuButtonTitle
+    title: localization.columnActions
   }, React.createElement(IconButton, {
-    "aria-label": localization.columnActionMenuButtonTitle,
+    "aria-label": localization.columnActions,
     onClick: handleClick,
     size: "small",
     sx: {
@@ -866,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;
 
@@ -890,8 +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}', 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.createElement(TableCell, Object.assign({
     align: isParentHeader ? 'center' : 'left'
@@ -1095,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, {
@@ -1118,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)",
@@ -1159,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) {
@@ -1265,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)",
@@ -1303,7 +1442,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
   }, enableRowEditing && React.createElement(MenuItem, {
     onClick: handleEdit,
     sx: commonMenuItemStyles$1
-  }, React.createElement(EditIcon, null), localization.rowActionMenuItemEdit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
+  }, React.createElement(EditIcon, null), localization.edit), (_renderRowActionMenuI = renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems(row, tableInstance, function () {
     return setAnchorEl(null);
   })) != null ? _renderRowActionMenuI : null);
 };
@@ -2117,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))));
@@ -2179,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
@@ -2187,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
@@ -2409,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);
@@ -2425,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"
       })))
@@ -2454,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);
     },
@@ -2464,61 +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: _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),
-    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],
@@ -2530,42 +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
-    }
-  }, 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) {
@@ -2581,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);
     },
@@ -2604,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);
     },
@@ -2638,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
@@ -2713,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,
@@ -2725,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;
@@ -2903,53 +2966,50 @@ var MRT_TableContainer = function MRT_TableContainer() {
 };
 
 var MRT_DefaultLocalization_EN = {
-  actionsHeadColumnTitle: 'Actions',
+  actions: 'Actions',
+  cancel: 'Cancel',
   changeFilterMode: 'Change filter mode',
-  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)',
-  filterMenuItemGreaterThan: 'Greater Than',
-  filterMenuItemLessThan: 'Less Than',
-  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 = {