material-react-table 0.5.7 → 0.6.0

package/dist/menus/MRT_ColumnActionMenu.d.ts

@@ -1,8 +1,15 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 export declare const commonMenuItemStyles: {
     py: string;
-    my: string;
+    my: number;
+    justifyContent: string;
+    alignItems: string;
+};
+export declare const commonListItemStyles: {
+    display: string;
+    gap: string;
+    alignItems: string;
 };
 interface Props {
     anchorEl: HTMLElement | null;

package/dist/menus/MRT_FilterTypeMenu.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
     column: MRT_HeaderGroup;

package/dist/menus/MRT_RowActionMenu.d.ts

@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 interface Props {
     anchorEl: HTMLElement | null;
     row: MRT_Row;

package/dist/menus/MRT_ShowHideColumnsMenu.d.ts

@@ -1,7 +1,8 @@
 import { FC } from 'react';
-import { 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,5 @@
 import React, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
-import { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
+import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
 import { MRT_Icons } from './icons';
 import { MRT_Localization } from './localization';
 import { MaterialReactTableProps } from './MaterialReactTable';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.7",
+  "version": "0.6.0",
   "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.",
@@ -28,7 +28,7 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "tsdx build && size-limit && cp -r dist material-react-table-docs/node_modules/material-react-table/dist && cp -r src material-react-table-docs/node_modules/material-react-table/src && cp -r package.json material-react-table-docs/node_modules/material-react-table/package.json",
+    "build": "tsdx build && size-limit && rm -rf material-react-table-docs/node_modules/material-react-table/dist  && cp -r dist material-react-table-docs/node_modules/material-react-table/ && cp -r src material-react-table-docs/node_modules/material-react-table/ && cp -r package.json material-react-table-docs/node_modules/material-react-table/package.json",
     "build-storybook": "build-storybook",
     "format": "prettier -w .",
     "lint": "tsdx lint",

package/src/MaterialReactTable.tsx

@@ -19,6 +19,7 @@ import {
   Cell,
   Column,
   ColumnInstance,
+  FilterType,
   // ColumnInterface,
   HeaderGroup,
   Row,
@@ -76,6 +77,7 @@ import { MaterialReactTableProvider } from './useMRT';
 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';
 
 export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseExpandedOptions<D> &
@@ -132,6 +134,8 @@ export type MRT_ColumnInterface<D extends {} = {}> =
       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);
@@ -183,15 +187,7 @@ export type MRT_Cell<D extends {} = {}, _V = any> = Cell<D> &
   UseGroupByCellProps<D> &
   UseRowStateCellProps<D> & {};
 
-export type MRT_FilterType =
-  | 'contains'
-  | 'empty'
-  | 'endsWith'
-  | 'equals'
-  | 'fuzzy'
-  | 'notEmpty'
-  | 'notEquals'
-  | 'startsWith';
+export type MRT_FilterType = MRT_FILTER_TYPE | Function;
 
 export type MRT_TableState<D extends {} = {}> = TableState<D> &
   UseColumnOrderState<D> &

package/src/body/MRT_TableBody.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 
 interface Props {}
 

package/src/body/MRT_TableBodyCell.tsx

@@ -2,7 +2,7 @@ import React, { FC, MouseEvent } from 'react';
 import { Skeleton, TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { MRT_Cell } from '..';
+import type { MRT_Cell } from '..';
 
 export const commonTableBodyCellStyles = (densePadding: boolean) => ({
   p: densePadding ? '0.5rem' : '1rem',

package/src/body/MRT_TableBodyRow.tsx

@@ -9,7 +9,7 @@ import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
-import { MRT_Cell, MRT_Row } from '..';
+import type { MRT_Cell, MRT_Row } from '..';
 
 interface Props {
   row: MRT_Row;

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,7 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
 import { Collapse, TableCell, TableRow } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 
 interface Props {
   row: MRT_Row;

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { Box, IconButton, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 
 interface Props {
   row: MRT_Row;
@@ -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

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { IconButton, TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
@@ -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,17 +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 { MRT_ColumnInstance } from '..';
-import { commonMenuItemStyles } from '../menus/MRT_ColumnActionMenu';
 
 interface Props extends IconButtonProps {}
 
@@ -19,7 +9,6 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
   const {
     icons: { ViewColumnIcon },
     localization,
-    tableInstance,
   } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -30,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}
@@ -40,47 +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,
-          disablePadding: true,
-        }}
-        sx={commonMenuItemStyles}
-      >
-        <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

@@ -2,7 +2,7 @@ import React, { FC, MouseEvent, useState } from 'react';
 import { IconButton, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {
   column: MRT_HeaderGroup;
@@ -28,10 +28,11 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
         arrow
         enterDelay={1000}
         enterNextDelay={1000}
-        title={localization.columnActionMenuButtonTitle}
+        placement="top"
+        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

@@ -3,7 +3,7 @@ import { IconButton, TableCell, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
-import { MRT_Row } from '..';
+import type { MRT_Row } from '..';
 import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 const commonIconButtonStyles = {
@@ -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/enums.ts

@@ -0,0 +1,12 @@
+export enum MRT_FILTER_TYPE {
+  CONTAINS = 'contains',
+  EMPTY = 'empty',
+  ENDS_WITH = 'endsWith',
+  EQUALS = 'equals',
+  FUZZY = 'fuzzy',
+  GREATER_THAN = 'greaterThan',
+  LESS_THAN = 'lessThan',
+  NOT_EMPTY = 'notEmpty',
+  NOT_EQUALS = 'notEquals',
+  STARTS_WITH = 'startsWith',
+}

package/src/filtersFNs.ts

@@ -1,6 +1,18 @@
 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,
@@ -84,6 +96,34 @@ export const notEqualsFilterFN = (
 
 notEqualsFilterFN.autoRemove = (val: any) => !val;
 
+export const greaterThanFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  rows.filter((row) =>
+    !isNaN(+filterValue) && !isNaN(+row.values[id])
+      ? +row.values[id] > +filterValue
+      : row.values[id].toString().toLowerCase().trim() >
+        filterValue.toString().toLowerCase().trim(),
+  );
+
+greaterThanFilterFN.autoRemove = (val: any) => !val;
+
+export const lessThanFilterFN = (
+  rows: MRT_Row[],
+  id: string,
+  filterValue: string | number,
+) =>
+  rows.filter((row) =>
+    !isNaN(+filterValue) && !isNaN(+row.values[id])
+      ? +row.values[id] < +filterValue
+      : row.values[id].toString().toLowerCase().trim() <
+        filterValue.toString().toLowerCase().trim(),
+  );
+
+lessThanFilterFN.autoRemove = (val: any) => !val;
+
 export const emptyFilterFN = (
   rows: MRT_Row[],
   id: string,
@@ -104,6 +144,8 @@ export const defaultFilterFNs = {
   contains: containsFilterFN,
   empty: emptyFilterFN,
   endsWith: endsWithFilterFN,
+  greaterThan: greaterThanFilterFN,
+  lessThan: lessThanFilterFN,
   equals: equalsFilterFN,
   fuzzy: fuzzyFilterFN,
   notEmpty: notEmptyFilterFN,

package/src/footer/MRT_TableFooter.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {}
 

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,7 +1,7 @@
 import React, { FC } from 'react';
 import { TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {
   column: MRT_HeaderGroup;

package/src/footer/MRT_TableFooterRow.tsx

@@ -3,7 +3,7 @@ import { TableRow } from '@mui/material';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {
   footerGroup: MRT_HeaderGroup;

package/src/head/MRT_TableHead.tsx

@@ -2,7 +2,7 @@ import React, { FC } from 'react';
 import { TableHead } from '@mui/material';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { useMRT } from '../useMRT';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {}
 

package/src/head/MRT_TableHeadCell.tsx

@@ -11,7 +11,7 @@ import {
 import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 import { MRT_ToggleColumnActionMenuButton } from '../buttons/MRT_ToggleColumnActionMenuButton';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 export const commonTableHeadCellStyles = (
   densePadding: boolean,
@@ -66,32 +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}',
-          // @ts-ignore
-          localization[
-            `filterMenuItem${
-              tableInstance.state.currentFilterTypes[column.id]
-                .charAt(0)
-                .toUpperCase() +
-              tableInstance.state.currentFilterTypes[column.id].slice(1)
-            }`
-          ],
+          filterType instanceof Function
+            ? ''
+            : // @ts-ignore
+              localization[
+                `filter${
+                  filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                }`
+              ],
         )
-    : localization.toggleFilterButtonTitle;
+        .replace('{filterValue}', column.filterValue)
+    : localization.showHideFilters;
 
   const columnHeader = column.render('Header') as string;
 
@@ -127,7 +129,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
         >
           {column.render('Header')}
           {!isParentHeader && column.canSort && (
-            <Tooltip arrow title={sortTooltip}>
+            <Tooltip arrow placement="top" title={sortTooltip}>
               <TableSortLabel
                 aria-label={sortTooltip}
                 active={column.isSorted}
@@ -136,19 +138,21 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
             </Tooltip>
           )}
           {!isParentHeader && !!column.canFilter && (
-            <Tooltip arrow title={filterTooltip}>
+            <Tooltip arrow placement="top" title={filterTooltip}>
               <IconButton
+                disableRipple
                 onClick={(event) => {
                   event.stopPropagation();
                   setShowFilters(!tableInstance.state.showFilters);
                 }}
                 size="small"
                 sx={{
+                  m: 0,
                   opacity: !!column.filterValue ? 0.8 : 0,
                   p: '2px',
-                  m: 0,
                   transition: 'all 0.2s ease-in-out',
                   '&:hover': {
+                    backgroundColor: 'transparent',
                     opacity: 0.8,
                   },
                 }}

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/head/MRT_TableHeadRow.tsx

@@ -9,7 +9,7 @@ import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
 import { MRT_TableHeadCellActions } from './MRT_TableHeadCellActions';
-import { MRT_HeaderGroup } from '..';
+import type { MRT_HeaderGroup } from '..';
 
 interface Props {
   headerGroup: MRT_HeaderGroup;