material-react-table 2.9.2 → 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.2",
+  "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.",
@@ -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.6",
+    "@types/node": "^20.11.10",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@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",

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,27 +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',
+        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'
@@ -254,6 +263,7 @@ 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',
@@ -293,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

@@ -234,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/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}

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

@@ -68,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/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>
+    )
+  );
+};