material-react-table 2.0.0-beta.2 → 2.0.0-beta.4

package/src/body/MRT_TableBodyCell.tsx

@@ -7,9 +7,8 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { type VirtualItem } from '@tanstack/react-virtual';
 import Skeleton from '@mui/material/Skeleton';
-import TableCell from '@mui/material/TableCell';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
@@ -27,14 +26,14 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
   numRows?: number;
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
-  virtualCell?: VirtualItem;
+  virtualIndex?: number;
 }
 
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
@@ -44,7 +43,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   rowIndex,
   rowRef,
   table,
-  virtualCell,
+  virtualIndex,
+  ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
@@ -83,19 +83,11 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
+  const args = { cell, column, row, table };
   const tableCellProps = {
-    ...parseFromValuesOrFunc(muiTableBodyCellProps, {
-      cell,
-      column,
-      row,
-      table,
-    }),
-    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, {
-      cell,
-      column,
-      row,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiTableBodyCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args),
+    ...rest,
   };
 
   const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
@@ -213,7 +205,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
 
   return (
     <TableCell
-      data-index={virtualCell?.index}
+      data-index={virtualIndex}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           measureElement?.(node);
@@ -224,9 +216,10 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       onDragEnter={handleDragEnter}
       sx={(theme) => ({
         '&:hover': {
-          outline: ['cell', 'table'].includes(editDisplayMode ?? '')
-            ? `1px solid ${theme.palette.text.secondary}`
-            : undefined,
+          outline:
+            ['cell', 'table'].includes(editDisplayMode ?? '') && isEditable
+              ? `1px solid ${theme.palette.text.secondary}`
+              : undefined,
           outlineOffset: '-1px',
           textOverflow: 'clip',
         },
@@ -274,47 +267,53 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         ...draggingBorders,
       })}
     >
-      <>
-        {cell.getIsPlaceholder() ? (
-          columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
-        ) : isLoading || showSkeletons ? (
-          <Skeleton
-            animation="wave"
-            height={20}
-            width={skeletonWidth}
-            {...skeletonProps}
-          />
-        ) : enableRowNumbers &&
-          rowNumberMode === 'static' &&
-          column.id === 'mrt-row-numbers' ? (
-          rowIndex + 1
-        ) : column.id === 'mrt-row-drag' ? (
-          <MRT_TableBodyRowGrabHandle row={row} rowRef={rowRef} table={table} />
-        ) : columnDefType === 'display' &&
-          (column.id === 'mrt-row-select' ||
-            column.id === 'mrt-row-expand' ||
-            !row.getIsGrouped()) ? (
-          columnDef.Cell?.({
-            cell,
-            column,
-            renderedCellValue: cell.renderValue() as any,
-            row,
-            table,
-          })
-        ) : isCreating || isEditing ? (
-          <MRT_EditCellTextField cell={cell} table={table} />
-        ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-          columnDef.enableClickToCopy !== false ? (
-          <MRT_CopyButton cell={cell} table={table}>
+      {tableCellProps.children ?? (
+        <>
+          {cell.getIsPlaceholder() ? (
+            columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
+          ) : showSkeletons !== false && (isLoading || showSkeletons) ? (
+            <Skeleton
+              animation="wave"
+              height={20}
+              width={skeletonWidth}
+              {...skeletonProps}
+            />
+          ) : enableRowNumbers &&
+            rowNumberMode === 'static' &&
+            column.id === 'mrt-row-numbers' ? (
+            rowIndex + 1
+          ) : column.id === 'mrt-row-drag' ? (
+            <MRT_TableBodyRowGrabHandle
+              row={row}
+              rowRef={rowRef}
+              table={table}
+            />
+          ) : columnDefType === 'display' &&
+            (column.id === 'mrt-row-select' ||
+              column.id === 'mrt-row-expand' ||
+              !row.getIsGrouped()) ? (
+            columnDef.Cell?.({
+              cell,
+              column,
+              renderedCellValue: cell.renderValue() as any,
+              row,
+              table,
+            })
+          ) : isCreating || isEditing ? (
+            <MRT_EditCellTextField cell={cell} table={table} />
+          ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+            columnDef.enableClickToCopy !== false ? (
+            <MRT_CopyButton cell={cell} table={table}>
+              <MRT_TableBodyCellValue cell={cell} table={table} />
+            </MRT_CopyButton>
+          ) : (
             <MRT_TableBodyCellValue cell={cell} table={table} />
-          </MRT_CopyButton>
-        ) : (
-          <MRT_TableBodyCellValue cell={cell} table={table} />
-        )}
-        {cell.getIsGrouped() && !columnDef.GroupedCell && (
-          <> ({row.subRows?.length})</>
-        )}
-      </>
+          )}
+          {cell.getIsGrouped() && !columnDef.GroupedCell && (
+            <> ({row.subRows?.length})</>
+          )}
+        </>
+      )}
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -162,7 +162,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           boxSizing: 'border-box',
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
           opacity: isPinned
-            ? 0.98
+            ? 0.97
             : draggingRow?.id === row.id || hoveredRow?.id === row.id
             ? 0.5
             : 1,
@@ -209,8 +209,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             rowIndex,
             rowRef,
             table,
-            virtualCell: columnVirtualizer
-              ? (cellOrVirtualCell as VirtualItem)
+            virtualIndex: columnVirtualizer
+              ? (cellOrVirtualCell as VirtualItem).index
               : undefined,
           };
           return cell ? (

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,4 +1,5 @@
 import { type DragEvent, type RefObject } from 'react';
+import { type IconButtonProps } from '@mui/material/IconButton';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { parseFromValuesOrFunc } from '../column.utils';
 import {
@@ -7,7 +8,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
@@ -17,15 +18,19 @@ export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
   row,
   rowRef,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { muiRowDragHandleProps },
   } = table;
 
-  const iconButtonProps = parseFromValuesOrFunc(muiRowDragHandleProps, {
-    row,
-    table,
-  });
+  const iconButtonProps = {
+    ...parseFromValuesOrFunc(muiRowDragHandleProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);

package/src/body/MRT_TableBodyRowPinButton.tsx

@@ -1,4 +1,5 @@
 import Box from '@mui/material/Box';
+import { type IconButtonProps } from '@mui/material/IconButton';
 import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
 import { parseFromValuesOrFunc } from '../column.utils';
 import {
@@ -7,7 +8,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -15,6 +16,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   row,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -26,6 +28,12 @@ export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
 
   if (!canPin) return null;
 
+  const rowPinButtonProps = {
+    row,
+    table,
+    ...rest,
+  };
+
   if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
     return (
       <Box
@@ -34,8 +42,8 @@ export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
           flexDirection: density === 'compact' ? 'row' : 'column',
         }}
       >
-        <MRT_RowPinButton pinningPosition="top" row={row} table={table} />
-        <MRT_RowPinButton pinningPosition="bottom" row={row} table={table} />
+        <MRT_RowPinButton pinningPosition="top" {...rowPinButtonProps} />
+        <MRT_RowPinButton pinningPosition="bottom" {...rowPinButtonProps} />
       </Box>
     );
   }
@@ -43,8 +51,7 @@ export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   return (
     <MRT_RowPinButton
       pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
-      row={row}
-      table={table}
+      {...rowPinButtonProps}
     />
   );
 };

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,7 +1,7 @@
 import { type RefObject } from 'react';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import Collapse from '@mui/material/Collapse';
-import TableCell from '@mui/material/TableCell';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
@@ -11,7 +11,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   parentRowRef: RefObject<HTMLTableRowElement>;
   row: MRT_Row<TData>;
   rowIndex: number;
@@ -25,6 +25,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   rowIndex,
   table,
   virtualRow,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -45,10 +46,13 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
     table,
   });
 
