material-react-table 2.0.0-beta.3 → 2.0.0-beta.5

package/src/column.utils.ts

@@ -1,4 +1,4 @@
-import { type CSSProperties, type ReactNode } from 'react';
+import { type ReactNode } from 'react';
 import {
   createRow as _createRow,
   flexRender as _flexRender,
@@ -6,9 +6,6 @@ import {
   type Row,
 } from '@tanstack/react-table';
 import { type Range, defaultRangeExtractor } from '@tanstack/react-virtual';
-import { type TableCellProps } from '@mui/material/TableCell';
-import { alpha, lighten } from '@mui/material/styles';
-import { type Theme } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
@@ -23,7 +20,6 @@ import {
   type MRT_FilterOption,
   type MRT_GroupColumnDef,
   type MRT_GroupingState,
-  type MRT_Header,
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
@@ -171,7 +167,6 @@ export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
       'mrt-row-expand',
     props.enableRowSelection && 'mrt-row-select',
     props.enableRowNumbers && 'mrt-row-numbers',
-    props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
 export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
@@ -186,6 +181,7 @@ export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
     props.positionExpandColumn === 'last' &&
       showExpandColumn(props) &&
       'mrt-row-expand',
+    props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
 export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
@@ -288,126 +284,11 @@ export const getCanRankRows = <TData extends MRT_RowData>(
   );
 };
 
-export const getCommonCellStyles = <TData extends MRT_RowData>({
-  column,
-  header,
-  table,
-  tableCellProps,
-  theme,
-}: {
-  column: MRT_Column<TData>;
-  header?: MRT_Header<TData>;
-  table: MRT_TableInstance<TData>;
-  tableCellProps: TableCellProps;
-  theme: Theme;
-}) => {
-  const {
-    options: { layoutMode },
-  } = table;
-  const widthStyles: CSSProperties = {
-    minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) * 1px), ${column.columnDef.minSize ?? 30}px)`,
-    width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) * 1px)`,
-  };
-
-  if (layoutMode === 'grid') {
-    widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId(
-      header?.id ?? column.id,
-    )}-size) 0 auto`;
-  } else if (layoutMode === 'grid-no-grow') {
-    widthStyles.flex = '0 0 auto';
-  }
-
-  return {
-    backgroundColor:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-        ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
-        : 'inherit',
-    backgroundImage: 'inherit',
-    boxShadow: getIsLastLeftPinnedColumn(table, column)
-      ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-      : getIsFirstRightPinnedColumn(column)
-      ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
-      : undefined,
-    display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-    left:
-      column.getIsPinned() === 'left'
-        ? `${column.getStart('left')}px`
-        : undefined,
-    ml:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'left' &&
-      column.getPinnedIndex() === 0
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.left?.length ?? 1)
-          }px`
-        : undefined,
-    mr:
-      table.options.enableColumnVirtualization &&
-      column.getIsPinned() === 'right' &&
-      column.getPinnedIndex() === table.getVisibleLeafColumns().length - 1
-        ? `-${
-            column.getSize() *
-            (table.getState().columnPinning.right?.length ?? 1) *
-            1.2
-          }px`
-        : undefined,
-    opacity:
-      table.getState().draggingColumn?.id === column.id ||
-      table.getState().hoveredColumn?.id === column.id
-        ? 0.5
-        : 1,
-    position:
-      column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-        ? 'sticky'
-        : undefined,
-    right:
-      column.getIsPinned() === 'right'
-        ? `${getTotalRight(table, column)}px`
-        : undefined,
-    transition: table.options.enableColumnVirtualization
-      ? 'none'
-      : `padding 150ms ease-in-out`,
-    ...widthStyles,
-    // ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
-    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
-    // ...(table.options.enableColumnResizing && widthStyles), //don't let devs pass in width styles if column resizing is enabled
-  };
-};
-
-export const MRT_DefaultColumn = {
-  filterVariant: 'text',
-  maxSize: 1000,
-  minSize: 40,
-  size: 180,
-} as const;
-
-export const MRT_DefaultDisplayColumn = {
-  columnDefType: 'display',
-  enableClickToCopy: false,
-  enableColumnActions: false,
-  enableColumnDragging: false,
-  enableColumnFilter: false,
-  enableColumnOrdering: false,
-  enableEditing: false,
-  enableGlobalFilter: false,
-  enableGrouping: false,
-  enableHiding: false,
-  enableResizing: false,
-  enableSorting: false,
-} as const;
-
 export const parseFromValuesOrFunc = <T, U>(
   fn: ((arg: U) => T) | T | undefined,
   arg: U,
 ): T | undefined => (fn instanceof Function ? fn(arg) : fn);
 
-export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
-
 export const flexRender = _flexRender as (
   Comp: Renderable<any>,
   props: any,

package/src/footer/MRT_TableFooter.tsx

@@ -1,10 +1,10 @@
 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_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableFooterProps {
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
@@ -16,6 +16,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     getFooterGroups,
@@ -25,9 +26,12 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   } = 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,12 +1,13 @@
-import TableCell from '@mui/material/TableCell';
-import { getCommonCellStyles, parseFromValuesOrFunc } from '../column.utils';
+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 MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   footer: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -14,6 +15,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   footer,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -24,12 +26,11 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   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 (
@@ -39,7 +40,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       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:
@@ -50,16 +51,17 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
             : '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,
@@ -67,8 +69,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
               table,
             }) ??
             columnDef.footer ??
-            null}
-      </>
+            null)}
     </TableCell>
   );
 };

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,8 +1,8 @@
 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,
@@ -10,7 +10,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableRowProps {
   footerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -24,6 +24,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableFooterRowProps },
@@ -40,16 +41,19 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   )
     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,11 +1,11 @@
 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_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableHeadProps {
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
@@ -17,6 +17,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     getHeaderGroups,
@@ -32,7 +33,10 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   } = 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 MRT_RowData>({
           <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,15 +9,15 @@ 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 { getCommonMRTCellStyles, getMRTTheme } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -25,6 +25,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
@@ -60,8 +61,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       column,
       table,
     }),
+    ...rest,
   };
 
+  const { draggingBorderColor } = getMRTTheme(table, theme);
+
   const showColumnActions =
     (enableColumnActions || columnDef.enableColumnActions) &&
     columnDef.enableColumnActions !== false;
@@ -87,11 +91,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     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) {
@@ -176,7 +180,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2
             : 1,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           header,
           table,
@@ -186,97 +190,100 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
         ...draggingBorders,
       })}
     >
-      {header.isPlaceholder || column.id === 'mrt-row-spacer' ? 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,5 +1,5 @@
 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';
@@ -9,7 +9,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -19,10 +19,10 @@ export const MRT_TableHeadCellColumnActionsButton = <
 >({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
-      columnFilterDisplayMode,
       icons: { MoreVertIcon },
       localization,
       muiColumnActionsButtonProps,
@@ -48,6 +48,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
       column,
       table,
     }),
+    ...rest,
   };
 
   return (
@@ -69,18 +70,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 && (