material-react-table 0.5.3 → 0.5.6

package/src/inputs/MRT_FilterTextField.tsx

@@ -1,8 +1,16 @@
-import React, { ChangeEvent, FC, useState } from 'react';
-import { IconButton, InputAdornment, TextField, Tooltip } from '@mui/material';
+import React, { ChangeEvent, FC, MouseEvent, useState } from 'react';
+import {
+  Chip,
+  IconButton,
+  InputAdornment,
+  TextField,
+  TextFieldProps,
+  Tooltip,
+} from '@mui/material';
 import { useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
+import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
 
 interface Props {
   column: MRT_HeaderGroup;
@@ -11,79 +19,140 @@ interface Props {
 export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   const {
     icons: { FilterListIcon, CloseIcon },
+    idPrefix,
     localization,
+    muiTableHeadCellFilterTextFieldProps,
+    setCurrentFilterTypes,
+    tableInstance,
   } = useMRT();
 
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const mTableHeadCellFilterTextFieldProps =
+    muiTableHeadCellFilterTextFieldProps instanceof Function
+      ? muiTableHeadCellFilterTextFieldProps(column)
+      : muiTableHeadCellFilterTextFieldProps;
+
+  const mcTableHeadCellFilterTextFieldProps =
+    column.muiTableHeadCellFilterTextFieldProps instanceof Function
+      ? column.muiTableHeadCellFilterTextFieldProps(column)
+      : column.muiTableHeadCellFilterTextFieldProps;
+
+  const textFieldProps = {
+    ...mTableHeadCellFilterTextFieldProps,
+    ...mcTableHeadCellFilterTextFieldProps,
+    style: {
+      ...mTableHeadCellFilterTextFieldProps?.style,
+      ...mcTableHeadCellFilterTextFieldProps?.style,
+    },
+  } as TextFieldProps;
+
   const [filterValue, setFilterValue] = useState('');
 
   const handleChange = useAsyncDebounce((value) => {
     column.setFilter(value ?? undefined);
   }, 150);
 
+  const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
   const handleClear = () => {
     setFilterValue('');
     column.setFilter(undefined);
   };
 
+  const handleClearFilterChip = () => {
+    setFilterValue('');
+    column.setFilter(undefined);
+    setCurrentFilterTypes((prev) => ({ ...prev, [column.id]: 'fuzzy' }));
+  };
+
   if (column.Filter) {
     return <>{column.Filter?.({ column })}</>;
   }
 
+  const filterType = tableInstance.state.currentFilterTypes[column.id];
+  const filterChipLabel = ['empty', 'notEmpty'].includes(filterType);
+  const filterPlaceholder = localization.filterTextFieldPlaceholder?.replace(
+    '{column}',
+    String(column.Header),
+  );
+
   return (
-    <TextField
-      fullWidth
-      id={`filter-${column.id}-column`}
-      inputProps={{
-        style: {
-          textOverflow: 'ellipsis',
-        },
-      }}
-      margin="dense"
-      placeholder={localization.filterTextFieldPlaceholder?.replace(
-        '{column}',
-        String(column.Header),
-      )}
-      onChange={(e: ChangeEvent<HTMLInputElement>) => {
-        setFilterValue(e.target.value);
-        handleChange(e.target.value);
-      }}
-      onClick={(e) => e.stopPropagation()}
-      value={filterValue ?? ''}
-      variant="standard"
-      InputProps={{
-        startAdornment: (
-          <Tooltip
-            arrow
-            title={localization.filterTextFieldPlaceholder?.replace(
-              '{column}',
-              String(column.Header),
-            )}
-          >
+    <>
+      <TextField
+        fullWidth
+        id={`mrt-${idPrefix}-${column.id}-filter-text-field`}
+        inputProps={{
+          disabled: !!filterChipLabel,
+          sx: {
+            textOverflow: 'ellipsis',
+            width: filterChipLabel ? 0 : undefined,
+          },
+          title: filterPlaceholder,
+        }}
+        margin="none"
+        placeholder={filterChipLabel ? '' : filterPlaceholder}
+        onChange={(e: ChangeEvent<HTMLInputElement>) => {
+          setFilterValue(e.target.value);
+          handleChange(e.target.value);
+        }}
+        onClick={(e) => e.stopPropagation()}
+        value={filterValue ?? ''}
+        variant="standard"
+        InputProps={{
+          startAdornment: (
             <InputAdornment position="start">
-              <FilterListIcon />
-            </InputAdornment>
-          </Tooltip>
-        ),
-        endAdornment: (
-          <InputAdornment position="end">
-            <Tooltip
-              arrow
-              title={localization.filterTextFieldClearButtonTitle ?? ''}
-            >
-              <span>
+              <Tooltip arrow title="Change Filter Mode">
                 <IconButton
-                  aria-label={localization.filterTextFieldClearButtonTitle}
-                  disabled={filterValue?.length === 0}
-                  onClick={handleClear}
+                  onClick={handleFilterMenuOpen}
                   size="small"
+                  sx={{ height: '1.75rem', width: '1.75rem' }}
                 >
-                  <CloseIcon fontSize="small" />
+                  <FilterListIcon />
                 </IconButton>
-              </span>
-            </Tooltip>
-          </InputAdornment>
-        ),
-      }}
-    />
+              </Tooltip>
+              {filterChipLabel && (
+                <Chip onDelete={handleClearFilterChip} label={filterType} />
+              )}
+            </InputAdornment>
+          ),
+          endAdornment: !filterChipLabel && (
+            <InputAdornment position="end">
+              <Tooltip
+                arrow
+                placement="right"
+                title={localization.filterTextFieldClearButtonTitle ?? ''}
+              >
+                <span>
+                  <IconButton
+                    aria-label={localization.filterTextFieldClearButtonTitle}
+                    disabled={filterValue?.length === 0}
+                    onClick={handleClear}
+                    size="small"
+                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                  >
+                    <CloseIcon fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
+            </InputAdornment>
+          ),
+        }}
+        {...textFieldProps}
+        sx={{
+          m: '0 -0.25rem',
+          minWidth: !filterChipLabel ? '5rem' : 'auto',
+          width: 'calc(100% + 0.5rem)',
+          ...textFieldProps?.sx,
+        }}
+      />
+      <MRT_FilterTypeMenu
+        anchorEl={anchorEl}
+        column={column}
+        setAnchorEl={setAnchorEl}
+      />
+    </>
   );
 };

package/src/inputs/MRT_SearchTextField.tsx

@@ -8,6 +8,7 @@ interface Props {}
 export const MRT_SearchTextField: FC<Props> = () => {
   const {
     icons: { SearchIcon, CloseIcon },
+    idPrefix,
     localization,
     muiSearchTextFieldProps,
     onGlobalFilterChange,
@@ -32,7 +33,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
   return (
     <Collapse in={tableInstance.state.showSearch} orientation="horizontal">
       <TextField
-        id="global-search-text-field"
+        id={`mrt-${idPrefix}-search-text-field`}
         placeholder={localization.searchTextFieldPlaceholder}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -10,12 +10,8 @@ interface Props {
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
-  const {
-    localization,
-    onRowSelectChange,
-    onSelectAllChange,
-    tableInstance,
-  } = useMRT();
+  const { localization, onRowSelectChange, onSelectAllChange, tableInstance } =
+    useMRT();
 
   const onSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
@@ -32,7 +28,9 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
     : row?.getToggleRowSelectedProps();
 
   return (
-    <TableCell sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)} >
+    <TableCell
+      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+    >
       <Tooltip
         arrow
         enterDelay={1000}

package/src/localization.ts

@@ -11,6 +11,19 @@ export interface MRT_Localization {
   columnShowHideMenuShowAll: string;
   expandAllButtonTitle: string;
   expandButtonTitle: string;
+  filterApplied: string;
+  filterMenuItemContains: string;
+  filterMenuItemEmpty: string;
+  filterMenuItemEndsWith: string;
+  filterMenuItemEquals: string;
+  filterMenuItemFuzzy: string;
+  filterMenuItemNotEmpty: string;
+  filterMenuItemNotEquals: string;
+  filterMenuItemStartsWith: string;
+  filterMenuTitle: string;
+  filterTextFieldChangeFilterButtonTitle: string;
+  filterTextFieldChipLabelEmpty: string;
+  filterTextFieldChipLabelNotEmpty: string;
   filterTextFieldClearButtonTitle: string;
   filterTextFieldPlaceholder: string;
   rowActionButtonCancel: string;
@@ -27,9 +40,9 @@ export interface MRT_Localization {
   toggleFilterButtonTitle: string;
   toggleFullScreenButtonTitle: string;
   toggleSearchButtonTitle: string;
-  toolbarAlertSelectionMessage: string;
   toolbarAlertGroupedByMessage: string;
   toolbarAlertGroupedThenByMessage: string;
+  toolbarAlertSelectionMessage: string;
 }
 
 export const MRT_DefaultLocalization_EN: MRT_Localization = {
@@ -45,6 +58,19 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   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',
@@ -58,10 +84,10 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   selectCheckboxTitle: 'Toggle select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
-  toggleFilterButtonTitle: 'Toggle filters',
+  toggleFilterButtonTitle: 'Show/Hide filters',
   toggleFullScreenButtonTitle: 'Toggle full screen',
-  toggleSearchButtonTitle: 'Toggle search',
-  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
+  toggleSearchButtonTitle: 'Show/Hide search',
   toolbarAlertGroupedByMessage: 'Grouped by ',
   toolbarAlertGroupedThenByMessage: ', then by ',
+  toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',
 };

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,11 +1,18 @@
-import React, { FC } from 'react';
-import { Divider, Menu, MenuItem } from '@mui/material';
+import React, { FC, useState } from 'react';
+import {
+  IconButton,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+} from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
+import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
 
 const commonMenuItemStyles = {
   display: 'flex',
-  gap: '0.75rem',
+  alignItems: 'center',
 };
 
 interface Props {
@@ -24,17 +31,23 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     disableFilters,
     disableSortBy,
     enableColumnGrouping,
-    localization,
-    setShowFilters,
     icons: {
-      FilterListIcon,
-      SortIcon,
+      ArrowRightIcon,
       ClearAllIcon,
       DynamicFeedIcon,
+      FilterListIcon,
+      SortIcon,
       VisibilityOffIcon,
     },
+    idPrefix,
+    localization,
+    setShowFilters,
+    tableInstance,
   } = useMRT();
 
+  const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
+    useState<null | HTMLElement>(null);
+
   const handleClearSort = () => {
     column.clearSortBy();
     setAnchorEl(null);
@@ -68,7 +81,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           .getElementById(
             // @ts-ignore
             column.muiTableHeadCellFilterTextFieldProps?.id ??
-              `filter-${column.id}-column`,
+              `mrt-${idPrefix}-${column.id}-filter-text-field`,
           )
           ?.focus(),
       200,
@@ -76,11 +89,20 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleOpenFilterModeMenu = (event: React.MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    setFilterMenuAnchorEl(event.currentTarget);
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+        disablePadding: true,
+      }}
     >
       {!disableSortBy &&
         column.canSort && [
@@ -90,72 +112,114 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             onClick={handleClearSort}
             sx={commonMenuItemStyles}
           >
-            <ClearAllIcon /> {localization.columnActionMenuItemClearSort}
+            <ListItemIcon>
+              <ClearAllIcon />
+            </ListItemIcon>
+            <ListItemText>
+              {localization.columnActionMenuItemClearSort}
+            </ListItemText>
           </MenuItem>,
           <MenuItem
-            key={2}
             disabled={column.isSorted && !column.isSortedDesc}
+            key={2}
             onClick={handleSortAsc}
             sx={commonMenuItemStyles}
           >
-            <SortIcon />{' '}
-            {localization.columnActionMenuItemSortAsc?.replace(
-              '{column}',
-              String(column.Header),
-            )}
+            <ListItemIcon>
+              <SortIcon />
+            </ListItemIcon>
+            <ListItemText>
+              {localization.columnActionMenuItemSortAsc?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </ListItemText>
           </MenuItem>,
           <MenuItem
+            divider={
+              !disableFilters || enableColumnGrouping || !disableColumnHiding
+            }
             key={3}
             disabled={column.isSorted && column.isSortedDesc}
             onClick={handleSortDesc}
             sx={commonMenuItemStyles}
           >
-            <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />{' '}
-            {localization.columnActionMenuItemSortDesc?.replace(
-              '{column}',
-              String(column.Header),
-            )}
+            <ListItemIcon>
+              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+            </ListItemIcon>
+            <ListItemText>
+              {localization.columnActionMenuItemSortDesc?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </ListItemText>
           </MenuItem>,
         ]}
       {!disableFilters &&
         column.canFilter && [
-          <Divider key={0} />,
           <MenuItem
+            divider={enableColumnGrouping || !disableColumnHiding}
             key={1}
             onClick={handleFilterByColumn}
             sx={commonMenuItemStyles}
           >
-            <FilterListIcon />{' '}
-            {localization.filterTextFieldPlaceholder?.replace(
-              '{column}',
-              String(column.Header),
-            )}
+            <ListItemIcon>
+              <FilterListIcon />
+            </ListItemIcon>
+            <ListItemText>
+              {localization.filterTextFieldPlaceholder?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </ListItemText>
+            <IconButton
+              onClick={handleOpenFilterModeMenu}
+              onMouseEnter={handleOpenFilterModeMenu}
+              size="small"
+              sx={{ p: 0 }}
+            >
+              <ArrowRightIcon />
+            </IconButton>
           </MenuItem>,
+          <MRT_FilterTypeMenu
+            anchorEl={filterMenuAnchorEl}
+            column={column}
+            key={2}
+            setAnchorEl={setFilterMenuAnchorEl}
+            onSelect={handleFilterByColumn}
+          />,
         ]}
       {enableColumnGrouping &&
         column.canGroupBy && [
-          <Divider key={1} />,
           <MenuItem
+            divider={!disableColumnHiding}
             key={2}
             onClick={handleGroupByColumn}
             sx={commonMenuItemStyles}
           >
-            <DynamicFeedIcon />{' '}
-            {localization[
-              column.isGrouped
-                ? 'columnActionMenuItemUnGroupBy'
-                : 'columnActionMenuItemGroupBy'
-            ]?.replace('{column}', String(column.Header))}
+            <ListItemIcon>
+              <DynamicFeedIcon />
+            </ListItemIcon>
+            <ListItemText>
+              {localization[
+                column.isGrouped
+                  ? 'columnActionMenuItemUnGroupBy'
+                  : 'columnActionMenuItemGroupBy'
+              ]?.replace('{column}', String(column.Header))}
+            </ListItemText>
           </MenuItem>,
         ]}
       {!disableColumnHiding && [
-        <Divider key={0} />,
         <MenuItem key={1} onClick={handleHideColumn} sx={commonMenuItemStyles}>
-          <VisibilityOffIcon />{' '}
-          {localization.columnActionMenuItemHideColumn?.replace(
-            '{column}',
-            String(column.Header),
-          )}
+          <ListItemIcon>
+            <VisibilityOffIcon />
+          </ListItemIcon>
+          <ListItemText>
+            {localization.columnActionMenuItemHideColumn?.replace(
+              '{column}',
+              String(column.Header),
+            )}
+          </ListItemText>
         </MenuItem>,
       ]}
     </Menu>

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -0,0 +1,109 @@
+import React, { FC, useMemo } from 'react';
+import { Menu, MenuItem } from '@mui/material';
+import { useMRT } from '../useMRT';
+import { MRT_FilterType, MRT_HeaderGroup } from '..';
+
+interface Props {
+  anchorEl: HTMLElement | null;
+  column: MRT_HeaderGroup;
+  setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  onSelect?: () => void;
+}
+
+export const MRT_FilterTypeMenu: FC<Props> = ({
+  anchorEl,
+  column,
+  onSelect,
+  setAnchorEl,
+}) => {
+  const { localization, setCurrentFilterTypes, tableInstance } = useMRT();
+
+  const filterTypes: {
+    type: MRT_FilterType;
+    label: string;
+    divider: boolean;
+  }[] = useMemo(
+    () => [
+      {
+        type: 'fuzzy',
+        label: localization.filterMenuItemFuzzy,
+        divider: false,
+      },
+      {
+        type: 'contains',
+        label: localization.filterMenuItemContains,
+        divider: true,
+      },
+      {
+        type: 'startsWith',
+        label: localization.filterMenuItemStartsWith,
+        divider: false,
+      },
+      {
+        type: 'endsWith',
+        label: localization.filterMenuItemEndsWith,
+        divider: true,
+      },
+      {
+        type: 'equals',
+        label: localization.filterMenuItemEquals,
+        divider: false,
+      },
+      {
+        type: 'notEquals',
+        label: localization.filterMenuItemNotEquals,
+        divider: true,
+      },
+      {
+        type: 'empty',
+        label: localization.filterMenuItemEmpty,
+        divider: false,
+      },
+      {
+        type: 'notEmpty',
+        label: localization.filterMenuItemNotEmpty,
+        divider: false,
+      },
+    ],
+    [],
+  );
+
+  const handleSelectFilterType = (value: MRT_FilterType) => {
+    setAnchorEl(null);
+    setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
+      ...prev,
+      [column.id]: value,
+    }));
+    if (['empty', 'notEmpty'].includes(value)) {
+      column.setFilter(' ');
+    }
+    onSelect?.();
+  };
+
+  const filterType = tableInstance.state.currentFilterTypes[column.id];
+
+  return (
+    <Menu
+      anchorEl={anchorEl}
+      anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+        disablePadding: true,
+      }}
+    >
+      {filterTypes.map(({ type, label, divider }) => (
+        <MenuItem
+          divider={divider}
+          key={type}
+          onClick={() => handleSelectFilterType(type)}
+          selected={type === filterType}
+          value={type}
+        >
+          {label}
+        </MenuItem>
+      ))}
+    </Menu>
+  );
+};

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Menu, MenuItem } from '@mui/material';
+import { ListItemIcon, ListItemText, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
 
@@ -29,10 +29,17 @@ export const MRT_RowActionMenu: FC<Props> = ({
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+        disablePadding: true,
+      }}
     >
       {enableRowEditing && (
-        <MenuItem sx={{ display: 'flex', gap: '0.75rem' }} onClick={handleEdit}>
-          <EditIcon /> {localization.rowActionMenuItemEdit}
+        <MenuItem onClick={handleEdit}>
+          <ListItemIcon>
+            <EditIcon />
+          </ListItemIcon>
+          <ListItemText>{localization.rowActionMenuItemEdit}</ListItemText>
         </MenuItem>
       )}
       {renderRowActionMenuItems?.(row, tableInstance, () =>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -8,7 +8,7 @@ interface Props {
 }
 
 export const MRT_ShowHideColumnsMenu: FC<Props> = ({ column }) => {
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+  const isParentHeader = !!column?.columns?.length;
 
   const allChildColumnsVisible =
     isParentHeader &&