material-react-table 2.0.0-alpha.1 → 2.0.0-alpha.2

package/src/body/MRT_TableBodyCell.tsx

@@ -1,26 +1,26 @@
 import {
-  memo,
   type DragEvent,
   type MouseEvent,
   type RefObject,
+  memo,
   useEffect,
   useMemo,
   useState,
 } from 'react';
+import { type VirtualItem } from '@tanstack/react-virtual';
 import Skeleton from '@mui/material/Skeleton';
 import TableCell from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
-import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
-import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 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 { type VirtualItem } from '@tanstack/react-virtual';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -54,8 +54,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
       enableGrouping,
       enableRowNumbers,
       layoutMode,
-      muiTableBodyCellProps,
       muiSkeletonProps,
+      muiTableBodyCellProps,
       rowNumberMode,
     },
     refs: { editInputRefs },
@@ -64,13 +64,13 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   } = table;
   const {
     creatingRow,
+    density,
     draggingColumn,
     draggingRow,
     editingCell,
     editingRow,
     hoveredColumn,
     hoveredRow,
-    density,
     isLoading,
     showSkeletons,
   } = getState();
@@ -129,6 +129,10 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
 
     return borderStyle
       ? {
+          borderBottom:
+            isDraggingRow || isHoveredRow || isLastRow
+              ? borderStyle
+              : undefined,
           borderLeft:
             isDraggingColumn ||
             isHoveredColumn ||
@@ -141,10 +145,6 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
             ((isDraggingRow || isHoveredRow) && isLastColumn)
               ? borderStyle
               : undefined,
-          borderBottom:
-            isDraggingRow || isHoveredRow || isLastRow
-              ? borderStyle
-              : undefined,
           borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
         }
       : undefined;
@@ -156,7 +156,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
 
   const isEditing =
     isEditable &&
-    !['modal', 'custom'].includes(editDisplayMode as string) &&
+    !['custom', 'modal'].includes(editDisplayMode as string) &&
     (editDisplayMode === 'table' ||
       editingRow?.id === row.id ||
       editingCell?.id === cell.id) &&
@@ -200,9 +200,16 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
         }
       }}
       {...tableCellProps}
-      onDragEnter={handleDragEnter}
       onDoubleClick={handleDoubleClick}
+      onDragEnter={handleDragEnter}
       sx={(theme) => ({
+        '&:hover': {
+          outline: ['cell', 'table'].includes(editDisplayMode ?? '')
+            ? `1px solid ${theme.palette.text.secondary}`
+            : undefined,
+          outlineOffset: '-1px',
+          textOverflow: 'clip',
+        },
         alignItems: layoutMode === 'grid' ? 'center' : undefined,
         cursor:
           isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
@@ -237,18 +244,11 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
-        '&:hover': {
-          outline: ['table', 'cell'].includes(editDisplayMode ?? '')
-            ? `1px solid ${theme.palette.text.secondary}`
-            : undefined,
-          outlineOffset: '-1px',
-          textOverflow: 'clip',
-        },
         ...getCommonCellStyles({
           column,
           table,
-          theme,
           tableCellProps,
+          theme,
         }),
         ...draggingBorders,
       })}
@@ -275,8 +275,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
             !row.getIsGrouped()) ? (
           columnDef.Cell?.({
             cell,
-            renderedCellValue: cell.renderValue() as any,
             column,
+            renderedCellValue: cell.renderValue() as any,
             row,
             table,
           })

package/src/body/MRT_TableBodyCellValue.tsx

@@ -1,8 +1,8 @@
 import { type ReactNode } from 'react';
 import Box from '@mui/material/Box';
 import { darken, lighten } from '@mui/material/styles';
-import highlightWords from 'highlight-words';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];
 
