material-react-table 0.28.0 → 0.29.0

package/dist/menus/MRT_FilterOptionMenu.d.ts

@@ -1,5 +1,12 @@
 import { FC } from 'react';
 import type { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_Localization } from '../localization';
+export declare const internalFilterOptions: (localization: MRT_Localization) => {
+    option: string;
+    symbol: string;
+    label: string;
+    divider: boolean;
+}[];
 interface Props {
     anchorEl: HTMLElement | null;
     header?: MRT_Header;

package/package.json

@@ -1,8 +1,8 @@
 {
-  "version": "0.28.0",
+  "version": "0.29.0",
   "license": "MIT",
   "name": "material-react-table",
-  "description": "A fully featured Material UI implementation of TanStack React Table, inspired by material-table and the MUI X DataGrid, written from the ground up in TypeScript.",
+  "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
   "author": "Kevin Vandy",
   "keywords": [
     "react-table",
@@ -62,7 +62,7 @@
     "@emotion/styled": "^11.9.3",
     "@faker-js/faker": "^7.3.0",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.9.1",
+    "@mui/material": "^5.9.2",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.5.9",
     "@storybook/addon-actions": "^6.5.9",

package/src/MaterialReactTable.tsx

@@ -225,6 +225,7 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
   enableEditing?: boolean;
   filterFn?: MRT_FilterFn<TData>;
   filterSelectOptions?: (string | { text: string; value: string })[];
+  filterVariant?: 'text' | 'select' | 'multiSelect' | 'range';
   /**
    * footer must be a string. If you want custom JSX to render the footer, you can also specify a `Footer` option. (Capital F)
    */
@@ -302,9 +303,11 @@ export type MRT_ColumnDef<TData extends Record<string, any> = {}> = Omit<
     | (({
         table,
         column,
+        rangeFilterIndex,
       }: {
         table: MRT_TableInstance<TData>;
         column: MRT_Column<TData>;
+        rangeFilterIndex?: number;
       }) => TextFieldProps);
   muiTableHeadCellProps?:
     | TableCellProps
@@ -341,6 +344,7 @@ export type MRT_DefinedColumnDef<TData extends Record<string, any> = {}> = Omit<
   'id'
 > & {
   id: string;
+  _filterFn: MRT_FilterOption;
 };
 
 export type MRT_Column<TData extends Record<string, any> = {}> = Omit<
@@ -607,9 +611,11 @@ export type MaterialReactTableProps<TData extends Record<string, any> = {}> =
       | (({
           table,
           column,
+          rangeFilterIndex,
         }: {
           table: MRT_TableInstance<TData>;
           column: MRT_Column<TData>;
+          rangeFilterIndex?: number;
         }) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps

package/src/column.utils.ts

@@ -52,6 +52,8 @@ export const prepareColumns = <TData extends Record<string, any> = {}>(
       if (Object.keys(MRT_FilterFns).includes(currentFilterFns[columnDef.id])) {
         columnDef.filterFn =
           MRT_FilterFns[currentFilterFns[columnDef.id]] ?? MRT_FilterFns.fuzzy;
+        //@ts-ignore
+        columnDef._filterFn = currentFilterFns[columnDef.id];
       }
       if (Object.keys(MRT_SortingFns).includes(columnDef.sortingFn as string)) {
         // @ts-ignore
@@ -123,3 +125,14 @@ export const getDefaultColumnOrderIds = <
     ),
     ...getTrailingDisplayColumnIds(props),
   ].filter(Boolean) as string[];
+
+export const getDefaultColumnFilterFn = <
+  TData extends Record<string, any> = {},
+>(
+  columnDef: MRT_ColumnDef<TData>,
+): MRT_FilterOption => {
+  if (columnDef.filterVariant === 'multiSelect') return 'arrIncludesSome';
+  if (columnDef.filterVariant === 'select') return 'equals';
+  if (columnDef.filterVariant === 'range') return 'betweenInclusive';
+  return 'fuzzy';
+};

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -19,7 +19,9 @@ export const MRT_TableHeadCellFilterContainer: FC<Props> = ({
 
   return (
     <Collapse in={showColumnFilters} mountOnEnter unmountOnExit>
-      {currentFilterFns[column.id] === 'between' ? (
+      {['between', 'betweenInclusive', 'inNumberRange'].includes(
+        currentFilterFns[column.id],
+      ) ? (
         <MRT_FilterRangeFields header={header} table={table} />
       ) : (
         <MRT_FilterTextField header={header} table={table} />

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -19,6 +19,11 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
   const { column } = header;
   const { columnDef } = column;
 
+  const isRangeFilter = [
+    'between',
+    'betweenInclusive',
+    'inNumberRange',
+  ].includes(columnDef._filterFn);
   const currentFilterOption = currentFilterFns?.[header.id];
   const filterTooltip = localization.filteringByColumn
     .replace('{column}', String(columnDef.header))
@@ -37,7 +42,7 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
       `"${
         Array.isArray(column.getFilterValue())
           ? (column.getFilterValue() as [string, string]).join(
-              `" ${localization.and} "`,
+              `" ${isRangeFilter ? localization.and : localization.or} "`,
             )
           : (column.getFilterValue() as string)
       }"`,
@@ -48,8 +53,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
     <Grow
       unmountOnExit
       in={
-        (!!column.getFilterValue() && currentFilterOption !== 'between') ||
-        (currentFilterOption === 'between' && // @ts-ignore
+        (!!column.getFilterValue() && isRangeFilter) ||
+        (!isRangeFilter && // @ts-ignore
           (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
       }
     >

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -11,8 +11,8 @@ interface Props {
 export const MRT_FilterRangeFields: FC<Props> = ({ header, table }) => {
   return (
     <Box sx={{ display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' }}>
-      <MRT_FilterTextField header={header} inputIndex={0} table={table} />
-      <MRT_FilterTextField header={header} inputIndex={1} table={table} />
+      <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
+      <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>
   );
 };

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,13 +23,13 @@ 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 {
@@ -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?.columnFilterModeOptions ?? columnFilterModeOptions;
-
-  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,10 +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) => ({
           p: 0,
-          minWidth: !filterChipLabel ? '8rem' : 'auto',
+          minWidth: !filterChipLabel ? '6rem' : 'auto',
           width: 'calc(100% + 0.5rem)',
           '&	.MuiSelect-icon': {
             mr: '1.5rem',
@@ -271,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/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',