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

package/locales/zh-Hant.js

@@ -95,4 +95,3 @@ const MRT_Localization_ZH_HANT = {
 };
 
 exports.MRT_Localization_ZH_HANT = MRT_Localization_ZH_HANT;
-//# sourceMappingURL=zh-Hant.js.map

package/locales/{zh-Hant.esm.js → zh-Hant.mjs}

@@ -91,4 +91,3 @@ const MRT_Localization_ZH_HANT = {
 };
 
 export { MRT_Localization_ZH_HANT };
-//# sourceMappingURL=zh-Hant.esm.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.0-beta.1",
+  "version": "2.0.0-beta.11",
   "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.",
@@ -23,9 +23,193 @@
   "bugs": {
     "url": "https://github.com/KevinVandy/material-react-table/issues"
   },
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/material-react-table.esm.js",
+  "sideEffects": false,
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
   "typings": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "default": "./dist/index.esm.js"
+    },
+    "./package.json": "./package.json",
+    "./locales/ar": {
+      "types": "./locales/ar.d.ts",
+      "require": "./locales/ar.js",
+      "default": "./locales/ar.mjs"
+    },
+    "./locales/az": {
+      "types": "./locales/az.d.ts",
+      "require": "./locales/az.js",
+      "default": "./locales/az.mjs"
+    },
+    "./locales/bg": {
+      "types": "./locales/bg.d.ts",
+      "require": "./locales/bg.js",
+      "default": "./locales/bg.mjs"
+    },
+    "./locales/cs": {
+      "types": "./locales/cs.d.ts",
+      "require": "./locales/cs.js",
+      "default": "./locales/cs.mjs"
+    },
+    "./locales/da": {
+      "types": "./locales/da.d.ts",
+      "require": "./locales/da.js",
+      "default": "./locales/da.mjs"
+    },
+    "./locales/de": {
+      "types": "./locales/de.d.ts",
+      "require": "./locales/de.js",
+      "default": "./locales/de.mjs"
+    },
+    "./locales/en": {
+      "types": "./locales/en.d.ts",
+      "require": "./locales/en.js",
+      "default": "./locales/en.mjs"
+    },
+    "./locales/es": {
+      "types": "./locales/es.d.ts",
+      "require": "./locales/es.js",
+      "default": "./locales/es.mjs"
+    },
+    "./locales/et": {
+      "types": "./locales/et.d.ts",
+      "require": "./locales/et.js",
+      "default": "./locales/et.mjs"
+    },
+    "./locales/fa": {
+      "types": "./locales/fa.d.ts",
+      "require": "./locales/fa.js",
+      "default": "./locales/fa.mjs"
+    },
+    "./locales/fi": {
+      "types": "./locales/fi.d.ts",
+      "require": "./locales/fi.js",
+      "default": "./locales/fi.mjs"
+    },
+    "./locales/fr": {
+      "types": "./locales/fr.d.ts",
+      "require": "./locales/fr.js",
+      "default": "./locales/fr.mjs"
+    },
+    "./locales/hu": {
+      "types": "./locales/hu.d.ts",
+      "require": "./locales/hu.js",
+      "default": "./locales/hu.mjs"
+    },
+    "./locales/hy": {
+      "types": "./locales/hy.d.ts",
+      "require": "./locales/hy.js",
+      "default": "./locales/hy.mjs"
+    },
+    "./locales/id": {
+      "types": "./locales/id.d.ts",
+      "require": "./locales/id.js",
+      "default": "./locales/id.mjs"
+    },
+    "./locales/it": {
+      "types": "./locales/it.d.ts",
+      "require": "./locales/it.js",
+      "default": "./locales/it.mjs"
+    },
+    "./locales/ja": {
+      "types": "./locales/ja.d.ts",
+      "require": "./locales/ja.js",
+      "default": "./locales/ja.mjs"
+    },
+    "./locales/ko": {
+      "types": "./locales/ko.d.ts",
+      "require": "./locales/ko.js",
+      "default": "./locales/ko.mjs"
+    },
+    "./locales/nl": {
+      "types": "./locales/nl.d.ts",
+      "require": "./locales/nl.js",
+      "default": "./locales/nl.mjs"
+    },
+    "./locales/no": {
+      "types": "./locales/no.d.ts",
+      "require": "./locales/no.js",
+      "default": "./locales/no.mjs"
+    },
+    "./locales/np": {
+      "types": "./locales/np.d.ts",
+      "require": "./locales/np.js",
+      "default": "./locales/np.mjs"
+    },
+    "./locales/pl": {
+      "types": "./locales/pl.d.ts",
+      "require": "./locales/pl.js",
+      "default": "./locales/pl.mjs"
+    },
+    "./locales/pt": {
+      "types": "./locales/pt.d.ts",
+      "require": "./locales/pt.js",
+      "default": "./locales/pt.mjs"
+    },
+    "./locales/pt-BR": {
+      "types": "./locales/pt-BR.d.ts",
+      "require": "./locales/pt-BR.js",
+      "default": "./locales/pt-BR.mjs"
+    },
+    "./locales/ro": {
+      "types": "./locales/ro.d.ts",
+      "require": "./locales/ro.js",
+      "default": "./locales/ro.mjs"
+    },
+    "./locales/ru": {
+      "types": "./locales/ru.d.ts",
+      "require": "./locales/ru.js",
+      "default": "./locales/ru.mjs"
+    },
+    "./locales/sk": {
+      "types": "./locales/sk.d.ts",
+      "require": "./locales/sk.js",
+      "default": "./locales/sk.mjs"
+    },
+    "./locales/sr-Cyrl-RS": {
+      "types": "./locales/sr-Cyrl-RS.d.ts",
+      "require": "./locales/sr-Cyrl-RS.js",
+      "default": "./locales/sr-Cyrl-RS.mjs"
+    },
+    "./locales/sr-Latn-RS": {
+      "types": "./locales/sr-Latn-RS.d.ts",
+      "require": "./locales/sr-Latn-RS.js",
+      "default": "./locales/sr-Latn-RS.mjs"
+    },
+    "./locales/sv": {
+      "types": "./locales/sv.d.ts",
+      "require": "./locales/sv.js",
+      "default": "./locales/sv.mjs"
+    },
+    "./locales/tr": {
+      "types": "./locales/tr.d.ts",
+      "require": "./locales/tr.js",
+      "default": "./locales/tr.mjs"
+    },
+    "./locales/uk": {
+      "types": "./locales/uk.d.ts",
+      "require": "./locales/uk.js",
+      "default": "./locales/uk.mjs"
+    },
+    "./locales/vi": {
+      "types": "./locales/vi.d.ts",
+      "require": "./locales/vi.js",
+      "default": "./locales/vi.mjs"
+    },
+    "./locales/zh-Hans": {
+      "types": "./locales/zh-Hans.d.ts",
+      "require": "./locales/zh-Hans.js",
+      "default": "./locales/zh-Hans.mjs"
+    },
+    "./locales/zh-Hant": {
+      "types": "./locales/zh-Hant.d.ts",
+      "require": "./locales/zh-Hant.js",
+      "default": "./locales/zh-Hant.mjs"
+    }
+  },
   "files": [
     "dist",
     "locales",
@@ -33,25 +217,25 @@
   ],
   "size-limit": [
     {
-      "path": "dist/cjs/index.js",
+      "path": "dist/index.js",
       "limit": "59 KB"
     },
     {
-      "path": "dist/esm/material-react-table.esm.js",
+      "path": "dist/index.esm.js",
       "limit": "55 KB"
     }
   ],
   "engines": {
-    "node": ">=14"
+    "node": ">=16"
   },
   "scripts": {
     "build": "pnpm lib:build",
     "build-locales": "pnpm lib:build-locales",
-    "build-no-locales": "pnpm lib:build-no-locales",
+    "build-lib": "pnpm lib:build-lib",
     "dev": "pnpm lib:dev",
-    "lib:build": "rm -rf dist && pnpm build-no-locales && pnpm build-locales",
+    "lib:build": "rm -rf dist && pnpm build-lib && pnpm build-locales && rm -rf dist/types",
     "lib:build-locales": "rm -rf locales && node build-locales.mjs",
-    "lib:build-no-locales": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
+    "lib:build-lib": "rm -rf dist && rollup -c rollup.config.mjs && size-limit",
     "lib:dev": "rollup -c rollup.config.mjs --watch",
     "lint": "eslint .",
     "size": "size-limit",
@@ -64,46 +248,46 @@
     "@babel/preset-react": "^7.22.15",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.1.0",
-    "@mui/icons-material": "^5.14.13",
-    "@mui/material": "^5.14.13",
+    "@faker-js/faker": "^8.2.0",
+    "@mui/icons-material": "^5.14.14",
+    "@mui/material": "^5.14.14",
     "@mui/x-date-pickers": "^6.16.2",
     "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
     "@rollup/plugin-node-resolve": "^15.2.3",
     "@rollup/plugin-typescript": "^11.1.5",
     "@size-limit/preset-small-lib": "^9.0.0",
-    "@storybook/addon-a11y": "^7.4.6",
-    "@storybook/addon-essentials": "^7.4.6",
-    "@storybook/addon-interactions": "^7.4.6",
-    "@storybook/addon-links": "^7.4.6",
-    "@storybook/addon-storysource": "^7.4.6",
-    "@storybook/blocks": "^7.4.6",
-    "@storybook/react": "^7.4.6",
-    "@storybook/react-vite": "^7.4.6",
+    "@storybook/addon-a11y": "^7.5.0",
+    "@storybook/addon-essentials": "^7.5.0",
+    "@storybook/addon-interactions": "^7.5.0",
+    "@storybook/addon-links": "^7.5.0",
+    "@storybook/addon-storysource": "^7.5.0",
+    "@storybook/blocks": "^7.5.0",
+    "@storybook/react": "^7.5.0",
+    "@storybook/react-vite": "^7.5.0",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.8.5",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "@typescript-eslint/eslint-plugin": "^6.7.5",
-    "@typescript-eslint/parser": "^6.7.5",
+    "@types/node": "^20.8.7",
+    "@types/react": "^18.2.29",
+    "@types/react-dom": "^18.2.14",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
     "@vitejs/plugin-react": "^4.1.0",
     "eslint": "^8.51.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
-    "eslint-plugin-perfectionist": "^2.1.0",
+    "eslint-plugin-perfectionist": "^2.2.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "rollup": "^2.79.1",
-    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^9.0.0",
-    "storybook": "^7.4.6",
+    "storybook": "^7.5.0",
     "storybook-dark-mode": "^3.0.1",
     "tslib": "^2.6.2",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11"
+    "vite": "^4.5.0"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -116,8 +300,8 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.8.4",
-    "@tanstack/react-table": "8.10.6",
-    "@tanstack/react-virtual": "3.0.0-beta.65",
+    "@tanstack/react-table": "8.10.7",
+    "@tanstack/react-virtual": "3.0.0-beta.66",
     "highlight-words": "1.2.2"
   }
 }

