material-react-table 2.9.1 → 2.10.0

package/locales/zh-Hans/index.esm.js

@@ -8,6 +8,7 @@ const MRT_Localization_ZH_HANS = {
     clearSearch: '清除搜索',
     clearSort: '清除排序',
     clickToCopy: '点击以复制',
+    copy: '复制',
     collapse: '折叠',
     collapseAll: '全部折叠',
     columnActions: '列操作',

package/locales/zh-Hans/index.js

@@ -12,6 +12,7 @@ const MRT_Localization_ZH_HANS = {
     clearSearch: '清除搜索',
     clearSort: '清除排序',
     clickToCopy: '点击以复制',
+    copy: '复制',
     collapse: '折叠',
     collapseAll: '全部折叠',
     columnActions: '列操作',

package/locales/zh-Hant/index.esm.js

@@ -8,6 +8,7 @@ const MRT_Localization_ZH_HANT = {
     clearSearch: '清除搜尋',
     clearSort: '清除排序',
     clickToCopy: '點擊以複製',
+    copy: '複製',
     collapse: '折疊',
     collapseAll: '全部折疊',
     columnActions: '欄位動作',

package/locales/zh-Hant/index.js

@@ -12,6 +12,7 @@ const MRT_Localization_ZH_HANT = {
     clearSearch: '清除搜尋',
     clearSort: '清除排序',
     clickToCopy: '點擊以複製',
+    copy: '複製',
     collapse: '折疊',
     collapseAll: '全部折疊',
     columnActions: '欄位動作',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.9.1",
+  "version": "2.10.0",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -61,14 +61,14 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.3.1",
-    "@mui/icons-material": "^5.15.5",
-    "@mui/material": "^5.15.5",
-    "@mui/x-date-pickers": "^6.19.0",
+    "@faker-js/faker": "^8.4.0",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/material": "^5.15.6",
+    "@mui/x-date-pickers": "^6.19.2",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.2",
     "@storybook/addon-a11y": "^7.6.10",
@@ -80,11 +80,11 @@
     "@storybook/react": "^7.6.10",
     "@storybook/react-vite": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.11.5",
+    "@types/node": "^20.11.10",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
@@ -115,8 +115,8 @@
     "react-dom": ">=18.0"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "8.11.3",
-    "@tanstack/react-table": "8.11.6",
+    "@tanstack/match-sorter-utils": "8.11.7",
+    "@tanstack/react-table": "8.11.7",
     "@tanstack/react-virtual": "3.0.2",
     "highlight-words": "1.2.2"
   }

package/src/components/body/MRT_TableBodyCell.tsx

@@ -16,6 +16,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import { isCellEditable, openEditingCell } from '../../utils/cell.utils';
 import { getIsFirstColumn, getIsLastColumn } from '../../utils/column.utils';
 import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -24,7 +25,6 @@ import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 
 interface Props<TData extends MRT_RowData> extends TableCellProps {
   cell: MRT_Cell<TData>;
-  measureElement?: (element: HTMLTableCellElement) => void;
   numRows?: number;
   rowRef: RefObject<HTMLTableRowElement>;
   staticColumnIndex?: number;
@@ -34,7 +34,6 @@ interface Props<TData extends MRT_RowData> extends TableCellProps {
 
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   cell,
-  measureElement,
   numRows,
   rowRef,
   staticColumnIndex,
@@ -50,20 +49,19 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       columnResizeMode,
       createDisplayMode,
       editDisplayMode,
+      enableCellActions,
       enableClickToCopy,
       enableColumnOrdering,
       enableColumnPinning,
-      enableEditing,
       enableGrouping,
       layoutMode,
       muiSkeletonProps,
       muiTableBodyCellProps,
     },
-    refs: { editInputRefs },
-    setEditingCell,
     setHoveredColumn,
   } = table;
   const {
+    actionCell,
     columnSizingInfo,
     creatingRow,
     density,
@@ -168,10 +166,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     columnDef.columnDefType !== 'group' &&
     column.getIsPinned();
 
-  const isEditable =
-    !cell.getIsPlaceholder() &&
-    parseFromValuesOrFunc(enableEditing, row) &&
-    parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
+  const isEditable = isCellEditable({ cell, table });
 
   const isEditing =
     isEditable &&
@@ -184,18 +179,24 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   const isCreating =
     isEditable && createDisplayMode === 'row' && creatingRow?.id === row.id;
 
+  const showClickToCopyButton =
+    (parseFromValuesOrFunc(enableClickToCopy, cell) === true ||
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) === true) &&
+    !['context-menu', false].includes(
+      // @ts-ignore
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell),
+    );
+
+  const isRightClickable = parseFromValuesOrFunc(enableCellActions, cell);
+
+  const cellValueProps = {
+    cell,
+    table,
+  };
+
   const handleDoubleClick = (event: MouseEvent<HTMLTableCellElement>) => {
     tableCellProps?.onDoubleClick?.(event);
-    if (isEditable && editDisplayMode === 'cell') {
-      setEditingCell(cell);
-      queueMicrotask(() => {
-        const textField = editInputRefs.current[column.id];
-        if (textField) {
-          textField.focus();
-          textField.select?.();
-        }
-      });
-    }
+    openEditingCell({ cell, table });
   };
 
   const handleDragEnter = (e: DragEvent<HTMLTableCellElement>) => {
@@ -210,9 +211,13 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     }
   };
 
-  const cellValueProps = {
-    cell,
-    table,
+  const handleContextMenu = (e: MouseEvent<HTMLTableCellElement>) => {
+    tableCellProps?.onContextMenu?.(e);
+    if (isRightClickable) {
+      e.preventDefault();
+      table.setActionCell(cell);
+      table.refs.actionCellRef.current = e.currentTarget;
+    }
   };
 
   return (
@@ -220,30 +225,31 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       align={theme.direction === 'rtl' ? 'right' : 'left'}
       data-index={staticColumnIndex}
       data-pinned={!!isColumnPinned || undefined}
-      ref={(node: HTMLTableCellElement) => {
-        if (node) {
-          measureElement?.(node);
-        }
-      }}
       {...tableCellProps}
+      onContextMenu={handleContextMenu}
       onDoubleClick={handleDoubleClick}
       onDragEnter={handleDragEnter}
       sx={(theme) => ({
         '&:hover': {
           outline:
+            actionCell?.id === cell.id ||
             (editDisplayMode === 'cell' && isEditable) ||
             (editDisplayMode === 'table' && (isCreating || isEditing))
               ? `1px solid ${theme.palette.grey[500]}`
               : undefined,
-          outlineOffset: '-1px',
           textOverflow: 'clip',
         },
         alignItems: layoutMode?.startsWith('grid') ? 'center' : undefined,
-        cursor:
-          isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
-        justifyContent: layoutMode?.startsWith('grid')
-          ? tableCellProps.align
-          : undefined,
+        cursor: isRightClickable
+          ? 'context-menu'
+          : isEditable && editDisplayMode === 'cell'
+            ? 'pointer'
+            : 'inherit',
+        outline:
+          actionCell?.id === cell.id
+            ? `1px solid ${theme.palette.grey[500]}`
+            : undefined,
+        outlineOffset: '-1px',
         overflow: 'hidden',
         p:
           density === 'compact'
@@ -257,11 +263,10 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               : columnDefType === 'display'
                 ? '1rem 1.25rem'
                 : '1.5rem',
+
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         whiteSpace:
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
-        zIndex:
-          draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         ...getCommonMRTCellStyles({
           column,
           table,
@@ -298,8 +303,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
             })
           ) : isCreating || isEditing ? (
             <MRT_EditCellTextField cell={cell} table={table} />
-          ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-            columnDef.enableClickToCopy !== false ? (
+          ) : showClickToCopyButton && columnDef.enableClickToCopy !== false ? (
             <MRT_CopyButton cell={cell} table={table}>
               <MRT_TableBodyCellValue {...cellValueProps} />
             </MRT_CopyButton>

package/src/components/body/MRT_TableBodyRow.tsx

@@ -21,9 +21,9 @@ import {
 } from '../../types';
 import { getIsRowSelected } from '../../utils/row.utils';
 import {
+  commonCellBeforeAfterStyles,
   getCommonPinnedCellStyles,
   getMRTTheme,
-  pinnedBeforeAfterStyles,
 } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
@@ -176,14 +176,12 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           ...tableRowProps?.style,
         }}
         sx={(theme: Theme) => ({
-          '&:hover td': {
-            '&:after': {
-              backgroundColor: cellHighlightColorHover
-                ? alpha(cellHighlightColorHover, 0.3)
-                : undefined,
-              ...pinnedBeforeAfterStyles,
-            },
-          },
+          '&:hover td:after': cellHighlightColorHover
+            ? {
+                backgroundColor: alpha(cellHighlightColorHover, 0.3),
+                ...commonCellBeforeAfterStyles,
+              }
+            : undefined,
           backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
             !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
@@ -199,14 +197,16 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             ? 'absolute'
             : rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 'sticky'
-              : undefined,
+              : 'relative',
           td: {
-            '&:after': {
-              backgroundColor: cellHighlightColor,
-              ...pinnedBeforeAfterStyles,
-            },
             ...getCommonPinnedCellStyles({ table, theme }),
           },
+          'td:after': cellHighlightColor
+            ? {
+                backgroundColor: cellHighlightColor,
+                ...commonCellBeforeAfterStyles,
+              }
+            : undefined,
           top: virtualRow
             ? 0
             : topPinnedIndex !== undefined && isRowPinned
@@ -218,9 +218,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
           zIndex:
-            rowPinningDisplayMode?.includes('sticky') && isRowPinned
-              ? 2
-              : undefined,
+            rowPinningDisplayMode?.includes('sticky') && isRowPinned ? 2 : 0,
           ...(sx as any),
         })}
       >
@@ -236,10 +234,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             }
             const props = {
               cell,
-              measureElement:
-                !isDraggingRow && !isHoveredRow
-                  ? columnVirtualizer?.measureElement
-                  : undefined,
               numRows,
               rowRef,
               staticColumnIndex,

package/src/components/buttons/MRT_CopyButton.tsx

@@ -74,6 +74,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
           letterSpacing: 'inherit',
           m: '-0.25rem',
           minWidth: 'unset',
+          py: 0,
           textAlign: 'inherit',
           textTransform: 'inherit',
           ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as any),

package/src/components/footer/MRT_TableFooter.tsx

@@ -54,7 +54,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
             ? `1px solid ${theme.palette.grey[300]}`
             : `1px solid ${theme.palette.grey[700]}`
           : undefined,
-        position: stickFooter ? 'sticky' : undefined,
+        position: stickFooter ? 'sticky' : 'relative',
         zIndex: stickFooter ? 1 : undefined,
         ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
       })}

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -23,7 +23,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   const theme = useTheme();
   const {
     getState,
-    options: { enableColumnPinning, layoutMode, muiTableFooterCellProps },
+    options: { enableColumnPinning, muiTableFooterCellProps },
   } = table;
   const { density } = getState();
   const { column } = footer;
@@ -57,9 +57,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       variant="footer"
       {...tableCellProps}
       sx={(theme) => ({
-        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         fontWeight: 'bold',
-        justifyContent: columnDefType === 'group' ? 'center' : undefined,
         p:
           density === 'compact'
             ? '0.5rem'
@@ -67,9 +65,9 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
               ? '1rem'
               : '1.5rem',
         verticalAlign: 'top',
-        zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
         ...getCommonMRTCellStyles({
           column,
+          header: footer,
           table,
           tableCellProps,
           theme,

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -55,6 +55,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
       sx={(theme) => ({
         backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+        position: 'relative',
         width: '100%',
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}

package/src/components/head/MRT_TableHeadCell.tsx

@@ -10,6 +10,7 @@ import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import {
+  type MRT_ColumnVirtualizer,
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
@@ -18,12 +19,14 @@ import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 interface Props<TData extends MRT_RowData> extends TableCellProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
   header: MRT_Header<TData>;
   staticColumnIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableHeadCell = <TData extends MRT_RowData>({
+  columnVirtualizer,
   header,
   staticColumnIndex,
   table,
@@ -161,6 +164,9 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           tableHeadCellRefs.current[column.id] = node;
+          if (columnDefType !== 'group') {
+            columnVirtualizer?.measureElement?.(node);
+          }
         }
       }}
       {...tableCellProps}
@@ -197,12 +203,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
               : '1.25rem',
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'top',
-        zIndex:
-          column.getIsResizing() || draggingColumn?.id === column.id
-            ? 3
-            : column.getIsPinned() && columnDefType !== 'group'
-              ? 2
-              : 1,
         ...getCommonMRTCellStyles({
           column,
           header,

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -131,6 +131,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
           horizontal: 'center',
           vertical: 'top',
         }}
+        disableScrollLock
         onClick={(event) => event.stopPropagation()}
         onClose={(event) => {
           //@ts-ignore

package/src/components/head/MRT_TableHeadRow.tsx

@@ -25,7 +25,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   ...rest
 }: Props<TData>) => {
   const {
-    options: { layoutMode, muiTableHeadRowProps },
+    options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
   } = table;
 
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
@@ -46,6 +46,10 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
         backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+        position:
+          enableStickyHeader && layoutMode === 'semantic'
+            ? 'sticky'
+            : 'relative',
         top: 0,
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
@@ -64,6 +68,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
 
           return header ? (
             <MRT_TableHeadCell
+              columnVirtualizer={columnVirtualizer}
               header={header}
               key={header.id}
               staticColumnIndex={staticColumnIndex}

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -148,8 +148,11 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
           ) as any),
         }),
       }}
+      SelectProps={{
+        MenuProps: { disableScrollLock: true },
+      }}
       inputProps={{
-        autoComplete: 'new-password', // disable autocomplete and autofill
+        autoComplete: 'new-password', //disable autocomplete and autofill
         ...textFieldProps.inputProps,
       }}
       onBlur={handleBlur}

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -468,6 +468,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           select={isSelectFilter || isMultiSelectFilter}
           {...commonTextFieldProps}
           SelectProps={{
+            MenuProps: { disableScrollLock: true },
             displayEmpty: true,
             multiple: isMultiSelectFilter,
             renderValue: isMultiSelectFilter

package/src/components/menus/MRT_ActionMenuItem.tsx

@@ -0,0 +1,60 @@
+import { type ReactNode } from 'react';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import MenuItem, { type MenuItemProps } from '@mui/material/MenuItem';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+
+interface Props<TData extends MRT_RowData> extends MenuItemProps {
+  icon: ReactNode;
+  label: string;
+  onOpenSubMenu?: MenuItemProps['onClick'] | MenuItemProps['onMouseEnter'];
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_ActionMenuItem = <TData extends MRT_RowData>({
+  icon,
+  label,
+  onOpenSubMenu,
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    options: {
+      icons: { ArrowRightIcon },
+    },
+  } = table;
+
+  return (
+    <MenuItem
+      sx={{
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        minWidth: '120px',
+        my: 0,
+        py: '6px',
+      }}
+      {...rest}
+    >
+      <Box
+        sx={{
+          alignItems: 'center',
+          display: 'flex',
+        }}
+      >
+        <ListItemIcon>{icon}</ListItemIcon>
+        {label}
+      </Box>
+      {onOpenSubMenu && (
+        <IconButton
+          onClick={onOpenSubMenu as any}
+          onMouseEnter={onOpenSubMenu as any}
+          size="small"
+          sx={{ p: 0 }}
+        >
+          <ArrowRightIcon />
+        </IconButton>
+      )}
+    </MenuItem>
+  );
+};

package/src/components/menus/MRT_CellActionMenu.tsx

@@ -0,0 +1,108 @@
+import Menu, { type MenuProps } from '@mui/material/Menu';
+import { useTheme } from '@mui/material/styles';
+import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
+import { type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { openEditingCell } from '../../utils/cell.utils';
+import { getMRTTheme } from '../../utils/style.utils';
+import { parseFromValuesOrFunc } from '../../utils/utils';
+
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
+  table: MRT_TableInstance<TData>;
+}
+
+export const MRT_CellActionMenu = <TData extends MRT_RowData>({
+  table,
+  ...rest
+}: Props<TData>) => {
+  const {
+    getState,
+    options: {
+      editDisplayMode,
+      enableClickToCopy,
+      enableEditing,
+      icons: { ContentCopy, EditIcon },
+      localization,
+      renderCellActionMenuItems,
+    },
+    refs: { actionCellRef },
+  } = table;
+  const { actionCell, density } = getState();
+  const cell = actionCell!;
+  const { row } = cell;
+  const { column } = cell;
+  const { columnDef } = column;
+
+  const theme = useTheme();
+  const { menuBackgroundColor } = getMRTTheme(table, theme);
+
+  const handleClose = (event?: any) => {
+    event?.stopPropagation();
+    table.setActionCell(null);
+    actionCellRef.current = null;
+  };
+
+  const internalMenuItems = [
+    (parseFromValuesOrFunc(enableClickToCopy, cell) === 'context-menu' ||
+      parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
+        'context-menu') && (
+      <MRT_ActionMenuItem
+        key={'mrt-copy'}
+        icon={<ContentCopy />}
+        label={localization.copy}
+        onClick={(event) => {
+          event.stopPropagation();
+          navigator.clipboard.writeText(cell.getValue() as string);
+          handleClose();
+        }}
+        table={table}
+      />
+    ),
+    parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (
+      <MRT_ActionMenuItem
+        key={'mrt-edit'}
+        icon={<EditIcon />}
+        label={localization.edit}
+        onClick={() => {
+          openEditingCell({ cell, table });
+          handleClose();
+        }}
+        table={table}
+      />
+    ),
+  ].filter(Boolean);
+
+  const renderActionProps = {
+    cell,
+    closeMenu: handleClose,
+    column,
+    internalMenuItems,
+    row,
+    table,
+  };
+
+  const menuItems =
+    columnDef.renderCellActionMenuItems?.(renderActionProps) ??
+    renderCellActionMenuItems?.(renderActionProps);
+
+  return (
+    (!!menuItems?.length || !!internalMenuItems?.length) && (
+      <Menu
+        MenuListProps={{
+          dense: density === 'compact',
+          sx: {
+            backgroundColor: menuBackgroundColor,
+          },
+        }}
+        anchorEl={actionCellRef.current}
+        disableScrollLock
+        onClick={(event) => event.stopPropagation()}
+        onClose={handleClose}
+        open={!!cell}
+        transformOrigin={{ horizontal: -100, vertical: 8 }}
+        {...rest}
+      >
+        {menuItems ?? internalMenuItems}
+      </Menu>
+    )
+  );
+};