material-react-table 0.5.9 → 0.6.2

package/dist/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,7 +1,8 @@
 import { FC } from 'react';
-import type { MRT_ColumnInstance } from '..';
 interface Props {
-    column: MRT_ColumnInstance;
+    anchorEl: HTMLElement | null;
+    isSubMenu?: boolean;
+    setAnchorEl: (anchorEl: HTMLElement | null) => void;
 }
 export declare const MRT_ShowHideColumnsMenu: FC<Props>;
 export {};

package/dist/menus/MRT_ShowHideColumnsMenuItems.d.ts

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import type { MRT_ColumnInstance } from '..';
+interface Props {
+    column: MRT_ColumnInstance;
+    isSubMenu?: boolean;
+}
+export declare const MRT_ShowHideColumnsMenuItems: FC<Props>;
+export {};

package/dist/useMRT.d.ts

@@ -1,5 +1,6 @@
 import React, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
 import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import { MRT_FILTER_TYPE } from './enums';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';
@@ -8,6 +9,9 @@ export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     anyRowsExpanded: boolean;
     icons: MRT_Icons;
     idPrefix: string;
+    filterTypes: {
+        [key in MRT_FILTER_TYPE]: any;
+    };
     localization: MRT_Localization;
     setCurrentEditingRow: Dispatch<SetStateAction<MRT_Row<D> | null>>;
     setCurrentFilterTypes: Dispatch<SetStateAction<{

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.9",
+  "version": "0.6.2",
   "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.",
@@ -56,7 +56,7 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.17.5",
-    "@emotion/react": "^11.8.1",
+    "@emotion/react": "^11.8.2",
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
     "@faker-js/faker": "^6.0.0-beta.0",
@@ -73,7 +73,7 @@
     "@storybook/addons": "^6.4.19",
     "@storybook/react": "^6.4.19",
     "@types/faker": "^6.6.8",
-    "@types/react": "^17.0.39",
+    "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "@types/react-table": "^7.7.9",
     "babel-loader": "^8.2.3",

package/src/MaterialReactTable.tsx

@@ -20,7 +20,7 @@ import {
   Column,
   ColumnInstance,
   FilterType,
-  // ColumnInterface,
+  ColumnInterface,
   HeaderGroup,
   Row,
   TableInstance,
@@ -78,6 +78,7 @@ import { MRT_TableContainer } from './table/MRT_TableContainer';
 import { MRT_Localization, MRT_DefaultLocalization_EN } from './localization';
 import { MRT_Default_Icons, MRT_Icons } from './icons';
 import { MRT_FILTER_TYPE } from './enums';
+import { defaultFilterFNs } from './filtersFNs';
 
 export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseExpandedOptions<D> &
@@ -115,57 +116,60 @@ export type MRT_TableInstance<D extends {} = {}> = TableInstance<D> &
     getToggleAllRowsExpandedProps: () => void;
   };
 
-export type MRT_ColumnInterface<D extends {} = {}> =
-  // ColumnInterface<D> &
+export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
   UseFiltersColumnOptions<D> &
-    UseGlobalFiltersColumnOptions<D> &
-    UseGroupByColumnOptions<D> &
-    UseResizeColumnsColumnOptions<D> &
-    UseSortByColumnOptions<D> & {
-      Edit?: ({
-        cell,
-        onChange,
-      }: {
-        cell: MRT_Cell<D>;
-        onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-      }) => ReactNode;
-      Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
-      Footer?: string;
-      Header?: string;
-      disableFilters?: boolean;
-      editable?: boolean;
-      filter?: MRT_FilterType | string | FilterType<D>;
-      filterSelectOptions?: (string | { text: string; value: string })[];
-      muiTableBodyCellEditTextFieldProps?:
-        | TextFieldProps
-        | ((cell: MRT_Cell<D>) => TextFieldProps);
-      muiTableBodyCellProps?:
-        | TableCellProps
-        | ((cell: MRT_Cell<D>) => TableCellProps);
-      muiTableFooterCellProps?:
-        | TableCellProps
-        | ((column: Column<D>) => TableCellProps);
-      muiTableHeadCellFilterTextFieldProps?:
-        | TextFieldProps
-        | ((column: Column<D>) => TextFieldProps);
-      muiTableHeadCellProps?:
-        | TableCellProps
-        | ((column: Column<D>) => TableCellProps);
-      onCellEditChange?: (
-        event: ChangeEvent<HTMLInputElement>,
-        cell: MRT_Cell<D>,
-      ) => void;
-      onFilterChange?: (
-        event: ChangeEvent<HTMLInputElement>,
-        filterValue: any,
-      ) => void;
-    };
+  UseGlobalFiltersColumnOptions<D> &
+  UseGroupByColumnOptions<D> &
+  UseResizeColumnsColumnOptions<D> &
+  UseSortByColumnOptions<D> & {
+    Edit?: ({
+      cell,
+      onChange,
+    }: {
+      cell: MRT_Cell<D>;
+      onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    }) => ReactNode;
+    Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
+    Footer?: string;
+    Header?: string;
+    accessor: string;
+    columns?: (Column<D> & MRT_ColumnInterface<D>)[];
+    disableFilters?: boolean;
+    editable?: boolean;
+    filter?: MRT_FilterType | string | FilterType<D>;
+    filterSelectOptions?: (string | { text: string; value: string })[];
+    filterTypes: MRT_FILTER_TYPE[];
+    muiTableBodyCellEditTextFieldProps?:
+      | TextFieldProps
+      | ((cell: MRT_Cell<D>) => TextFieldProps);
+    muiTableBodyCellProps?:
+      | TableCellProps
+      | ((cell: MRT_Cell<D>) => TableCellProps);
+    muiTableFooterCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    muiTableHeadCellFilterTextFieldProps?:
+      | TextFieldProps
+      | ((column: Column<D>) => TextFieldProps);
+    muiTableHeadCellProps?:
+      | TableCellProps
+      | ((column: Column<D>) => TableCellProps);
+    onCellEditChange?: (
+      event: ChangeEvent<HTMLInputElement>,
+      cell: MRT_Cell<D>,
+    ) => void;
+    onFilterChange?: (
+      event: ChangeEvent<HTMLInputElement>,
+      filterValue: any,
+    ) => void;
+  };
 
 export type MRT_ColumnInstance<D extends {} = {}> = ColumnInstance<D> &
   UseFiltersColumnProps<D> &
   UseGroupByColumnProps<D> &
   UseResizeColumnsColumnProps<D> &
-  UseSortByColumnProps<D> & {
+  UseSortByColumnProps<D> &
+  MRT_ColumnInterface<D> & {
     columns?: MRT_ColumnInstance<D>[];
   };
 
@@ -185,7 +189,9 @@ export type MRT_Row<D extends {} = {}> = Row<D> &
 
 export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
   UseGroupByCellProps<D> &
-  UseRowStateCellProps<D> & {};
+  UseRowStateCellProps<D> & {
+    column: MRT_ColumnInstance<D>;
+  };
 
 export type MRT_FilterType = MRT_FILTER_TYPE | Function;
 
@@ -232,6 +238,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     enableRowEditing?: boolean;
     enableRowNumbers?: boolean;
     enableSelection?: boolean;
+    filterTypes?: { [key in MRT_FILTER_TYPE]: any };
     hideTableFooter?: boolean;
     hideTableHead?: boolean;
     hideToolbarBottom?: boolean;
@@ -362,6 +369,8 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
 
 export default <D extends {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
+  filterTypes,
+  globalFilter = 'fuzzy',
   icons,
   localization,
   positionActionsColumn = 'first',
@@ -372,6 +381,9 @@ export default <D extends {}>({
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
     defaultColumn={defaultColumn}
+    // @ts-ignore
+    filterTypes={{ ...defaultFilterFNs, ...filterTypes }}
+    globalFilter={globalFilter}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}
     positionActionsColumn={positionActionsColumn}

package/src/buttons/MRT_EditActionButtons.tsx

@@ -30,17 +30,14 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
 
   return (
     <Box sx={{ display: 'flex', gap: '0.75rem' }}>
-      <Tooltip arrow title={localization.rowActionButtonCancel}>
-        <IconButton
-          aria-label={localization.rowActionButtonCancel}
-          onClick={handleCancel}
-        >
+      <Tooltip arrow title={localization.cancel}>
+        <IconButton aria-label={localization.cancel} onClick={handleCancel}>
           <CancelIcon />
         </IconButton>
       </Tooltip>
-      <Tooltip arrow title={localization.rowActionButtonSave}>
+      <Tooltip arrow title={localization.save}>
         <IconButton
-          aria-label={localization.rowActionButtonSave}
+          aria-label={localization.save}
           color="info"
           onClick={handleSave}
         >

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -20,8 +20,8 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
     >
       <IconButton
-        aria-label={localization.expandAllButtonTitle}
-        title={localization.expandAllButtonTitle}
+        aria-label={localization.expandAll}
+        title={localization.expandAll}
       >
         <DoubleArrowDownIcon
           style={{

package/src/buttons/MRT_ExpandButton.tsx

@@ -28,9 +28,9 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
       }}
     >
       <IconButton
-        aria-label={localization.expandButtonTitle}
+        aria-label={localization.expand}
         disabled={!row.canExpand && !renderDetailPanel}
-        title={localization.expandButtonTitle}
+        title={localization.expand}
         {...row.getToggleRowExpandedProps()}
       >
         <ExpandMoreIcon

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -15,9 +15,9 @@ export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
   } = useMRT();
 
   return (
-    <Tooltip arrow title={localization.toggleFullScreenButtonTitle}>
+    <Tooltip arrow title={localization.toggleFullScreen}>
       <IconButton
-        aria-label={localization.toggleFilterButtonTitle}
+        aria-label={localization.showHideFilters}
         onClick={() => setFullScreen(!fullScreen)}
         size="small"
         {...rest}

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,16 +1,7 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import {
-  Button,
-  IconButton,
-  Menu,
-  Tooltip,
-  Divider,
-  IconButtonProps,
-  Box,
-} from '@mui/material';
+import { IconButton, Tooltip, IconButtonProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
-import type { MRT_ColumnInstance } from '..';
 
 interface Props extends IconButtonProps {}
 
@@ -18,7 +9,6 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
   const {
     icons: { ViewColumnIcon },
     localization,
-    tableInstance,
   } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -29,9 +19,9 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
 
   return (
     <>
-      <Tooltip arrow title={localization.showHideColumnsButtonTitle}>
+      <Tooltip arrow title={localization.showHideColumns}>
         <IconButton
-          aria-label={localization.showHideColumnsButtonTitle}
+          aria-label={localization.showHideColumns}
           onClick={handleClick}
           size="small"
           {...rest}
@@ -39,45 +29,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
           <ViewColumnIcon />
         </IconButton>
       </Tooltip>
-      <Menu
-        anchorEl={anchorEl}
-        open={!!anchorEl}
-        onClose={() => setAnchorEl(null)}
-        MenuListProps={{
-          dense: tableInstance.state.densePadding,
-        }}
-      >
-        <Box
-          sx={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            p: '0.5rem',
-          }}
-        >
-          <Button
-            disabled={
-              !tableInstance.getToggleHideAllColumnsProps().checked &&
-              !tableInstance.getToggleHideAllColumnsProps().indeterminate
-            }
-            onClick={() => tableInstance.toggleHideAllColumns(true)}
-          >
-            {localization.columnShowHideMenuHideAll}
-          </Button>
-          <Button
-            disabled={tableInstance.getToggleHideAllColumnsProps().checked}
-            onClick={() => tableInstance.toggleHideAllColumns(false)}
-          >
-            {localization.columnShowHideMenuShowAll}
-          </Button>
-        </Box>
-        <Divider />
-        {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
-          <MRT_ShowHideColumnsMenu
-            key={`${index}-${column.id}`}
-            column={column}
-          />
-        ))}
-      </Menu>
+      <MRT_ShowHideColumnsMenu anchorEl={anchorEl} setAnchorEl={setAnchorEl} />
     </>
   );
 };

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -29,10 +29,10 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
         enterDelay={1000}
         enterNextDelay={1000}
         placement="top"
-        title={localization.columnActionMenuButtonTitle}
+        title={localization.columnActions}
       >
         <IconButton
-          aria-label={localization.columnActionMenuButtonTitle}
+          aria-label={localization.columnActions}
           onClick={handleClick}
           size="small"
           sx={{

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -15,9 +15,9 @@ export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
   } = useMRT();
 
   return (
-    <Tooltip arrow title={localization.toggleDensePaddingSwitchTitle}>
+    <Tooltip arrow title={localization.toggleDensePadding}>
       <IconButton
-        aria-label={localization.toggleDensePaddingSwitchTitle}
+        aria-label={localization.toggleDensePadding}
         onClick={() => setDensePadding(!densePadding)}
         size="small"
         {...rest}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -15,9 +15,9 @@ export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
   } = useMRT();
 
   return (
-    <Tooltip arrow title={localization.toggleFilterButtonTitle}>
+    <Tooltip arrow title={localization.showHideFilters}>
       <IconButton
-        aria-label={localization.toggleFilterButtonTitle}
+        aria-label={localization.showHideFilters}
         onClick={() => setShowFilters(!showFilters)}
         size="small"
         {...rest}

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -54,11 +54,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
       ) : row.id === tableInstance.state.currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} />
       ) : !renderRowActionMenuItems && enableRowEditing ? (
-        <Tooltip
-          placement="right"
-          arrow
-          title={localization.rowActionMenuItemEdit}
-        >
+        <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton sx={commonIconButtonStyles} onClick={handleEdit}>
             <EditIcon />
           </IconButton>
@@ -69,10 +65,10 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
             arrow
             enterDelay={1000}
             enterNextDelay={1000}
-            title={localization.rowActionMenuButtonTitle}
+            title={localization.rowActions}
           >
             <IconButton
-              aria-label={localization.rowActionMenuButtonTitle}
+              aria-label={localization.rowActions}
               onClick={handleOpenRowActionMenu}
               size="small"
               sx={commonIconButtonStyles}

package/src/buttons/MRT_ToggleSearchButton.tsx

@@ -30,7 +30,7 @@ export const MRT_ToggleSearchButton: FC<Props> = ({ ...rest }) => {
   };
 
   return (
-    <Tooltip arrow title={localization.toggleSearchButtonTitle}>
+    <Tooltip arrow title={localization.showHideSearch}>
       <IconButton size="small" onClick={handleToggleSearch} {...rest}>
         {showSearch ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>

package/src/filtersFNs.ts

@@ -1,25 +1,15 @@
 import { matchSorter } from 'match-sorter';
 import { MRT_Row } from '.';
 
-export const fuzzySearchFN = (
-  rows: MRT_Row[],
-  columnIds: string[],
-  filterValue: string | number,
-) =>
-  matchSorter(rows, filterValue.toString().trim(), {
-    keys: columnIds.map((c) => `values.${c}`),
-    sorter: (rankedItems) => rankedItems,
-  });
-
-fuzzySearchFN.autoRemove = (val: any) => !val;
-
 export const fuzzyFilterFN = (
   rows: MRT_Row[],
-  id: string,
+  columnIds: string[] | string,
   filterValue: string | number,
 ) =>
   matchSorter(rows, filterValue.toString().trim(), {
-    keys: [`values.${id}`],
+    keys: Array.isArray(columnIds)
+      ? columnIds.map((c) => `values.${c}`)
+      : [`values.${columnIds}`],
     sorter: (rankedItems) => rankedItems,
   });
 
@@ -144,10 +134,10 @@ export const defaultFilterFNs = {
   contains: containsFilterFN,
   empty: emptyFilterFN,
   endsWith: endsWithFilterFN,
-  greaterThan: greaterThanFilterFN,
-  lessThan: lessThanFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
   notEmpty: notEmptyFilterFN,
   notEquals: notEqualsFilterFN,
   startsWith: startsWithFilterFN,

package/src/head/MRT_TableHeadCell.tsx

@@ -66,21 +66,34 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
 
   const sortTooltip = column.isSorted
     ? column.isSortedDesc
-      ? localization.columnActionMenuItemClearSort
-      : localization.columnActionMenuItemSortDesc?.replace(
+      ? localization.clearSort
+      : localization.sortByColumnDesc?.replace(
           '{column}',
           column.Header as string,
         )
-    : localization.columnActionMenuItemSortAsc?.replace(
+    : localization.sortByColumnAsc?.replace(
         '{column}',
         column.Header as string,
       );
 
+  const filterType = tableInstance.state.currentFilterTypes[column.id];
+
   const filterTooltip = !!column.filterValue
-    ? localization.filterApplied
+    ? localization.filteringByColumn
         .replace('{column}', String(column.Header))
-        .replace('{filterType}', column.filterValue)
-    : localization.toggleFilterButtonTitle;
+        .replace(
+          '{filterType}',
+          filterType instanceof Function
+            ? ''
+            : // @ts-ignore
+              localization[
+                `filter${
+                  filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                }`
+              ],
+        )
+        .replace('{filterValue}', column.filterValue)
+    : localization.showHideFilters;
 
   const columnHeader = column.render('Header') as string;
 

package/src/head/MRT_TableHeadCellActions.tsx

@@ -18,7 +18,7 @@ export const MRT_TableHeadCellActions: FC<Props> = () => {
       style={{ textAlign: 'center' }}
       sx={{ ...commonTableHeadCellStyles(densePadding), textAlign: 'center' }}
     >
-      {localization.actionsHeadColumnTitle}
+      {localization.actions}
     </TableCell>
   );
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -78,14 +78,18 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   }
 
   const filterType = tableInstance.state.currentFilterTypes[column.id];
-  const isCustomFilterType = filterType instanceof Function;
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
-    !isCustomFilterType &&
+    !(filterType instanceof Function) &&
     [MRT_FILTER_TYPE.EMPTY, MRT_FILTER_TYPE.NOT_EMPTY].includes(
       filterType as MRT_FILTER_TYPE,
-    );
-  const filterPlaceholder = localization.filterTextFieldPlaceholder?.replace(
+    )
+      ? //@ts-ignore
+        localization[
+          `filter${filterType.charAt(0).toUpperCase() + filterType.slice(1)}`
+        ]
+      : '';
+  const filterPlaceholder = localization.filterByColumn?.replace(
     '{column}',
     String(column.Header),
   );
@@ -103,6 +107,22 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           },
           title: filterPlaceholder,
         }}
+        helperText={
+          filterType instanceof Function
+            ? ''
+            : localization.filterMode.replace(
+                '{filterType}',
+                // @ts-ignore
+                localization[
+                  `filter${
+                    filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                  }`
+                ],
+              )
+        }
+        FormHelperTextProps={{
+          sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },
+        }}
         label={isSelectFilter && !filterValue ? filterPlaceholder : undefined}
         InputLabelProps={{
           shrink: false,
@@ -129,6 +149,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
               <Tooltip arrow title={localization.changeFilterMode}>
                 <span>
                   <IconButton
+                    aria-label={localization.changeFilterMode}
                     onClick={handleFilterMenuOpen}
                     size="small"
                     sx={{ height: '1.75rem', width: '1.75rem' }}
@@ -138,7 +159,10 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
                 </span>
               </Tooltip>
               {filterChipLabel && (
-                <Chip onDelete={handleClearFilterChip} label={filterType} />
+                <Chip
+                  onDelete={handleClearFilterChip}
+                  label={filterChipLabel}
+                />
               )}
             </InputAdornment>
           ),
@@ -148,11 +172,11 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
                 arrow
                 disableHoverListener={isSelectFilter}
                 placement="right"
-                title={localization.filterTextFieldClearButtonTitle ?? ''}
+                title={localization.clearFilter ?? ''}
               >
                 <span>
                   <IconButton
-                    aria-label={localization.filterTextFieldClearButtonTitle}
+                    aria-label={localization.clearFilter}
                     disabled={!filterValue?.length}
                     onClick={handleClear}
                     size="small"
@@ -170,7 +194,8 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         }}
         {...textFieldProps}
         sx={{
-          m: '0 -0.25rem',
+          m: '-0.25rem',
+          p: 0,
           minWidth: !filterChipLabel ? '5rem' : 'auto',
           width: 'calc(100% + 0.5rem)',
           mt: isSelectFilter && !filterValue ? '-1rem' : undefined,
@@ -182,7 +207,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
       >
         {isSelectFilter && (
           <MenuItem divider disabled={!filterValue} value="">
-            {localization.filterTextFieldClearButtonTitle}
+            {localization.clearFilter}
           </MenuItem>
         )}
         {column?.filterSelectOptions?.map((option) => {

package/src/inputs/MRT_SearchTextField.tsx

@@ -34,7 +34,7 @@ export const MRT_SearchTextField: FC<Props> = () => {
     <Collapse in={tableInstance.state.showSearch} orientation="horizontal">
       <TextField
         id={`mrt-${idPrefix}-search-text-field`}
-        placeholder={localization.searchTextFieldPlaceholder}
+        placeholder={localization.search}
         onChange={(event: ChangeEvent<HTMLInputElement>) => {
           setSearchValue(event.target.value);
           handleChange(event);
@@ -50,11 +50,11 @@ export const MRT_SearchTextField: FC<Props> = () => {
           endAdornment: (
             <InputAdornment position="end">
               <IconButton
-                aria-label={localization.searchTextFieldClearButtonTitle}
+                aria-label={localization.clearSearch}
                 disabled={searchValue?.length === 0}
                 onClick={handleClear}
                 size="small"
-                title={localization.searchTextFieldClearButtonTitle}
+                title={localization.clearSearch}
               >
                 <CloseIcon fontSize="small" />
               </IconButton>