material-react-table 0.3.0 → 0.3.4

package/src/body/MRT_TableBody.tsx

@@ -1,9 +1,5 @@
 import React, { FC } from 'react';
-import {
-  CircularProgress,
-  styled,
-  TableBody as MuiTableBody,
-} from '@mui/material';
+import { styled, TableBody as MuiTableBody } from '@mui/material';
 import { MRT_TableBodyRow } from './MRT_TableBodyRow';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
@@ -11,47 +7,28 @@ const TableBody = styled(MuiTableBody)({
   overflowY: 'hidden',
 });
 
-const CircularProgressWrapper = styled('div')({
-  backgroundColor: 'rgba(255, 255, 255, 0.5)',
-  display: 'grid',
-  height: '100%',
-  justifyContent: 'center',
-  margin: 'auto',
-  paddingTop: '5rem',
-  position: 'fixed',
-  width: 'calc(100% - 2rem)',
-});
-
 interface Props {}
 
 export const MRT_TableBody: FC<Props> = () => {
-  const {
-    tableInstance,
-    tableBodyProps,
-    isLoading,
-    enablePagination,
-    overrideTableBodyComponent,
-  } = useMaterialReactTable();
+  const { tableInstance, muiTableBodyProps, manualPagination } = useMaterialReactTable();
 
-  if (overrideTableBodyComponent) {
-    return <>{overrideTableBodyComponent(tableInstance)}</>;
-  }
+  const rows = manualPagination ? tableInstance.rows : tableInstance.page;
 
-  const rows = enablePagination ? tableInstance.page : tableInstance.rows;
+  const tableBodyProps = {
+    ...muiTableBodyProps,
+    ...tableInstance.getTableBodyProps(),
+    style: {
+      ...tableInstance.getTableBodyProps().style,
+      ...(muiTableBodyProps?.style ?? {}),
+    },
+  };
 
   return (
-    <>
-      <TableBody {...tableBodyProps} {...tableInstance.getTableBodyProps()}>
-        {isLoading && (
-          <CircularProgressWrapper>
-            <CircularProgress />
-          </CircularProgressWrapper>
-        )}
-        {rows.map((row, index) => {
-          tableInstance.prepareRow(row);
-          return <MRT_TableBodyRow key={`${index}-${row.id}`} row={row} />;
-        })}
-      </TableBody>
-    </>
+    <TableBody {...tableBodyProps}>
+      {rows.map((row) => {
+        tableInstance.prepareRow(row);
+        return <MRT_TableBodyRow key={row.getRowProps().key} row={row} />;
+      })}
+    </TableBody>
   );
 };

package/src/body/MRT_TableBodyCell.tsx

@@ -1,29 +1,53 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableCell } from '@mui/material';
+import { styled, TableCell as MuiTableCell } from '@mui/material';
 import { Cell } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
+
+const TableCell = styled(MuiTableCell, {
+  shouldForwardProp: (prop) => prop !== 'densePadding',
+})<{ densePadding?: boolean }>(({ densePadding }) => ({
+  padding: densePadding ? '0.5rem' : '1rem',
+  transition: 'all 0.2s ease-in-out',
+  whiteSpace: densePadding ? 'nowrap' : 'normal',
+}));
 
 interface Props {
   cell: Cell;
 }
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
-  const { tableInstance, overrideTableBodyCellComponent, onCellClick } =
+  const { onCellClick, muiTableBodyCellProps, densePadding, currentEditingRow } =
     useMaterialReactTable();
 
