material-react-table 0.25.0 → 0.26.0

package/README.md

@@ -59,26 +59,26 @@ _All features can easily be enabled/disabled_
 - [x] Column Grouping (Group By and Aggregates)
 - [x] Column Hiding
 - [x] Column Ordering via Drag'n'Drop
-- [x] Column Pinning
-- [x] Column Resizing (work in progress)
+- [x] Column Pinning (Freeze Columns)
+- [x] Column Resizing
 - [x] Customize Icons
 - [x] Customize Styling of internal Mui Components
 - [x] Data Editing (3 different editing modes)
 - [x] Density Toggle
-- [x] Detail Panels
-- [x] Filtering and multiple built-in filter modes
-- [x] Full Screen mode
+- [x] Detail Panels (Expansion)
+- [x] Filtering (supports client-side and server-side)
+- [x] Full Screen Mode
 - [x] Global Filtering (Search across all columns, rank by best match)
 - [x] Header Groups & Footers
 - [x] Localization (i18n) support
 - [x] Manage your own state
 - [x] Pagination (supports client-side and server-side)
-- [x] Remote/Server-side sorting and filtering supported
-- [x] Row Actions
+- [x] Row Actions (Your Custom Action Buttons)
 - [x] Row Numbers
-- [x] Row Selection (checkboxes)
+- [x] Row Ordering via Drag'n'Drop
+- [x] Row Selection (Checkboxes)
 - [x] SSR compatible
-- [x] Sorting
+- [x] Sorting (supports client-side and server-side)
 - [x] Theming (Respects your Material UI Theme)
 - [x] Toolbars (Add your own action buttons)
 - [x] Tree Data / Expanding Sub-rows
@@ -90,6 +90,8 @@ _All features can easily be enabled/disabled_
 
 ### Installation
 
