material-react-table 0.26.6 → 0.29.0

package/src/inputs/MRT_FilterTextField.tsx

@@ -6,10 +6,13 @@ import React, {
   useState,
 } from 'react';
 import {
+  Box,
+  Checkbox,
   Chip,
   debounce,
   IconButton,
   InputAdornment,
+  ListItemText,
   MenuItem,
   TextField,
   TextFieldProps,
@@ -20,20 +23,20 @@ import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
   header: MRT_Header;
-  inputIndex?: number;
+  rangeFilterIndex?: number;
   table: MRT_TableInstance;
 }
 
 export const MRT_FilterTextField: FC<Props> = ({
   header,
-  inputIndex,
+  rangeFilterIndex,
   table,
 }) => {
   const {
     getState,
     options: {
       enableColumnFilterChangeMode,
-      enabledColumnFilterOptions,
+      columnFilterModeOptions,
       icons: { FilterListIcon, CloseIcon },
       localization,
       muiTableHeadCellFilterTextFieldProps,
@@ -45,11 +48,13 @@ export const MRT_FilterTextField: FC<Props> = ({
   const { columnDef } = column;
   const { currentFilterFns } = getState();
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-
   const mTableHeadCellFilterTextFieldProps =
     muiTableHeadCellFilterTextFieldProps instanceof Function
-      ? muiTableHeadCellFilterTextFieldProps({ column, table })
+      ? muiTableHeadCellFilterTextFieldProps({
+          column,
+          table,
+          rangeFilterIndex,
+        })
       : muiTableHeadCellFilterTextFieldProps;
 
   const mcTableHeadCellFilterTextFieldProps =
@@ -57,6 +62,7 @@ export const MRT_FilterTextField: FC<Props> = ({
       ? columnDef.muiTableHeadCellFilterTextFieldProps({
           column,
           table,
+          rangeFilterIndex,
         })
       : columnDef.muiTableHeadCellFilterTextFieldProps;
 
@@ -65,28 +71,71 @@ export const MRT_FilterTextField: FC<Props> = ({
     ...mcTableHeadCellFilterTextFieldProps,
   } as TextFieldProps;
 
-  const [filterValue, setFilterValue] = useState<string>(() =>
-    inputIndex !== undefined
-      ? (column.getFilterValue() as [string, string])?.[inputIndex] ?? ''
+  const isRangeFilter =
+    columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
+  const isSelectFilter = columnDef.filterVariant === 'select';
+  const isMultiSelectFilter = columnDef.filterVariant === 'multiSelect';
+  const isTextboxFilter = !isSelectFilter && !isMultiSelectFilter;
+
+  const currentFilterOption = currentFilterFns?.[header.id];
+  const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
+    rangeFilterIndex ?? ''
+  }`;
+  const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
+    ? //@ts-ignore
+      localization[
+        `filter${
+          currentFilterOption?.charAt?.(0)?.toUpperCase() +
+          currentFilterOption?.slice(1)
+        }`
+      ]
+    : '';
+  const filterPlaceholder = !isRangeFilter
+    ? localization.filterByColumn?.replace('{column}', String(columnDef.header))
+    : rangeFilterIndex === 0
+    ? localization.min
+    : rangeFilterIndex === 1
+    ? localization.max
+    : '';
+  const allowedColumnFilterOptions =
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
+  const showChangeModeButton =
+    enableColumnFilterChangeMode &&
+    columnDef.enableColumnFilterChangeMode !== false &&
+    !rangeFilterIndex &&
+    (allowedColumnFilterOptions === undefined ||
+      !!allowedColumnFilterOptions?.length);
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [filterValue, setFilterValue] = useState<string | string[]>(() =>
+    isMultiSelectFilter
+      ? (column.getFilterValue() as string[]) || []
+      : isRangeFilter
+      ? (column.getFilterValue() as [string, string])?.[
+          rangeFilterIndex as number
+        ] || []
       : (column.getFilterValue() as string) ?? '',
   );
 
   const handleChangeDebounced = useCallback(
-    debounce((event: ChangeEvent<HTMLInputElement>) => {
-      let value =
-        textFieldProps.type === 'date'
-          ? new Date(event.target.value)
-          : event.target.value;
-      if (inputIndex !== undefined) {
-        column.setFilterValue((old: [string, string | Date]) => {
-          const newFilterValues = old ?? ['', ''];
-          newFilterValues[inputIndex] = value;
-          return newFilterValues;
-        });
-      } else {
-        column.setFilterValue(value ?? undefined);
-      }
-    }, 200),
+    debounce(
+      (event: ChangeEvent<HTMLInputElement>) => {
+        let value =
+          textFieldProps.type === 'date'
+            ? new Date(event.target.value)
+            : event.target.value;
+        if (isRangeFilter) {
+          column.setFilterValue((old: [string, string | Date]) => {
+            const newFilterValues = old ?? ['', ''];
+            newFilterValues[rangeFilterIndex as number] = value;
+            return newFilterValues;
+          });
+        } else {
+          column.setFilterValue(value ?? undefined);
+        }
+      },
+      isTextboxFilter ? 200 : 1,
+    ),
     [],
   );
 
@@ -95,24 +144,24 @@ export const MRT_FilterTextField: FC<Props> = ({
     handleChangeDebounced(event);
   };
 
-  const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
-    setAnchorEl(event.currentTarget);
-  };
-
   const handleClear = () => {
-    setFilterValue('');
-    if (inputIndex !== undefined) {
+    if (isMultiSelectFilter) {
+      setFilterValue([]);
+      column.setFilterValue([]);
+    } else if (isRangeFilter) {
+      setFilterValue('');
       column.setFilterValue((old: [string | undefined, string | undefined]) => {
         const newFilterValues = old ?? ['', ''];
-        newFilterValues[inputIndex] = undefined;
+        newFilterValues[rangeFilterIndex as number] = undefined;
         return newFilterValues;
       });
     } else {
+      setFilterValue('');
       column.setFilterValue(undefined);
     }
   };
 
-  const handleClearFilterChip = () => {
+  const handleClearEmptyFilterChip = () => {
     setFilterValue('');
     column.setFilterValue(undefined);
     setCurrentFilterFns((prev) => ({
@@ -121,47 +170,14 @@ export const MRT_FilterTextField: FC<Props> = ({
     }));
   };
 
+  const handleFilterMenuOpen = (event: MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
   if (columnDef.Filter) {
     return <>{columnDef.Filter?.({ header, table })}</>;
   }
 
-  const filterId = `mrt-${tableId}-${header.id}-filter-text-field${
-    inputIndex ?? ''
-  }`;
-  const currentFilterOption = currentFilterFns?.[header.id];
-  const isSelectFilter = !!columnDef.filterSelectOptions;
-  const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
-    ? //@ts-ignore
-      localization[
-        `filter${
-          currentFilterOption?.charAt(0)?.toUpperCase() +
-          currentFilterOption?.slice(1)
-        }`
-      ]
-    : '';
-  const filterPlaceholder =
-    inputIndex === undefined
-      ? localization.filterByColumn?.replace(
-          '{column}',
-          String(columnDef.header),
-        )
-      : inputIndex === 0
-      ? localization.min
-      : inputIndex === 1
-      ? localization.max
-      : '';
-
-  const allowedColumnFilterOptions =
-    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
-
-  const showChangeModeButton =
-    enableColumnFilterChangeMode &&
-    columnDef.enableColumnFilterChangeMode !== false &&
-    !isSelectFilter &&
-    !inputIndex &&
-    (allowedColumnFilterOptions === undefined ||
-      !!allowedColumnFilterOptions?.length);
-
   return (
     <>
       <TextField
@@ -200,12 +216,14 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         margin="none"
         placeholder={
-          filterChipLabel || isSelectFilter ? undefined : filterPlaceholder
+          filterChipLabel || isSelectFilter || isMultiSelectFilter
+            ? undefined
+            : filterPlaceholder
         }
         onChange={handleChange}
         onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
-        select={isSelectFilter}
-        value={filterValue ?? ''}
+        select={isSelectFilter || isMultiSelectFilter}
+        value={filterValue}
         variant="standard"
         InputProps={{
           startAdornment: showChangeModeButton ? (
@@ -224,7 +242,7 @@ export const MRT_FilterTextField: FC<Props> = ({
               </Tooltip>
               {filterChipLabel && (
                 <Chip
-                  onDelete={handleClearFilterChip}
+                  onDelete={handleClearEmptyFilterChip}
                   label={filterChipLabel}
                 />
               )}
@@ -236,7 +254,6 @@ export const MRT_FilterTextField: FC<Props> = ({
             <InputAdornment position="end">
               <Tooltip
                 arrow
-                disableHoverListener={isSelectFilter}
                 placement="right"
                 title={localization.clearFilter ?? ''}
               >
@@ -258,11 +275,26 @@ export const MRT_FilterTextField: FC<Props> = ({
             </InputAdornment>
           ),
         }}
+        SelectProps={{
+          displayEmpty: true,
+          multiple: isMultiSelectFilter,
+          renderValue: isMultiSelectFilter
+            ? (selected: any) =>
+                !selected?.length ? (
+                  <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
+                ) : (
+                  <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: '2px' }}>
+                    {(selected as string[])?.map((value) => (
+                      <Chip key={value} label={value} />
+                    ))}
+                  </Box>
+                )
+            : undefined,
+        }}
         {...textFieldProps}
         sx={(theme) => ({
-          m: '-0.25rem',
           p: 0,
-          minWidth: !filterChipLabel ? '8rem' : 'auto',
+          minWidth: !filterChipLabel ? '6rem' : 'auto',
           width: 'calc(100% + 0.5rem)',
           '&	.MuiSelect-icon': {
             mr: '1.5rem',
@@ -272,24 +304,32 @@ export const MRT_FilterTextField: FC<Props> = ({
             : (textFieldProps?.sx as any)),
         })}
       >
-        {isSelectFilter && (
-          <MenuItem divider disabled={!filterValue} value="">
-            {localization.clearFilter}
+        {(isSelectFilter || isMultiSelectFilter) && (
+          <MenuItem divider disabled hidden value="">
+            <Box sx={{ opacity: 0.5 }}>{filterPlaceholder}</Box>
           </MenuItem>
         )}
         {columnDef?.filterSelectOptions?.map((option) => {
-          let value;
-          let text;
-          if (typeof option === 'string') {
+          let value: string;
+          let text: string;
+          if (typeof option !== 'object') {
             value = option;
             text = option;
-          } else if (typeof option === 'object') {
+          } else {
             value = option.value;
             text = option.text;
           }
           return (
             <MenuItem key={value} value={value}>
-              {text}
+              {isMultiSelectFilter && (
+                <Checkbox
+                  checked={(
+                    (column.getFilterValue() ?? []) as string[]
+                  ).includes(value)}
+                  sx={{ mr: '0.5rem' }}
+                />
+              )}
+              <ListItemText>{text}</ListItemText>
             </MenuItem>
           );
         })}

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -59,9 +59,9 @@ export const MRT_SelectCheckbox: FC<Props> = ({ row, selectAll, table }) => {
         size={density === 'compact' ? 'small' : 'medium'}
         {...checkboxProps}
         sx={(theme) => ({
-          height: density === 'compact' ? '1.5rem' : '2rem',
-          width: density === 'compact' ? '1.5rem' : '2rem',
-          m: '-1re.m',
+          height: density === 'compact' ? '1.75rem' : '2.5rem',
+          width: density === 'compact' ? '1.75rem' : '2.5rem',
+          m: density !== 'compact' ? '-0.4rem' : undefined,
           ...(checkboxProps?.sx instanceof Function
             ? checkboxProps.sx(theme)
             : (checkboxProps?.sx as any)),

package/src/localization.ts

@@ -13,6 +13,9 @@ export interface MRT_Localization {
   edit: string;
   expand: string;
   expandAll: string;
+  filterArrIncludes: string;
+  filterArrIncludesAll: string;
+  filterArrIncludesSome: string;
   filterBetween: string;
   filterBetweenInclusive: string;
   filterByColumn: string;
@@ -20,15 +23,20 @@ export interface MRT_Localization {
   filterEmpty: string;
   filterEndsWith: string;
   filterEquals: string;
+  filterEqualsString: string;
   filterFuzzy: string;
   filterGreaterThan: string;
   filterGreaterThanOrEqualTo: string;
+  filterInNumberRange: string;
+  filterIncludesString: string;
+  filterIncludesStringSensitive: string;
   filterLessThan: string;
   filterLessThanOrEqualTo: string;
   filterMode: string;
   filterNotEmpty: string;
   filterNotEquals: string;
   filterStartsWith: string;
+  filterWeakEquals: string;
   filteringByColumn: string;
   grab: string;
   groupByColumn: string;
@@ -38,6 +46,7 @@ export interface MRT_Localization {
   max: string;
   min: string;
   move: string;
+  or: string;
   pinToLeft: string;
   pinToRight: string;
   resetColumnSize: string;
@@ -85,6 +94,9 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   edit: 'Edit',
   expand: 'Expand',
   expandAll: 'Expand all',
+  filterArrIncludes: 'Includes',
+  filterArrIncludesAll: 'Includes all',
+  filterArrIncludesSome: 'Includes',
   filterBetween: 'Between',
   filterBetweenInclusive: 'Between Inclusive',
   filterByColumn: 'Filter by {column}',
@@ -92,15 +104,20 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   filterEmpty: 'Empty',
   filterEndsWith: 'Ends With',
   filterEquals: 'Equals',
+  filterEqualsString: 'Equals',
   filterFuzzy: 'Fuzzy',
   filterGreaterThan: 'Greater Than',
   filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
+  filterInNumberRange: 'Between',
+  filterIncludesString: 'Contains',
+  filterIncludesStringSensitive: 'Contains',
   filterLessThan: 'Less Than',
   filterLessThanOrEqualTo: 'Less Than Or Equal To',
   filterMode: 'Filter Mode: {filterType}',
   filterNotEmpty: 'Not Empty',
   filterNotEquals: 'Not Equals',
   filterStartsWith: 'Starts With',
+  filterWeakEquals: 'Equals',
   filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
   grab: 'Grab',
   groupByColumn: 'Group by {column}',
@@ -110,6 +127,7 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   max: 'Max',
   min: 'Min',
   move: 'Move',
+  or: 'or',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -41,7 +41,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       enableHiding,
       enablePinning,
       enableSorting,
-      enabledColumnFilterOptions,
+      columnFilterModeOptions,
       icons: {
         ArrowRightIcon,
         ClearAllIcon,
@@ -145,7 +145,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
   const isSelectFilter = !!columnDef.filterSelectOptions;
 
   const allowedColumnFilterOptions =
-    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const showFilterModeSubMenu =
     enableColumnFilterChangeMode &&

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,6 +1,101 @@
 import React, { FC, useMemo } from 'react';
 import { Box, Menu, MenuItem } from '@mui/material';
 import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
+import { MRT_Localization } from '../localization';
+
+export const internalFilterOptions = (
+  localization: MRT_Localization,
+): {
+  option: string;
+  symbol: string;
+  label: string;
+  divider: boolean;
+}[] => [
+  {
+    option: 'fuzzy',
+    symbol: '≈',
+    label: localization.filterFuzzy,
+    divider: false,
+  },
+  {
+    option: 'contains',
+    symbol: '*',
+    label: localization.filterContains,
+    divider: false,
+  },
+  {
+    option: 'startsWith',
+    symbol: 'a',
+    label: localization.filterStartsWith,
+    divider: false,
+  },
+  {
+    option: 'endsWith',
+    symbol: 'z',
+    label: localization.filterEndsWith,
+    divider: true,
+  },
+  {
+    option: 'equals',
+    symbol: '=',
+    label: localization.filterEquals,
+    divider: false,
+  },
+  {
+    option: 'notEquals',
+    symbol: '≠',
+    label: localization.filterNotEquals,
+    divider: true,
+  },
+  {
+    option: 'between',
+    symbol: '⇿',
+    label: localization.filterBetween,
+    divider: false,
+  },
+  {
+    option: 'betweenInclusive',
+    symbol: '⬌',
+    label: localization.filterBetweenInclusive,
+    divider: true,
+  },
+  {
+    option: 'greaterThan',
+    symbol: '>',
+    label: localization.filterGreaterThan,
+    divider: false,
+  },
+  {
+    option: 'greaterThanOrEqualTo',
+    symbol: '≥',
+    label: localization.filterGreaterThanOrEqualTo,
+    divider: false,
+  },
+  {
+    option: 'lessThan',
+    symbol: '<',
+    label: localization.filterLessThan,
+    divider: false,
+  },
+  {
+    option: 'lessThanOrEqualTo',
+    symbol: '≤',
+    label: localization.filterLessThanOrEqualTo,
+    divider: true,
+  },
+  {
+    option: 'empty',
+    symbol: '∅',
+    label: localization.filterEmpty,
+    divider: false,
+  },
+  {
+    option: 'notEmpty',
+    symbol: '!∅',
+    label: localization.filterNotEmpty,
+    divider: false,
+  },
+];
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -21,7 +116,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
     getState,
     options: {
       enabledGlobalFilterOptions,
-      enabledColumnFilterOptions,
+      columnFilterModeOptions,
       localization,
     },
     setCurrentFilterFns,
@@ -32,110 +127,17 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
   const { columnDef } = column ?? {};
 
   const allowedColumnFilterOptions =
-    columnDef?.enabledColumnFilterOptions ?? enabledColumnFilterOptions;
+    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
 
   const filterOptions = useMemo(
     () =>
-      (
-        [
-          {
-            option: 'fuzzy',
-            symbol: '≈',
-            label: localization.filterFuzzy,
-            divider: false,
-          },
-          {
-            option: 'contains',
-            symbol: '*',
-            label: localization.filterContains,
-            divider: false,
-          },
-          {
-            option: 'startsWith',
-            symbol: 'a',
-            label: localization.filterStartsWith,
-            divider: false,
-          },
-          {
-            option: 'endsWith',
-            symbol: 'z',
-            label: localization.filterEndsWith,
-            divider: true,
-          },
-          {
-            option: 'equals',
-            symbol: '=',
-            label: localization.filterEquals,
-            divider: false,
-          },
-          {
-            option: 'notEquals',
-            symbol: '≠',
-            label: localization.filterNotEquals,
-            divider: true,
-          },
-          {
-            option: 'between',
-            symbol: '⇿',
-            label: localization.filterBetween,
-            divider: false,
-          },
-          {
-            option: 'betweenInclusive',
-            symbol: '⬌',
-            label: localization.filterBetweenInclusive,
-            divider: true,
-          },
-          {
-            option: 'greaterThan',
-            symbol: '>',
-            label: localization.filterGreaterThan,
-            divider: false,
-          },
-          {
-            option: 'greaterThanOrEqualTo',
-            symbol: '≥',
-            label: localization.filterGreaterThanOrEqualTo,
-            divider: false,
-          },
-          {
-            option: 'lessThan',
-            symbol: '<',
-            label: localization.filterLessThan,
-            divider: false,
-          },
-          {
-            option: 'lessThanOrEqualTo',
-            symbol: '≤',
-            label: localization.filterLessThanOrEqualTo,
-            divider: true,
-          },
-          {
-            option: 'empty',
-            symbol: '∅',
-            label: localization.filterEmpty,
-            divider: false,
-          },
-          {
-            option: 'notEmpty',
-            symbol: '!∅',
-            label: localization.filterNotEmpty,
-            divider: false,
-          },
-        ] as Array<{
-          divider: boolean;
-          fn: Function;
-          label: string;
-          option: MRT_FilterOption;
-          symbol?: string;
-        }>
-      ).filter((filterType) =>
+      internalFilterOptions(localization).filter((filterOption) =>
         columnDef
           ? allowedColumnFilterOptions === undefined ||
-            allowedColumnFilterOptions?.includes(filterType.option)
+            allowedColumnFilterOptions?.includes(filterOption.option)
           : (!enabledGlobalFilterOptions ||
-              enabledGlobalFilterOptions.includes(filterType.option)) &&
-            ['fuzzy', 'contains'].includes(filterType.option),
+              enabledGlobalFilterOptions.includes(filterOption.option)) &&
+            ['fuzzy', 'contains'].includes(filterOption.option),
       ),
     [],
   );
@@ -146,7 +148,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         ...prev,
         [header.id]: option,
       }));
-      if (['empty', 'notEmpty'].includes(option)) {
+      if (['empty', 'notEmpty'].includes(option as string)) {
         column.setFilterValue(' ');
       } else if (option === 'between') {
         column.setFilterValue(['', '']);
@@ -178,7 +180,7 @@ export const MRT_FilterOptionMenu: FC<Props> = ({
         <MenuItem
           divider={divider}
           key={index}
-          onClick={() => handleSelectFilterType(option)}
+          onClick={() => handleSelectFilterType(option as MRT_FilterOption)}
           selected={option === filterOption}
           sx={{
             py: '6px',