material-react-table 2.0.0-beta.1 → 2.0.0-beta.11

package/src/filterFns.ts

@@ -4,8 +4,9 @@ import {
   rankings,
 } from '@tanstack/match-sorter-utils';
 import { type Row, filterFns } from '@tanstack/react-table';
+import { type MRT_RowData } from './types';
 
-const fuzzy = <TData extends Record<string, any>>(
+const fuzzy = <TData extends MRT_RowData>(
   row: Row<TData>,
   columnId: string,
   filterValue: number | string,
@@ -20,7 +21,7 @@ const fuzzy = <TData extends Record<string, any>>(
 
 fuzzy.autoRemove = (val: any) => !val;
 
-const contains = <TData extends Record<string, any>>(
+const contains = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -34,7 +35,7 @@ const contains = <TData extends Record<string, any>>(
 
 contains.autoRemove = (val: any) => !val;
 
-const startsWith = <TData extends Record<string, any>>(
+const startsWith = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -48,7 +49,7 @@ const startsWith = <TData extends Record<string, any>>(
 
 startsWith.autoRemove = (val: any) => !val;
 
-const endsWith = <TData extends Record<string, any>>(
+const endsWith = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -62,7 +63,7 @@ const endsWith = <TData extends Record<string, any>>(
 
 endsWith.autoRemove = (val: any) => !val;
 
-const equals = <TData extends Record<string, any>>(
+const equals = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -72,7 +73,7 @@ const equals = <TData extends Record<string, any>>(
 
 equals.autoRemove = (val: any) => !val;
 
-const notEquals = <TData extends Record<string, any>>(
+const notEquals = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -82,7 +83,7 @@ const notEquals = <TData extends Record<string, any>>(
 
 notEquals.autoRemove = (val: any) => !val;
 
-const greaterThan = <TData extends Record<string, any>>(
+const greaterThan = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -94,7 +95,7 @@ const greaterThan = <TData extends Record<string, any>>(
 
 greaterThan.autoRemove = (val: any) => !val;
 
-const greaterThanOrEqualTo = <TData extends Record<string, any>>(
+const greaterThanOrEqualTo = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -102,7 +103,7 @@ const greaterThanOrEqualTo = <TData extends Record<string, any>>(
 
 greaterThanOrEqualTo.autoRemove = (val: any) => !val;
 
-const lessThan = <TData extends Record<string, any>>(
+const lessThan = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -114,7 +115,7 @@ const lessThan = <TData extends Record<string, any>>(
 
 lessThan.autoRemove = (val: any) => !val;
 
-const lessThanOrEqualTo = <TData extends Record<string, any>>(
+const lessThanOrEqualTo = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -122,7 +123,7 @@ const lessThanOrEqualTo = <TData extends Record<string, any>>(
 
 lessThanOrEqualTo.autoRemove = (val: any) => !val;
 
-const between = <TData extends Record<string, any>>(
+const between = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValues: [number | string, number | string],
@@ -137,7 +138,7 @@ const between = <TData extends Record<string, any>>(
 
 between.autoRemove = (val: any) => !val;
 
-const betweenInclusive = <TData extends Record<string, any>>(
+const betweenInclusive = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValues: [number | string, number | string],
@@ -152,7 +153,7 @@ const betweenInclusive = <TData extends Record<string, any>>(
 
 betweenInclusive.autoRemove = (val: any) => !val;
 
-const empty = <TData extends Record<string, any>>(
+const empty = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   _filterValue: number | string,
@@ -160,7 +161,7 @@ const empty = <TData extends Record<string, any>>(
 
 empty.autoRemove = (val: any) => !val;
 
-const notEmpty = <TData extends Record<string, any>>(
+const notEmpty = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   _filterValue: number | string,

package/src/footer/MRT_TableFooter.tsx

@@ -1,21 +1,22 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableFooter from '@mui/material/TableFooter';
+import TableFooter, { type TableFooterProps } from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableFooterProps {
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableFooter = <TData extends Record<string, any>>({
+export const MRT_TableFooter = <TData extends MRT_RowData>({
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     getFooterGroups,
@@ -25,9 +26,12 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
   } = table;
   const { isFullScreen } = getState();
 
-  const tableFooterProps = parseFromValuesOrFunc(muiTableFooterProps, {
-    table,
-  });
+  const tableFooterProps = {
+    ...parseFromValuesOrFunc(muiTableFooterProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   const stickFooter =
     (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,15 +1,21 @@
-import TableCell from '@mui/material/TableCell';
-import { getCommonCellStyles, parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
+import { parseFromValuesOrFunc } from '../column.utils';
+import { getCommonMRTCellStyles } from '../style.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   footer: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableFooterCell = <TData extends Record<string, any>>({
+export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   footer,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -20,12 +26,11 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
+  const args = { column, table };
   const tableCellProps = {
-    ...parseFromValuesOrFunc(muiTableFooterCellProps, { column, table }),
-    ...parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
-      column,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiTableFooterCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args),
+    ...rest,
   };
 
   return (
@@ -35,7 +40,7 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
       variant="head"
       {...tableCellProps}
       sx={(theme) => ({
-        display: layoutMode?.startsWith('grid') ? 'grid' : 'table-cell',
+        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         fontWeight: 'bold',
         justifyContent: columnDefType === 'group' ? 'center' : undefined,
         p:
@@ -46,16 +51,17 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
             : '1.5rem',
         verticalAlign: 'top',
         zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           table,
           tableCellProps,
           theme,
         }),
+        ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
       })}
     >
-      <>
-        {footer.isPlaceholder
+      {tableCellProps.children ??
+        (footer.isPlaceholder
           ? null
           : parseFromValuesOrFunc(columnDef.Footer, {
               column,
@@ -63,8 +69,7 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
               table,
             }) ??
             columnDef.footer ??
-            null}
-      </>
+            null)}
     </TableCell>
   );
 };

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,15 +1,16 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableRow from '@mui/material/TableRow';
-import { lighten } from '@mui/material/styles';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
+  type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableRowProps {
   footerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -17,12 +18,13 @@ interface Props<TData extends Record<string, any>> {
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableFooterRow = <TData extends Record<string, any>>({
+export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   footerGroup,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableFooterRowProps },
@@ -39,16 +41,19 @@ export const MRT_TableFooterRow = <TData extends Record<string, any>>({
   )
     return null;
 
-  const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
-    footerGroup,
-    table,
-  });
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableFooterRowProps, {
+      footerGroup,
+      table,
+    }),
+    ...rest,
+  };
 
   return (
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: lighten(theme.palette.background.default, 0.05),
+        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         width: '100%',
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),

package/src/head/MRT_TableHead.tsx

@@ -1,22 +1,23 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableHead from '@mui/material/TableHead';
+import TableHead, { type TableHeadProps } from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_ToolbarAlertBanner } from '../toolbar';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableHeadProps {
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableHead = <TData extends Record<string, any>>({
+export const MRT_TableHead = <TData extends MRT_RowData>({
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     getHeaderGroups,
@@ -32,7 +33,10 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
   } = table;
   const { isFullScreen, showAlertBanner } = getState();
 
-  const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
+  const tableHeadProps = {
+    ...parseFromValuesOrFunc(muiTableHeadProps, { table }),
+    ...rest,
+  };
 
   const stickyHeader = enableStickyHeader || isFullScreen;
 
@@ -65,7 +69,7 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
           <th
             colSpan={table.getVisibleLeafColumns().length}
             style={{
-              display: layoutMode?.startsWith('grid') ? 'grid' : 'table-cell',
+              display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
               padding: 0,
             }}
           >

package/src/head/MRT_TableHeadCell.tsx

@@ -1,6 +1,6 @@
 import { type DragEvent, useMemo } from 'react';
 import Box from '@mui/material/Box';
-import TableCell from '@mui/material/TableCell';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
 import { type Theme } from '@mui/material/styles';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
@@ -9,18 +9,23 @@ import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
 import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
-import { getCommonCellStyles } from '../column.utils';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { getCommonMRTCellStyles, getMRTTheme } from '../style.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCell = <TData extends Record<string, any>>({
+export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
@@ -56,8 +61,11 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
       column,
       table,
     }),
+    ...rest,
   };
 
+  const { draggingBorderColor } = getMRTTheme(table, theme);
+
   const showColumnActions =
     (enableColumnActions || columnDef.enableColumnActions) &&
     columnDef.enableColumnActions !== false;
@@ -83,11 +91,11 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
     const borderStyle =
       columnSizingInfo.isResizingColumn === column.id &&
       !header.subHeaders.length
-        ? `2px solid ${theme.palette.primary.main} !important`
+        ? `2px solid ${draggingBorderColor} !important`
         : draggingColumn?.id === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
+        ? `1px dashed ${theme.palette.grey[500]}`
         : hoveredColumn?.id === column.id
-        ? `2px dashed ${theme.palette.primary.main}`
+        ? `2px dashed ${draggingBorderColor}`
         : undefined;
 
     if (columnSizingInfo.isResizingColumn === column.id) {
@@ -172,7 +180,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2
             : 1,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           header,
           table,
@@ -182,97 +190,100 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
         ...draggingBorders,
       })}
     >
-      {header.isPlaceholder ? null : (
-        <Box
-          className="Mui-TableHeadCell-Content"
-          sx={{
-            alignItems: 'center',
-            display: 'flex',
-            flexDirection:
-              tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
-            justifyContent:
-              columnDefType === 'group' || tableCellProps?.align === 'center'
-                ? 'center'
-                : column.getCanResize()
-                ? 'space-between'
-                : 'flex-start',
-            position: 'relative',
-            width: '100%',
-          }}
-        >
-          <Box
-            className="Mui-TableHeadCell-Content-Labels"
-            onClick={column.getToggleSortingHandler()}
-            sx={{
-              alignItems: 'center',
-              cursor:
-                column.getCanSort() && columnDefType !== 'group'
-                  ? 'pointer'
-                  : undefined,
-              display: 'flex',
-              flexDirection:
-                tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
-              overflow: columnDefType === 'data' ? 'hidden' : undefined,
-              pl:
-                tableCellProps?.align === 'center'
-                  ? `${headerPL}rem`
-                  : undefined,
-            }}
-          >
+      {header.isPlaceholder
+        ? null
+        : tableCellProps.children ?? (
             <Box
-              className="Mui-TableHeadCell-Content-Wrapper"
+              className="Mui-TableHeadCell-Content"
               sx={{
-                '&:hover': {
-                  textOverflow: 'clip',
-                },
-                minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
-                overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                textOverflow: 'ellipsis',
-                whiteSpace:
-                  (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
+                alignItems: 'center',
+                display: 'flex',
+                flexDirection:
+                  tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
+                justifyContent:
+                  columnDefType === 'group' ||
+                  tableCellProps?.align === 'center'
+                    ? 'center'
+                    : column.getCanResize()
+                    ? 'space-between'
+                    : 'flex-start',
+                position: 'relative',
+                width: '100%',
               }}
-              title={columnDefType === 'data' ? columnDef.header : undefined}
-            >
-              {headerElement}
-            </Box>
-            {column.getCanFilter() && (
-              <MRT_TableHeadCellFilterLabel header={header} table={table} />
-            )}
-            {column.getCanSort() && (
-              <MRT_TableHeadCellSortLabel
-                header={header}
-                table={table}
-                tableCellProps={tableCellProps}
-              />
-            )}
-          </Box>
-          {columnDefType !== 'group' && (
-            <Box
-              className="Mui-TableHeadCell-Content-Actions"
-              sx={{ whiteSpace: 'nowrap' }}
             >
-              {showDragHandle && (
-                <MRT_TableHeadCellGrabHandle
-                  column={column}
-                  table={table}
-                  tableHeadCellRef={{
-                    current: tableHeadCellRefs.current[column.id],
+              <Box
+                className="Mui-TableHeadCell-Content-Labels"
+                onClick={column.getToggleSortingHandler()}
+                sx={{
+                  alignItems: 'center',
+                  cursor:
+                    column.getCanSort() && columnDefType !== 'group'
+                      ? 'pointer'
+                      : undefined,
+                  display: 'flex',
+                  flexDirection:
+                    tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
+                  overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                  pl:
+                    tableCellProps?.align === 'center'
+                      ? `${headerPL}rem`
+                      : undefined,
+                }}
+              >
+                <Box
+                  className="Mui-TableHeadCell-Content-Wrapper"
+                  sx={{
+                    '&:hover': {
+                      textOverflow: 'clip',
+                    },
+                    minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
+                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                    textOverflow: 'ellipsis',
+                    whiteSpace:
+                      (columnDef.header?.length ?? 0) < 20
+                        ? 'nowrap'
+                        : 'normal',
                   }}
-                />
+                  title={
+                    columnDefType === 'data' ? columnDef.header : undefined
+                  }
+                >
+                  {headerElement}
+                </Box>
+                {column.getCanFilter() && (
+                  <MRT_TableHeadCellFilterLabel header={header} table={table} />
+                )}
+                {column.getCanSort() && (
+                  <MRT_TableHeadCellSortLabel header={header} table={table} />
+                )}
+              </Box>
+              {columnDefType !== 'group' && (
+                <Box
+                  className="Mui-TableHeadCell-Content-Actions"
+                  sx={{ whiteSpace: 'nowrap' }}
+                >
+                  {showDragHandle && (
+                    <MRT_TableHeadCellGrabHandle
+                      column={column}
+                      table={table}
+                      tableHeadCellRef={{
+                        current: tableHeadCellRefs.current[column.id],
+                      }}
+                    />
+                  )}
+                  {showColumnActions && (
+                    <MRT_TableHeadCellColumnActionsButton
+                      header={header}
+                      table={table}
+                    />
+                  )}
+                </Box>
               )}
-              {showColumnActions && (
-                <MRT_TableHeadCellColumnActionsButton
-                  header={header}
-                  table={table}
-                />
+              {column.getCanResize() && (
+                <MRT_TableHeadCellResizeHandle header={header} table={table} />
               )}
             </Box>
           )}
-          {column.getCanResize() && (
-            <MRT_TableHeadCellResizeHandle header={header} table={table} />
-          )}
-        </Box>
-      )}
       {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (
         <MRT_TableHeadCellFilterContainer header={header} table={table} />
       )}

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -1,24 +1,28 @@
 import { type MouseEvent, useState } from 'react';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableHeadCellColumnActionsButton = <
-  TData extends Record<string, any>,
+  TData extends MRT_RowData,
 >({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
-      columnFilterDisplayMode,
       icons: { MoreVertIcon },
       localization,
       muiColumnActionsButtonProps,
@@ -44,12 +48,12 @@ export const MRT_TableHeadCellColumnActionsButton = <
       column,
       table,
     }),
+    ...rest,
   };
 
   return (
     <>
       <Tooltip
-        arrow
         enterDelay={1000}
         enterNextDelay={1000}
         placement="top"
@@ -65,18 +69,15 @@ export const MRT_TableHeadCellColumnActionsButton = <
               opacity: 1,
             },
             height: '2rem',
-            m: '-4px',
+            m: '-8px -4px',
             opacity: 0.3,
-            transform: `scale(0.85) ${
-              columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''
-            }`,
-            transition: 'opacity 150ms',
+            transition: 'all 150ms',
             width: '2rem',
             ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >
-          <MoreVertIcon />
+          <MoreVertIcon style={{ transform: 'scale(0.9)' }} />
         </IconButton>
       </Tooltip>
       {anchorEl && (