-  const tableCellProps = parseFromValuesOrFunc(muiDetailPanelProps, {
-    row,
-    table,
-  });
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(muiDetailPanelProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
 
   return (
     <TableRow
@@ -77,7 +81,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
             ? lighten(theme.palette.background.default, 0.05)
             : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
-          display: layoutMode?.startsWith('grid') ? 'flex' : 'table-cell',
+          display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
           py: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',
           width: `${table.getTotalSize()}px`,

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -1,13 +1,14 @@
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Column,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -15,6 +16,7 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
   column,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -28,7 +30,14 @@ export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
   };
 
   return (
-    <Box sx={{ minWidth: '70px', textAlign: 'center' }}>
+    <Box
+      {...rest}
+      sx={(theme) => ({
+        minWidth: '70px',
+        textAlign: 'center',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
       {column.getIsPinned() ? (
         <Tooltip arrow title={localization.unpin}>
           <IconButton onClick={() => handlePinColumn(false)} size="small">

package/src/buttons/MRT_CopyButton.tsx

@@ -1,5 +1,5 @@
-import { type MouseEvent, type ReactNode, useState } from 'react';
-import Button from '@mui/material/Button';
+import { type MouseEvent, useState } from 'react';
+import Button, { type ButtonProps } from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
 import {
@@ -8,16 +8,15 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends ButtonProps {
   cell: MRT_Cell<TData>;
-  children: ReactNode;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_CopyButton = <TData extends MRT_RowData>({
   cell,
-  children,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { localization, muiCopyButtonProps },
@@ -47,6 +46,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
       row,
       table,
     }),
+    ...rest,
   };
 
   return (
@@ -81,9 +81,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
           ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as any),
         })}
         title={undefined}
-      >
-        {children}
-      </Button>
+      />
     </Tooltip>
   );
 };

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,15 +1,16 @@
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
   variant?: 'icon' | 'text';
@@ -19,6 +20,7 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
   row,
   table,
   variant = 'icon',
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -83,7 +85,11 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
   return (
     <Box
       onClick={(e) => e.stopPropagation()}
-      sx={{ display: 'flex', gap: '0.75rem' }}
+      sx={(theme) => ({
+        display: 'flex',
+        gap: '0.75rem',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
     >
       {variant === 'icon' ? (
         <>

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,14 +1,15 @@
-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 { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getCanSomeRowsExpand,
@@ -25,9 +26,12 @@ export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
   } = table;
   const { density, isLoading } = getState();
 
-  const iconButtonProps = parseFromValuesOrFunc(muiExpandAllButtonProps, {
-    table,
-  });
+  const iconButtonProps = {
+    ...parseFromValuesOrFunc(muiExpandAllButtonProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   const isAllRowsExpanded = getIsAllRowsExpanded();
 

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,5 +1,5 @@
 import { type MouseEvent } 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 {
@@ -8,7 +8,7 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -4,7 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 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 IconButtonProps {
   iconButtonProps?: IconButtonProps;
   location?: 'column' | 'row';
   onDragEnd: DragEventHandler<HTMLButtonElement>;
@@ -18,6 +18,7 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
   onDragEnd,
   onDragStart,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -26,22 +27,24 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
     },
   } = table;
 
+  const _iconButtonProps = { ...iconButtonProps, ...rest };
+
   return (
     <Tooltip
       arrow
       enterDelay={1000}
       enterNextDelay={1000}
       placement="top"
-      title={iconButtonProps?.title ?? localization.move}
+      title={_iconButtonProps?.title ?? localization.move}
     >
       <IconButton
         disableRipple
         draggable="true"
         size="small"
-        {...iconButtonProps}
+        {..._iconButtonProps}
         onClick={(e) => {
           e.stopPropagation();
-          iconButtonProps?.onClick?.(e);
+          _iconButtonProps?.onClick?.(e);
         }}
         onDragEnd={onDragEnd}
         onDragStart={onDragStart}
@@ -58,7 +61,7 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
           opacity: location === 'row' ? 1 : 0.3,
           p: '2px',
           transition: 'all 150ms ease-in-out',
-          ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(_iconButtonProps?.sx, theme) as any),
         })}
         title={undefined}
       >

package/src/buttons/MRT_RowPinButton.tsx

@@ -1,14 +1,15 @@
 import { type MouseEvent, useState } from 'react';
 import { type RowPinningPosition } from '@tanstack/react-table';
-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 {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   pinningPosition: RowPinningPosition;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
@@ -18,6 +19,7 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
   pinningPosition,
   row,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -51,10 +53,12 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
         onMouseEnter={() => setTooltipOpened(true)}
         onMouseLeave={() => setTooltipOpened(false)}
         size="small"
-        sx={{
+        {...rest}
+        sx={(theme) => ({
           height: '24px',
           width: '24px',
-        }}
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
       >
         {isPinned ? (
           <CloseIcon />

package/src/buttons/MRT_ToggleRowActionMenuButton.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 { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
@@ -22,7 +22,7 @@ const commonIconButtonStyles = {
   width: '2rem',
 };
 
-interface Props<TData extends MRT_RowData> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
@@ -32,6 +32,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   cell,
   row,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -77,12 +78,14 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
       ) : showEditActionButtons ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
-        parseFromValuesOrFunc(enableEditing, row) ? (
+        parseFromValuesOrFunc(enableEditing, row) &&
+        ['modal', 'row'].includes(editDisplayMode!) ? (
         <Tooltip arrow placement="right" title={localization.edit}>
           <IconButton
             aria-label={localization.edit}
             onClick={handleStartEditMode}
             sx={commonIconButtonStyles}
+            {...rest}
           >
             <EditIcon />
           </IconButton>
@@ -100,6 +103,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
               onClick={handleOpenRowActionMenu}
               size="small"
               sx={commonIconButtonStyles}
+              {...rest}
             >
               <MoreHorizIcon />
             </IconButton>