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

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -12,9 +12,9 @@ import InputAdornment from '@mui/material/InputAdornment';
 import TextField from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { type MRT_TableInstance } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -25,15 +25,15 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
 }: Props<TData>) => {
   const {
     getState,
-    setGlobalFilter,
     options: {
       enableGlobalFilterModes,
-      icons: { SearchIcon, CloseIcon },
+      icons: { CloseIcon, SearchIcon },
       localization,
       manualFiltering,
       muiSearchTextFieldProps,
     },
     refs: { searchInputRef },
+    setGlobalFilter,
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
@@ -42,7 +42,7 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
   });
 
   const isMounted = useRef(false);
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
   const handleChangeDebounced = useCallback(
@@ -83,32 +83,12 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
   return (
     <Collapse
       in={showGlobalFilter}
+      mountOnEnter
       orientation="horizontal"
       unmountOnExit
-      mountOnEnter
     >
       <TextField
-        placeholder={localization.search}
-        onChange={handleChange}
-        value={searchValue ?? ''}
-        variant="standard"
         InputProps={{
-          startAdornment: enableGlobalFilterModes ? (
-            <InputAdornment position="start">
-              <Tooltip arrow title={localization.changeSearchMode}>
-                <IconButton
-                  aria-label={localization.changeSearchMode}
-                  onClick={handleGlobalFilterMenuOpen}
-                  size="small"
-                  sx={{ height: '1.75rem', width: '1.75rem' }}
-                >
-                  <SearchIcon />
-                </IconButton>
-              </Tooltip>
-            </InputAdornment>
-          ) : (
-            <SearchIcon style={{ marginRight: '4px' }} />
-          ),
           endAdornment: (
             <InputAdornment position="end">
               <Tooltip arrow title={localization.clearSearch ?? ''}>
@@ -125,7 +105,27 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
               </Tooltip>
             </InputAdornment>
           ),
+          startAdornment: enableGlobalFilterModes ? (
+            <InputAdornment position="start">
+              <Tooltip arrow title={localization.changeSearchMode}>
+                <IconButton
+                  aria-label={localization.changeSearchMode}
+                  onClick={handleGlobalFilterMenuOpen}
+                  size="small"
+                  sx={{ height: '1.75rem', width: '1.75rem' }}
+                >
+                  <SearchIcon />
+                </IconButton>
+              </Tooltip>
+            </InputAdornment>
+          ) : (
+            <SearchIcon style={{ marginRight: '4px' }} />
+          ),
         }}
+        onChange={handleChange}
+        placeholder={localization.search}
+        value={searchValue ?? ''}
+        variant="standard"
         {...textFieldProps}
         inputRef={(inputRef) => {
           searchInputRef.current = inputRef;
@@ -136,9 +136,9 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
       />
       <MRT_FilterOptionMenu
         anchorEl={anchorEl}
+        onSelect={handleClear}
         setAnchorEl={setAnchorEl}
         table={table}
-        onSelect={handleClear}
       />
     </Collapse>
   );

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,10 +1,10 @@
 import { type MouseEvent } from 'react';
 import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
-import Tooltip from '@mui/material/Tooltip';
 import Radio, { type RadioProps } from '@mui/material/Radio';
+import Tooltip from '@mui/material/Tooltip';
 import { type Theme } from '@mui/material/styles';
-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>;
@@ -20,12 +20,12 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
-      localization,
       enableMultiRowSelection,
-      rowPinningDisplayMode,
       enableRowPinning,
-      muiSelectCheckboxProps,
+      localization,
       muiSelectAllCheckboxProps,
+      muiSelectCheckboxProps,
+      rowPinningDisplayMode,
       selectAllMode,
     },
   } = table;
@@ -70,7 +70,7 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
         }
       }
     },
-    size: (density === 'compact' ? 'small' : 'medium') as 'small' | 'medium',
+    size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small',
     ...checkboxProps,
     onClick: (e: MouseEvent<HTMLButtonElement>) => {
       e.stopPropagation();
@@ -78,8 +78,8 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
     },
     sx: (theme: Theme) => ({
       height: density === 'compact' ? '1.75rem' : '2.5rem',
-      width: density === 'compact' ? '1.75rem' : '2.5rem',
       m: density !== 'compact' ? '-0.4rem' : undefined,
+      width: density === 'compact' ? '1.75rem' : '2.5rem',
       zIndex: 0,
       ...parseFromValuesOrFunc(checkboxProps?.sx, theme),
     }),