package/src/MaterialReactTable.tsx

@@ -1,26 +1,27 @@
 import { MRT_TablePaper } from './table/MRT_TablePaper';
 import {
+  type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableOptions,
   type Xor,
 } from './types';
 import { useMaterialReactTable } from './useMaterialReactTable';
 
-type TableInstanceProp<TData extends Record<string, any> = {}> = {
+type TableInstanceProp<TData extends MRT_RowData> = {
   table: MRT_TableInstance<TData>;
 };
 
-type Props<TData extends Record<string, any> = {}> = Xor<
+type Props<TData extends MRT_RowData> = Xor<
   TableInstanceProp<TData>,
   MRT_TableOptions<TData>
 >;
 
-const isTableInstanceProp = <TData extends Record<string, any> = {}>(
+const isTableInstanceProp = <TData extends MRT_RowData>(
   props: Props<TData>,
 ): props is TableInstanceProp<TData> =>
   (props as TableInstanceProp<TData>).table !== undefined;
 
-export const MaterialReactTable = <TData extends Record<string, any> = {}>(
+export const MaterialReactTable = <TData extends MRT_RowData>(
   props: Props<TData>,
 ) => {
   let table: MRT_TableInstance<TData>;

package/src/body/MRT_TableBody.tsx

@@ -5,7 +5,7 @@ import {
   type Virtualizer,
   useVirtualizer,
 } from '@tanstack/react-virtual';
-import TableBody from '@mui/material/TableBody';
+import TableBody, { type TableBodyProps } from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import { MRT_TableBodyRow, Memo_MRT_TableBodyRow } from './MRT_TableBodyRow';
 import {
@@ -14,9 +14,13 @@ import {
   parseFromValuesOrFunc,
 } from '../column.utils';
 import { rankGlobalFuzzy } from '../sortingFns';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableBodyProps {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -24,12 +28,13 @@ interface Props<TData extends Record<string, any>> {
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableBody = <TData extends Record<string, any>>({
+export const MRT_TableBody = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     getBottomRows,
@@ -76,7 +81,10 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
     sorting,
   } = getState();
 
-  const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
+  const tableBodyProps = {
+    ...parseFromValuesOrFunc(muiTableBodyProps, { table }),
+    ...rest,
+  };
   const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
     table,
   });
@@ -237,9 +245,7 @@ export const MRT_TableBody = <TData extends Record<string, any>>({
               <td
                 colSpan={table.getVisibleLeafColumns().length}
                 style={{
-                  display: layoutMode?.startsWith('grid')
-                    ? 'grid'
-                    : 'table-cell',
+                  display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
                 }}
               >
                 {renderEmptyRowsFallback?.({ table }) ?? (

package/src/body/MRT_TableBodyCell.tsx

@@ -7,40 +7,44 @@ 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';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import {
-  getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
   parseFromValuesOrFunc,
 } from '../column.utils';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import { getCommonMRTCellStyles, getMRTTheme } from '../style.utils';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+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 Record<string, any>>({
+export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   cell,
   measureElement,
   numRows,
   rowIndex,
   rowRef,
   table,
-  virtualCell,
+  virtualIndex,
+  ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
@@ -79,19 +83,11 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   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, {
@@ -101,6 +97,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
     table,
   });
 
+  const { draggingBorderColor } = getMRTTheme(table, theme);
+
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
     if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
@@ -122,12 +120,14 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
     const isLastRow = numRows && rowIndex === numRows - 1;
 
     const borderStyle =
-      isDraggingColumn || isDraggingRow
-        ? `1px dashed ${theme.palette.text.secondary} !important`
+      columnSizingInfo.isResizingColumn === column.id
+        ? `2px solid ${draggingBorderColor} !important`
+        : isDraggingColumn || isDraggingRow
+        ? `1px dashed ${theme.palette.grey[500]} !important`
         : isHoveredColumn ||
           isHoveredRow ||
           columnSizingInfo.isResizingColumn === column.id
-        ? `2px dashed ${theme.palette.primary.main} !important`
+        ? `2px dashed ${draggingBorderColor} !important`
         : undefined;
 
     if (columnSizingInfo.isResizingColumn === column.id) {
@@ -207,7 +207,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
 
   return (
     <TableCell
-      data-index={virtualCell?.index}
+      data-index={virtualIndex}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           measureElement?.(node);
@@ -218,9 +218,10 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
       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.grey[500]}`
+              : undefined,
           outlineOffset: '-1px',
           textOverflow: 'clip',
         },
@@ -243,7 +244,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
             : columnDefType === 'display'
             ? '1rem 1.25rem'
             : '1.5rem',
-        pl:
+        textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
+        [theme.direction === 'rtl' ? 'pr' : 'pl']:
           column.id === 'mrt-row-expand'
             ? `${
                 row.depth +
@@ -254,12 +256,11 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
                   : 1.25)
               }rem`
             : undefined,
-        textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         whiteSpace:
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           table,
           tableCellProps,
@@ -268,47 +269,53 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
         ...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>
   );
 };