material-react-table 0.4.9 → 0.5.2

package/dist/useMRT.d.ts

@@ -6,9 +6,6 @@ import { MaterialReactTableProps } from './MaterialReactTable';
 export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     anyRowsCanExpand: boolean;
     anyRowsExpanded: boolean;
-    currentEditingRow: MRT_Row<D> | null;
-    densePadding: boolean;
-    fullScreen: boolean;
     icons: MRT_Icons;
     localization: MRT_Localization;
     setCurrentEditingRow: (currentRowEditingId: MRT_Row<D> | null) => void;
@@ -16,8 +13,6 @@ export declare type UseMRT<D extends {} = {}> = MaterialReactTableProps<D> & {
     setFullScreen: (fullScreen: boolean) => void;
     setShowFilters: (showFilters: boolean) => void;
     setShowSearch: (showSearch: boolean) => void;
-    showFilters: boolean;
-    showSearch: boolean;
     tableInstance: MRT_TableInstance<D>;
 };
 export declare const MaterialReactTableProvider: <D extends {}>(props: React.PropsWithChildren<MaterialReactTableProps<D>>) => JSX.Element;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.9",
+  "version": "0.5.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material-UI implementation of react-table, inspired by material-table and the mui DataGrid, written from the ground up in TypeScript.",
@@ -61,8 +61,8 @@
     "@emotion/styled": "^11.8.1",
     "@etchteam/storybook-addon-status": "^4.2.0",
     "@faker-js/faker": "^6.0.0-alpha.7",
