material-react-table 0.6.7 → 0.6.10

package/src/inputs/MRT_SearchTextField.tsx

@@ -1,7 +1,14 @@
-import React, { ChangeEvent, FC, useState } from 'react';
-import { Collapse, IconButton, InputAdornment, TextField } from '@mui/material';
+import React, { ChangeEvent, FC, MouseEvent, useState } from 'react';
+import {
+  Collapse,
+  IconButton,
+  InputAdornment,
+  TextField,
+  Tooltip,
+} from '@mui/material';
 import { useMRT } from '../useMRT';
 import { useAsyncDebounce } from 'react-table';
+import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
 
 interface Props {}
 
@@ -15,6 +22,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
     tableInstance,
   } = useMRT();
 
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState('');
 
   const handleChange = useAsyncDebounce(
@@ -25,6 +33,10 @@ export const MRT_SearchTextField: FC<Props> = () => {
     200,
   );
 
+  const handleGlobalFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
   const handleClear = () => {
     setSearchValue('');
     tableInstance.setGlobalFilter(undefined);
@@ -44,7 +56,18 @@ export const MRT_SearchTextField: FC<Props> = () => {
         InputProps={{
           startAdornment: (
             <InputAdornment position="start">
-              <SearchIcon fontSize="small" />
+              <Tooltip arrow title={localization.changeSearchMode}>
+                <span>
+                  <IconButton
+                    aria-label={localization.changeSearchMode}
+                    onClick={handleGlobalFilterMenuOpen}
+                    size="small"
+                    sx={{ height: '1.75rem', width: '1.75rem' }}
+                  >
+                    <SearchIcon fontSize="small" />
+                  </IconButton>
+                </span>
+              </Tooltip>
             </InputAdornment>
           ),
           endAdornment: (
@@ -64,6 +87,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
         {...muiSearchTextFieldProps}
         sx={{ justifySelf: 'end', ...muiSearchTextFieldProps?.sx }}
       />
+      <MRT_FilterTypeMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
     </Collapse>
   );
 };

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,8 +1,7 @@
 import React, { ChangeEvent, FC } from 'react';
-import { Checkbox, TableCell, Tooltip } from '@mui/material';
+import { Checkbox, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_Row } from '..';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
   row?: MRT_Row;
@@ -10,48 +9,76 @@ interface Props {
 }
 
 export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll }) => {
-  const { localization, onRowSelectChange, onSelectAllChange, tableInstance } =
-    useMRT();
+  const {
+    localization,
+    muiSelectCheckboxProps,
+    onSelectChange,
+    onSelectAllChange,
+    tableInstance,
+    tableInstance: {
+      state: { densePadding },
+    },
+  } = useMRT();
 
-  const onSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
+  const handleSelectChange = (event: ChangeEvent<HTMLInputElement>) => {
     if (selectAll) {
       tableInstance?.getToggleAllRowsSelectedProps?.()?.onChange?.(event);
-      onSelectAllChange?.(event, tableInstance.selectedFlatRows);
+      onSelectAllChange?.(
+        event,
+        event.target.checked ? tableInstance.rows : [],
+      );
     } else if (row) {
       row?.getToggleRowSelectedProps()?.onChange?.(event);
-      onRowSelectChange?.(event, row, tableInstance.selectedFlatRows);
+      onSelectChange?.(
+        event,
+        row,
+        event.target.checked
+          ? [...tableInstance.selectedFlatRows, row]
+          : tableInstance.selectedFlatRows.filter(
+              (selectedRow) => selectedRow.id !== row.id,
+            ),
+      );
     }
   };
 
-  const checkboxProps = selectAll
+  const mTableBodyRowSelectCheckboxProps =
+    muiSelectCheckboxProps instanceof Function
+      ? muiSelectCheckboxProps(selectAll, row, tableInstance)
+      : muiSelectCheckboxProps;
+
+  const rtSelectCheckboxProps = selectAll
     ? tableInstance.getToggleAllRowsSelectedProps()
     : row?.getToggleRowSelectedProps();
 
+  const checkboxProps = {
+    ...mTableBodyRowSelectCheckboxProps,
+    ...rtSelectCheckboxProps,
+    style: {
+      ...rtSelectCheckboxProps?.style,
+      ...mTableBodyRowSelectCheckboxProps?.style,
+    },
+  };
+
   return (
-    <TableCell
-      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+    <Tooltip
+      arrow
+      enterDelay={1000}
+      enterNextDelay={1000}
+      title={
+        selectAll ? localization.toggleSelectAll : localization.toggleSelectRow
+      }
     >
-      <Tooltip
-        arrow
-        enterDelay={1000}
-        enterNextDelay={1000}
-        title={
-          selectAll
+      <Checkbox
+        inputProps={{
+          'aria-label': selectAll
             ? localization.toggleSelectAll
-            : localization.toggleSelectRow
-        }
-      >
-        <Checkbox
-          inputProps={{
-            'aria-label': selectAll
-              ? localization.toggleSelectAll
-              : localization.toggleSelectRow,
-          }}
-          onChange={onSelectChange}
-          {...checkboxProps}
-          title={undefined}
-        />
-      </Tooltip>
-    </TableCell>
+            : localization.toggleSelectRow,
+        }}
+        size={densePadding ? 'small' : 'medium'}
+        {...checkboxProps}
+        onChange={handleSelectChange}
+        title={undefined}
+      />
+    </Tooltip>
   );
 };

package/src/localization.ts

@@ -2,6 +2,7 @@ export interface MRT_Localization {
   actions: string;
   cancel: string;
   changeFilterMode: string;
+  changeSearchMode: string;
   clearFilter: string;
   clearSearch: string;
   clearSort: string;
@@ -11,12 +12,13 @@ export interface MRT_Localization {
   edit: string;
   expand: string;
   expandAll: string;
+  filterBestMatchFirst: string;
   filterByColumn: string;
   filterContains: string;
   filterEmpty: string;
   filterEndsWith: string;
   filterEquals: string;
-  filterFuzzy: string;
+  filterBestMatch: string;
   filterGreaterThan: string;
   filterLessThan: string;
   filterMode: string;
@@ -51,6 +53,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   actions: 'Actions',
   cancel: 'Cancel',
   changeFilterMode: 'Change filter mode',
+  changeSearchMode: 'Change search mode',
   clearFilter: 'Clear filter',
   clearSearch: 'Clear search',
   clearSort: 'Clear sort',
@@ -60,12 +63,13 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
+  filterBestMatch: 'Best Match',
+  filterBestMatchFirst: 'Best Match First',
   filterByColumn: 'Filter by {column}',
-  filterContains: 'Contains Exact',
+  filterContains: 'Contains',
   filterEmpty: 'Empty',
   filterEndsWith: 'Ends With',
   filterEquals: 'Equals',
-  filterFuzzy: 'Fuzzy Match',
   filterGreaterThan: 'Greater Than',
   filterLessThan: 'Less Than',
   filterMode: 'Filter Mode: {filterType}',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -246,7 +246,12 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           </MenuItem>,
         ]}
       {!disableColumnHiding && [
-        <MenuItem key={0} onClick={handleHideColumn} sx={commonMenuItemStyles}>
+        <MenuItem
+          disabled={column.disableColumnHiding}
+          key={0}
+          onClick={handleHideColumn}
+          sx={commonMenuItemStyles}
+        >
           <Box sx={commonListItemStyles}>
             <ListItemIcon>
               <VisibilityOffIcon />

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -4,11 +4,12 @@ import { useMRT } from '../useMRT';
 import type { MRT_FilterType, MRT_HeaderGroup } from '..';
 import { MRT_FILTER_TYPE } from '../enums';
 import {
+  bestMatch,
+  bestMatchFirst,
   contains,
   empty,
   endsWith,
   equals,
-  fuzzy,
   greaterThan,
   lessThan,
   notEmpty,
@@ -24,7 +25,7 @@ const commonMenuItemStyles = {
 
 interface Props {
   anchorEl: HTMLElement | null;
-  column: MRT_HeaderGroup;
+  column?: MRT_HeaderGroup;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   onSelect?: () => void;
 }
@@ -35,7 +36,13 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
   onSelect,
   setAnchorEl,
 }) => {
-  const { localization, setCurrentFilterTypes, tableInstance } = useMRT();
+  const {
+    enabledGlobalFilterTypes,
+    localization,
+    setCurrentFilterTypes,
+    setCurrentGlobalFilterType,
+    tableInstance,
+  } = useMRT();
 
   const filterTypes: {
     type: MRT_FILTER_TYPE;
@@ -46,15 +53,21 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
     () =>
       [
         {
-          type: MRT_FILTER_TYPE.FUZZY,
-          label: localization.filterFuzzy,
+          type: MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+          label: localization.filterBestMatchFirst,
           divider: false,
-          fn: fuzzy,
+          fn: bestMatchFirst,
+        },
+        {
+          type: MRT_FILTER_TYPE.BEST_MATCH,
+          label: localization.filterBestMatch,
+          divider: !!column,
+          fn: bestMatch,
         },
         {
           type: MRT_FILTER_TYPE.CONTAINS,
           label: localization.filterContains,
-          divider: true,
+          divider: false,
           fn: contains,
         },
         {
@@ -105,26 +118,39 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
           divider: false,
           fn: notEmpty,
         },
-      ].filter(
-        (filterType) =>
-          !column.filterTypes || column.filterTypes.includes(filterType.type),
+      ].filter((filterType) =>
+        column
+          ? !column.enabledFilterTypes ||
+            column.enabledFilterTypes.includes(filterType.type)
+          : (!enabledGlobalFilterTypes ||
+              enabledGlobalFilterTypes.includes(filterType.type)) &&
+            [
+              MRT_FILTER_TYPE.BEST_MATCH_FIRST,
+              MRT_FILTER_TYPE.BEST_MATCH,
+            ].includes(filterType.type),
       ),
     [],
   );
 
   const handleSelectFilterType = (value: MRT_FILTER_TYPE) => {
-    setAnchorEl(null);
-    setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
-      ...prev,
-      [column.id]: value,
-    }));
-    if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
-      column.setFilter(' ');
+    if (column) {
+      setCurrentFilterTypes((prev: { [key: string]: MRT_FilterType }) => ({
+        ...prev,
+        [column.id]: value,
+      }));
+      if ([MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(value)) {
+        column.setFilter(' ');
+      }
+    } else {
+      setCurrentGlobalFilterType(value);
     }
+    setAnchorEl(null);
     onSelect?.();
   };
 
-  const filterType = tableInstance.state.currentFilterTypes[column.id];
+  const filterType = column
+    ? tableInstance.state.currentFilterTypes[column.id]
+    : tableInstance.state.currentGlobalFilterType;
 
   return (
     <Menu

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -3,6 +3,7 @@ import { Button, Menu, Divider, Box } from '@mui/material';
 import type { MRT_ColumnInstance } from '..';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
+import { findLowestLevelCols } from '../utils';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -17,6 +18,16 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
 }) => {
   const { localization, tableInstance } = useMRT();
 
+  const hideAllColumns = () => {
+    (
+      findLowestLevelCols(
+        tableInstance.columns as MRT_ColumnInstance[],
+      ) as MRT_ColumnInstance[]
+    )
+      .filter((col: MRT_ColumnInstance) => !col.disableColumnHiding)
+      .forEach((col: MRT_ColumnInstance) => col.toggleHidden(true));
+  };
+
   return (
     <Menu
       anchorEl={anchorEl}
@@ -40,7 +51,7 @@ export const MRT_ShowHideColumnsMenu: FC<Props> = ({
               !tableInstance.getToggleHideAllColumnsProps().checked &&
               !tableInstance.getToggleHideAllColumnsProps().indeterminate
             }
-            onClick={() => tableInstance.toggleHideAllColumns(true)}
+            onClick={hideAllColumns}
           >
             {localization.hideAll}
           </Button>

package/src/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -43,7 +43,7 @@ export const MRT_ShowHideColumnsMenuItems: FC<Props> = ({
           componentsProps={{ typography: { sx: { marginBottom: 0 } } }}
           checked={switchChecked}
           control={<Switch />}
-          disabled={isSubMenu && switchChecked}
+          disabled={(isSubMenu && switchChecked) || column.disableColumnHiding}
           label={column.Header as string}
           onChange={() => handleToggleColumnHidden(column)}
         />

package/src/table/MRT_TableSpacerCell.tsx

@@ -9,18 +9,11 @@ interface Props {
 export const MRT_TableSpacerCell: FC<Props> = ({ width }) => {
   const { muiTableBodyCellProps } = useMRT();
 
-  const mTableBodyCellrops =
+  const tableCellProps =
     muiTableBodyCellProps instanceof Function
       ? muiTableBodyCellProps()
       : muiTableBodyCellProps;
 
-  const tableCellProps = {
-    ...mTableBodyCellrops,
-    style: {
-      ...mTableBodyCellrops?.style,
-    },
-  };
-
   return (
     <TableCell {...tableCellProps} sx={{ width, ...tableCellProps?.sx }} />
   );

package/src/useMRT.tsx

@@ -47,6 +47,7 @@ export type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
       [key: string]: MRT_FilterType;
     }>
   >;
+  setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
   setDensePadding: Dispatch<SetStateAction<boolean>>;
   setFullScreen: Dispatch<SetStateAction<boolean>>;
   setShowFilters: Dispatch<SetStateAction<boolean>>;
@@ -98,11 +99,17 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
         [c.accessor as string]:
           c.filter ??
           props?.initialState?.filters?.[c.accessor as any] ??
-          (!!c.filterSelectOptions ? 'equals' : 'fuzzy'),
+          (!!c.filterSelectOptions?.length
+            ? MRT_FILTER_TYPE.EQUALS
+            : MRT_FILTER_TYPE.BEST_MATCH),
       })),
     ),
   );
 
+  const [currentGlobalFilterType, setCurrentGlobalFilterType] = useState<
+    MRT_FilterType | string | undefined
+  >(props.globalFilter);
+
   const applyFiltersToColumns = useCallback(
     (cols: MRT_ColumnInterface[]) =>
       cols.map((column) => {
@@ -146,12 +153,14 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
       // @ts-ignore
       columns,
       data,
+      globalFilter: currentGlobalFilterType,
       useControlledState: (state) =>
         useMemo(
           () => ({
             ...state,
             currentEditingRow,
             currentFilterTypes,
+            currentGlobalFilterType,
             densePadding,
             fullScreen,
             showFilters,
@@ -162,6 +171,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
           [
             currentEditingRow,
             currentFilterTypes,
+            currentGlobalFilterType,
             densePadding,
             fullScreen,
             showFilters,
@@ -196,6 +206,7 @@ export const MaterialReactTableProvider = <D extends {} = {}>(
         //@ts-ignore
         setCurrentEditingRow,
         setCurrentFilterTypes,
+        setCurrentGlobalFilterType,
         setDensePadding,
         setFullScreen,
         setShowFilters,

package/src/utils.ts

@@ -1,8 +1,12 @@
-import { MRT_ColumnInterface } from '.';
+import { MRT_ColumnInstance, MRT_ColumnInterface } from '.';
 
-export const findLowestLevelCols = (columns: MRT_ColumnInterface[]) => {
-  let lowestLevelColumns: MRT_ColumnInterface[] = columns;
-  let currentCols: MRT_ColumnInterface[] | undefined = columns;
+export const findLowestLevelCols = (
+  columns: MRT_ColumnInterface[] | MRT_ColumnInstance[],
+) => {
+  let lowestLevelColumns: MRT_ColumnInterface[] | MRT_ColumnInstance[] =
+    columns;
+  let currentCols: MRT_ColumnInterface[] | MRT_ColumnInstance[] | undefined =
+    columns;
   while (!!currentCols?.length && currentCols.some((col) => col.columns)) {
     const nextCols: MRT_ColumnInterface[] = currentCols
       .filter((col) => !!col.columns)