material-react-table 0.6.9 → 0.6.10

package/dist/menus/MRT_FilterTypeMenu.d.ts

@@ -2,7 +2,7 @@ import { FC } from 'react';
 import type { MRT_HeaderGroup } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
-    column: MRT_HeaderGroup;
+    column?: MRT_HeaderGroup;
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     onSelect?: () => void;
 }

package/dist/useMRT.d.ts

@@ -17,6 +17,7 @@ export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     setCurrentFilterTypes: Dispatch<SetStateAction<{
         [key: string]: MRT_FilterType;
     }>>;
+    setCurrentGlobalFilterType: Dispatch<SetStateAction<MRT_FILTER_TYPE>>;
     setDensePadding: Dispatch<SetStateAction<boolean>>;
     setFullScreen: Dispatch<SetStateAction<boolean>>;
     setShowFilters: Dispatch<SetStateAction<boolean>>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.9",
+  "version": "0.6.10",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",

package/src/MaterialReactTable.tsx

@@ -1,6 +1,7 @@
 import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
+  ButtonProps,
   CheckboxProps,
   IconButtonProps,
   LinearProgressProps,
@@ -140,9 +141,12 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     disableColumnHiding?: boolean;
     disableEditing?: boolean;
     disableFilters?: boolean;
+    enabledFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filter?: MRT_FilterType | string | FilterType<D>;
     filterSelectOptions?: (string | { text: string; value: string })[];
-    filterTypes?: (MRT_FILTER_TYPE | string)[];
+    muiTableBodyCellCopyButtonProps?:
+      | ButtonProps
+      | ((cell?: MRT_Cell<D>) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
       | ((cell: MRT_Cell<D>) => TextFieldProps);
@@ -152,12 +156,12 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     muiTableFooterCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
-    muiTableHeadCellFilterTextFieldProps?:
-      | TextFieldProps
-      | ((column: Column<D>) => TextFieldProps);
     muiTableHeadCellColumnActionsButtonProps?:
       | IconButtonProps
       | ((column: Column<D>) => IconButtonProps);
+    muiTableHeadCellFilterTextFieldProps?:
+      | TextFieldProps
+      | ((column: Column<D>) => TextFieldProps);
     muiTableHeadCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
@@ -215,6 +219,7 @@ export type MRT_TableState<D extends {} = {}> = TableState<D> &
   UseSortByState<D> & {
     currentEditingRow: MRT_Row<D> | null;
     currentFilterTypes: { [key: string]: MRT_FilterType };
+    currentGlobalFilterType: MRT_FilterType;
     densePadding: boolean;
     fullScreen: boolean;
     showFilters: boolean;
@@ -246,6 +251,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     enableRowEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelection?: boolean;
+    enabledGlobalFilterTypes?: (MRT_FILTER_TYPE | string)[];
     filterTypes?: { [key in MRT_FILTER_TYPE]: any };
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
@@ -268,6 +274,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
           row?: MRT_Row<D>,
           tableInstance?: MRT_TableInstance<D>,
         ) => CheckboxProps);
+    muiTableBodyCellCopyButtonProps?:
+      | ButtonProps
+      | ((cell?: MRT_Cell<D>) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
       | ((cell?: MRT_Cell<D>) => TextFieldProps);
@@ -344,12 +353,12 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       event: MouseEvent<HTMLButtonElement>,
       row: Row<D>,
     ) => void;
+    onSelectAllChange?: (event: ChangeEvent, selectedRows: Row<D>[]) => void;
     onSelectChange?: (
       event: ChangeEvent,
       row: Row<D>,
       selectedRows: Row<D>[],
     ) => void;
-    onSelectAllChange?: (event: ChangeEvent, selectedRows: Row<D>[]) => void;
     positionActionsColumn?: 'first' | 'last';
     positionPagination?: 'bottom' | 'top' | 'both';
     positionToolbarActions?: 'bottom' | 'top';
