material-react-table 2.9.2 → 2.11.0

package/locales/ru/index.esm.js

@@ -6,8 +6,10 @@ const MRT_Localization_RU = {
     changeSearchMode: 'Изменить режим поиска',
     clearFilter: 'Очистить фильтр',
     clearSearch: 'Очистить поиск',
+    clearSelection: 'Очистить выбор',
     clearSort: 'Очистить сортировку',
     clickToCopy: 'Нажмите, чтобы скопировать',
+    copy: 'Копировать',
     columnActions: 'Действие колонки',
     copiedToClipboard: 'Скопировано в буфер обмена',
     collapse: 'Свернуть',

package/locales/ru/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_RU = {
     changeSearchMode: 'Изменить режим поиска',
     clearFilter: 'Очистить фильтр',
     clearSearch: 'Очистить поиск',
+    clearSelection: 'Очистить выбор',
     clearSort: 'Очистить сортировку',
     clickToCopy: 'Нажмите, чтобы скопировать',
+    copy: 'Копировать',
     columnActions: 'Действие колонки',
     copiedToClipboard: 'Скопировано в буфер обмена',
     collapse: 'Свернуть',

package/locales/sk/index.esm.js

@@ -6,8 +6,10 @@ const MRT_Localization_SK = {
     changeSearchMode: 'Zmeniť režim hľadania',
     clearFilter: 'Vyčistiť filter',
     clearSearch: 'Vyčistiť hľadanie',
+    clearSelection: 'Vyčistiť výber',
     clearSort: 'Vyčistiť zoradenie',
     clickToCopy: 'Kliknutím skopírovať',
+    copy: 'Kopírovať',
     collapse: 'Zbaliť',
     collapseAll: 'Zbaliť všetko',
     columnActions: 'Akcie stĺpca',

package/locales/sk/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_SK = {
     changeSearchMode: 'Zmeniť režim hľadania',
     clearFilter: 'Vyčistiť filter',
     clearSearch: 'Vyčistiť hľadanie',
+    clearSelection: 'Vyčistiť výber',
     clearSort: 'Vyčistiť zoradenie',
     clickToCopy: 'Kliknutím skopírovať',
+    copy: 'Kopírovať',
     collapse: 'Zbaliť',
     collapseAll: 'Zbaliť všetko',
     columnActions: 'Akcie stĺpca',

package/locales/sr-Cyrl-RS/index.esm.js

@@ -6,8 +6,10 @@ const MRT_Localization_SR_CYRL_RS = {
     changeSearchMode: 'Промени режим претраге',
     clearFilter: 'Поништи филтер',
     clearSearch: 'Поништи претрагу',
+    clearSelection: 'Поништи избор',
     clearSort: 'Поништи сортирање',
     clickToCopy: 'Кликни да копираш',
+    copy: 'Копирај',
     collapse: 'Рашири',
     collapseAll: 'Рашири све',
     columnActions: 'Акције над колонама',

package/locales/sr-Cyrl-RS/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_SR_CYRL_RS = {
     changeSearchMode: 'Промени режим претраге',
     clearFilter: 'Поништи филтер',
     clearSearch: 'Поништи претрагу',
+    clearSelection: 'Поништи избор',
     clearSort: 'Поништи сортирање',
     clickToCopy: 'Кликни да копираш',
+    copy: 'Копирај',
     collapse: 'Рашири',
     collapseAll: 'Рашири све',
     columnActions: 'Акције над колонама',

package/locales/sr-Latn-RS/index.esm.js

@@ -6,8 +6,10 @@ const MRT_Localization_SR_LATN_RS = {
     changeSearchMode: 'Promeni režim pretrage',
     clearFilter: 'Poništi filter',
     clearSearch: 'Poništi pretragu',
+    clearSelection: 'Poništi izbor',
     clearSort: 'Poništi sortiranje',
     clickToCopy: 'Klikni da kopiraš',
+    copy: 'Kopiraj',
     collapse: 'Raširi',
     collapseAll: 'Raširi sve',
     columnActions: 'Akcije nad kolonama',

package/locales/sr-Latn-RS/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_SR_LATN_RS = {
     changeSearchMode: 'Promeni režim pretrage',
     clearFilter: 'Poništi filter',
     clearSearch: 'Poništi pretragu',
+    clearSelection: 'Poništi izbor',
     clearSort: 'Poništi sortiranje',
     clickToCopy: 'Klikni da kopiraš',
+    copy: 'Kopiraj',
     collapse: 'Raširi',
     collapseAll: 'Raširi sve',
     columnActions: 'Akcije nad kolonama',

package/locales/sv/index.esm.js

@@ -6,8 +6,10 @@ const MRT_Localization_SV = {
     changeSearchMode: 'Ändra sökläge',
     clearFilter: 'Rensa filter',
     clearSearch: 'Rensa sök',
+    clearSelection: 'Rensa val',
     clearSort: 'Rensa sortering',
     clickToCopy: 'Klicka för att kopiera',
+    copy: 'Kopiera',
     collapse: 'Stäng',
     collapseAll: 'Stäng alla',
     columnActions: 'Kolumnåtgärd',

package/locales/sv/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_SV = {
     changeSearchMode: 'Ändra sökläge',
     clearFilter: 'Rensa filter',
     clearSearch: 'Rensa sök',
+    clearSelection: 'Rensa val',
     clearSort: 'Rensa sortering',
     clickToCopy: 'Klicka för att kopiera',
+    copy: 'Kopiera',
     collapse: 'Stäng',
     collapseAll: 'Stäng alla',
     columnActions: 'Kolumnåtgärd',

package/locales/tr/index.esm.js

@@ -6,8 +6,10 @@ const MRT_Localization_TR = {
     changeSearchMode: 'Arama Modunu Değiştir',
     clearFilter: 'Filtreyi Temizle',
     clearSearch: 'Aramayı Temizle',
+    clearSelection: 'Seçimi Temizle',
     clearSort: 'Sıralamayı Sıfırla',
     clickToCopy: 'Kopyala',
+    copy: 'Kopyala',
     columnActions: 'Sütun İşlemleri',
     copiedToClipboard: 'Panoya Kopyalandı',
     collapse: 'Daralt',

package/locales/tr/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_TR = {
     changeSearchMode: 'Arama Modunu Değiştir',
     clearFilter: 'Filtreyi Temizle',
     clearSearch: 'Aramayı Temizle',
+    clearSelection: 'Seçimi Temizle',
     clearSort: 'Sıralamayı Sıfırla',
     clickToCopy: 'Kopyala',
+    copy: 'Kopyala',
     columnActions: 'Sütun İşlemleri',
     copiedToClipboard: 'Panoya Kopyalandı',
     collapse: 'Daralt',

package/locales/uk/index.esm.js

@@ -6,8 +6,10 @@ const MRT_Localization_UK = {
     changeSearchMode: 'Змінити режим пошуку',
     clearFilter: 'Очистити фільтр',
     clearSearch: 'Очистити пошук',
+    clearSelection: 'Скасувати вибір',
     clearSort: 'Очистити сортування',
     clickToCopy: 'Натисніть, щоб скопіювати',
+    copy: 'Копіювати',
     collapse: 'Згорнути',
     collapseAll: 'Згорнути все',
     columnActions: 'Дії стовпця',

package/locales/uk/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_UK = {
     changeSearchMode: 'Змінити режим пошуку',
     clearFilter: 'Очистити фільтр',
     clearSearch: 'Очистити пошук',
+    clearSelection: 'Скасувати вибір',
     clearSort: 'Очистити сортування',
     clickToCopy: 'Натисніть, щоб скопіювати',
+    copy: 'Копіювати',
     collapse: 'Згорнути',
     collapseAll: 'Згорнути все',
     columnActions: 'Дії стовпця',

package/locales/vi/index.esm.js

@@ -6,8 +6,10 @@ const MRT_Localization_VI = {
     changeSearchMode: 'Thay đổi chế độ tìm kiếm',
     clearFilter: 'Xoá bộ lọc',
     clearSearch: 'Xoá ô tìm kiếm',
+    clearSelection: 'Xoá lựa chọn',
     clearSort: 'Huỷ sắp xếp',
     clickToCopy: 'Nhấn vào để sao chép',
+    copy: 'Sao chép',
     columnActions: 'Lựa chọn',
     copiedToClipboard: 'Sao chép vào bảng tạm',
     collapse: 'Thu gọn',

package/locales/vi/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_VI = {
     changeSearchMode: 'Thay đổi chế độ tìm kiếm',
     clearFilter: 'Xoá bộ lọc',
     clearSearch: 'Xoá ô tìm kiếm',
+    clearSelection: 'Xoá lựa chọn',
     clearSort: 'Huỷ sắp xếp',
     clickToCopy: 'Nhấn vào để sao chép',
+    copy: 'Sao chép',
     columnActions: 'Lựa chọn',
     copiedToClipboard: 'Sao chép vào bảng tạm',
     collapse: 'Thu gọn',

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

@@ -6,8 +6,10 @@ const MRT_Localization_ZH_HANS = {
     changeSearchMode: '更改搜索模式',
     clearFilter: '清除过滤',
     clearSearch: '清除搜索',
+    clearSelection: '清除选择',
     clearSort: '清除排序',
     clickToCopy: '点击以复制',
+    copy: '复制',
     collapse: '折叠',
     collapseAll: '全部折叠',
     columnActions: '列操作',

package/locales/zh-Hans/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_ZH_HANS = {
     changeSearchMode: '更改搜索模式',
     clearFilter: '清除过滤',
     clearSearch: '清除搜索',
+    clearSelection: '清除选择',
     clearSort: '清除排序',
     clickToCopy: '点击以复制',
+    copy: '复制',
     collapse: '折叠',
     collapseAll: '全部折叠',
     columnActions: '列操作',

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

@@ -6,8 +6,10 @@ const MRT_Localization_ZH_HANT = {
     changeSearchMode: '更改搜尋模式',
     clearFilter: '清除過濾',
     clearSearch: '清除搜尋',
+    clearSelection: '清除選擇',
     clearSort: '清除排序',
     clickToCopy: '點擊以複製',
+    copy: '複製',
     collapse: '折疊',
     collapseAll: '全部折疊',
     columnActions: '欄位動作',

package/locales/zh-Hant/index.js

@@ -10,8 +10,10 @@ const MRT_Localization_ZH_HANT = {
     changeSearchMode: '更改搜尋模式',
     clearFilter: '清除過濾',
     clearSearch: '清除搜尋',
+    clearSelection: '清除選擇',
     clearSort: '清除排序',
     clickToCopy: '點擊以複製',
+    copy: '複製',
     collapse: '折疊',
     collapseAll: '全部折疊',
     columnActions: '欄位動作',

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.9.2",
+  "version": "2.11.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.",
@@ -66,25 +66,25 @@
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.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",
+    "@mui/icons-material": "^5.15.7",
+    "@mui/material": "^5.15.7",
+    "@mui/x-date-pickers": "^6.19.3",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.2",
-    "@storybook/addon-a11y": "^7.6.10",
-    "@storybook/addon-essentials": "^7.6.10",
-    "@storybook/addon-interactions": "^7.6.10",
-    "@storybook/addon-links": "^7.6.10",
-    "@storybook/addon-storysource": "^7.6.10",
-    "@storybook/blocks": "^7.6.10",
-    "@storybook/react": "^7.6.10",
-    "@storybook/react-vite": "^7.6.10",
+    "@storybook/addon-a11y": "^7.6.12",
+    "@storybook/addon-essentials": "^7.6.12",
+    "@storybook/addon-interactions": "^7.6.12",
+    "@storybook/addon-links": "^7.6.12",
+    "@storybook/addon-storysource": "^7.6.12",
+    "@storybook/blocks": "^7.6.12",
+    "@storybook/react": "^7.6.12",
+    "@storybook/react-vite": "^7.6.12",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.11.6",
-    "@types/react": "^18.2.48",
+    "@types/node": "^20.11.16",
+    "@types/react": "^18.2.52",
     "@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",
@@ -99,7 +99,7 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.2",
-    "storybook": "^7.6.10",
+    "storybook": "^7.6.12",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
@@ -115,9 +115,9 @@
     "react-dom": ">=18.0"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "8.11.7",
-    "@tanstack/react-table": "8.11.7",
-    "@tanstack/react-virtual": "3.0.2",
+    "@tanstack/match-sorter-utils": "8.11.8",
+    "@tanstack/react-table": "8.11.8",
+    "@tanstack/react-virtual": "3.0.4",
     "highlight-words": "1.2.2"
   }
 }

package/src/components/MaterialReactTable.tsx

@@ -11,18 +11,18 @@ type TableInstanceProp<TData extends MRT_RowData> = {
   table: MRT_TableInstance<TData>;
 };
 
-type Props<TData extends MRT_RowData> = Xor<
+export type MaterialReactTableProps<TData extends MRT_RowData> = Xor<
   TableInstanceProp<TData>,
   MRT_TableOptions<TData>
 >;
 
 const isTableInstanceProp = <TData extends MRT_RowData>(
-  props: Props<TData>,
+  props: MaterialReactTableProps<TData>,
 ): props is TableInstanceProp<TData> =>
   (props as TableInstanceProp<TData>).table !== undefined;
 
 export const MaterialReactTable = <TData extends MRT_RowData>(
-  props: Props<TData>,
+  props: MaterialReactTableProps<TData>,
 ) => {
   let table: MRT_TableInstance<TData>;
 

package/src/components/body/MRT_TableBody.tsx

@@ -13,7 +13,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableBodyProps {
+export interface MRT_TableBodyProps<TData extends MRT_RowData>
+  extends TableBodyProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
 }
@@ -22,7 +23,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableBodyProps<TData>) => {
   const {
     getBottomRows,
     getIsSomeRowsPinned,

package/src/components/body/MRT_TableBodyCell.tsx

@@ -16,15 +16,16 @@ 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';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 
-interface Props<TData extends MRT_RowData> extends TableCellProps {
+export interface MRT_TableBodyCellProps<TData extends MRT_RowData>
+  extends TableCellProps {
   cell: MRT_Cell<TData>;
-  measureElement?: (element: HTMLTableCellElement) => void;
   numRows?: number;
   rowRef: RefObject<HTMLTableRowElement>;
   staticColumnIndex?: number;
@@ -34,14 +35,13 @@ interface Props<TData extends MRT_RowData> extends TableCellProps {
 
 export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   cell,
-  measureElement,
   numRows,
   rowRef,
   staticColumnIndex,
   staticRowIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableBodyCellProps<TData>) => {
   const theme = useTheme();
   const {
     getState,
@@ -50,20 +50,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 +167,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 +180,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 +212,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 +226,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 +264,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',
@@ -288,13 +299,13 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
               renderedCellValue: cell.renderValue() as any,
               row,
               rowRef,
+              staticColumnIndex,
               staticRowIndex,
               table,
             })
           ) : 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_TableBodyCellValue.tsx

@@ -10,9 +10,10 @@ import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];
 
-interface Props<TData extends MRT_RowData> {
+export interface MRT_TableBodyCellValueProps<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
   rowRef?: RefObject<HTMLTableRowElement>;
+  staticColumnIndex?: number;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
 }
@@ -20,9 +21,10 @@ interface Props<TData extends MRT_RowData> {
 export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   cell,
   rowRef,
+  staticColumnIndex,
   staticRowIndex,
   table,
-}: Props<TData>) => {
+}: MRT_TableBodyCellValueProps<TData>) => {
   const {
     getState,
     options: { enableFilterMatchHighlighting },
@@ -113,6 +115,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
       renderedCellValue,
       row,
       rowRef,
+      staticColumnIndex,
       staticRowIndex,
       table,
     });

package/src/components/body/MRT_TableBodyRow.tsx

@@ -1,6 +1,6 @@
 import { type DragEvent, memo, useMemo, useRef } from 'react';
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableRow from '@mui/material/TableRow';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
 import {
   type Theme,
   alpha,
@@ -27,7 +27,8 @@ import {
 } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> {
+export interface MRT_TableBodyRowProps<TData extends MRT_RowData>
+  extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   numRows?: number;
   pinnedRowIds?: string[];
@@ -47,7 +48,8 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   virtualRow,
-}: Props<TData>) => {
+  ...rest
+}: MRT_TableBodyRowProps<TData>) => {
   const theme = useTheme();
 
   const {
@@ -87,11 +89,14 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   const isDraggingRow = draggingRow?.id === row.id;
   const isHoveredRow = hoveredRow?.id === row.id;
 
-  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
-    row,
-    staticRowIndex,
-    table,
-  });
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableBodyRowProps, {
+      row,
+      staticRowIndex,
+      table,
+    }),
+    ...rest,
+  };
 
   const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
     if (
@@ -234,10 +239,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             }
             const props = {
               cell,
-              measureElement:
-                !isDraggingRow && !isHoveredRow
-                  ? columnVirtualizer?.measureElement
-                  : undefined,
               numRows,
               rowRef,
               staticColumnIndex,

package/src/components/body/MRT_TableBodyRowGrabHandle.tsx

@@ -8,7 +8,8 @@ import {
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableBodyRowGrabHandleProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   row: MRT_Row<TData>;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
@@ -19,7 +20,7 @@ export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
   rowRef,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableBodyRowGrabHandleProps<TData>) => {
   const {
     options: { muiRowDragHandleProps },
   } = table;
@@ -50,7 +51,7 @@ export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
 
   return (
     <MRT_GrabHandleButton
-      iconButtonProps={iconButtonProps}
+      {...iconButtonProps}
       location="row"
       onDragEnd={handleDragEnd}
       onDragStart={handleDragStart}