material-react-table 0.6.7 → 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/dist/utils.d.ts

@@ -1,2 +1,2 @@
-import { MRT_ColumnInterface } from '.';
-export declare const findLowestLevelCols: (columns: MRT_ColumnInterface[]) => MRT_ColumnInterface<{}>[];
+import { MRT_ColumnInstance, MRT_ColumnInterface } from '.';
+export declare const findLowestLevelCols: (columns: MRT_ColumnInterface[] | MRT_ColumnInstance[]) => MRT_ColumnInterface<{}>[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.7",
+  "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,8 @@
 import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
+  ButtonProps,
+  CheckboxProps,
   IconButtonProps,
   LinearProgressProps,
   SkeletonProps,
@@ -135,11 +137,16 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     accessor?: string;
     columns?: MRT_ColumnInterface<D>[];
     disableClickToCopy?: boolean;
+    disableColumnActions?: boolean;
+    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);
@@ -149,6 +156,9 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     muiTableFooterCellProps?:
       | TableCellProps
       | ((column: Column<D>) => TableCellProps);
+    muiTableHeadCellColumnActionsButtonProps?:
+      | IconButtonProps
+      | ((column: Column<D>) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
       | ((column: Column<D>) => TextFieldProps);
@@ -209,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;
@@ -240,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;
@@ -255,6 +267,16 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       | LinearProgressProps
       | ((tableInstance: MRT_TableInstance) => LinearProgressProps);
     muiSearchTextFieldProps?: TextFieldProps;
+    muiSelectCheckboxProps?:
+      | CheckboxProps
+      | ((
+          isSelectAll?: boolean,
+          row?: MRT_Row<D>,
+          tableInstance?: MRT_TableInstance<D>,
+        ) => CheckboxProps);
+    muiTableBodyCellCopyButtonProps?:
+      | ButtonProps
+      | ((cell?: MRT_Cell<D>) => ButtonProps);
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
       | ((cell?: MRT_Cell<D>) => TextFieldProps);
@@ -283,6 +305,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableFooterRowProps?:
       | TableRowProps
       | ((footerGroup: MRT_HeaderGroup<D>) => TableRowProps);
+    muiTableHeadCellColumnActionsButtonProps?:
+      | IconButtonProps
+      | ((column: Column<D>) => IconButtonProps);
     muiTableHeadCellFilterTextFieldProps?:
       | TextFieldProps
       | ((column: Column<D>) => TextFieldProps);
@@ -328,12 +353,12 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       event: MouseEvent<HTMLButtonElement>,
       row: Row<D>,
     ) => void;
-    onRowSelectChange?: (
+    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';
@@ -372,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

@@ -1,6 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
 import { TableCell, TableRow } from '@mui/material';
 import {
+  commonTableBodyButtonCellStyles,
   commonTableBodyCellStyles,
   MRT_TableBodyCell,
 } from './MRT_TableBodyCell';
@@ -26,6 +27,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     onRowClick,
     positionActionsColumn,
     renderDetailPanel,
+    tableInstance,
     tableInstance: {
       state: { densePadding },
     },
@@ -55,19 +57,40 @@ 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
+            sx={{
+              ...commonTableBodyButtonCellStyles(
+                tableInstance.state.densePadding,
+              ),
+              maxWidth: '3rem',
+              width: '3rem',
+            }}
+          >
+            <MRT_SelectCheckbox row={row} />
+          </TableCell>
+        )}
+        {enableRowNumbers && (
+          <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>
+            {row.index + 1}
+          </TableCell>
         )}
-        {enableSelection && <MRT_SelectCheckbox row={row} />}
         {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/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -10,8 +10,9 @@ interface Props {
 
 export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
   const {
-    localization,
     icons: { MoreVertIcon },
+    localization,
+    muiTableHeadCellColumnActionsButtonProps,
   } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -22,6 +23,21 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
     setAnchorEl(event.currentTarget);
   };
 
+  const mTableHeadCellColumnActionsButtonProps =
+    muiTableHeadCellColumnActionsButtonProps instanceof Function
+      ? muiTableHeadCellColumnActionsButtonProps(column)
+      : muiTableHeadCellColumnActionsButtonProps;
+
+  const mcTableHeadCellColumnActionsButtonProps =
+    column.muiTableHeadCellColumnActionsButtonProps instanceof Function
+      ? column.muiTableHeadCellColumnActionsButtonProps(column)
+      : column.muiTableHeadCellColumnActionsButtonProps;
+
+  const iconButtonProps = {
+    ...mTableHeadCellColumnActionsButtonProps,
+    ...mcTableHeadCellColumnActionsButtonProps,
+  };
+
   return (
     <>
       <Tooltip
@@ -35,6 +51,7 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
           aria-label={localization.columnActions}
           onClick={handleClick}
           size="small"
+          {...iconButtonProps}
           sx={{
             height: '2rem',
             mr: '2px',
@@ -45,6 +62,7 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
             '&:hover': {
               opacity: 1,
             },
+            ...iconButtonProps.sx,
           }}
         >
           <MoreVertIcon />

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;
@@ -178,9 +179,11 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
           )}
         </Box>
         <Box sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}>
-          {!disableColumnActions && !isParentHeader && (
-            <MRT_ToggleColumnActionMenuButton column={column} />
-          )}
+          {!disableColumnActions &&
+            !column.disableColumnActions &&
+            !isParentHeader && (
+              <MRT_ToggleColumnActionMenuButton column={column} />
+            )}
           {enableColumnResizing && !isParentHeader && (
             <Divider
               flexItem

package/src/head/MRT_TableHeadRow.tsx

@@ -19,6 +19,7 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
   const {
     anyRowsCanExpand,
     disableExpandAll,
+    disableSelectAll,
     enableRowActions,
     enableRowEditing,
     enableRowNumbers,
@@ -50,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 ? (
@@ -71,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={`${
@@ -81,12 +81,35 @@ export const MRT_TableHeadRow: FC<Props> = ({ headerGroup }) => {
         )
       ) : null}
       {enableSelection ? (
-        !isParentHeader ? (
-          <MRT_SelectCheckbox selectAll />
+        !isParentHeader && !disableSelectAll ? (
+          <TableCell
+            sx={{
+              ...commonTableHeadCellStyles(tableInstance.state.densePadding),
+              maxWidth: '3rem',
+              width: '3rem',
+              textAlign: 'center',
+            }}
+          >
+            <MRT_SelectCheckbox selectAll />
+          </TableCell>
         ) : (
           <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_EditCellTextField.tsx

@@ -39,12 +39,6 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
   const textFieldProps = {
     ...mTableBodyCellEditTextFieldProps,
     ...mcTableBodyCellEditTextFieldProps,
-    style: {
-      //@ts-ignore
-      ...muiTableBodyCellEditTextFieldProps?.style,
-      //@ts-ignore
-      ...cell.column.muiTableBodyCellEditTextFieldProps?.style,
-    },
   };
 
   if (!cell.column.disableEditing && cell.column.Edit) {

package/src/inputs/MRT_FilterTextField.tsx

@@ -43,10 +43,6 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   const textFieldProps = {
     ...mTableHeadCellFilterTextFieldProps,
     ...mcTableHeadCellFilterTextFieldProps,
-    style: {
-      ...mTableHeadCellFilterTextFieldProps?.style,
-      ...mcTableHeadCellFilterTextFieldProps?.style,
-    },
   } as TextFieldProps;
 
   const [filterValue, setFilterValue] = useState('');
@@ -69,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,
     }));
   };
 
@@ -136,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