package/src/locales/fr.ts

@@ -70,7 +70,7 @@ export const MRT_Localization_FR: MRT_Localization = {
   save: 'Sauvegarder',
   search: 'Rechercher',
   selectedCountOfRowCountRowsSelected:
-    '{selectedCount} de {rowCount} ligne(s) sélectionnée(s)',
+    '{selectedCount} sur {rowCount} ligne(s)',
   select: 'Sélectionner',
   showAll: 'Afficher tous',
   showAllColumns: 'Afficher toutes les colonnes',

package/src/locales/np.ts

@@ -0,0 +1,94 @@
+import { type MRT_Localization } from '..';
+
+export const MRT_Localization_NP: MRT_Localization = {
+  actions: 'कार्यहरू',
+  and: 'तथा',
+  cancel: 'रद्द गर्नुहोस्',
+  changeFilterMode: 'फिल्टर प्रणाली परिवर्तन गर्नुहोस्',
+  changeSearchMode: 'खोज प्रणाली परिवर्तन गर्नुहोस्',
+  clearFilter: 'फिल्टर हटाउनुहोस्',
+  clearSearch: 'खोजिएको शब्द मेट्नुहोस्',
+  clearSort: 'क्रम हटाउनुहोस्',
+  clickToCopy: 'प्रतिलिपि बनाउन क्लिक गर्नुहोस्',
+  collapse: 'संकुचित गर्नुहोस्',
+  collapseAll: 'सबै संकुचित गर्नुहोस्',
+  columnActions: 'यस स्तम्भका कार्यहरू',
+  copiedToClipboard: 'क्लिपबोर्डमा प्रतिलिपि गरियो',
+  dropToGroupBy: '{column} का आधारमा समूह बनाउनुहोस्',
+  edit: 'सम्पादन गर्नुहोस्',
+  expand: 'विस्तार गर्नुहोस्',
+  expandAll: 'सबै विस्तार गर्नुहोस्',
+  filterArrIncludes: 'समावेश भएको',
+  filterArrIncludesAll: 'सबै समावेश भएको',
+  filterArrIncludesSome: 'केही समावेश भएको',
+  filterBetween: 'बीचको',
+  filterBetweenInclusive: 'बीचमा समावेश गरिएको',
+  filterByColumn: '{column} का आधारमा फिल्टर गर्नुहोस्',
+  filterContains: 'समावेश गरिएको',
+  filterEmpty: 'खाली भएको',
+  filterEndsWith: 'अन्तमा समावेश गरिएको',
+  filterEquals: 'समान',
+  filterEqualsString: 'समान',
+  filterFuzzy: 'अस्पष्ट',
+  filterGreaterThan: 'ठुलो भएको',
+  filterGreaterThanOrEqualTo: 'ठुलो वा समान',
+  filterInNumberRange: 'संख्या दायरामा',
+  filterIncludesString: 'समावेश गरिएको',
+  filterIncludesStringSensitive: 'समावेश गरिएको (संवेदनशील)',
+  filterLessThan: 'सानो भएको',
+  filterLessThanOrEqualTo: 'सानो वा समान',
+  filterMode: 'फिल्टर प्रणाली: {filterType}',
+  filterNotEmpty: 'खाली नभएको',
+  filterNotEquals: 'असमान',
+  filterStartsWith: 'सुरुमा समावेश गरिएको',
+  filterWeakEquals: 'असमान',
+  filteringByColumn: '{column} द्वारा फिल्टर गर्दै - {filterType} {filterValue}',
+  goToFirstPage: 'पहिलो पृष्ठमा जानुहोस्',
+  goToLastPage: 'अन्तिम पृष्ठमा जानुहोस्',
+  goToNextPage: 'अर्को पृष्ठमा जानुहोस्',
+  goToPreviousPage: 'अघिल्लो पृष्ठमा जानुहोस्',
+  grab: 'ग्र्याब गर्नुहोस',
+  groupByColumn: '{column} का आधारमा समूह बनाउनुहोस्',
+  groupedBy: 'समूह बनाईएको आधार',
+  hideAll: 'सबै लुकाउनुहोस्',
+  hideColumn: '{column} स्तम्भ लुकाउनुहोस्',
+  max: 'अधिकतम',
+  min: 'न्यूनतम',
+  move: 'सार्नुहोस्',
+  noRecordsToDisplay: 'केही रेकर्ड छैन',
+  noResultsFound: 'कुनै परिणाम फेला परेन',
+  of: ', कुल संख्या: ',
+  or: 'वा',
+  pin: 'पिन गर्नुहोस्',
+  pinToLeft: 'बायाँतर्फ पिन गर्नुहोस्',
+  pinToRight: 'दायाँतर्फ पिन गर्नुहोस्',
+  resetColumnSize: 'स्तम्भ आकार रिसेट गर्नुहोस्',
+  resetOrder: 'क्रम रिसेट गर्नुहोस्',
+  rowActions: 'पंक्तिका कार्यहरू',
+  rowNumber: 'क्र.सं.',
+  rowNumbers: 'क्रमाङ्क',
+  rowsPerPage: 'प्रति पृष्ठ',
+  save: 'सुरक्षित गर्नुहोस्',
+  search: 'खोज्नुहोस्',
+  selectedCountOfRowCountRowsSelected:
+    '{rowCount} पंक्ति(हरू)बाट {selectedCount} चयनित',
+  select: 'चयन गर्नुहोस्',
+  showAll: 'सबै देखाउनुहोस्',
+  showAllColumns: 'सबै स्तम्भ देखाउनुहोस्',
+  showHideColumns: 'स्तम्भ देखाउनुहोस्/लुकाउनुहोस्',
+  showHideFilters: 'फिल्टर देखाउनुहोस्/लुकाउनुहोस्',
+  showHideSearch: 'खोज-क्षेत्र देखाउनुहोस्/लुकाउनुहोस्',
+  sortByColumnAsc: '{column}का आधारमा बढ्दो क्रममा क्रमबद्ध गर्नुहोस्',
+  sortByColumnDesc: '{column}का आधारमा घट्दो क्रममा क्रमबद्ध गर्नुहोस्',
+  sortedByColumnAsc: '{column}का आधारमा बढ्दो क्रममा क्रमबद्ध गरिएको',
+  sortedByColumnDesc: '{column}का आधारमा घट्दो क्रममा क्रमबद्ध गरिएको',
+  thenBy: ', त्यसपछि ',
+  toggleDensity: 'घनत्व परिवर्तन गर्नुहोस्',
+  toggleFullScreen: 'पूर्ण स्क्रिनमा लग्नुहोस्/हटाउनुहोस्',
+  toggleSelectAll: 'सबै चयन गर्नुहोस्/हटाउनुहोस्',
+  toggleSelectRow: 'पंक्ति चयन गर्नुहोस्/हटाउनुहोस्',
+  toggleVisibility: 'दृश्यता परिवर्तन गर्नुहोस्',
+  ungroupByColumn: '{column} का आधारमा समूह हटाउनुहोस्',
+  unpin: 'अनपिन गर्नुहोस्',
+  unpinAll: 'सबै अनपिन गर्नुहोस्'
+};

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -9,15 +9,15 @@ import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 export const commonMenuItemStyles = {
-  py: '6px',
-  my: 0,
-  justifyContent: 'space-between',
   alignItems: 'center',
+  justifyContent: 'space-between',
+  my: 0,
+  py: '6px',
 };
 
 export const commonListItemStyles = {
-  display: 'flex',
   alignItems: 'center',
+  display: 'flex',
 };
 
 interface Props<TData extends Record<string, any>> {
@@ -35,36 +35,37 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
 }: Props<TData>) => {
   const {
     getState,
-    toggleAllColumnsVisible,
-    setColumnOrder,
     options: {
+      columnFilterDisplayMode,
       columnFilterModeOptions,
       enableColumnFilterModes,
       enableColumnFilters,
+      enableColumnPinning,
       enableColumnResizing,
       enableGrouping,
       enableHiding,
-      enableColumnPinning,
       enableSorting,
       enableSortingRemoval,
       icons: {
         ArrowRightIcon,
         ClearAllIcon,
-        ViewColumnIcon,
         DynamicFeedIcon,
         FilterListIcon,
         FilterListOffIcon,
         PushPinIcon,
-        SortIcon,
         RestartAltIcon,
+        SortIcon,
+        ViewColumnIcon,
         VisibilityOffIcon,
       },
       localization,
       renderColumnActionsMenuItems,
     },
     refs: { filterInputRefs },
+    setColumnOrder,
     setColumnSizingInfo,
     setShowColumnFilters,
+    toggleAllColumnsVisible,
   } = table;
   const { column } = header;
   const { columnDef } = column;
@@ -73,7 +74,7 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
   const columnFilterValue = column.getFilterValue();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
-    useState<null | HTMLElement>(null);
+    useState<HTMLElement | null>(null);
 
   const handleClearSort = () => {
     column.clearSorting();
@@ -180,9 +181,9 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
             </Box>
           </MenuItem>,
           <MenuItem
+            disabled={column.getIsSorted() === 'desc'}
             divider={enableColumnFilters || enableGrouping || enableHiding}
             key={2}
-            disabled={column.getIsSorted() === 'desc'}
             onClick={handleSortDesc}
             sx={commonMenuItemStyles}
           >
@@ -217,37 +218,39 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
               {localization.clearFilter}
             </Box>
           </MenuItem>,
-          <MenuItem
-            disabled={showColumnFilters && !enableColumnFilterModes}
-            divider={enableGrouping || enableHiding}
-            key={4}
-            onClick={
-              showColumnFilters
-                ? handleOpenFilterModeMenu
-                : handleFilterByColumn
-            }
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <FilterListIcon />
-              </ListItemIcon>
-              {localization.filterByColumn?.replace(
-                '{column}',
-                String(columnDef.header),
+          columnFilterDisplayMode === 'subheader' && (
+            <MenuItem
+              disabled={showColumnFilters && !enableColumnFilterModes}
+              divider={enableGrouping || enableHiding}
+              key={4}
+              onClick={
+                showColumnFilters
+                  ? handleOpenFilterModeMenu
+                  : handleFilterByColumn
+              }
+              sx={commonMenuItemStyles}
+            >
+              <Box sx={commonListItemStyles}>
+                <ListItemIcon>
+                  <FilterListIcon />
+                </ListItemIcon>
+                {localization.filterByColumn?.replace(
+                  '{column}',
+                  String(columnDef.header),
+                )}
+              </Box>
+              {showFilterModeSubMenu && (
+                <IconButton
+                  onClick={handleOpenFilterModeMenu}
+                  onMouseEnter={handleOpenFilterModeMenu}
+                  size="small"
+                  sx={{ p: 0 }}
+                >
+                  <ArrowRightIcon />
+                </IconButton>
               )}
-            </Box>
-            {showFilterModeSubMenu && (
-              <IconButton
-                onClick={handleOpenFilterModeMenu}
-                onMouseEnter={handleOpenFilterModeMenu}
-                size="small"
-                sx={{ p: 0 }}
-              >
-                <ArrowRightIcon />
-              </IconButton>
-            )}
-          </MenuItem>,
+            </MenuItem>
+          ),
           showFilterModeSubMenu && (
             <MRT_FilterOptionMenu
               anchorEl={filterMenuAnchorEl}
@@ -258,7 +261,7 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
               table={table}
             />
           ),
-        ]
+        ].filter(Boolean)
       : []),
     ...(enableGrouping && column.getCanGroup()
       ? [
@@ -383,12 +386,12 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       {columnDef.renderColumnActionsMenuItems?.({
         closeMenu: () => setAnchorEl(null),

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -14,88 +14,88 @@ export const mrtFilterOptions = (
   localization: MRT_Localization,
 ): MRT_InternalFilterOption[] => [
   {
+    divider: false,
+    label: localization.filterFuzzy,
     option: 'fuzzy',
     symbol: '≈',
-    label: localization.filterFuzzy,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterContains,
     option: 'contains',
     symbol: '*',
-    label: localization.filterContains,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterStartsWith,
     option: 'startsWith',
     symbol: 'a',
-    label: localization.filterStartsWith,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterEndsWith,
     option: 'endsWith',
     symbol: 'z',
-    label: localization.filterEndsWith,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterEquals,
     option: 'equals',
     symbol: '=',
-    label: localization.filterEquals,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterNotEquals,
     option: 'notEquals',
     symbol: '≠',
-    label: localization.filterNotEquals,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterBetween,
     option: 'between',
     symbol: '⇿',
-    label: localization.filterBetween,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterBetweenInclusive,
     option: 'betweenInclusive',
     symbol: '⬌',
-    label: localization.filterBetweenInclusive,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterGreaterThan,
     option: 'greaterThan',
     symbol: '>',
-    label: localization.filterGreaterThan,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterGreaterThanOrEqualTo,
     option: 'greaterThanOrEqualTo',
     symbol: '≥',
-    label: localization.filterGreaterThanOrEqualTo,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterLessThan,
     option: 'lessThan',
     symbol: '<',
-    label: localization.filterLessThan,
-    divider: false,
   },
   {
+    divider: true,
+    label: localization.filterLessThanOrEqualTo,
     option: 'lessThanOrEqualTo',
     symbol: '≤',
-    label: localization.filterLessThanOrEqualTo,
-    divider: true,
   },
   {
+    divider: false,
+    label: localization.filterEmpty,
     option: 'empty',
     symbol: '∅',
-    label: localization.filterEmpty,
-    divider: false,
   },
   {
+    divider: false,
+    label: localization.filterNotEmpty,
     option: 'notEmpty',
     symbol: '!∅',
-    label: localization.filterNotEmpty,
-    divider: false,
   },
 ];
 
@@ -133,7 +133,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
     setColumnFilterFns,
     setGlobalFilterFn,
   } = table;
-  const { globalFilterFn, density } = getState();
+  const { density, globalFilterFn } = getState();
   const { column } = header ?? {};
   const { columnDef } = column ?? {};
   const currentFilterValue = column?.getFilterValue();
@@ -156,7 +156,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
             allowedColumnFilterOptions?.includes(filterOption.option)
           : (!globalFilterModeOptions ||
               globalFilterModeOptions.includes(filterOption.option)) &&
-            ['fuzzy', 'contains', 'startsWith'].includes(filterOption.option),
+            ['contains', 'fuzzy', 'startsWith'].includes(filterOption.option),
       ),
     [],
   );
@@ -199,7 +199,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
           column.setFilterValue(currentFilterValue); // perform new filter render
         }
       } else if (
-        columnDef?.filterVariant === 'range' ||
+        columnDef?.filterVariant?.includes('range') ||
         rangeModes.includes(option as MRT_FilterOption)
       ) {
         // will now be range filter mode
@@ -232,13 +232,13 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      anchorOrigin={{ vertical: 'center', horizontal: 'right' }}
-      onClose={() => setAnchorEl(null)}
-      open={!!anchorEl}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       {(header && column && columnDef
         ? columnDef.renderColumnFilterModeMenuItems?.({
@@ -259,7 +259,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
             table,
           })) ??
         internalFilterOptions.map(
-          ({ option, label, divider, symbol }, index) => (
+          ({ divider, label, option, symbol }, index) => (
             <MenuItem
               divider={divider}
               key={index}

package/src/menus/MRT_RowActionMenu.tsx

@@ -7,8 +7,8 @@ import {
   commonListItemStyles,
   commonMenuItemStyles,
 } from './MRT_ColumnActionMenu';
-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>> {
   anchorEl: HTMLElement | null;
@@ -28,8 +28,8 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
   const {
     getState,
     options: {
-      icons: { EditIcon },
       enableEditing,
+      icons: { EditIcon },
       localization,
       renderRowActionMenuItems,
     },
@@ -38,13 +38,13 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
 
   return (
     <Menu
-      anchorEl={anchorEl}
-      open={!!anchorEl}
-      onClick={(event) => event.stopPropagation()}
-      onClose={() => setAnchorEl(null)}
       MenuListProps={{
         dense: density === 'compact',
       }}
+      anchorEl={anchorEl}
+      onClick={(event) => event.stopPropagation()}
+      onClose={() => setAnchorEl(null)}
+      open={!!anchorEl}
     >
       {parseFromValuesOrFunc(enableEditing, row) && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
@@ -57,9 +57,9 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
         </MenuItem>
       )}
       {renderRowActionMenuItems?.({
+        closeMenu: () => setAnchorEl(null),
         row,
         table,
-        closeMenu: () => setAnchorEl(null),
       })}
     </Menu>
   );