material-react-table 0.6.2 → 0.6.5

package/dist/menus/MRT_ColumnActionMenu.d.ts

@@ -8,7 +8,6 @@ export declare const commonMenuItemStyles: {
 };
 export declare const commonListItemStyles: {
     display: string;
-    gap: string;
     alignItems: string;
 };
 interface Props {

package/dist/toolbar/MRT_LinearProgressBar.d.ts

@@ -0,0 +1,5 @@
+import { FC } from 'react';
+interface Props {
+}
+export declare const MRT_LinearProgressBar: FC<Props>;
+export {};

package/dist/toolbar/MRT_ToolbarTop.d.ts

@@ -1,4 +1,15 @@
 import { FC } from 'react';
+import { Theme } from '@mui/material';
+import { MRT_TableInstance } from '..';
+export declare const commonToolbarStyles: (theme: Theme, tableInstance: MRT_TableInstance) => {
+    backgroundColor: string;
+    backgroundImage: string;
+    display: string;
+    opacity: number;
+    p: string;
+    width: string;
+    zIndex: number;
+};
 interface Props {
 }
 export declare const MRT_ToolbarTop: FC<Props>;

package/dist/useMRT.d.ts

@@ -1,4 +1,4 @@
-import React, { PropsWithChildren, Dispatch, SetStateAction } from 'react';
+import React, { Dispatch, PropsWithChildren, SetStateAction } from 'react';
 import type { MRT_FilterType, MRT_Row, MRT_TableInstance } from '.';
 import { MRT_FILTER_TYPE } from './enums';
 import { MRT_Icons } from './icons';

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { MRT_ColumnInterface } from '.';
+export declare const findLowestLevelCols: (columns: MRT_ColumnInterface[]) => MRT_ColumnInterface<{}>[];

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.6.2",
+  "version": "0.6.5",
   "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.",

package/src/MaterialReactTable.tsx

@@ -90,7 +90,7 @@ export type MRT_TableOptions<D extends {} = {}> = TableOptions<D> &
   UseRowSelectOptions<D> &
   UseRowStateOptions<D> &
   UseSortByOptions<D> & {
-    columns: (Column<D> & MRT_ColumnInterface)[];
+    columns: MRT_ColumnInterface[];
     data: D[];
     initialState?: Partial<MRT_TableState>;
   };
@@ -107,13 +107,13 @@ export type MRT_TableInstance<D extends {} = {}> = TableInstance<D> &
   UseRowStateInstanceProps<D> &
   UseSortByInstanceProps<D> & {
     columns: (Column<D> & MRT_ColumnInstance<D>)[];
-    headerGroups: MRT_HeaderGroup<D>[];
     footerGroups: MRT_HeaderGroup<D>[];
-    state: MRT_TableState<D>;
-    rows: MRT_Row<D>[];
+    getToggleAllRowsExpandedProps: () => void;
+    headerGroups: MRT_HeaderGroup<D>[];
     page: MRT_Row<D>[];
     resetResizing: () => void;
-    getToggleAllRowsExpandedProps: () => void;
+    rows: MRT_Row<D>[];
+    state: MRT_TableState<D>;
   };
 
 export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
@@ -132,13 +132,13 @@ export type MRT_ColumnInterface<D extends {} = {}> = ColumnInterface<D> &
     Filter?: ({ column }: { column: MRT_HeaderGroup<D> }) => ReactNode;
     Footer?: string;
     Header?: string;
-    accessor: string;
-    columns?: (Column<D> & MRT_ColumnInterface<D>)[];
+    accessor?: string;
+    columns?: MRT_ColumnInterface<D>[];
+    disableEditing?: boolean;
     disableFilters?: boolean;
-    editable?: boolean;
     filter?: MRT_FilterType | string | FilterType<D>;
     filterSelectOptions?: (string | { text: string; value: string })[];
-    filterTypes: MRT_FILTER_TYPE[];
+    filterTypes?: (MRT_FILTER_TYPE | string)[];
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
       | ((cell: MRT_Cell<D>) => TextFieldProps);
@@ -314,7 +314,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
       event: MouseEvent<HTMLTableCellElement>,
       cell: MRT_Cell<D>,
     ) => void;
-    onColumnHide?: (column: Column<D>, visibleColumns: Column<D>[]) => void;
+    onColumnHide?: (column: Column<D>, hiddenColumns?: string[]) => void;
     onDetailPanelClick?: (
       event: MouseEvent<HTMLTableCellElement>,
       row: Row<D>,
@@ -367,7 +367,7 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     ) => ReactNode;
   };
 