@@ -388,7 +397,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
 export default <D extends {} = {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
   filterTypes,
-  globalFilter = 'fuzzy',
+  globalFilter = MRT_FILTER_TYPE.BEST_MATCH_FIRST,
   icons,
   localization,
   positionActionsColumn = 'first',

package/src/body/MRT_TableBodyCell.tsx

@@ -78,13 +78,19 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
         currentEditingRow?.id === cell.row.id ? (
         <MRT_EditCellTextField cell={cell} />
       ) : cell.isPlaceholder ? null : cell.isAggregated ? (
-        cell.render('Aggregated')
+        enableClickToCopy && !cell.column.disableClickToCopy ? (
+          <MRT_CopyButton cell={cell}>
+            {cell.render('Aggregated')}
+          </MRT_CopyButton>
+        ) : (
+          cell.render('Aggregated')
+        )
       ) : cell.isGrouped ? (
         <span>
           {cell.render('Cell')} ({cell.row.subRows.length})
         </span>
       ) : enableClickToCopy && !cell.column.disableClickToCopy ? (
-        <MRT_CopyButton cell={cell} />
+        <MRT_CopyButton cell={cell}>{cell.render('Cell')}</MRT_CopyButton>
       ) : (
         cell.render('Cell')
       )}

package/src/body/MRT_TableBodyRow.tsx

@@ -57,17 +57,21 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         selected={row.isSelected}
         {...tableRowProps}
       >
-        {enableRowNumbers && (
-          <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>
-            {row.index + 1}
-          </TableCell>
-        )}
         {(enableRowActions || enableRowEditing) &&
           positionActionsColumn === 'first' && (
             <MRT_ToggleRowActionMenuButton row={row} />
           )}
         {(anyRowsCanExpand || renderDetailPanel) && (
-          <MRT_ExpandButton row={row} />
+          <TableCell
+            size="small"
+            sx={{
+              ...commonTableBodyButtonCellStyles(densePadding),
+              pl: `${row.depth + 0.5}rem`,
+              textAlign: 'left',
+            }}
+          >
+            <MRT_ExpandButton row={row} />
+          </TableCell>
         )}
         {enableSelection && (
           <TableCell
@@ -82,6 +86,11 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
             <MRT_SelectCheckbox row={row} />
           </TableCell>
         )}