@@ -46,7 +46,7 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
   const isGroupedValue = renderedCellValue !== undefined;
 
   if (!isGroupedValue) {
-    renderedCellValue = cell.renderValue() as number | string | ReactNode;
+    renderedCellValue = cell.renderValue() as ReactNode | number | string;
   }
 
   if (
@@ -62,10 +62,10 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
         column.getCanGlobalFilter()))
   ) {
     const chunks = highlightWords?.({
-      text: renderedCellValue?.toString() as string,
-      query: (filterValue ?? globalFilter ?? '').toString(),
       matchExactly:
         (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
+      query: (filterValue ?? globalFilter ?? '').toString(),
+      text: renderedCellValue?.toString() as string,
     });
     if (chunks?.length > 1 || chunks?.[0]?.match) {
       renderedCellValue = (
@@ -101,8 +101,8 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
   if (columnDef.Cell && !isGroupedValue) {
     renderedCellValue = columnDef.Cell({
       cell,
-      renderedCellValue,
       column,
+      renderedCellValue,
       row,
       table,
     });

package/src/body/MRT_TableBodyRow.tsx

@@ -1,4 +1,5 @@
-import { type DragEvent, memo, useRef, useMemo } from 'react';
+import { type DragEvent, memo, useMemo, useRef } from 'react';
+import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
 import {
   type Theme,
@@ -7,9 +8,8 @@ import {
   lighten,
   useTheme,
 } from '@mui/material/styles';
-import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
+import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
-import { type VirtualItem, type Virtualizer } from '@tanstack/react-virtual';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
@@ -50,12 +50,12 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
       enableStickyFooter,
       enableStickyHeader,
       layoutMode,
-      rowPinningDisplayMode,
       memoMode,
       muiTableBodyRowProps,
       renderDetailPanel,
+      rowPinningDisplayMode,
     },
-    refs: { tableHeadRef, tableFooterRef },
+    refs: { tableFooterRef, tableHeadRef },
     setHoveredRow,
   } = table;
   const {
@@ -118,27 +118,43 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
       <TableRow
         data-index={virtualRow?.index}
         onDragEnter={handleDragEnter}
-        selected={row.getIsSelected()}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
             rowRef.current = node;
             measureElement?.(node);
           }
         }}
+        selected={row.getIsSelected()}
         {...tableRowProps}
+        style={{
+          transform: virtualRow
+            ? `translateY(${virtualRow?.start}px)`
+            : undefined,
+          ...tableRowProps?.style,
+        }}
         sx={(theme: Theme) => ({
+          '&:hover td': {
+            backgroundColor:
+              tableRowProps?.hover !== false
+                ? row.getIsSelected()
+                  ? `${alpha(theme.palette.primary.main, 0.2)}`
+                  : theme.palette.mode === 'dark'
+                  ? `${lighten(theme.palette.background.default, 0.12)}`
+                  : `${darken(theme.palette.background.default, 0.05)}`
+                : undefined,
+          },
           backgroundColor: `${lighten(
             theme.palette.background.default,
             0.06,
           )} !important`,
-          boxSizing: 'border-box',
           bottom:
-            bottomPinnedIndex !== undefined && isPinned
+            !virtualRow && bottomPinnedIndex !== undefined && isPinned
               ? `${
                   bottomPinnedIndex * rowHeight +
                   (enableStickyFooter ? tableFooterHeight - 1 : 0)
                 }px`
               : undefined,
+          boxSizing: 'border-box',
           display: layoutMode === 'grid' ? 'flex' : 'table-row',
           opacity: isPinned
             ? 0.98
@@ -150,7 +166,13 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
             : rowPinningDisplayMode?.includes('sticky') && isPinned
             ? 'sticky'
             : undefined,
-          transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
+          td: {
+            backgroundColor: row.getIsSelected()
+              ? alpha(theme.palette.primary.main, 0.2)
+              : isPinned
+              ? alpha(theme.palette.primary.main, 0.1)
+              : undefined,
+          },
           top: virtualRow
             ? 0
             : topPinnedIndex !== undefined && isPinned
@@ -159,36 +181,14 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
                 (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
               }px`
             : undefined,
+          transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
           zIndex:
             rowPinningDisplayMode?.includes('sticky') && isPinned
               ? 1
               : undefined,
-          td: {
-            backgroundColor: row.getIsSelected()
-              ? alpha(theme.palette.primary.main, 0.2)
-              : isPinned
-              ? alpha(theme.palette.primary.main, 0.1)
-              : undefined,
-          },
-          '&:hover td': {
-            backgroundColor:
-              tableRowProps?.hover !== false
-                ? row.getIsSelected()
-                  ? `${alpha(theme.palette.primary.main, 0.2)}`
-                  : theme.palette.mode === 'dark'
-                  ? `${lighten(theme.palette.background.default, 0.12)}`
-                  : `${darken(theme.palette.background.default, 0.05)}`
-                : undefined,
-          },
           ...(sx as any),
         })}
-        style={{
-          transform: virtualRow
-            ? `translateY(${virtualRow?.start}px)`
-            : undefined,
-          ...tableRowProps?.style,
-        }}
       >
         {virtualPaddingLeft ? (
           <td style={{ display: 'flex', width: virtualPaddingLeft }} />

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,7 +1,7 @@
 import { type DragEvent, type RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   row: MRT_Row<TData>;
@@ -38,8 +38,8 @@ export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
   return (
     <MRT_GrabHandleButton
       iconButtonProps={iconButtonProps}
-      onDragStart={handleDragStart}
       onDragEnd={handleDragEnd}
+      onDragStart={handleDragStart}
       table={table}
     />
   );

package/src/body/MRT_TableBodyRowPinButton.tsx

@@ -30,17 +30,17 @@ export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
           flexDirection: density === 'compact' ? 'row' : 'column',
         }}
       >
-        <MRT_RowPinButton row={row} table={table} pinningPosition="top" />
-        <MRT_RowPinButton row={row} table={table} pinningPosition="bottom" />
+        <MRT_RowPinButton pinningPosition="top" row={row} table={table} />
+        <MRT_RowPinButton pinningPosition="bottom" row={row} table={table} />
       </Box>
     );
   }
 
   return (
     <MRT_RowPinButton
+      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
       row={row}
       table={table}
-      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
     />
   );
 };

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,9 +1,9 @@
 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 TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
-import { type VirtualItem } from '@tanstack/react-virtual';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
@@ -23,12 +23,12 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
   virtualRow,
 }: Props<TData>) => {
   const {
-    getVisibleLeafColumns,
     getState,
+    getVisibleLeafColumns,
     options: {
       layoutMode,
-      muiTableBodyRowProps,
       muiDetailPanelProps,
+      muiTableBodyRowProps,
       renderDetailPanel,
     },
   } = table;

package/src/buttons/MRT_CopyButton.tsx

@@ -1,8 +1,8 @@
 import { type MouseEvent, type ReactNode, useState } from 'react';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   cell: MRT_Cell<TData>;

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,8 +1,8 @@
 import Box 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 CircularProgress from '@mui/material/CircularProgress';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -23,8 +23,8 @@ export const MRT_EditActionButtons = <TData extends Record<string, any>>({
       localization,
       onCreatingRowCancel,
       onCreatingRowSave,
-      onEditingRowSave,
       onEditingRowCancel,
+      onEditingRowSave,
     },
     refs: { editInputRefs },
     setCreatingRow,
@@ -100,12 +100,12 @@ export const MRT_EditActionButtons = <TData extends Record<string, any>>({
         </>
       ) : (
         <>
-          <Button sx={{ minWidth: '100px' }} onClick={handleCancel}>
+          <Button onClick={handleCancel} sx={{ minWidth: '100px' }}>
             {localization.cancel}
           </Button>
           <Button
-            sx={{ minWidth: '100px' }}
             onClick={handleSubmitRow}
+            sx={{ minWidth: '100px' }}
             variant="contained"
           >
             {isSaving && <CircularProgress color="inherit" size={18} />}

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,7 +1,7 @@
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -11,9 +11,9 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
+    getCanSomeRowsExpand,
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
-    getCanSomeRowsExpand,
     getState,
     options: {
       icons: { KeyboardDoubleArrowDownIcon },
@@ -52,8 +52,8 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
           {...iconButtonProps}
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
-            width: density === 'compact' ? '1.75rem' : '2.25rem',
             mt: density !== 'compact' ? '-0.25rem' : undefined,
+            width: density === 'compact' ? '1.75rem' : '2.25rem',
             ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,8 +1,8 @@
 import { type MouseEvent } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   row: MRT_Row<TData>;

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,14 +1,14 @@
 import { type DragEventHandler } from 'react';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   iconButtonProps?: IconButtonProps;
-  onDragStart: DragEventHandler<HTMLButtonElement>;
   onDragEnd: DragEventHandler<HTMLButtonElement>;
+  onDragStart: DragEventHandler<HTMLButtonElement>;
   table: MRT_TableInstance<TData>;
 }
 
@@ -42,21 +42,21 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
           e.stopPropagation();
           iconButtonProps?.onClick?.(e);
         }}
-        onDragStart={onDragStart}
         onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
         sx={(theme) => ({
+          '&:active': {
+            cursor: 'grabbing',
+          },
+          '&:hover': {
+            backgroundColor: 'transparent',
+            opacity: 1,
+          },
           cursor: 'grab',
           m: '0 -0.1rem',
           opacity: 0.5,
           p: '2px',
           transition: 'all 150ms ease-in-out',
-          '&:hover': {
-            backgroundColor: 'transparent',
-            opacity: 1,
-          },
-          '&:active': {
-            cursor: 'grabbing',
-          },
           ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
         })}
         title={undefined}

package/src/buttons/MRT_RowPinButton.tsx

@@ -1,23 +1,23 @@
-import { useState, type MouseEvent } from 'react';
+import { type MouseEvent, useState } from 'react';
 import { type RowPinningPosition } from '@tanstack/react-table';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
+  pinningPosition: RowPinningPosition;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
-  pinningPosition: RowPinningPosition;
 }
 
 export const MRT_RowPinButton = <TData extends Record<string, any>>({
+  pinningPosition,
   row,
   table,
-  pinningPosition,
 }: Props<TData>) => {
   const {
     options: {
-      icons: { PushPinIcon, CloseIcon },
+      icons: { CloseIcon, PushPinIcon },
       localization,
       rowPinningDisplayMode,
     },
@@ -36,9 +36,9 @@ export const MRT_RowPinButton = <TData extends Record<string, any>>({
   return (
     <Tooltip
       arrow
-      open={tooltipOpened}
       enterDelay={1000}
       enterNextDelay={1000}
+      open={tooltipOpened}
       title={isPinned ? localization.unpin : localization.pin}
     >
       <IconButton

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -20,7 +20,7 @@ export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
     },
   } = table;
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);

package/src/buttons/MRT_ToggleFullScreenButton.tsx

@@ -1,8 +1,8 @@
+import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
-import { useState } from 'react';
 
 interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
@@ -31,8 +31,8 @@ export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      open={tooltipOpened}
       arrow
+      open={tooltipOpened}
       title={rest?.title ?? localization.toggleFullScreen}
     >
       <IconButton

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,20 +1,20 @@
 import { type MouseEvent, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
-import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
+import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
 const commonIconButtonStyles = {
+  '&:hover': {
+    opacity: 1,
+  },
   height: '2rem',
   ml: '10px',
   opacity: 0.5,
   transition: 'opacity 150ms',
   width: '2rem',
-  '&:hover': {
-    opacity: 1,
-  },
 };
 
 interface Props<TData extends Record<string, any>> {
@@ -53,7 +53,7 @@ export const MRT_ToggleRowActionMenuButton = <
     (isCreating && createDisplayMode === 'row') ||
     (isEditing && editDisplayMode === 'row');
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleOpenRowActionMenu = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
@@ -75,11 +75,11 @@ export const MRT_ToggleRowActionMenuButton = <
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
         parseFromValuesOrFunc(enableEditing, row) ? (
-        <Tooltip placement="right" arrow title={localization.edit}>
+        <Tooltip arrow placement="right" title={localization.edit}>
           <IconButton
             aria-label={localization.edit}
-            sx={commonIconButtonStyles}
             onClick={handleStartEditMode}
+            sx={commonIconButtonStyles}
           >
             <EditIcon />
           </IconButton>