-    "@mui/icons-material": "^5.4.2",
-    "@mui/material": "^5.4.3",
+    "@mui/icons-material": "^5.4.4",
+    "@mui/material": "^5.4.4",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",
@@ -89,7 +89,7 @@
     "storybook-dark-mode": "^1.0.9",
     "tsdx": "^0.14.1",
     "tslib": "^2.3.1",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.2"
   },
   "peerDependencies": {
     "@emotion/react": ">=11",

package/src/@types/react-table-config.d.ts

@@ -14,8 +14,6 @@ import {
 } from '..';
 
 declare module 'react-table' {
-  // take this file as-is, or comment out the sections that don't apply to your plugin configuration
-
   export interface TableOptions<D extends Record<string, unknown>>
     extends MRT_TableOptions<D> {}
 
@@ -28,7 +26,9 @@ declare module 'react-table' {
 
   export interface TableInstance<
     D extends Record<string, unknown> = Record<string, unknown>,
-  > extends MRT_TableInstance<D> {}
+  > extends MRT_TableInstance<D> {
+    rows: MRT_Row<D>[];
+  }
 
   export interface TableState<
     D extends Record<string, unknown> = Record<string, unknown>,

package/src/MaterialReactTable.tsx

@@ -192,10 +192,11 @@ export type MRT_TableState<D extends {} = {}> = TableState<D> &
   UseRowSelectState<D> &
   UseRowStateState<D> &
   UseSortByState<D> & {
-    densePadding?: boolean;
-    fullScreen?: boolean;
-    showFilters?: boolean;
-    showSearchTextField?: boolean;
+    currentEditingRow: MRT_Row<D> | null;
+    densePadding: boolean;
+    fullScreen: boolean;
+    showFilters: boolean;
+    showSearch: boolean;
   };
 
 export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &

package/src/body/MRT_TableBody.tsx

@@ -1,13 +1,9 @@
 import React, { FC } from 'react';
-import { styled, TableBody as MuiTableBody } from '@mui/material';
+import { TableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
 
-const TableBody = styled(MuiTableBody)({
-  overflowY: 'hidden',
-});
-
 interface Props {}
 
 export const MRT_TableBody: FC<Props> = () => {
@@ -20,12 +16,15 @@ export const MRT_TableBody: FC<Props> = () => {
     ...tableInstance.getTableBodyProps(),
     style: {
       ...tableInstance.getTableBodyProps().style,
-      ...(muiTableBodyProps?.style ?? {}),
+      ...muiTableBodyProps?.style,
     },
   };
 
   return (
-    <TableBody {...tableBodyProps}>
+    <TableBody
+      {...tableBodyProps}
+      sx={{ overflowY: 'hidden', ...tableBodyProps?.sx }}
+    >
       {rows.map((row: MRT_Row) => {
         tableInstance.prepareRow(row);
         return <MRT_TableBodyRow key={row.getRowProps().key} row={row} />;

package/src/body/MRT_TableBodyCell.tsx

@@ -1,16 +1,20 @@
 import React, { FC, MouseEvent } from 'react';
-import { styled, TableCell as MuiTableCell } from '@mui/material';
+import { TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_Cell } from '..';
 
-export const MRT_StyledTableBodyCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'densePadding',
-})<{ densePadding?: boolean }>(({ densePadding }) => ({
-  padding: densePadding ? '0.5rem' : '1rem',
+export const commonTableBodyCellStyles = (densePadding: boolean) => ({
+  p: densePadding ? '0.5rem' : '1rem',
   transition: 'all 0.2s ease-in-out',
   whiteSpace: densePadding ? 'nowrap' : 'normal',
-}));
+});
+
+export const commonTableBodyButtonCellStyles = (densePadding: boolean) => ({
+  p: densePadding ? '1px' : '0.6rem',
+  textAlign: 'center',
+  transition: 'all 0.2s ease-in-out',
+});
 
 interface Props {
   cell: MRT_Cell;
@@ -20,8 +24,9 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
     onCellClick,
     muiTableBodyCellProps,
-    densePadding,
-    currentEditingRow,
+    tableInstance: {
+      state: { currentEditingRow, densePadding },
+    },
   } = useMRT();
 
   const mTableCellBodyProps =
@@ -40,18 +45,23 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
     ...cell.getCellProps(),
     style: {
       ...cell.getCellProps().style,
-      ...(mTableCellBodyProps?.style ?? {}),
-      ...(mcTableCellBodyProps?.style ?? {}),
+      ...mTableCellBodyProps?.style,
+      ...mcTableCellBodyProps?.style,
     },
   };
 
   return (
-    <MRT_StyledTableBodyCell
-      densePadding={densePadding}
+    <TableCell
       onClick={(event: MouseEvent<HTMLTableCellElement>) =>
         onCellClick?.(event, cell)
       }
       {...tableCellProps}
+      sx={
+        {
+          ...commonTableBodyCellStyles(densePadding),
+          ...tableCellProps?.sx,
+        } as TableCellProps['sx']
+      }
     >
       {currentEditingRow?.id === cell.row.id ? (
         <MRT_EditCellTextField cell={cell} />
@@ -64,6 +74,6 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
       ) : (
         cell.render('Cell')
       )}
-    </MRT_StyledTableBodyCell>
+    </TableCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -1,7 +1,7 @@
 import React, { FC, MouseEvent } from 'react';
-import { alpha, styled, TableRow as MuiTableRow } from '@mui/material';
+import { alpha, TableCell, TableRow } from '@mui/material';
 import {
-  MRT_StyledTableBodyCell,
+  commonTableBodyCellStyles,
   MRT_TableBodyCell,
 } from './MRT_TableBodyCell';
 import { useMRT } from '../useMRT';
@@ -11,14 +11,6 @@ import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
 import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
 import { MRT_Cell, MRT_Row } from '..';
 
-export const TableRow = styled(MuiTableRow, {
-  shouldForwardProp: (prop) => prop !== 'isSelected',
-})<{ isSelected?: boolean }>(({ isSelected, theme }) => ({
-  backgroundColor: isSelected
-    ? alpha(theme.palette.primary.light, 0.1)
-    : 'transparent',
-}));
-
 interface Props {
   row: MRT_Row;
 }
@@ -34,6 +26,9 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     onRowClick,
     positionActionsColumn,
     renderDetailPanel,
+    tableInstance: {
+      state: { densePadding },
+    },
   } = useMRT();
 
   const mTableBodyRowProps =
@@ -46,22 +41,31 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
     ...row.getRowProps(),
     style: {
       ...row.getRowProps().style,
-      ...(mTableBodyRowProps?.style ?? {}),
+      ...mTableBodyRowProps?.style,
     },
   };
 
   return (
     <>
       <TableRow
-        isSelected={row.isSelected}
         hover
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.(event, row)
         }
         {...tableRowProps}
+        sx={(theme) =>
+          ({
+            backgroundColor: row.isSelected
+              ? alpha(theme.palette.primary.light, 0.1)
+              : 'transparent',
+            ...tableRowProps?.sx,
+          } as any)
+        }
       >
         {enableRowNumbers && (
-          <MRT_StyledTableBodyCell>{row.index + 1}</MRT_StyledTableBodyCell>
+          <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>
+            {row.index + 1}
+          </TableCell>
         )}
         {(enableRowActions || enableRowEditing) &&
           positionActionsColumn === 'first' && (

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,22 +1,8 @@
 import React, { FC, MouseEvent } from 'react';
-import {
-  Collapse,
-  styled,
-  TableCell as MuiTableCell,
-  TableRow,
-} from '@mui/material';
+import { Collapse, TableCell, TableRow } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
 
-const TableCell = styled(MuiTableCell, {
-  shouldForwardProp: (prop) => prop !== 'isExpanded',
-})<{ isExpanded?: boolean }>(({ isExpanded }) => ({
-  borderBottom: !isExpanded ? 'none' : undefined,
-  paddingBottom: isExpanded ? '1rem' : 0,
-  paddingTop: isExpanded ? '1rem' : 0,
-  transition: 'all 0.2s ease-in-out',
-}));
-
 interface Props {
   row: MRT_Row;
 }
@@ -30,20 +16,11 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
     tableInstance,
   } = useMRT();
 
-  const mTableBodyRowProps =
+  const tableRowProps =
     muiTableBodyRowProps instanceof Function
       ? muiTableBodyRowProps(row)
       : muiTableBodyRowProps;
 
-  const tableRowProps = {
-    ...mTableBodyRowProps,
-    ...row.getRowProps(),
-    style: {
-      ...row.getRowProps().style,
-      ...(mTableBodyRowProps?.style ?? {}),
-    },
-  };
-
   const tableCellProps =
     muiTableDetailPanelProps instanceof Function
       ? muiTableDetailPanelProps(row)
@@ -53,11 +30,17 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
     <TableRow {...tableRowProps}>
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
-        isExpanded={row.isExpanded}
         onClick={(event: MouseEvent<HTMLTableCellElement>) =>
           onDetailPanelClick?.(event, row)
         }
         {...tableCellProps}
+        sx={{
+          borderBottom: !row.isExpanded ? 'none' : undefined,
+          pb: row.isExpanded ? '1rem' : 0,
+          pt: row.isExpanded ? '1rem' : 0,
+          transition: 'all 0.2s ease-in-out',
+          ...tableCellProps?.sx,
+        }}
       >
         <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>
       </TableCell>

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,13 +1,8 @@
 import React, { FC } from 'react';
-import { IconButton, styled, Tooltip } from '@mui/material';
+import { Box, IconButton, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_Row } from '..';
 
-const EditActionButtonWrappers = styled('div')({
-  display: 'flex',
-  gap: '0.75rem',
-});
-
 interface Props {
   row: MRT_Row;
 }
@@ -16,9 +11,9 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
   const {
     icons: { CancelIcon, SaveIcon },
     localization,
-    setCurrentEditingRow,
     onRowEditSubmit,
-    currentEditingRow,
+    setCurrentEditingRow,
+    tableInstance: { state: { currentEditingRow } },
   } = useMRT();
 
   const handleCancel = () => {
@@ -32,7 +27,7 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
   };
 
   return (
-    <EditActionButtonWrappers>
+    <Box sx={{ display: 'flex', gap: '0.75rem' }}>
       <Tooltip arrow title={localization.rowActionButtonCancel}>
         <IconButton
           aria-label={localization.rowActionButtonCancel}
@@ -50,6 +45,6 @@ export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
           <SaveIcon />
         </IconButton>
       </Tooltip>
-    </EditActionButtonWrappers>
+    </Box>
   );
 };

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,24 +1,23 @@
 import React, { FC } from 'react';
-import { IconButton } from '@mui/material';
+import { IconButton, TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
   const {
-    tableInstance,
-    localization,
     anyRowsExpanded,
-    densePadding,
     icons: { DoubleArrowDownIcon },
+    localization,
+    tableInstance,
   } = useMRT();
 
   return (
-    <MRT_TableButtonCell
+    <TableCell
       size="small"
-      densePadding={densePadding}
       {...tableInstance.getToggleAllRowsExpandedProps()}
+      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
     >
       <IconButton
         aria-label={localization.expandAllButtonTitle}
@@ -33,6 +32,6 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
           }}
         />
       </IconButton>
-    </MRT_TableButtonCell>
+    </TableCell>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,15 +1,8 @@
 import React, { FC } from 'react';
-import { IconButton, styled } from '@mui/material';
+import { IconButton, TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 import { MRT_Row } from '..';
-
-const TableCell = styled(MRT_TableButtonCell, {
-  shouldForwardProp: (prop) => prop !== 'depth',
-})<{ depth: number }>(({ depth }) => ({
-  paddingLeft: `${depth + 0.5}rem`,
-  textAlign: 'left',
-}));
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
 interface Props {
   row: MRT_Row;
@@ -17,14 +10,23 @@ interface Props {
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
   const {
-    densePadding,
     icons: { ExpandMoreIcon },
     localization,
     renderDetailPanel,
+    tableInstance: {
+      state: { densePadding },
+    },
   } = useMRT();
 
   return (
-    <TableCell size="small" densePadding={densePadding} depth={row.depth}>
+    <TableCell
+      size="small"
+      sx={{
+        ...commonTableBodyButtonCellStyles(densePadding),
+        pl: `${row.depth + 0.5}rem`,
+        textAlign: 'left',
+      }}
+    >
       <IconButton
         aria-label={localization.expandButtonTitle}
         disabled={!row.canExpand && !renderDetailPanel}

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -6,10 +6,12 @@ interface Props extends IconButtonProps {}
 
 export const MRT_FullScreenToggleButton: FC<Props> = ({ ...rest }) => {
   const {
-    fullScreen,
     icons: { FullscreenExitIcon, FullscreenIcon },
     localization,
     setFullScreen,
+    tableInstance: {
+      state: { fullScreen },
+    },
   } = useMRT();
 
   return (

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -4,20 +4,14 @@ import {
   IconButton,
   Menu,
   Tooltip,
-  styled,
   Divider,
   IconButtonProps,
+  Box,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_ColumnInstance } from '..';
 
-const MenuButtons = styled('div')({
-  display: 'flex',
-  justifyContent: 'space-between',
-  padding: '0 0.5rem 0.5rem 0.5rem',
-});
-
 interface Props extends IconButtonProps {}
 
 export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
@@ -50,7 +44,13 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
         open={!!anchorEl}
         onClose={() => setAnchorEl(null)}
       >
-        <MenuButtons>
+        <Box
+          sx={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            p: '0 0.5rem 0.5rem 0.5rem',
+          }}
+        >
           <Button
             disabled={
               !tableInstance.getToggleHideAllColumnsProps().checked &&
@@ -66,7 +66,7 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
           >
             {localization.columnShowHideMenuShowAll}
           </Button>
-        </MenuButtons>
+        </Box>
         <Divider />
         {tableInstance.columns.map((column: MRT_ColumnInstance, index) => (
           <MRT_ShowHideColumnsMenu

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -1,20 +1,9 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
+import { IconButton, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { MRT_HeaderGroup } from '..';
 
-const IconButton = styled(MuiIconButton)({
-  opacity: 0.5,
-  transition: 'opacity 0.2s',
-  marginRight: '2px',
-  height: '1.6rem',
-  width: '1.6rem',
-  '&:hover': {
-    opacity: 1,
-  },
-});
-
 interface Props {
   column: MRT_HeaderGroup;
 }
@@ -45,6 +34,16 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
           aria-label={localization.columnActionMenuButtonTitle}
           onClick={handleClick}
           size="small"
+          sx={{
+            opacity: 0.5,
+            transition: 'opacity 0.2s',
+            marginRight: '2px',
+            height: '1.6rem',
+            width: '1.6rem',
+            '&:hover': {
+              opacity: 1,
+            },
+          }}
         >
           <MoreVertIcon />
         </IconButton>

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -6,10 +6,12 @@ interface Props extends IconButtonProps {}
 
 export const MRT_ToggleDensePaddingButton: FC<Props> = ({ ...rest }) => {
   const {
-    densePadding,
     setDensePadding,
     localization,
     icons: { DensityMediumIcon, DensitySmallIcon },
+    tableInstance: {
+      state: { densePadding },
+    },
   } = useMRT();
 
   return (

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -6,10 +6,10 @@ interface Props extends IconButtonProps {}
 
 export const MRT_ToggleFiltersButton: FC<Props> = ({ ...rest }) => {
   const {
+    icons: { FilterListIcon, FilterListOffIcon },
     localization,
     setShowFilters,
-    showFilters,
-    icons: { FilterListIcon, FilterListOffIcon },
+    tableInstance: { state: { showFilters } },
   } = useMRT();
 
   return (

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,12 +1,12 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
+import { IconButton, TableCell, Tooltip } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
-import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
 import { MRT_Row } from '..';
+import { commonTableBodyButtonCellStyles } from '../body/MRT_TableBodyCell';
 
-const IconButton = styled(MuiIconButton)({
+const commonIconButtonStyles = {
   opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
@@ -15,7 +15,7 @@ const IconButton = styled(MuiIconButton)({
   '&:hover': {
     opacity: 1,
   },
-});
+};
 
 interface Props {
   row: MRT_Row;
@@ -23,8 +23,6 @@ interface Props {
 
 export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   const {
-    currentEditingRow,
-    densePadding,
     enableRowEditing,
     icons: { EditIcon, MoreHorizIcon },
     localization,
@@ -48,10 +46,12 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
   };
 
   return (
-    <MRT_TableButtonCell densePadding={densePadding}>
+    <TableCell
+      sx={commonTableBodyButtonCellStyles(tableInstance.state.densePadding)}
+    >
       {renderRowActions ? (
         <>{renderRowActions(row, tableInstance)}</>
-      ) : row.id === currentEditingRow?.id ? (
+      ) : row.id === tableInstance.state.currentEditingRow?.id ? (
         <MRT_EditActionButtons row={row} />
       ) : !renderRowActionMenuItems && enableRowEditing ? (
         <Tooltip
@@ -59,20 +59,27 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
           arrow
           title={localization.rowActionMenuItemEdit}
         >
-          <IconButton onClick={handleEdit}>
+          <IconButton sx={commonIconButtonStyles} onClick={handleEdit}>
             <EditIcon />
           </IconButton>
         </Tooltip>
       ) : renderRowActionMenuItems ? (
         <>
-          <IconButton
-            aria-label={localization.rowActionMenuButtonTitle}
+          <Tooltip
+            arrow
+            enterDelay={1000}
+            enterNextDelay={1000}
             title={localization.rowActionMenuButtonTitle}
-            onClick={handleOpenRowActionMenu}
-            size="small"
           >
-            <MoreHorizIcon />
-          </IconButton>
+            <IconButton
+              aria-label={localization.rowActionMenuButtonTitle}
+              onClick={handleOpenRowActionMenu}
+              size="small"
+              sx={commonIconButtonStyles}
+            >
+              <MoreHorizIcon />
+            </IconButton>
+          </Tooltip>
           <MRT_RowActionMenu
             anchorEl={anchorEl}
             handleEdit={handleEdit}
@@ -81,6 +88,6 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
           />
         </>
       ) : null}
-    </MRT_TableButtonCell>
+    </TableCell>
   );
 };