+        {enableRowNumbers && (
+          <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>
+            {row.index + 1}
+          </TableCell>
+        )}
         {row.cells.map((cell: MRT_Cell) => (
           <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}

package/src/buttons/MRT_CopyButton.tsx

@@ -7,8 +7,8 @@ interface Props {
   cell: MRT_Cell;
 }
 
-export const MRT_CopyButton: FC<Props> = ({ cell }) => {
-  const { localization } = useMRT();
+export const MRT_CopyButton: FC<Props> = ({ cell, children }) => {
+  const { localization, muiTableBodyCellCopyButtonProps } = useMRT();
 
   const [copied, setCopied] = useState(false);
 
@@ -18,6 +18,21 @@ export const MRT_CopyButton: FC<Props> = ({ cell }) => {
     setTimeout(() => setCopied(false), 4000);
   };
 
+  const mTableBodyCellCopyButtonProps =
+    muiTableBodyCellCopyButtonProps instanceof Function
+      ? muiTableBodyCellCopyButtonProps(cell)
+      : muiTableBodyCellCopyButtonProps;
+
+  const mcTableBodyCellCopyButtonProps =
+    cell.column.muiTableBodyCellCopyButtonProps instanceof Function
+      ? cell.column.muiTableBodyCellCopyButtonProps(cell)
+      : cell.column.muiTableBodyCellCopyButtonProps;
+
+  const buttonProps = {
+    ...mTableBodyCellCopyButtonProps,
+    ...mcTableBodyCellCopyButtonProps,
+  };
+
   return (
     <Tooltip
       arrow
@@ -30,20 +45,23 @@ export const MRT_CopyButton: FC<Props> = ({ cell }) => {
         aria-label={localization.clickToCopy}
         onClick={() => handleCopy(cell.value)}
         size="small"
+        {...buttonProps}
         sx={{
           backgroundColor: 'transparent',
+          border: 'none',
           color: 'inherit',
-          letterSpacing: 'inherit',
           fontFamily: 'inherit',
           fontSize: 'inherit',
+          letterSpacing: 'inherit',
           m: '-0.25rem',
-          textTransform: 'inherit',
-          textAlign: 'inherit',
           minWidth: 'unset',
+          textAlign: 'inherit',
+          textTransform: 'inherit',
+          ...buttonProps?.sx,
         }}
         variant="text"
       >
-        {cell.render('Cell')}
+        {children}
       </Button>
     </Tooltip>
   );

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,7 +1,6 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
+import { IconButton } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {}
 
@@ -14,24 +13,18 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
   } = useMRT();
 
   return (
-    <TableCell
-      size="small"
-      {...tableInstance.getToggleAllRowsExpandedProps()}
-      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+    <IconButton
+      aria-label={localization.expandAll}
+      title={localization.expandAll}
     >
-      <IconButton
-        aria-label={localization.expandAll}
-        title={localization.expandAll}
-      >
-        <DoubleArrowDownIcon
-          style={{
-            transform: `rotate(${
-              tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
-            }deg)`,
-            transition: 'transform 0.2s',
-          }}
-        />
-      </IconButton>
-    </TableCell>
+      <DoubleArrowDownIcon
+        style={{
+          transform: `rotate(${
+            tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0
+          }deg)`,
+          transition: 'transform 0.2s',
+        }}
+      />
+    </IconButton>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,8 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
-import { IconButton, TableCell } from '@mui/material';
+import { IconButton } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_Row } from '..';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
   row: MRT_Row;
@@ -14,9 +13,6 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
     localization,
     onRowExpandChange,
     renderDetailPanel,
-    tableInstance: {
-      state: { densePadding },
-    },
   } = useMRT();
 
   const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
@@ -26,34 +22,25 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
   };
 
   return (
-    <TableCell
-      size="small"
-      sx={{
-        ...commonTableBodyButtonCellStyles(densePadding),
-        pl: `${row.depth + 0.5}rem`,
-        textAlign: 'left',
-      }}
+    <IconButton
+      aria-label={localization.expand}
+      disabled={!row.canExpand && !renderDetailPanel}
+      title={localization.expand}
+      {...row.getToggleRowExpandedProps()}
+      onClick={handleToggleExpand}
     >
-      <IconButton
-        aria-label={localization.expand}
-        disabled={!row.canExpand && !renderDetailPanel}
-        title={localization.expand}
-        {...row.getToggleRowExpandedProps()}
-        onClick={handleToggleExpand}
-      >
-        <ExpandMoreIcon
-          style={{
-            transform: `rotate(${
-              !row.canExpand && !renderDetailPanel
-                ? -90
-                : row.isExpanded
-                ? -180
-                : 0
-            }deg)`,
-            transition: 'transform 0.2s',
-          }}
-        />
-      </IconButton>
-    </TableCell>
+      <ExpandMoreIcon
+        style={{
+          transform: `rotate(${
+            !row.canExpand && !renderDetailPanel
+              ? -90
+              : row.isExpanded
+              ? -180
+              : 0
+          }deg)`,
+          transition: 'transform 0.2s',
+        }}
+      />
+    </IconButton>
   );
 };

package/src/enums.ts

@@ -1,9 +1,10 @@
 export enum MRT_FILTER_TYPE {
+  BEST_MATCH = 'bestMatch',
+  BEST_MATCH_FIRST = 'bestMatchFirst',
   CONTAINS = 'contains',
   EMPTY = 'empty',
   ENDS_WITH = 'endsWith',
   EQUALS = 'equals',
-  FUZZY = 'fuzzy',
   GREATER_THAN = 'greaterThan',
   LESS_THAN = 'lessThan',
   NOT_EMPTY = 'notEmpty',

package/src/filtersFNs.ts

@@ -1,7 +1,20 @@
 import { matchSorter } from 'match-sorter';
 import { MRT_Row } from '.';
 
-export const fuzzy = (
+export const bestMatchFirst = (
+  rows: MRT_Row[],
+  columnIds: string[] | string,
+  filterValue: string | number,
+) =>
+  matchSorter(rows, filterValue.toString().trim(), {
+    keys: Array.isArray(columnIds)
+      ? columnIds.map((c) => `values.${c}`)
+      : [`values.${columnIds}`],
+  });
+
+bestMatchFirst.autoRemove = (val: any) => !val;
+
+export const bestMatch = (
   rows: MRT_Row[],
   columnIds: string[] | string,
   filterValue: string | number,
@@ -13,7 +26,7 @@ export const fuzzy = (
     sorter: (rankedItems) => rankedItems,
   });
 
-fuzzy.autoRemove = (val: any) => !val;
+bestMatch.autoRemove = (val: any) => !val;
 
 export const contains = (
   rows: MRT_Row[],
@@ -131,11 +144,12 @@ export const notEmpty = (
 notEmpty.autoRemove = (val: any) => !val;
 
 export const defaultFilterFNs = {
+  bestMatch,
+  bestMatchFirst,
   contains,
   empty,
   endsWith,
   equals,
-  fuzzy,
   greaterThan,
   lessThan,
   notEmpty,

package/src/head/MRT_TableHeadCell.tsx

@@ -99,6 +99,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
               ],
         )
         .replace('{filterValue}', column.filterValue)
+        .replace('" "', '')
     : localization.showHideFilters;
 
   const columnHeader = column.render('Header') as string;

package/src/head/MRT_TableHeadRow.tsx

@@ -4,7 +4,6 @@ import {
   commonTableHeadCellStyles,
   MRT_TableHeadCell,
 } from './MRT_TableHeadCell';
-import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 import { useMRT } from '../useMRT';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
@@ -52,18 +51,6 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
 
   return (
     <TableRow {...tableRowProps}>
-      {enableRowNumbers &&
-        (isParentHeader ? (
-          <MRT_TableSpacerCell />
-        ) : (
-          <TableCell
-            sx={{
-              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
-            }}
-          >
-            #
-          </TableCell>
-        ))}
       {(enableRowActions || enableRowEditing) &&
         positionActionsColumn === 'first' &&
         (isParentHeader ? (
@@ -73,7 +60,18 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         ))}
       {anyRowsCanExpand || renderDetailPanel ? (
         !disableExpandAll && !isParentHeader ? (
-          <MRT_ExpandAllButton />
+          <TableCell
+            size="small"
+            {...tableInstance.getToggleAllRowsExpandedProps()}
+            sx={{
+              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
+              width: '3rem',
+              maxWidth: '3rem',
+              textAlign: 'center',
+            }}
+          >
+            <MRT_ExpandAllButton />
+          </TableCell>
         ) : (
           <MRT_TableSpacerCell
             width={`${
@@ -86,11 +84,10 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         !isParentHeader && !disableSelectAll ? (
           <TableCell
             sx={{
-              ...commonTableBodyButtonCellStyles(
-                tableInstance.state.densePadding,
-              ),
+              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
               maxWidth: '3rem',
               width: '3rem',
+              textAlign: 'center',
             }}
           >
             <MRT_SelectCheckbox selectAll />
@@ -99,6 +96,20 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
           <MRT_TableSpacerCell width="1rem" />
         )
       ) : null}
+      {enableRowNumbers &&
+        (isParentHeader ? (
+          <MRT_TableSpacerCell />
+        ) : (
+          <TableCell
+            sx={{
+              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
+              width: '2rem',
+              maxWidth: '2rem',
+            }}
+          >
+            #
+          </TableCell>
+        ))}
       {headerGroup.headers.map((column: MRT_HeaderGroup) => (
         <MRT_TableHeadCell key={column.getHeaderProps().key} column={column} />
       ))}

package/src/inputs/MRT_FilterTextField.tsx

@@ -65,7 +65,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     column.setFilter(undefined);
     setCurrentFilterTypes((prev) => ({
       ...prev,
-      [column.id]: MRT_FILTER_TYPE.FUZZY,
+      [column.id]: MRT_FILTER_TYPE.BEST_MATCH,
     }));
   };
 
@@ -132,13 +132,6 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },
         }}
         label={isSelectFilter && !filterValue ? filterPlaceholder : undefined}
-        InputLabelProps={{
-          shrink: false,
-          sx: {
-            maxWidth: 'calc(100% - 2.5rem)',
-          },
-          title: filterPlaceholder,
-        }}
         margin="none"
         placeholder={
           filterChipLabel || isSelectFilter ? undefined : filterPlaceholder

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/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}',