material-react-table 0.5.7 → 0.6.0

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,18 +1,21 @@
 import React, { FC, useState } from 'react';
-import {
-  IconButton,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-} from '@mui/material';
+import { Box, IconButton, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
+import { MRT_ShowHideColumnsMenu } from './MRT_ShowHideColumnsMenu';
 
 export const commonMenuItemStyles = {
-  py: '0 !important',
-  my: '0 !important',
+  py: '6px',
+  my: 0,
+  justifyContent: 'space-between',
+  alignItems: 'center',
+};
+
+export const commonListItemStyles = {
+  display: 'flex',
+  gap: '0.75rem',
+  alignItems: 'center',
 };
 
 interface Props {
@@ -34,8 +37,10 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     icons: {
       ArrowRightIcon,
       ClearAllIcon,
+      ViewColumnIcon,
       DynamicFeedIcon,
       FilterListIcon,
+      FilterListOffIcon,
       SortIcon,
       VisibilityOffIcon,
     },
@@ -48,6 +53,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
     useState<null | HTMLElement>(null);
 
+  const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] =
+    useState<null | HTMLElement>(null);
+
   const handleClearSort = () => {
     column.clearSortBy();
     setAnchorEl(null);
@@ -73,6 +81,11 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleClearFilter = () => {
+    column.setFilter('');
+    setAnchorEl(null);
+  };
+
   const handleFilterByColumn = () => {
     setShowFilters(true);
     setTimeout(
@@ -94,6 +107,17 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
+  const handleShowAllColumns = () => {
+    tableInstance.toggleHideAllColumns(false);
+  };
+
+  const handleOpenShowHideColumnsMenu = (
+    event: React.MouseEvent<HTMLElement>,
+  ) => {
+    event.stopPropagation();
+    setShowHideColumnsMenuAnchorEl(event.currentTarget);
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -101,85 +125,89 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: tableInstance.state.densePadding,
-        disablePadding: true,
       }}
     >
       {!disableSortBy &&
         column.canSort && [
           <MenuItem
-            key={1}
             disabled={!column.isSorted}
+            key={0}
             onClick={handleClearSort}
             sx={commonMenuItemStyles}
           >
-            <ListItemIcon>
+            <Box sx={commonListItemStyles}>
               <ClearAllIcon />
-            </ListItemIcon>
-            <ListItemText sx={commonMenuItemStyles}>
-              {localization.columnActionMenuItemClearSort}
-            </ListItemText>
+              {localization.clearSort}
+            </Box>
           </MenuItem>,
           <MenuItem
             disabled={column.isSorted && !column.isSortedDesc}
-            key={2}
+            key={1}
             onClick={handleSortAsc}
             sx={commonMenuItemStyles}
           >
-            <ListItemIcon>
+            <Box sx={commonListItemStyles}>
               <SortIcon />
-            </ListItemIcon>
-            <ListItemText sx={commonMenuItemStyles}>
-              {localization.columnActionMenuItemSortAsc?.replace(
+              {localization.sortByColumnAsc?.replace(
                 '{column}',
                 String(column.Header),
               )}
-            </ListItemText>
+            </Box>
           </MenuItem>,
           <MenuItem
             divider={
               !disableFilters || enableColumnGrouping || !disableColumnHiding
             }
-            key={3}
+            key={2}
             disabled={column.isSorted && column.isSortedDesc}
             onClick={handleSortDesc}
             sx={commonMenuItemStyles}
           >
-            <ListItemIcon>
+            <Box sx={commonListItemStyles}>
               <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
-            </ListItemIcon>
-            <ListItemText sx={commonMenuItemStyles}>
-              {localization.columnActionMenuItemSortDesc?.replace(
+              {localization.sortByColumnDesc?.replace(
                 '{column}',
                 String(column.Header),
               )}
-            </ListItemText>
+            </Box>
           </MenuItem>,
         ]}
       {!disableFilters &&
         column.canFilter && [
+          <MenuItem
+            disabled={!column.filterValue}
+            key={0}
+            onClick={handleClearFilter}
+            sx={commonMenuItemStyles}
+          >
+            <Box sx={commonListItemStyles}>
+              <FilterListOffIcon />
+              {localization.clearFilter}
+            </Box>
+          </MenuItem>,
           <MenuItem
             divider={enableColumnGrouping || !disableColumnHiding}
             key={1}
             onClick={handleFilterByColumn}
             sx={commonMenuItemStyles}
           >
-            <ListItemIcon>
+            <Box sx={commonListItemStyles}>
               <FilterListIcon />
-            </ListItemIcon>
-            <ListItemText sx={commonMenuItemStyles}>
-              {localization.filterTextFieldPlaceholder?.replace(
+              {localization.filterByColumn?.replace(
                 '{column}',
                 String(column.Header),
               )}
-            </ListItemText>
-            <IconButton
-              onClick={handleOpenFilterModeMenu}
-              onMouseEnter={handleOpenFilterModeMenu}
-              size="small"
-              sx={{ p: 0 }}
-            >
-              <ArrowRightIcon />
-            </IconButton>
+            </Box>
+            {!column.filterSelectOptions && (
+              <IconButton
+                onClick={handleOpenFilterModeMenu}
+                onMouseEnter={handleOpenFilterModeMenu}
+                size="small"
+                sx={{ p: 0 }}
+              >
+                <ArrowRightIcon />
+              </IconButton>
+            )}
           </MenuItem>,
           <MRT_FilterTypeMenu
             anchorEl={filterMenuAnchorEl}
@@ -193,34 +221,59 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
         column.canGroupBy && [
           <MenuItem
             divider={!disableColumnHiding}
-            key={2}
+            key={0}
             onClick={handleGroupByColumn}
             sx={commonMenuItemStyles}
           >
-            <ListItemIcon>
+            <Box sx={commonListItemStyles}>
               <DynamicFeedIcon />
-            </ListItemIcon>
-            <ListItemText sx={commonMenuItemStyles}>
               {localization[
-                column.isGrouped
-                  ? 'columnActionMenuItemUnGroupBy'
-                  : 'columnActionMenuItemGroupBy'
+                column.isGrouped ? 'ungroupByColumn' : 'groupByColumn'
               ]?.replace('{column}', String(column.Header))}
-            </ListItemText>
+            </Box>
           </MenuItem>,
         ]}
       {!disableColumnHiding && [
-        <MenuItem key={1} onClick={handleHideColumn} sx={commonMenuItemStyles}>
-          <ListItemIcon>
+        <MenuItem key={0} onClick={handleHideColumn} sx={commonMenuItemStyles}>
+          <Box sx={commonListItemStyles}>
             <VisibilityOffIcon />
-          </ListItemIcon>
-          <ListItemText sx={commonMenuItemStyles}>
-            {localization.columnActionMenuItemHideColumn?.replace(
+            {localization.hideColumn?.replace(
               '{column}',
               String(column.Header),
             )}
-          </ListItemText>
+          </Box>
+        </MenuItem>,
+        <MenuItem
+          disabled={!tableInstance.state.hiddenColumns?.length}
+          key={1}
+          onClick={handleShowAllColumns}
+          sx={commonMenuItemStyles}
+        >
+          <Box sx={commonListItemStyles}>
+            <ViewColumnIcon />
+
+            {localization.showAllColumns?.replace(
+              '{column}',
+              String(column.Header),
+            )}
+          </Box>
+          {!column.filterSelectOptions && (
+            <IconButton
+              onClick={handleOpenShowHideColumnsMenu}
+              onMouseEnter={handleOpenShowHideColumnsMenu}
+              size="small"
+              sx={{ p: 0 }}
+            >
+              <ArrowRightIcon />
+            </IconButton>
+          )}
         </MenuItem>,
+        <MRT_ShowHideColumnsMenu
+          anchorEl={showHideColumnsMenuAnchorEl}
+          isSubMenu
+          key={2}
+          setAnchorEl={setShowHideColumnsMenuAnchorEl}
+        />,
       ]}
     </Menu>
   );

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -1,9 +1,26 @@
 import React, { FC, useMemo } from 'react';
 import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_FilterType, MRT_HeaderGroup } from '..';
-import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import type { MRT_FilterType, MRT_HeaderGroup } from '..';
+import { MRT_FILTER_TYPE } from '../enums';
+import {
+  containsFilterFN,
+  emptyFilterFN,
+  endsWithFilterFN,
+  equalsFilterFN,
+  fuzzyFilterFN,
+  greaterThanFilterFN,
+  lessThanFilterFN,
+  notEmptyFilterFN,
+  notEqualsFilterFN,
+  startsWithFilterFN,
+} from '../filtersFNs';
 
+const commonMenuItemStyles = {
+  py: '6px',
+  my: 0,
+  alignItems: 'center',
+};
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -21,62 +38,83 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
   const { localization, setCurrentFilterTypes, tableInstance } = useMRT();
 
   const filterTypes: {
-    type: MRT_FilterType;
+    type: MRT_FILTER_TYPE;
     label: string;
     divider: boolean;
+    fn: Function;
   }[] = useMemo(
     () => [
       {
-        type: 'fuzzy',
-        label: localization.filterMenuItemFuzzy,
+        type: MRT_FILTER_TYPE.FUZZY,
+        label: localization.filterFuzzy,
         divider: false,
+        fn: fuzzyFilterFN,
       },
       {
-        type: 'contains',
-        label: localization.filterMenuItemContains,
+        type: MRT_FILTER_TYPE.CONTAINS,
+        label: localization.filterContains,
         divider: true,
+        fn: containsFilterFN,
       },
       {
-        type: 'startsWith',
-        label: localization.filterMenuItemStartsWith,
+        type: MRT_FILTER_TYPE.STARTS_WITH,
+        label: localization.filterStartsWith,
         divider: false,
+        fn: startsWithFilterFN,
       },
       {
-        type: 'endsWith',
-        label: localization.filterMenuItemEndsWith,
+        type: MRT_FILTER_TYPE.ENDS_WITH,
+        label: localization.filterEndsWith,
         divider: true,
+        fn: endsWithFilterFN,
       },
       {
-        type: 'equals',
-        label: localization.filterMenuItemEquals,
+        type: MRT_FILTER_TYPE.EQUALS,
+        label: localization.filterEquals,
         divider: false,
+        fn: equalsFilterFN,
       },
       {
-        type: 'notEquals',
-        label: localization.filterMenuItemNotEquals,
+        type: MRT_FILTER_TYPE.NOT_EQUALS,
+        label: localization.filterNotEquals,
         divider: true,
+        fn: notEqualsFilterFN,
       },
       {
-        type: 'empty',
-        label: localization.filterMenuItemEmpty,
+        type: MRT_FILTER_TYPE.GREATER_THAN,
+        label: localization.filterGreaterThan,
         divider: false,
+        fn: greaterThanFilterFN,
       },
       {
-        type: 'notEmpty',
-        label: localization.filterMenuItemNotEmpty,
+        type: MRT_FILTER_TYPE.LESS_THAN,
+        label: localization.filterLessThan,
+        divider: true,
+        fn: lessThanFilterFN,
+      },
+      {
+        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,
       },
     ],
     [],
   );
 
-  const handleSelectFilterType = (value: MRT_FilterType) => {
+  const handleSelectFilterType = (value: MRT_FILTER_TYPE) => {
     setAnchorEl(null);
     setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
       ...prev,
       [column.id]: value,
     }));
-    if (['empty', 'notEmpty'].includes(value)) {
+    if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
       column.setFilter(' ');
     }
     onSelect?.();
@@ -92,17 +130,16 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
       open={!!anchorEl}
       MenuListProps={{
         dense: tableInstance.state.densePadding,
-        disablePadding: true,
       }}
     >
-      {filterTypes.map(({ type, label, divider }) => (
+      {filterTypes.map(({ type, label, divider, fn }, index) => (
         <MenuItem
           divider={divider}
-          key={type}
+          key={index}
           onClick={() => handleSelectFilterType(type)}
-          selected={type === filterType}
-          value={type}
+          selected={type === filterType || fn === filterType}
           sx={commonMenuItemStyles}
+          value={type}
         >
           {label}
         </MenuItem>

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,10 +1,9 @@
 import React, { FC } from 'react';
-import { ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
+import { Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
 
-
 interface Props {
   anchorEl: HTMLElement | null;
   row: MRT_Row;
@@ -33,17 +32,12 @@ export const MRT_RowActionMenu: FC<Props> = ({
       onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: tableInstance.state.densePadding,
-        disablePadding: true,
       }}
     >
       {enableRowEditing && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-          <ListItemIcon>
-            <EditIcon />
-          </ListItemIcon>
-          <ListItemText sx={commonMenuItemStyles}>
-            {localization.rowActionMenuItemEdit}
-          </ListItemText>
+          <EditIcon />
+          {localization.edit}
         </MenuItem>
       )}
       {renderRowActionMenuItems?.(row, tableInstance, () =>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -1,44 +1,65 @@
 import React, { FC } from 'react';
-import { FormControlLabel, MenuItem, Switch } from '@mui/material';
-import { ColumnInstance } from 'react-table';
-import { MRT_ColumnInstance } from '..';
+import { Button, Menu, Divider, Box } from '@mui/material';
+import type { MRT_ColumnInstance } from '..';
+import { useMRT } from '../useMRT';
+import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 
 interface Props {
-  column: MRT_ColumnInstance;
+  anchorEl: HTMLElement | null;
+  isSubMenu?: boolean;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 
-export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
-  const isParentHeader = !!column?.columns?.length;
-
-  const allChildColumnsVisible =
-    isParentHeader &&
-    !!column.columns?.every((childColumn) => childColumn.isVisible);
-
-  const switchChecked = column.isVisible ?? allChildColumnsVisible;
-
-  const handleToggleColumnHidden = (column: ColumnInstance) => {
-    if (isParentHeader) {
-      column?.columns?.forEach?.((childColumn) => {
-        childColumn.toggleHidden(switchChecked);
-      });
-    } else {
-      column.toggleHidden();
-    }
-  };
+export const MRT_ShowHideColumnsMenu: FC<Props> = ({
+  anchorEl,
+  isSubMenu,
+  setAnchorEl,
+}) => {
+  const { localization, tableInstance } = useMRT();
 
   return (
-    <>
-      <MenuItem sx={{ pl: `${(column.depth + 0.5) * 2}rem` }}>
-        <FormControlLabel
-          checked={switchChecked}
-          control={<Switch />}
-          label={column.Header as string}
-          onChange={() => handleToggleColumnHidden(column)}
+    <Menu
+      anchorEl={anchorEl}
+      open={!!anchorEl}
+      onClose={() => setAnchorEl(null)}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+      }}
+    >
+      <Box
+        sx={{
+          display: 'flex',
+          justifyContent: isSubMenu ? 'center' : 'space-between',
+          p: '0.5rem',
+          pt: 0,
+        }}
+      >
+        {!isSubMenu && (
+          <Button
+            disabled={
+              !tableInstance.getToggleHideAllColumnsProps().checked &&
+              !tableInstance.getToggleHideAllColumnsProps().indeterminate
+            }
+            onClick={() => tableInstance.toggleHideAllColumns(true)}
+          >
+            {localization.hideAll}
+          </Button>
+        )}
+        <Button
+          disabled={tableInstance.getToggleHideAllColumnsProps().checked}
+          onClick={() => tableInstance.toggleHideAllColumns(false)}
+        >
+          {localization.showAll}
+        </Button>
+      </Box>
+      <Divider />
+      {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
+        <MRT_ShowHideColumnsMenuItems
+          column={column}
+          isSubMenu={isSubMenu}
+          key={`${index}-${column.id}`}
         />
-      </MenuItem>
-      {column.columns?.map((c: MRT_ColumnInstance, i) => (
-        <MRT_ShowHideColumnsMenu key={`${i}-${c.id}`} column={c} />
       ))}
-    </>
+    </Menu>
   );
 };

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -0,0 +1,57 @@
+import React, { FC } from 'react';
+import { FormControlLabel, MenuItem, Switch } from '@mui/material';
+import { ColumnInstance } from 'react-table';
+import type { MRT_ColumnInstance } from '..';
+import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+
+interface Props {
+  column: MRT_ColumnInstance;
+  isSubMenu?: boolean;
+}
+
+export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
+  column,
+  isSubMenu,
+}) => {
+  const isParentHeader = !!column?.columns?.length;
+
+  const allChildColumnsVisible =
+    isParentHeader &&
+    !!column.columns?.every((childColumn) => childColumn.isVisible);
+
+  const switchChecked = column.isVisible ?? allChildColumnsVisible;
+
+  const handleToggleColumnHidden = (column: ColumnInstance) => {
+    if (isParentHeader) {
+      column?.columns?.forEach?.((childColumn) => {
+        childColumn.toggleHidden(switchChecked);
+      });
+    } else {
+      column.toggleHidden();
+    }
+  };
+
+  return (
+    <>
+      <MenuItem
+        sx={{ ...commonMenuItemStyles, pl: `${(column.depth + 0.5) * 2}rem` }}
+      >
+        <FormControlLabel
+          componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
+          checked={switchChecked}
+          control={<Switch />}
+          disabled={isSubMenu && switchChecked}
+          label={column.Header as string}
+          onChange={() => handleToggleColumnHidden(column)}
+        />
+      </MenuItem>
+      {column.columns?.map((c: MRT_ColumnInstance, i) => (
+        <MRT_ShowHideColumnsMenuItems
+          key={`${i}-${c.id}`}
+          column={c}
+          isSubMenu={isSubMenu}
+        />
+      ))}
+    </>
+  );
+};

package/src/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -23,7 +23,7 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
 
   const selectMessage =
     tableInstance.selectedFlatRows.length > 0
-      ? localization.toolbarAlertSelectionMessage
+      ? localization.selectedCountOfRowCountRowsSelected
           ?.replace(
             '{selectedCount}',
             tableInstance.selectedFlatRows.length.toString(),
@@ -34,10 +34,10 @@ export const MRT_ToolbarAlertBanner: FC<Props> = () => {
   const groupedByMessage =
     tableInstance.state.groupBy.length > 0 ? (
       <span>
-        {localization.toolbarAlertGroupedByMessage}{' '}
+        {localization.groupedBy}{' '}
         {tableInstance.state.groupBy.map((columnId, index) => (
           <Fragment key={`${index}-${columnId}`}>
-            {index > 0 ? localization.toolbarAlertGroupedThenByMessage : ''}
+            {index > 0 ? localization.thenBy : ''}
             <Chip
               color="secondary"
               label={