-  if (overrideTableBodyCellComponent) {
-    return <>{overrideTableBodyCellComponent(cell, tableInstance)}</>;
-  }
+  const mTableCellBodyProps =
+    muiTableBodyCellProps instanceof Function ? muiTableBodyCellProps(cell) : muiTableBodyCellProps;
+
+  const mcTableCellBodyProps =
+    cell.column.muiTableBodyCellProps instanceof Function
+      ? cell.column.muiTableBodyCellProps(cell)
+      : cell.column.muiTableBodyCellProps;
+
+  const tableCellProps = {
+    ...mTableCellBodyProps,
+    ...mcTableCellBodyProps,
+    ...cell.getCellProps(),
+    style: {
+      ...cell.getCellProps().style,
+      ...(mTableCellBodyProps?.style ?? {}),
+      ...(mcTableCellBodyProps?.style ?? {}),
+    },
+  };
 
   return (
     <TableCell
-      onClick={(event: MouseEvent<HTMLTableCellElement>) =>
-        onCellClick?.(event, cell)
-      }
-      variant="body"
-      {...cell.getCellProps()}
+      densePadding={densePadding}
+      onClick={(event: MouseEvent<HTMLTableCellElement>) => onCellClick?.(event, cell)}
+      {...tableCellProps}
     >
-      {cell.isPlaceholder ? null : cell.isAggregated ? (
+      {currentEditingRow?.id === cell.row.id ? (
+        <MRT_EditCellTextField cell={cell} />
+      ) : cell.isPlaceholder ? null : cell.isAggregated ? (
         cell.render('Aggregated')
       ) : cell.isGrouped ? (
         <span>
@@ -32,6 +56,7 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
       ) : (
         cell.render('Cell')
       )}
+      {}
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -1,12 +1,18 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableRow } from '@mui/material';
+import { alpha, styled, TableRow as MuiTableRow } from '@mui/material';
 import { Row } from 'react-table';
 import { MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
 import { MRT_SelectCheckbox } from '../inputs/MRT_SelectCheckbox';
-import { MRT_TableSpacerCell } from '../table/MRT_TableSpacerCell';
+import { MRT_ToggleRowActionMenuButton } from '../buttons/MRT_ToggleRowActionMenuButton';
+
+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: Row;
@@ -14,43 +20,46 @@ interface Props {
 
 export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
   const {
-    overrideTableBodyRowComponent,
     anyRowsCanExpand,
+    enableRowActions,
     enableSelection,
-    enableSubRowTree,
-    enableColumnHiding,
+    muiTableBodyRowProps,
     onRowClick,
+    positionActionsColumn,
     renderDetailPanel,
-    tableInstance,
   } = useMaterialReactTable();
 
-  if (overrideTableBodyRowComponent) {
-    return <>{overrideTableBodyRowComponent(row, tableInstance)}</>;
-  }
+  const mTableBodyRowProps =
+    muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
+
+  const tableRowProps = {
+    ...mTableBodyRowProps,
+    ...row.getRowProps(),
+    style: {
+      ...row.getRowProps().style,
+      ...(mTableBodyRowProps?.style ?? {}),
+    },
+  };
 
   return (
     <>
       <TableRow
-        onClick={(event: MouseEvent<HTMLTableRowElement>) =>
-          onRowClick?.(event, row)
-        }
-        {...row.getRowProps()}
+        isSelected={row.isSelected}
+        hover
+        onClick={(event: MouseEvent<HTMLTableRowElement>) => onRowClick?.(event, row)}
+        {...tableRowProps}
       >
-        {((enableSubRowTree && anyRowsCanExpand) || renderDetailPanel) &&
-          (row.canExpand || renderDetailPanel ? (
-            <MRT_ExpandButton row={row} />
-          ) : (
-            <MRT_TableSpacerCell
-              width={`${
-                renderDetailPanel ? 2 : tableInstance.expandedDepth + 0.5
-              }rem`}
-            />
-          ))}
+        {enableRowActions && positionActionsColumn === 'first' && (
+          <MRT_ToggleRowActionMenuButton row={row} />
+        )}
+        {(anyRowsCanExpand || renderDetailPanel) && <MRT_ExpandButton row={row} />}
         {enableSelection && <MRT_SelectCheckbox row={row} />}
-        {row.cells.map((cell, index) => (
-          <MRT_TableBodyCell key={`${index}-${cell.value}`} cell={cell} />
+        {row.cells.map((cell) => (
+          <MRT_TableBodyCell key={cell.getCellProps().key} cell={cell} />
         ))}
-        {enableColumnHiding && <MRT_TableSpacerCell />}
+        {enableRowActions && positionActionsColumn === 'last' && (
+          <MRT_ToggleRowActionMenuButton row={row} />
+        )}
       </TableRow>
       {renderDetailPanel && <MRT_TableDetailPanel row={row} />}
     </>

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,8 +1,17 @@
-import React, { FC } from 'react';
-import { Collapse, TableCell, TableRow } from '@mui/material';
+import React, { FC, MouseEvent } from 'react';
+import { Collapse, styled, TableCell as MuiTableCell, TableRow } from '@mui/material';
 import { Row } from 'react-table';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 
+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: Row;
 }
@@ -11,25 +20,42 @@ export const MRT_TableDetailPanel: FC<Props> = ({ row }) => {
   const {
     tableInstance,
     renderDetailPanel,
-    overrideTableDetailPanelComponent,
-    tableDetailPanelProps,
+    muiTableDetailPanelProps,
+    muiTableBodyRowProps,
+    onDetailPanelClick,
   } = useMaterialReactTable();
 
-  if (overrideTableDetailPanelComponent) {
-    return <>{overrideTableDetailPanelComponent(row, tableInstance)}</>;
-  }
+  const mTableBodyRowProps =
+    muiTableBodyRowProps instanceof Function ? muiTableBodyRowProps(row) : muiTableBodyRowProps;
+
+  const tableRowProps = {
+    ...mTableBodyRowProps,
+    ...row.getToggleRowExpandedProps(),
+    style: {
+      ...row.getToggleRowExpandedProps().style,
+      ...(mTableBodyRowProps?.style ?? {}),
+    },
+  };
+
+  const mTableDetailPanelProps =
+    muiTableDetailPanelProps instanceof Function
+      ? muiTableDetailPanelProps(row)
+      : muiTableDetailPanelProps;
+
+  const tableCellProps = {
+    ...mTableDetailPanelProps,
+    style: {
+      ...(mTableDetailPanelProps?.style ?? {}),
+    },
+  };
 
   return (
-    <TableRow {...row.getToggleRowExpandedProps()}>
+    <TableRow hover {...tableRowProps}>
       <TableCell
         colSpan={tableInstance.visibleColumns.length + 10}
-        style={{
-          borderBottom: !row.isExpanded ? 'none' : undefined,
-          paddingBottom: row.isExpanded ? '1rem' : 0,
-          paddingTop: row.isExpanded ? '1rem' : 0,
-          transition: 'all 0.2s',
-        }}
-        {...tableDetailPanelProps}
+        isExpanded={row.isExpanded}
+        onClick={(event: MouseEvent<HTMLTableCellElement>) => onDetailPanelClick?.(event, row)}
+        {...tableCellProps}
       >
         <Collapse in={row.isExpanded}>{renderDetailPanel?.(row)}</Collapse>
       </TableCell>

package/src/buttons/MRT_EditActionButtons.tsx

@@ -0,0 +1,49 @@
+import React, { FC } from 'react';
+import { IconButton, styled, Tooltip } from '@mui/material';
+import SaveIcon from '@mui/icons-material/Save';
+import CancelIcon from '@mui/icons-material/Cancel';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { Row } from 'react-table';
+
+const EditActionButtonWrappers = styled('div')({
+  display: 'flex',
+  gap: '0.75rem',
+});
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_EditActionButtons: FC<Props> = ({ row }) => {
+  const { localization, setCurrentEditingRow, onRowEditSubmit, currentEditingRow } =
+    useMaterialReactTable();
+
+  const handleCancel = () => {
+    row.values = row.original;
+    setCurrentEditingRow(null);
+  };
+
+  const handleSave = async () => {
+    await onRowEditSubmit?.(currentEditingRow ?? row);
+    setCurrentEditingRow(null);
+  };
+
+  return (
+    <EditActionButtonWrappers>
+      <Tooltip arrow title={localization?.rowActionButtonCancel ?? ''}>
+        <IconButton aria-label={localization?.rowActionButtonCancel} onClick={handleCancel}>
+          <CancelIcon />
+        </IconButton>
+      </Tooltip>
+      <Tooltip arrow title={localization?.rowActionButtonSave ?? ''}>
+        <IconButton
+          aria-label={localization?.rowActionButtonSave}
+          color="info"
+          onClick={handleSave}
+        >
+          <SaveIcon />
+        </IconButton>
+      </Tooltip>
+    </EditActionButtonWrappers>
+  );
+};

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,23 +1,26 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
-import ArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
+import { IconButton, styled } from '@mui/material';
+import MuiArrowRightIcon from '@mui/icons-material/KeyboardDoubleArrowDown';
 import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+
+const ArrowRightIcon = styled(MuiArrowRightIcon, {
+  shouldForwardProp: (prop) => prop !== 'rotation',
+})<{ rotation?: number }>(({ rotation }) => ({
+  transform: `rotate(${rotation}deg)`,
+  transition: 'transform 0.2s',
+}));
 
 interface Props {}
 
 export const MRT_ExpandAllButton: FC<Props> = () => {
-  const { tableInstance, localization, anyRowsExpanded, renderDetailPanel } =
-    useMaterialReactTable();
+  const { tableInstance, localization, anyRowsExpanded, densePadding } = useMaterialReactTable();
 
   return (
-    <TableCell
+    <MRT_TableButtonCell
       size="small"
+      densePadding={densePadding}
       {...tableInstance.getToggleAllRowsExpandedProps()}
-      style={{
-        padding: '0.5rem',
-        paddingRight: '0',
-        width: `${renderDetailPanel ? 2 : tableInstance.expandedDepth + 2}rem`,
-      }}
     >
       <IconButton
         aria-label={localization?.expandAllButtonTitle}
@@ -25,16 +28,9 @@ export const MRT_ExpandAllButton: FC<Props> = () => {
       >
         <ArrowRightIcon
           fontSize="small"
-          style={{
-            transform: tableInstance.isAllRowsExpanded
-              ? 'rotate(-180deg)'
-              : anyRowsExpanded
-              ? 'rotate(-90deg)'
-              : 'rotate(0)',
-            transition: 'transform 0.2s',
-          }}
+          rotation={tableInstance.isAllRowsExpanded ? -180 : anyRowsExpanded ? -90 : 0}
         />
       </IconButton>
-    </TableCell>
+    </MRT_TableButtonCell>
   );
 };

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,40 +1,42 @@
 import React, { FC } from 'react';
-import { IconButton, TableCell } from '@mui/material';
+import { IconButton, styled } from '@mui/material';
 import { Row } from 'react-table';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import MuiExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import { useMaterialReactTable } from '../useMaterialReactTable';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+
+const TableCell = styled(MRT_TableButtonCell, {
+  shouldForwardProp: (prop) => prop !== 'depth',
+})<{ depth: number }>(({ depth }) => ({
+  paddingLeft: `${depth + 0.5}rem`,
+  textAlign: 'left',
+}));
+
+const ExpandMoreIcon = styled(MuiExpandMoreIcon, {
+  shouldForwardProp: (prop) => prop !== 'rotation',
+})<{ rotation?: number }>(({ rotation }) => ({
+  transform: `rotate(${rotation}deg)`,
+  transition: 'transform 0.2s',
+}));
 
 interface Props {
   row: Row;
 }
 
 export const MRT_ExpandButton: FC<Props> = ({ row }) => {
-  const { localization, tableInstance, renderDetailPanel } =
-    useMaterialReactTable();
+  const { localization, densePadding, renderDetailPanel } = useMaterialReactTable();
 
   return (
-    <TableCell
-      size="small"
-      {...row.getToggleRowExpandedProps()}
-      style={{
-        padding: '0.5rem',
-        paddingRight: '0',
-        paddingLeft: `${row.depth + 0.5}rem`,
-        width: `${
-          renderDetailPanel ? 2 : tableInstance.expandedDepth - row.depth + 2
-        }rem`,
-      }}
-    >
+    <TableCell size="small" densePadding={densePadding} depth={row.depth}>
       <IconButton
         aria-label={localization?.expandButtonTitle}
+        disabled={!row.canExpand && !renderDetailPanel}
         title={localization?.expandButtonTitle}
+        {...row.getToggleRowExpandedProps()}
       >
         <ExpandMoreIcon
-          fontSize="small"
-          style={{
-            transform: row.isExpanded ? 'rotate(-180deg)' : 'rotate(0)',
-            transition: 'transform 0.2s',
-          }}
+          fontSize={row.canExpand || renderDetailPanel ? 'medium' : 'small'}
+          rotation={!row.canExpand && !renderDetailPanel ? -90 : row.isExpanded ? -180 : 0}
         />
       </IconButton>
     </TableCell>

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent, useState } from 'react';
-import { IconButton, Menu, TableCell } from '@mui/material';
+import { IconButton, Menu, Tooltip } from '@mui/material';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import { useMaterialReactTable } from '../useMaterialReactTable';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
@@ -16,28 +16,21 @@ export const MRT_ShowHideColumnsButton: FC<Props> = () => {
   };
 
   return (
-    <TableCell size="small" style={{ width: '2rem', padding: '0.75rem 0' }}>
-      <IconButton
-        aria-label={localization?.showHideColumnsButtonTitle}
-        title={localization?.showHideColumnsButtonTitle}
-        onClick={handleClick}
-        size="small"
-        style={{ margin: '0 0 0 -0.75rem' }}
-      >
-        <ViewColumnIcon />
-      </IconButton>
-      <Menu
-        anchorEl={anchorEl}
-        open={!!anchorEl}
-        onClose={() => setAnchorEl(null)}
-      >
+    <>
+      <Tooltip arrow title={localization?.showHideColumnsButtonTitle ?? ''}>
+        <IconButton
+          aria-label={localization?.showHideColumnsButtonTitle}
+          onClick={handleClick}
+          size="small"
+        >
+          <ViewColumnIcon />
+        </IconButton>
+      </Tooltip>
+      <Menu anchorEl={anchorEl} open={!!anchorEl} onClose={() => setAnchorEl(null)}>
         {tableInstance.columns.map((column, index) => (
-          <MRT_ShowHideColumnsMenu
-            key={`${index}-${column.id}`}
-            column={column}
-          />
+          <MRT_ShowHideColumnsMenu key={`${index}-${column.id}`} column={column} />
         ))}
       </Menu>
-    </TableCell>
+    </>
   );
 };

package/src/buttons/MRT_ToggleColumnActionMenuButton.tsx

@@ -6,11 +6,11 @@ import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 import { HeaderGroup } from 'react-table';
 
 const IconButton = styled(MuiIconButton)({
-  opacity: 0.2,
+  opacity: 0.5,
   transition: 'opacity 0.2s',
   marginRight: '2px',
-  height: '2rem',
-  width: '2rem',
+  height: '1.6rem',
+  width: '1.6rem',
   '&:hover': {
     opacity: 1,
   },
@@ -35,17 +35,13 @@ export const MRT_ToggleColumnActionMenuButton: FC<Props> = ({ column }) => {
     <>
       <IconButton
         aria-label={localization?.columnActionMenuButtonTitle}
-        title={localization?.columnActionMenuButtonTitle}
         onClick={handleClick}
         size="small"
+        title={localization?.columnActionMenuButtonTitle}
       >
         <MoreVertIcon />
       </IconButton>
-      <MRT_ColumnActionMenu
-        anchorEl={anchorEl}
-        column={column}
-        setAnchorEl={setAnchorEl}
-      />
+      <MRT_ColumnActionMenu anchorEl={anchorEl} column={column} setAnchorEl={setAnchorEl} />
     </>
   );
 };

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -0,0 +1,23 @@
+import React, { FC } from 'react';
+import { IconButton, Tooltip } from '@mui/material';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import FilterListIcon from '@mui/icons-material/FilterList';
+import FilterListOffIcon from '@mui/icons-material/FilterListOff';
+
+type Props = {};
+
+export const MRT_ToggleFiltersButton: FC<Props> = () => {
+  const { localization, setShowFilters, showFilters } = useMaterialReactTable();
+
+  return (
+    <Tooltip arrow title={localization?.toggleFilterButtonTitle ?? ''}>
+      <IconButton
+        aria-label={localization?.toggleFilterButtonTitle}
+        onClick={() => setShowFilters(!showFilters)}
+        size="small"
+      >
+        {showFilters ? <FilterListOffIcon /> : <FilterListIcon />}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -0,0 +1,83 @@
+import React, { FC, MouseEvent, useState } from 'react';
+import { IconButton as MuiIconButton, styled, Tooltip } from '@mui/material';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+import EditIcon from '@mui/icons-material/Edit';
+import { useMaterialReactTable } from '../useMaterialReactTable';
+import { Row } from 'react-table';
+import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
+import { MRT_EditActionButtons } from './MRT_EditActionButtons';
+import { MRT_TableButtonCell } from '../table/MRT_TableButtonCell';
+
+const IconButton = styled(MuiIconButton)({
+  opacity: 0.5,
+  transition: 'opacity 0.2s',
+  marginRight: '2px',
+  height: '2rem',
+  width: '2rem',
+  '&:hover': {
+    opacity: 1,
+  },
+});
+
+interface Props {
+  row: Row;
+}
+
+export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row }) => {
+  const {
+    currentEditingRow,
+    densePadding,
+    localization,
+    renderRowActionMenuItems,
+    enableRowEditing,
+    setCurrentEditingRow,
+    renderRowActions,
+    tableInstance,
+  } = useMaterialReactTable();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+
+  const handleOpenRowActionMenu = (event: MouseEvent<HTMLElement>) => {
+    event.stopPropagation();
+    event.preventDefault();
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleEdit = () => {
+    setCurrentEditingRow({ ...row });
+    setAnchorEl(null);
+  };
+
+  return (
+    <MRT_TableButtonCell densePadding={densePadding}>
+      {renderRowActions ? (
+        <>{renderRowActions(row, tableInstance)}</>
+      ) : row.id === currentEditingRow?.id ? (
+        <MRT_EditActionButtons row={row} />
+      ) : !renderRowActionMenuItems && enableRowEditing ? (
+        <Tooltip placement="right" arrow title={localization?.rowActionMenuItemEdit ?? ''}>
+          <IconButton onClick={handleEdit}>
+            <EditIcon />
+          </IconButton>
+        </Tooltip>
+      ) : renderRowActionMenuItems ? (
+        <>
+          <IconButton
+            aria-label={localization?.rowActionMenuButtonTitle}
+            title={localization?.rowActionMenuButtonTitle}
+            onClick={handleOpenRowActionMenu}
+            size="small"
+          >
+            <MoreHorizIcon />
+          </IconButton>
+          <MRT_RowActionMenu
+            anchorEl={anchorEl}
+            handleEdit={handleEdit}
+            row={row}
+            setAnchorEl={setAnchorEl}
+          />
+        </>
+      ) : null}
+    </MRT_TableButtonCell>
+  );
+};