-export default <D extends {}>({
+export default <D extends {} = {}>({
   defaultColumn = { minWidth: 50, maxWidth: 1000 },
   filterTypes,
   globalFilter = 'fuzzy',
@@ -380,9 +380,11 @@ export default <D extends {}>({
   ...rest
 }: MaterialReactTableProps<D>) => (
   <MaterialReactTableProvider
+    //@ts-ignore
     defaultColumn={defaultColumn}
-    // @ts-ignore
+    //@ts-ignore
     filterTypes={{ ...defaultFilterFNs, ...filterTypes }}
+    //@ts-ignore
     globalFilter={globalFilter}
     icons={{ ...MRT_Default_Icons, ...icons }}
     localization={{ ...MRT_DefaultLocalization_EN, ...localization }}

package/src/body/MRT_TableBody.tsx

@@ -28,7 +28,9 @@ export const MRT_TableBody: FC<Props> = () => {
   return (
     <TableBody
       {...tableBodyProps}
-      sx={{ overflowY: 'hidden', ...tableBodyProps?.sx }}
+      sx={{
+        ...tableBodyProps?.sx,
+      }}
     >
       {rows.map((row: MRT_Row) => {
         tableInstance.prepareRow(row);

package/src/body/MRT_TableBodyCell.tsx

@@ -72,7 +72,8 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
           width={Math.random() * (120 - 60) + 60}
           {...muiTableBodyCellSkeletonProps}
         />
-      ) : currentEditingRow?.id === cell.row.id ? (
+      ) : !cell.column.disableEditing &&
+        currentEditingRow?.id === cell.row.id ? (
         <MRT_EditCellTextField cell={cell} />
       ) : cell.isPlaceholder ? null : cell.isAggregated ? (
         cell.render('Aggregated')

package/src/body/MRT_TableBodyRow.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { alpha, TableCell, TableRow } from '@mui/material';
+import { TableCell, TableRow } from '@mui/material';
 import {
   commonTableBodyCellStyles,
   MRT_TableBodyCell,
@@ -52,15 +52,8 @@ export const MRT_TableBodyRow: FC<Props> = ({ row }) => {
         onClick={(event: MouseEvent<HTMLTableRowElement>) =>
           onRowClick?.(event, row)
         }
+        selected={row.isSelected}
         {...tableRowProps}
-        sx={(theme) =>
-          ({
-            backgroundColor: row.isSelected
-              ? alpha(theme.palette.primary.light, 0.1)
-              : 'transparent',
-            ...tableRowProps?.sx,
-          } as any)
-        }
       >
         {enableRowNumbers && (
           <TableCell sx={{ ...commonTableBodyCellStyles(densePadding) }}>

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, MouseEvent } from 'react';
 import { IconButton, TableCell } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_Row } from '..';
@@ -12,12 +12,19 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
   const {
     icons: { ExpandMoreIcon },
     localization,
+    onRowExpandChange,
     renderDetailPanel,
     tableInstance: {
       state: { densePadding },
     },
   } = useMRT();
 
+  const handleToggleExpand = (event: MouseEvent<HTMLButtonElement>) => {
+    // @ts-ignore
+    row.getToggleRowExpandedProps()?.onClick(event);
+    onRowExpandChange?.(event, row);
+  };
+
   return (
     <TableCell
       size="small"
@@ -32,6 +39,7 @@ export const MRT_ExpandButton: FC<Props> = ({ row }) => {
         disabled={!row.canExpand && !renderDetailPanel}
         title={localization.expand}
         {...row.getToggleRowExpandedProps()}
+        onClick={handleToggleExpand}
       >
         <ExpandMoreIcon
           style={{

package/src/filtersFNs.ts

@@ -1,7 +1,7 @@
 import { matchSorter } from 'match-sorter';
 import { MRT_Row } from '.';
 
-export const fuzzyFilterFN = (
+export const fuzzy = (
   rows: MRT_Row[],
   columnIds: string[] | string,
   filterValue: string | number,
@@ -13,9 +13,9 @@ export const fuzzyFilterFN = (
     sorter: (rankedItems) => rankedItems,
   });
 
-fuzzyFilterFN.autoRemove = (val: any) => !val;
+fuzzy.autoRemove = (val: any) => !val;
 
-export const containsFilterFN = (
+export const contains = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -28,9 +28,9 @@ export const containsFilterFN = (
       .includes(filterValue.toString().toLowerCase().trim()),
   );
 
-containsFilterFN.autoRemove = (val: any) => !val;
+contains.autoRemove = (val: any) => !val;
 
-export const startsWithFilterFN = (
+export const startsWith = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -43,9 +43,9 @@ export const startsWithFilterFN = (
       .startsWith(filterValue.toString().toLowerCase().trim()),
   );
 
-startsWithFilterFN.autoRemove = (val: any) => !val;
+startsWith.autoRemove = (val: any) => !val;
 
-export const endsWithFilterFN = (
+export const endsWith = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -58,9 +58,9 @@ export const endsWithFilterFN = (
       .endsWith(filterValue.toString().toLowerCase().trim()),
   );
 
-endsWithFilterFN.autoRemove = (val: any) => !val;
+endsWith.autoRemove = (val: any) => !val;
 
-export const equalsFilterFN = (
+export const equals = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -71,9 +71,9 @@ export const equalsFilterFN = (
       filterValue.toString().toLowerCase().trim(),
   );
 
-equalsFilterFN.autoRemove = (val: any) => !val;
+equals.autoRemove = (val: any) => !val;
 
-export const notEqualsFilterFN = (
+export const notEquals = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -84,9 +84,9 @@ export const notEqualsFilterFN = (
       filterValue.toString().toLowerCase().trim(),
   );
 
-notEqualsFilterFN.autoRemove = (val: any) => !val;
+notEquals.autoRemove = (val: any) => !val;
 
-export const greaterThanFilterFN = (
+export const greaterThan = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -98,9 +98,9 @@ export const greaterThanFilterFN = (
         filterValue.toString().toLowerCase().trim(),
   );
 
-greaterThanFilterFN.autoRemove = (val: any) => !val;
+greaterThan.autoRemove = (val: any) => !val;
 
-export const lessThanFilterFN = (
+export const lessThan = (
   rows: MRT_Row[],
   id: string,
   filterValue: string | number,
@@ -112,33 +112,33 @@ export const lessThanFilterFN = (
         filterValue.toString().toLowerCase().trim(),
   );
 
-lessThanFilterFN.autoRemove = (val: any) => !val;
+lessThan.autoRemove = (val: any) => !val;
 
-export const emptyFilterFN = (
+export const empty = (
   rows: MRT_Row[],
   id: string,
   _filterValue: string | number,
 ) => rows.filter((row) => !row.values[id].toString().toLowerCase().trim());
 
-emptyFilterFN.autoRemove = (val: any) => !val;
+empty.autoRemove = (val: any) => !val;
 
-export const notEmptyFilterFN = (
+export const notEmpty = (
   rows: MRT_Row[],
   id: string,
   _filterValue: string | number,
 ) => rows.filter((row) => !!row.values[id].toString().toLowerCase().trim());
 
-notEmptyFilterFN.autoRemove = (val: any) => !val;
+notEmpty.autoRemove = (val: any) => !val;
 
 export const defaultFilterFNs = {
-  contains: containsFilterFN,
-  empty: emptyFilterFN,
-  endsWith: endsWithFilterFN,
-  equals: equalsFilterFN,
-  fuzzy: fuzzyFilterFN,
-  greaterThan: greaterThanFilterFN,
-  lessThan: lessThanFilterFN,
-  notEmpty: notEmptyFilterFN,
-  notEquals: notEqualsFilterFN,
-  startsWith: startsWithFilterFN,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  lessThan,
+  notEmpty,
+  notEquals,
+  startsWith,
 };

package/src/inputs/MRT_EditCellTextField.tsx

@@ -47,7 +47,7 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell }) => {
     },
   };
 
-  if (cell.column.editable && cell.column.Edit) {
+  if (!cell.column.disableEditing && cell.column.Edit) {
     return <>{cell.column.Edit({ ...textFieldProps, cell })}</>;
   }
 

package/src/inputs/MRT_FilterTextField.tsx

@@ -77,6 +77,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     return <>{column.Filter?.({ column })}</>;
   }
 
+  const filterId = `mrt-${idPrefix}-${column.id}-filter-text-field`;
   const filterType = tableInstance.state.currentFilterTypes[column.id];
   const isSelectFilter = !!column.filterSelectOptions;
   const filterChipLabel =
@@ -98,7 +99,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
     <>
       <TextField
         fullWidth
-        id={`mrt-${idPrefix}-${column.id}-filter-text-field`}
+        id={filterId}
         inputProps={{
           disabled: !!filterChipLabel,
           sx: {
@@ -108,17 +109,28 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
           title: filterPlaceholder,
         }}
         helperText={
-          filterType instanceof Function
-            ? ''
-            : localization.filterMode.replace(
-                '{filterType}',
-                // @ts-ignore
-                localization[
-                  `filter${
-                    filterType.charAt(0).toUpperCase() + filterType.slice(1)
-                  }`
-                ],
-              )
+          <label htmlFor={filterId}>
+            {filterType instanceof Function
+              ? localization.filterMode.replace(
+                  '{filterType}',
+                  // @ts-ignore
+                  localization[
+                    `filter${
+                      filterType.name.charAt(0).toUpperCase() +
+                      filterType.name.slice(1)
+                    }`
+                  ] ?? '',
+                ) ?? ''
+              : localization.filterMode.replace(
+                  '{filterType}',
+                  // @ts-ignore
+                  localization[
+                    `filter${
+                      filterType.charAt(0).toUpperCase() + filterType.slice(1)
+                    }`
+                  ],
+                )}
+          </label>
         }
         FormHelperTextProps={{
           sx: { fontSize: '0.6rem', lineHeight: '0.8rem' },

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,5 +1,5 @@
 import React, { FC, useState } from 'react';
-import { Box, IconButton, Menu, MenuItem } from '@mui/material';
+import { Box, IconButton, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_HeaderGroup } from '..';
 import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
@@ -14,7 +14,6 @@ export const commonMenuItemStyles = {
 
 export const commonListItemStyles = {
   display: 'flex',
-  gap: '0.75rem',
   alignItems: 'center',
 };
 
@@ -102,15 +101,16 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     setAnchorEl(null);
   };
 
+  const handleShowAllColumns = () => {
+    tableInstance.toggleHideAllColumns(false);
+    setAnchorEl(null);
+  };
+
   const handleOpenFilterModeMenu = (event: React.MouseEvent<HTMLElement>) => {
     event.stopPropagation();
     setFilterMenuAnchorEl(event.currentTarget);
   };
 
-  const handleShowAllColumns = () => {
-    tableInstance.toggleHideAllColumns(false);
-  };
-
   const handleOpenShowHideColumnsMenu = (
     event: React.MouseEvent<HTMLElement>,
   ) => {
@@ -136,7 +136,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <ClearAllIcon />
+              <ListItemIcon>
+                <ClearAllIcon />
+              </ListItemIcon>
               {localization.clearSort}
             </Box>
           </MenuItem>,
@@ -147,7 +149,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <SortIcon />
+              <ListItemIcon>
+                <SortIcon />
+              </ListItemIcon>
               {localization.sortByColumnAsc?.replace(
                 '{column}',
                 String(column.Header),
@@ -164,7 +168,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+              <ListItemIcon>
+                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+              </ListItemIcon>
               {localization.sortByColumnDesc?.replace(
                 '{column}',
                 String(column.Header),
@@ -181,7 +187,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <FilterListOffIcon />
+              <ListItemIcon>
+                <FilterListOffIcon />
+              </ListItemIcon>
               {localization.clearFilter}
             </Box>
           </MenuItem>,
@@ -192,7 +200,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <FilterListIcon />
+              <ListItemIcon>
+                <FilterListIcon />
+              </ListItemIcon>
               {localization.filterByColumn?.replace(
                 '{column}',
                 String(column.Header),
@@ -226,7 +236,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
             sx={commonMenuItemStyles}
           >
             <Box sx={commonListItemStyles}>
-              <DynamicFeedIcon />
+              <ListItemIcon>
+                <DynamicFeedIcon />
+              </ListItemIcon>
               {localization[
                 column.isGrouped ? 'ungroupByColumn' : 'groupByColumn'
               ]?.replace('{column}', String(column.Header))}
@@ -236,7 +248,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       {!disableColumnHiding && [
         <MenuItem key={0} onClick={handleHideColumn} sx={commonMenuItemStyles}>
           <Box sx={commonListItemStyles}>
-            <VisibilityOffIcon />
+            <ListItemIcon>
+              <VisibilityOffIcon />
+            </ListItemIcon>
             {localization.hideColumn?.replace(
               '{column}',
               String(column.Header),
@@ -250,8 +264,9 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
           sx={commonMenuItemStyles}
         >
           <Box sx={commonListItemStyles}>
-            <ViewColumnIcon />
-
+            <ListItemIcon>
+              <ViewColumnIcon />
+            </ListItemIcon>
             {localization.showAllColumns?.replace(
               '{column}',
               String(column.Header),

package/src/menus/MRT_FilterTypeMenu.tsx

@@ -4,16 +4,16 @@ import { useMRT } from '../useMRT';
 import type { MRT_FilterType, MRT_HeaderGroup } from '..';
 import { MRT_FILTER_TYPE } from '../enums';
 import {
-  containsFilterFN,
-  emptyFilterFN,
-  endsWithFilterFN,
-  equalsFilterFN,
-  fuzzyFilterFN,
-  greaterThanFilterFN,
-  lessThanFilterFN,
-  notEmptyFilterFN,
-  notEqualsFilterFN,
-  startsWithFilterFN,
+  contains,
+  empty,
+  endsWith,
+  equals,
+  fuzzy,
+  greaterThan,
+  lessThan,
+  notEmpty,
+  notEquals,
+  startsWith,
 } from '../filtersFNs';
 
 const commonMenuItemStyles = {
@@ -48,61 +48,61 @@ export const MRT_FilterTypeMenu: FC<Props> = ({
         type: MRT_FILTER_TYPE.FUZZY,
         label: localization.filterFuzzy,
         divider: false,
-        fn: fuzzyFilterFN,
+        fn: fuzzy,
       },
       {
         type: MRT_FILTER_TYPE.CONTAINS,
         label: localization.filterContains,
         divider: true,
-        fn: containsFilterFN,
+        fn: contains,
       },
       {
         type: MRT_FILTER_TYPE.STARTS_WITH,
         label: localization.filterStartsWith,
         divider: false,
-        fn: startsWithFilterFN,
+        fn: startsWith,
       },
       {
         type: MRT_FILTER_TYPE.ENDS_WITH,
         label: localization.filterEndsWith,
         divider: true,
-        fn: endsWithFilterFN,
+        fn: endsWith,
       },
       {
         type: MRT_FILTER_TYPE.EQUALS,
         label: localization.filterEquals,
         divider: false,
-        fn: equalsFilterFN,
+        fn: equals,
       },
       {
         type: MRT_FILTER_TYPE.NOT_EQUALS,
         label: localization.filterNotEquals,
         divider: true,
-        fn: notEqualsFilterFN,
+        fn: notEquals,
       },
       {
         type: MRT_FILTER_TYPE.GREATER_THAN,
         label: localization.filterGreaterThan,
         divider: false,
-        fn: greaterThanFilterFN,
+        fn: greaterThan,
       },
       {
         type: MRT_FILTER_TYPE.LESS_THAN,
         label: localization.filterLessThan,
         divider: true,
-        fn: lessThanFilterFN,
+        fn: lessThan,
       },
       {
         type: MRT_FILTER_TYPE.EMPTY,
         label: localization.filterEmpty,
         divider: false,
-        fn: emptyFilterFN,
+        fn: empty,
       },
       {
         type: MRT_FILTER_TYPE.NOT_EMPTY,
         label: localization.filterNotEmpty,
         divider: false,
-        fn: notEmptyFilterFN,
+        fn: notEmpty,
       },
     ],
     [],

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,8 +1,11 @@
 import React, { FC } from 'react';
-import { Menu, MenuItem } from '@mui/material';
+import { Box, ListItemIcon, Menu, MenuItem } from '@mui/material';
 import { useMRT } from '../useMRT';
 import type { MRT_Row } from '..';
-import { commonMenuItemStyles } from './MRT_ColumnActionMenu';
+import {
+  commonListItemStyles,
+  commonMenuItemStyles,
+} from './MRT_ColumnActionMenu';
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -36,8 +39,12 @@ export const MRT_RowActionMenu: FC<Props> = ({
     >
       {enableRowEditing && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-          <EditIcon />
-          {localization.edit}
+          <Box sx={commonListItemStyles}>
+            <ListItemIcon>
+              <EditIcon />
+            </ListItemIcon>
+            {localization.edit}
+          </Box>
         </MenuItem>
       )}
       {renderRowActionMenuItems?.(row, tableInstance, () =>