+View the full [Installation Docs](https://www.material-react-table.com/docs/install)
+
 1. Install Peer Dependencies (Material UI V5)
 
 ```bash

package/dist/{utils.d.ts → column.utils.d.ts}

@@ -2,7 +2,7 @@ import { ColumnOrderState } from '@tanstack/react-table';
 import { MaterialReactTableProps, MRT_Column, MRT_ColumnDef, MRT_DefinedColumnDef, MRT_DisplayColumnIds, MRT_FilterOption } from '.';
 export declare const getAllLeafColumnDefs: <TData extends Record<string, any> = {}>(columns: MRT_ColumnDef<TData>[]) => MRT_ColumnDef<TData>[];
 export declare const prepareColumns: <TData extends Record<string, any> = {}>(columnDefs: MRT_ColumnDef<TData>[], currentFilterFns: {
-    [key: string]: "between" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "lessThan" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange";
+    [key: string]: "between" | "betweenInclusive" | "contains" | "empty" | "endsWith" | "equals" | "fuzzy" | "greaterThan" | "greaterThanOrEqualTo" | "lessThan" | "lessThanOrEqualTo" | "notEmpty" | "notEquals" | "startsWith" | "includesString" | "includesStringSensitive" | "equalsString" | "arrIncludes" | "arrIncludesAll" | "arrIncludesSome" | "weakEquals" | "inNumberRange";
 }) => MRT_DefinedColumnDef<TData>[];
 export declare const reorderColumn: <TData extends Record<string, any> = {}>(draggedColumn: MRT_Column<TData>, targetColumn: MRT_Column<TData>, columnOrder: ColumnOrderState) => ColumnOrderState;
 export declare const getLeadingDisplayColumnIds: <TData extends Record<string, any> = {}>(props: MaterialReactTableProps<TData>) => MRT_DisplayColumnIds[];

package/dist/filtersFns.d.ts

@@ -1,92 +1,60 @@
 import { RankingInfo } from '@tanstack/match-sorter-utils';
 import { Row } from '@tanstack/react-table';
-export declare const fuzzy: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, columnId: string, filterValue: string | number, addMeta: (item: RankingInfo) => void): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const contains: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const startsWith: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const endsWith: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const equals: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const notEquals: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const greaterThan: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const lessThan: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const between: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValues: [string | number, string | number]): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const empty: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, _filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
-export declare const notEmpty: {
-    <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, _filterValue: string | number): boolean;
-    autoRemove(val: any): boolean;
-};
 export declare const MRT_FilterFns: {
     between: {
         <TData extends Record<string, any> = {}>(row: Row<TData>, id: string, filterValues: [string | number, string | number]): boolean;
         autoRemove(val: any): boolean;
     };
+    betweenInclusive: {
+        <TData_1 extends Record<string, any> = {}>(row: Row<TData_1>, id: string, filterValues: [string | number, string | number]): boolean;
+        autoRemove(val: any): boolean;
+    };
     contains: {
-        <TData_1 extends Record<string, any> = {}>(row: Row<TData_1>, id: string, filterValue: string | number): boolean;
+        <TData_2 extends Record<string, any> = {}>(row: Row<TData_2>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     empty: {
-        <TData_2 extends Record<string, any> = {}>(row: Row<TData_2>, id: string, _filterValue: string | number): boolean;
+        <TData_3 extends Record<string, any> = {}>(row: Row<TData_3>, id: string, _filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     endsWith: {
-        <TData_3 extends Record<string, any> = {}>(row: Row<TData_3>, id: string, filterValue: string | number): boolean;
+        <TData_4 extends Record<string, any> = {}>(row: Row<TData_4>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     equals: {
-        <TData_4 extends Record<string, any> = {}>(row: Row<TData_4>, id: string, filterValue: string | number): boolean;
+        <TData_5 extends Record<string, any> = {}>(row: Row<TData_5>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     fuzzy: {
-        <TData_5 extends Record<string, any> = {}>(row: Row<TData_5>, columnId: string, filterValue: string | number, addMeta: (item: RankingInfo) => void): boolean;
+        <TData_6 extends Record<string, any> = {}>(row: Row<TData_6>, columnId: string, filterValue: string | number, addMeta: (item: RankingInfo) => void): boolean;
         autoRemove(val: any): boolean;
     };
     greaterThan: {
-        <TData_6 extends Record<string, any> = {}>(row: Row<TData_6>, id: string, filterValue: string | number): boolean;
+        <TData_7 extends Record<string, any> = {}>(row: Row<TData_7>, id: string, filterValue: string | number): boolean;
+        autoRemove(val: any): boolean;
+    };
+    greaterThanOrEqualTo: {
+        <TData_8 extends Record<string, any> = {}>(row: Row<TData_8>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     lessThan: {
-        <TData_7 extends Record<string, any> = {}>(row: Row<TData_7>, id: string, filterValue: string | number): boolean;
+        <TData_9 extends Record<string, any> = {}>(row: Row<TData_9>, id: string, filterValue: string | number): boolean;
+        autoRemove(val: any): boolean;
+    };
+    lessThanOrEqualTo: {
+        <TData_10 extends Record<string, any> = {}>(row: Row<TData_10>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     notEmpty: {
-        <TData_8 extends Record<string, any> = {}>(row: Row<TData_8>, id: string, _filterValue: string | number): boolean;
+        <TData_11 extends Record<string, any> = {}>(row: Row<TData_11>, id: string, _filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     notEquals: {
-        <TData_9 extends Record<string, any> = {}>(row: Row<TData_9>, id: string, filterValue: string | number): boolean;
+        <TData_12 extends Record<string, any> = {}>(row: Row<TData_12>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     startsWith: {
-        <TData_10 extends Record<string, any> = {}>(row: Row<TData_10>, id: string, filterValue: string | number): boolean;
+        <TData_13 extends Record<string, any> = {}>(row: Row<TData_13>, id: string, filterValue: string | number): boolean;
         autoRemove(val: any): boolean;
     };
     includesString: import("@tanstack/table-core").FilterFn<any>;

package/dist/localization.d.ts

@@ -14,6 +14,7 @@ export interface MRT_Localization {
     expand: string;
     expandAll: string;
     filterBetween: string;
+    filterBetweenInclusive: string;
     filterByColumn: string;
     filterContains: string;
     filterEmpty: string;
@@ -21,7 +22,9 @@ export interface MRT_Localization {
     filterEquals: string;
     filterFuzzy: string;
     filterGreaterThan: string;
+    filterGreaterThanOrEqualTo: string;
     filterLessThan: string;
+    filterLessThanOrEqualTo: string;
     filterMode: string;
     filterNotEmpty: string;
     filterNotEquals: string;

package/dist/material-react-table.cjs.development.js

@@ -60,6 +60,7 @@ var MRT_DefaultLocalization_EN = {
   expand: 'Expand',
   expandAll: 'Expand all',
   filterBetween: 'Between',
+  filterBetweenInclusive: 'Between Inclusive',
   filterByColumn: 'Filter by {column}',
   filterContains: 'Contains',
   filterEmpty: 'Empty',
@@ -67,7 +68,9 @@ var MRT_DefaultLocalization_EN = {
   filterEquals: 'Equals',
   filterFuzzy: 'Fuzzy',
   filterGreaterThan: 'Greater Than',
+  filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
   filterLessThan: 'Less Than',
+  filterLessThanOrEqualTo: 'Less Than Or Equal To',
   filterMode: 'Filter Mode: {filterType}',
   filterNotEmpty: 'Not Empty',
   filterNotEquals: 'Not Equals',
@@ -233,11 +236,6 @@ var MRT_ExpandButton = function MRT_ExpandButton(_ref) {
   }))));
 };
 
-var commonMenuItemStyles = {
-  py: '6px',
-  my: 0,
-  alignItems: 'center'
-};
 var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var _columnDef$enabledCol;
 
@@ -269,46 +267,72 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   var filterOptions = React.useMemo(function () {
     return [{
       option: 'fuzzy',
+      symbol: '≈',
       label: localization.filterFuzzy,
       divider: false
     }, {
       option: 'contains',
+      symbol: '[]',
       label: localization.filterContains,
       divider: false
     }, {
       option: 'startsWith',
+      symbol: 'a',
       label: localization.filterStartsWith,
       divider: false
     }, {
       option: 'endsWith',
+      symbol: 'z',
       label: localization.filterEndsWith,
       divider: true
     }, {
       option: 'equals',
+      symbol: '=',
       label: localization.filterEquals,
       divider: false
     }, {
       option: 'notEquals',
+      symbol: '≠',
       label: localization.filterNotEquals,
       divider: true
     }, {
       option: 'between',
+      symbol: '⇿',
       label: localization.filterBetween,
       divider: false
+    }, {
+      option: 'betweenInclusive',
+      symbol: '⬌',
+      label: localization.filterBetweenInclusive,
+      divider: true
     }, {
       option: 'greaterThan',
+      symbol: '>',
       label: localization.filterGreaterThan,
       divider: false
+    }, {
+      option: 'greaterThanOrEqualTo',
+      symbol: '≥',
+      label: localization.filterGreaterThanOrEqualTo,
+      divider: false
     }, {
       option: 'lessThan',
+      symbol: '<',
       label: localization.filterLessThan,
+      divider: false
+    }, {
+      option: 'lessThanOrEqualTo',
+      symbol: '≤',
+      label: localization.filterLessThanOrEqualTo,
       divider: true
     }, {
       option: 'empty',
+      symbol: '∅',
       label: localization.filterEmpty,
       divider: false
     }, {
       option: 'notEmpty',
+      symbol: '!∅',
       label: localization.filterNotEmpty,
       divider: false
     }].filter(function (filterType) {
@@ -356,7 +380,8 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
   }, filterOptions.map(function (_ref4, index) {
     var option = _ref4.option,
         label = _ref4.label,
-        divider = _ref4.divider;
+        divider = _ref4.divider,
+        symbol = _ref4.symbol;
     return React__default.createElement(material.MenuItem, {
       divider: divider,
       key: index,
@@ -364,9 +389,20 @@ var MRT_FilterOptionMenu = function MRT_FilterOptionMenu(_ref) {
         return handleSelectFilterType(option);
       },
       selected: option === filterOption,
-      sx: commonMenuItemStyles,
+      sx: {
+        py: '6px',
+        my: 0,
+        alignItems: 'center',
+        display: 'flex',
+        gap: '2ch'
+      },
       value: option
-    }, label);
+    }, React__default.createElement(material.Box, {
+      sx: {
+        fontSize: '1.25rem',
+        width: '2ch'
+      }
+    }, symbol), label);
   }));
 };
 
@@ -512,21 +548,37 @@ notEquals.autoRemove = function (val) {
 };
 
 var greaterThan = function greaterThan(row, id, filterValue) {
-  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) >= +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
+  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) > +filterValue : row.getValue(id).toString().toLowerCase().trim() > filterValue.toString().toLowerCase().trim();
 };
 
 greaterThan.autoRemove = function (val) {
   return !val;
 };
 
+var greaterThanOrEqualTo = function greaterThanOrEqualTo(row, id, filterValue) {
+  return equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+};
+
+greaterThanOrEqualTo.autoRemove = function (val) {
+  return !val;
+};
+
 var lessThan = function lessThan(row, id, filterValue) {
-  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) <= +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
+  return !isNaN(+filterValue) && !isNaN(+row.getValue(id)) ? +row.getValue(id) < +filterValue : row.getValue(id).toString().toLowerCase().trim() < filterValue.toString().toLowerCase().trim();
 };
 
 lessThan.autoRemove = function (val) {
   return !val;
 };
 
+var lessThanOrEqualTo = function lessThanOrEqualTo(row, id, filterValue) {
+  return equals(row, id, filterValue) || lessThan(row, id, filterValue);
+};
+
+lessThanOrEqualTo.autoRemove = function (val) {
+  return !val;
+};
+
 var between = function between(row, id, filterValues) {
   return (['', undefined].includes(filterValues[0]) || greaterThan(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThan(row, id, filterValues[1]));
 };
@@ -535,6 +587,14 @@ between.autoRemove = function (val) {
   return !val;
 };
 
+var betweenInclusive = function betweenInclusive(row, id, filterValues) {
+  return (['', undefined].includes(filterValues[0]) || greaterThanOrEqualTo(row, id, filterValues[0])) && (!isNaN(+filterValues[0]) && !isNaN(+filterValues[1]) && +filterValues[0] > +filterValues[1] || ['', undefined].includes(filterValues[1]) || lessThanOrEqualTo(row, id, filterValues[1]));
+};
+
+betweenInclusive.autoRemove = function (val) {
+  return !val;
+};
+
 var empty = function empty(row, id, _filterValue) {
   return !row.getValue(id).toString().trim();
 };
@@ -553,13 +613,16 @@ notEmpty.autoRemove = function (val) {
 
 var MRT_FilterFns = /*#__PURE__*/_extends({}, reactTable.filterFns, {
   between: between,
+  betweenInclusive: betweenInclusive,
   contains: contains,
   empty: empty,
   endsWith: endsWith,
   equals: equals,
   fuzzy: fuzzy,
   greaterThan: greaterThan,
+  greaterThanOrEqualTo: greaterThanOrEqualTo,
   lessThan: lessThan,
+  lessThanOrEqualTo: lessThanOrEqualTo,
   notEmpty: notEmpty,
   notEquals: notEquals,
   startsWith: startsWith
@@ -911,7 +974,7 @@ var MRT_ShowHideColumnsMenu = function MRT_ShowHideColumnsMenu(_ref) {
   }));
 };
 
-var commonMenuItemStyles$1 = {
+var commonMenuItemStyles = {
   py: '6px',
   my: 0,
   justifyContent: 'space-between',
@@ -1055,14 +1118,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     disabled: !column.getIsSorted(),
     key: 0,
     onClick: handleClearSort,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ClearAllIcon, null)), localization.clearSort)), React__default.createElement(material.MenuItem, {
     disabled: column.getIsSorted() === 'asc',
     key: 1,
     onClick: handleSortAsc,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, null)), (_localization$sortByC = localization.sortByColumnAsc) == null ? void 0 : _localization$sortByC.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
@@ -1070,7 +1133,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     key: 2,
     disabled: column.getIsSorted() === 'desc',
     onClick: handleSortDesc,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(SortIcon, {
@@ -1081,14 +1144,14 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     disabled: !column.getFilterValue(),
     key: 0,
     onClick: handleClearFilter,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListOffIcon, null)), localization.clearFilter)), React__default.createElement(material.MenuItem, {
     divider: enableGrouping || enableHiding,
     key: 1,
     onClick: handleFilterByColumn,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(FilterListIcon, null)), (_localization$filterB = localization.filterByColumn) == null ? void 0 : _localization$filterB.replace('{column}', String(columnDef.header))), showFilterModeSubMenu && React__default.createElement(material.IconButton, {
@@ -1109,7 +1172,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     divider: enablePinning,
     key: 0,
     onClick: handleGroupByColumn,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(DynamicFeedIcon, null)), (_localization = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) == null ? void 0 : _localization.replace('{column}', String(columnDef.header))))], enablePinning && column.getCanPin() && [React__default.createElement(material.MenuItem, {
@@ -1118,7 +1181,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClick: function onClick() {
       return handlePinColumn('left');
     },
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
@@ -1131,7 +1194,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClick: function onClick() {
       return handlePinColumn('right');
     },
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, {
@@ -1145,21 +1208,21 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     onClick: function onClick() {
       return handlePinColumn(false);
     },
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(PushPinIcon, null)), localization.unpin))], enableColumnResizing && column.getCanResize() && [React__default.createElement(material.MenuItem, {
     disabled: !columnSizing[column.id],
     key: 0,
     onClick: handleResetColumnSize,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(RestartAltIcon, null)), localization.resetColumnSize))], enableHiding && [React__default.createElement(material.MenuItem, {
     disabled: columnDef.enableHiding === false,
     key: 0,
     onClick: handleHideColumn,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(VisibilityOffIcon, null)), (_localization$hideCol = localization.hideColumn) == null ? void 0 : _localization$hideCol.replace('{column}', String(columnDef.header)))), React__default.createElement(material.MenuItem, {
@@ -1168,7 +1231,7 @@ var MRT_ColumnActionMenu = function MRT_ColumnActionMenu(_ref) {
     }).length,
     key: 1,
     onClick: handleShowAllColumns,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(ViewColumnIcon, null)), (_localization$showAll = localization.showAllColumns) == null ? void 0 : _localization$showAll.replace('{column}', String(columnDef.header))), React__default.createElement(material.IconButton, {
@@ -1214,7 +1277,7 @@ var MRT_RowActionMenu = function MRT_RowActionMenu(_ref) {
     }
   }, enableEditing && React__default.createElement(material.MenuItem, {
     onClick: handleEdit,
-    sx: commonMenuItemStyles$1
+    sx: commonMenuItemStyles
   }, React__default.createElement(material.Box, {
     sx: commonListItemStyles
   }, React__default.createElement(material.ListItemIcon, null, React__default.createElement(EditIcon, null)), localization.edit)), renderRowActionMenuItems == null ? void 0 : renderRowActionMenuItems({