material-react-table 0.5.4 → 0.5.7

package/dist/menus/MRT_ColumnActionMenu.d.ts

@@ -1,5 +1,9 @@
 import { FC } from 'react';
 import { MRT_HeaderGroup } from '..';
+export declare const commonMenuItemStyles: {
+    py: string;
+    my: string;
+};
 interface Props {
     anchorEl: HTMLElement | null;
     column: MRT_HeaderGroup;

package/dist/menus/{MRT_FilterMenu.d.ts → MRT_FilterTypeMenu.d.ts}

@@ -6,5 +6,5 @@ interface Props {
     setAnchorEl: (anchorEl: HTMLElement | null) => void;
     onSelect?: () => void;
 }
-export declare const MRT_FilterMenu: FC<Props>;
+export declare const MRT_FilterTypeMenu: FC<Props>;
 export {};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.4",
+  "version": "0.5.7",
   "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.",
@@ -28,7 +28,7 @@
   },
   "scripts": {
     "analyze": "size-limit --why",
-    "build": "tsdx build && size-limit",
+    "build": "tsdx build && size-limit && cp -r dist material-react-table-docs/node_modules/material-react-table/dist && cp -r src material-react-table-docs/node_modules/material-react-table/src && cp -r package.json material-react-table-docs/node_modules/material-react-table/package.json",
     "build-storybook": "build-storybook",
     "format": "prettier -w .",
     "lint": "tsdx lint",
@@ -36,8 +36,7 @@
     "size": "size-limit",
     "start": "tsdx watch",
     "storybook": "start-storybook -p 6006",
-    "test": "tsdx test --passWithNoTests",
-    "upgrade": "ncu -u && npm i"
+    "test": "tsdx test --passWithNoTests"
   },
   "husky": {
     "hooks": {
@@ -60,9 +59,9 @@
     "@emotion/react": "^11.8.1",
     "@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.4",
-    "@mui/material": "^5.4.4",
+    "@faker-js/faker": "^6.0.0-beta.0",
+    "@mui/icons-material": "^5.5.0",
+    "@mui/material": "^5.5.0",
     "@size-limit/preset-small-lib": "^7.0.8",
     "@storybook/addon-a11y": "^6.4.19",
     "@storybook/addon-actions": "^6.4.19",

package/src/MaterialReactTable.tsx

@@ -2,6 +2,8 @@ import React, { ChangeEvent, FC, MouseEvent, ReactNode } from 'react';
 import {
   AlertProps,
   IconButtonProps,
+  LinearProgressProps,
+  SkeletonProps,
   TableBodyProps,
   TableCellProps,
   TableContainerProps,
@@ -244,6 +246,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     isFetching?: boolean;
     isLoading?: boolean;
     localization?: Partial<MRT_Localization>;
+    muiLinearProgressProps?:
+      | LinearProgressProps
+      | ((tableInstance: MRT_TableInstance) => LinearProgressProps);
     muiSearchTextFieldProps?: TextFieldProps;
     muiTableBodyCellEditTextFieldProps?:
       | TextFieldProps
@@ -251,6 +256,9 @@ export type MaterialReactTableProps<D extends {} = {}> = UseTableOptions<D> &
     muiTableBodyCellProps?:
       | TableCellProps
       | ((cell?: MRT_Cell<D>) => TableCellProps);
+    muiTableBodyCellSkeletonProps?:
+      | SkeletonProps
+      | ((cell?: MRT_Cell<D>) => SkeletonProps);
     muiTableBodyProps?:
       | TableBodyProps
       | ((tableInstance: MRT_TableInstance<D>) => TableBodyProps);

package/src/body/MRT_TableBodyCell.tsx

@@ -1,5 +1,5 @@
 import React, { FC, MouseEvent } from 'react';
-import { TableCell, TableCellProps } from '@mui/material';
+import { Skeleton, TableCell, TableCellProps } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { MRT_Cell } from '..';
@@ -22,8 +22,10 @@ interface Props {
 
 export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
   const {
-    onCellClick,
+    isLoading,
     muiTableBodyCellProps,
+    muiTableBodyCellSkeletonProps,
+    onCellClick,
     tableInstance: {
       state: { currentEditingRow, densePadding },
     },
@@ -63,7 +65,14 @@ export const MRT_TableBodyCell: FC<Props> = ({ cell }) => {
         } as TableCellProps['sx']
       }
     >
-      {currentEditingRow?.id === cell.row.id ? (
+      {isLoading ? (
+        <Skeleton
+          animation="wave"
+          height={20}
+          width={Math.random() * (120 - 60) + 60}
+          {...muiTableBodyCellSkeletonProps}
+        />
+      ) : currentEditingRow?.id === cell.row.id ? (
         <MRT_EditCellTextField cell={cell} />
       ) : cell.isPlaceholder ? null : cell.isAggregated ? (
         cell.render('Aggregated')

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -11,14 +11,15 @@ import {
 import { useMRT } from '../useMRT';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_ColumnInstance } from '..';
+import { commonMenuItemStyles } from '../menus/MRT_ColumnActionMenu';
 
 interface Props extends IconButtonProps {}
 
 export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
   const {
-    tableInstance,
-    localization,
     icons: { ViewColumnIcon },
+    localization,
+    tableInstance,
   } = useMRT();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -43,12 +44,17 @@ export const MRT_ShowHideColumnsButton: FC<Props> = ({ ...rest }) => {
         anchorEl={anchorEl}
         open={!!anchorEl}
         onClose={() => setAnchorEl(null)}
+        MenuListProps={{
+          dense: tableInstance.state.densePadding,
+          disablePadding: true,
+        }}
+        sx={commonMenuItemStyles}
       >
         <Box
           sx={{
             display: 'flex',
             justifyContent: 'space-between',
-            p: '0 0.5rem 0.5rem 0.5rem',
+            p: '0.5rem',
           }}
         >
           <Button

package/src/footer/MRT_TableFooterCell.tsx

@@ -16,7 +16,7 @@ export const MRT_TableFooterCell: FC<Props> = ({ column }) => {
     },
   } = useMRT();
 
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+  const isParentHeader = !!column?.columns?.length;
 
   const mTableFooterCellProps =
     muiTableFooterCellProps instanceof Function

package/src/head/MRT_TableHeadCell.tsx

@@ -6,6 +6,7 @@ import {
   Collapse,
   Tooltip,
   Box,
+  IconButton,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
@@ -33,12 +34,14 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
     disableColumnActions,
     disableFilters,
     enableColumnResizing,
+    icons: { FilterAltIcon, FilterAltOff },
     localization,
     muiTableHeadCellProps,
+    setShowFilters,
     tableInstance,
   } = useMRT();
 
-  const isParentHeader = (column?.columns?.length ?? 0) > 0;
+  const isParentHeader = !!column?.columns?.length;
 
   const mTableHeadCellProps =
     muiTableHeadCellProps instanceof Function
@@ -73,6 +76,23 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
         column.Header as string,
       );
 
+  const filterTooltip = !!column.filterValue
+    ? localization.filterApplied
+        .replace('{column}', String(column.Header))
+        .replace(
+          '{filterType}',
+          // @ts-ignore
+          localization[
+            `filterMenuItem${
+              tableInstance.state.currentFilterTypes[column.id]
+                .charAt(0)
+                .toUpperCase() +
+              tableInstance.state.currentFilterTypes[column.id].slice(1)
+            }`
+          ],
+        )
+    : localization.toggleFilterButtonTitle;
+
   const columnHeader = column.render('Header') as string;
 
   return (
@@ -115,6 +135,32 @@ export const MRT_TableHeadCell: FC<Props> = ({ column }) => {
               />
             </Tooltip>
           )}
+          {!isParentHeader && !!column.canFilter && (
+            <Tooltip arrow title={filterTooltip}>
+              <IconButton
+                onClick={(event) => {
+                  event.stopPropagation();
+                  setShowFilters(!tableInstance.state.showFilters);
+                }}
+                size="small"
+                sx={{
+                  opacity: !!column.filterValue ? 0.8 : 0,
+                  p: '2px',
+                  m: 0,
+                  transition: 'all 0.2s ease-in-out',
+                  '&:hover': {
+                    opacity: 0.8,
+                  },
+                }}
+              >
+                {tableInstance.state.showFilters && !column.filterValue ? (
+                  <FilterAltOff fontSize="small" />
+                ) : (
+                  <FilterAltIcon fontSize="small" />
+                )}
+              </IconButton>
+            </Tooltip>
+          )}
         </Box>
         <Box sx={{ alignItems: 'center', display: 'flex', flexWrap: 'nowrap' }}>
           {!disableColumnActions && !isParentHeader && (

package/src/{icons.tsx → icons.ts}

@@ -1,3 +1,4 @@
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
 import ClearAllIcon from '@mui/icons-material/ClearAll';
 import CloseIcon from '@mui/icons-material/Close';
@@ -8,6 +9,8 @@ import DynamicFeedIcon from '@mui/icons-material/DynamicFeed';
 import EditIcon from '@mui/icons-material/Edit';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import FilterAltIcon from '@mui/icons-material/FilterAlt';
+import FilterAltOff from '@mui/icons-material/FilterAltOff';
 import FilterListIcon from '@mui/icons-material/FilterList';
 import FilterListOffIcon from '@mui/icons-material/FilterListOff';
 import FullscreenExitIcon from '@mui/icons-material/FullscreenExit';
@@ -22,6 +25,7 @@ import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
 export interface MRT_Icons {
+  ArrowRightIcon: any;
   CancelIcon: any;
   ClearAllIcon: any;
   CloseIcon: any;
@@ -32,6 +36,8 @@ export interface MRT_Icons {
   EditIcon: any;
   ExpandLessIcon: any;
   ExpandMoreIcon: any;
+  FilterAltIcon: any;
+  FilterAltOff: any;
   FilterListIcon: any;
   FilterListOffIcon: any;
   FullscreenExitIcon: any;
@@ -47,6 +53,7 @@ export interface MRT_Icons {
 }
 
 export const MRT_Default_Icons: MRT_Icons = {
+  ArrowRightIcon,
   CancelIcon,
   ClearAllIcon,
   CloseIcon,
@@ -57,6 +64,8 @@ export const MRT_Default_Icons: MRT_Icons = {
   EditIcon,
   ExpandLessIcon,
   ExpandMoreIcon,
+  FilterAltIcon,
+  FilterAltOff,
   FilterListIcon,
   FilterListOffIcon,
   FullscreenExitIcon,

package/src/inputs/MRT_FilterTextField.tsx

@@ -10,7 +10,7 @@ import {
 import { useAsyncDebounce } from 'react-table';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
-import { MRT_FilterMenu } from '../menus/MRT_FilterMenu';
+import { MRT_FilterTypeMenu } from '../menus/MRT_FilterTypeMenu';
 
 interface Props {
   column: MRT_HeaderGroup;
@@ -73,7 +73,7 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
   }
 
   const filterType = tableInstance.state.currentFilterTypes[column.id];
-  const showFilterChip = ['empty', 'notEmpty'].includes(filterType);
+  const filterChipLabel = ['empty', 'notEmpty'].includes(filterType);
   const filterPlaceholder = localization.filterTextFieldPlaceholder?.replace(
     '{column}',
     String(column.Header),
@@ -85,13 +85,15 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         fullWidth
         id={`mrt-${idPrefix}-${column.id}-filter-text-field`}
         inputProps={{
+          disabled: !!filterChipLabel,
           sx: {
             textOverflow: 'ellipsis',
+            width: filterChipLabel ? 0 : undefined,
           },
           title: filterPlaceholder,
         }}
         margin="none"
-        placeholder={showFilterChip ? '' : filterPlaceholder}
+        placeholder={filterChipLabel ? '' : filterPlaceholder}
         onChange={(e: ChangeEvent<HTMLInputElement>) => {
           setFilterValue(e.target.value);
           handleChange(e.target.value);
@@ -111,12 +113,12 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
                   <FilterListIcon />
                 </IconButton>
               </Tooltip>
-              {showFilterChip && (
+              {filterChipLabel && (
                 <Chip onDelete={handleClearFilterChip} label={filterType} />
               )}
             </InputAdornment>
           ),
-          endAdornment: !showFilterChip && (
+          endAdornment: !filterChipLabel && (
             <InputAdornment position="end">
               <Tooltip
                 arrow
@@ -140,11 +142,13 @@ export const MRT_FilterTextField: FC<Props> = ({ column }) => {
         }}
         {...textFieldProps}
         sx={{
-          minWidth: '6rem',
+          m: '0 -0.25rem',
+          minWidth: !filterChipLabel ? '5rem' : 'auto',
+          width: 'calc(100% + 0.5rem)',
           ...textFieldProps?.sx,
         }}
       />
-      <MRT_FilterMenu
+      <MRT_FilterTypeMenu
         anchorEl={anchorEl}
         column={column}
         setAnchorEl={setAnchorEl}

package/src/localization.ts

@@ -11,6 +11,7 @@ export interface MRT_Localization {
   columnShowHideMenuShowAll: string;
   expandAllButtonTitle: string;
   expandButtonTitle: string;
+  filterApplied: string;
   filterMenuItemContains: string;
   filterMenuItemEmpty: string;
   filterMenuItemEndsWith: string;
@@ -20,6 +21,9 @@ export interface MRT_Localization {
   filterMenuItemNotEquals: string;
   filterMenuItemStartsWith: string;
   filterMenuTitle: string;
+  filterTextFieldChangeFilterButtonTitle: string;
+  filterTextFieldChipLabelEmpty: string;
+  filterTextFieldChipLabelNotEmpty: string;
   filterTextFieldClearButtonTitle: string;
   filterTextFieldPlaceholder: string;
   rowActionButtonCancel: string;
@@ -54,15 +58,19 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   columnShowHideMenuShowAll: 'Show all',
   expandAllButtonTitle: 'Expand all',
   expandButtonTitle: 'Expand',
+  filterApplied: 'Filtering by {column} - ({filterType})',
   filterMenuItemContains: 'Contains Exact',
   filterMenuItemEmpty: 'Empty',
   filterMenuItemEndsWith: 'Ends With',
   filterMenuItemEquals: 'Equals',
-  filterMenuItemFuzzy: 'Fuzzy Match',
+  filterMenuItemFuzzy: 'Fuzzy Match (Default)',
   filterMenuItemNotEmpty: 'Not Empty',
   filterMenuItemNotEquals: 'Not Equals',
   filterMenuItemStartsWith: 'Starts With',
   filterMenuTitle: 'Filter Mode',
+  filterTextFieldChangeFilterButtonTitle: 'Change Filter Mode',
+  filterTextFieldChipLabelEmpty: 'Empty',
+  filterTextFieldChipLabelNotEmpty: 'Not Empty',
   filterTextFieldClearButtonTitle: 'Clear filter',
   filterTextFieldPlaceholder: 'Filter by {column}',
   rowActionButtonCancel: 'Cancel',
@@ -76,9 +84,9 @@ export const MRT_DefaultLocalization_EN: MRT_Localization = {
   selectCheckboxTitle: 'Toggle select row',
   showHideColumnsButtonTitle: 'Show/Hide columns',
   toggleDensePaddingSwitchTitle: 'Toggle dense padding',
-  toggleFilterButtonTitle: 'Toggle filters',
+  toggleFilterButtonTitle: 'Show/Hide filters',
   toggleFullScreenButtonTitle: 'Toggle full screen',
-  toggleSearchButtonTitle: 'Toggle search',
+  toggleSearchButtonTitle: 'Show/Hide search',
   toolbarAlertGroupedByMessage: 'Grouped by ',
   toolbarAlertGroupedThenByMessage: ', then by ',
   toolbarAlertSelectionMessage: '{selectedCount} of {rowCount} row(s) selected',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -1,17 +1,19 @@
 import React, { FC, useState } from 'react';
 import {
-  Divider,
   IconButton,
   ListItemIcon,
   ListItemText,
   Menu,
   MenuItem,
-  MenuList,
 } from '@mui/material';
 import { useMRT } from '../useMRT';
 import { MRT_HeaderGroup } from '..';
-import { MRT_FilterMenu } from './MRT_FilterMenu';
-import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import { MRT_FilterTypeMenu } from './MRT_FilterTypeMenu';
+
+export const commonMenuItemStyles = {
+  py: '0 !important',
+  my: '0 !important',
+};
 
 interface Props {
   anchorEl: HTMLElement | null;
@@ -30,6 +32,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     disableSortBy,
     enableColumnGrouping,
     icons: {
+      ArrowRightIcon,
       ClearAllIcon,
       DynamicFeedIcon,
       FilterListIcon,
@@ -39,6 +42,7 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
     idPrefix,
     localization,
     setShowFilters,
+    tableInstance,
   } = useMRT();
 
   const [filterMenuAnchorEl, setFilterMenuAnchorEl] =
@@ -95,109 +99,129 @@ export const MRT_ColumnActionMenu: FC<Props> = ({
       anchorEl={anchorEl}
       open={!!anchorEl}
       onClose={() => setAnchorEl(null)}
+      MenuListProps={{
+        dense: tableInstance.state.densePadding,
+        disablePadding: true,
+      }}
     >
-      <MenuList>
-        {!disableSortBy &&
-          column.canSort && [
-            <MenuItem
-              key={1}
-              disabled={!column.isSorted}
-              onClick={handleClearSort}
-            >
-              <ListItemIcon>
-                <ClearAllIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.columnActionMenuItemClearSort}
-              </ListItemText>
-            </MenuItem>,
-            <MenuItem
-              key={2}
-              disabled={column.isSorted && !column.isSortedDesc}
-              onClick={handleSortAsc}
-            >
-              <ListItemIcon>
-                <SortIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.columnActionMenuItemSortAsc?.replace(
-                  '{column}',
-                  String(column.Header),
-                )}
-              </ListItemText>
-            </MenuItem>,
-            <MenuItem
-              key={3}
-              disabled={column.isSorted && column.isSortedDesc}
-              onClick={handleSortDesc}
-            >
-              <ListItemIcon>
-                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.columnActionMenuItemSortDesc?.replace(
-                  '{column}',
-                  String(column.Header),
-                )}
-              </ListItemText>
-            </MenuItem>,
-          ]}
-        {!disableFilters &&
-          column.canFilter && [
-            <Divider key={0} />,
-            <MenuItem key={1} onClick={handleFilterByColumn}>
-              <ListItemIcon>
-                <FilterListIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization.filterTextFieldPlaceholder?.replace(
-                  '{column}',
-                  String(column.Header),
-                )}
-              </ListItemText>
-              <IconButton size="small" onMouseEnter={handleOpenFilterModeMenu}>
-                <ArrowRightIcon />
-              </IconButton>
-            </MenuItem>,
-            <MRT_FilterMenu
-              anchorEl={filterMenuAnchorEl}
-              column={column}
-              key={2}
-              setAnchorEl={setFilterMenuAnchorEl}
-              onSelect={handleFilterByColumn}
-            />,
-          ]}
-        {enableColumnGrouping &&
-          column.canGroupBy && [
-            <Divider key={1} />,
-            <MenuItem key={2} onClick={handleGroupByColumn}>
-              <ListItemIcon>
-                <DynamicFeedIcon />
-              </ListItemIcon>
-              <ListItemText>
-                {localization[
-                  column.isGrouped
-                    ? 'columnActionMenuItemUnGroupBy'
-                    : 'columnActionMenuItemGroupBy'
-                ]?.replace('{column}', String(column.Header))}
-              </ListItemText>
-            </MenuItem>,
-          ]}
-        {!disableColumnHiding && [
-          <Divider key={0} />,
-          <MenuItem key={1} onClick={handleHideColumn}>
+      {!disableSortBy &&
+        column.canSort && [
+          <MenuItem
+            key={1}
+            disabled={!column.isSorted}
+            onClick={handleClearSort}
+            sx={commonMenuItemStyles}
+          >
+            <ListItemIcon>
+              <ClearAllIcon />
+            </ListItemIcon>
+            <ListItemText sx={commonMenuItemStyles}>
+              {localization.columnActionMenuItemClearSort}
+            </ListItemText>
+          </MenuItem>,
+          <MenuItem
+            disabled={column.isSorted && !column.isSortedDesc}
+            key={2}
+            onClick={handleSortAsc}
+            sx={commonMenuItemStyles}
+          >
+            <ListItemIcon>
+              <SortIcon />
+            </ListItemIcon>
+            <ListItemText sx={commonMenuItemStyles}>
+              {localization.columnActionMenuItemSortAsc?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </ListItemText>
+          </MenuItem>,
+          <MenuItem
+            divider={
+              !disableFilters || enableColumnGrouping || !disableColumnHiding
+            }
+            key={3}
+            disabled={column.isSorted && column.isSortedDesc}
+            onClick={handleSortDesc}
+            sx={commonMenuItemStyles}
+          >
             <ListItemIcon>
-              <VisibilityOffIcon />
+              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
             </ListItemIcon>
-            <ListItemText>
-              {localization.columnActionMenuItemHideColumn?.replace(
+            <ListItemText sx={commonMenuItemStyles}>
+              {localization.columnActionMenuItemSortDesc?.replace(
                 '{column}',
                 String(column.Header),
               )}
             </ListItemText>
           </MenuItem>,
         ]}
-      </MenuList>
+      {!disableFilters &&
+        column.canFilter && [
+          <MenuItem
+            divider={enableColumnGrouping || !disableColumnHiding}
+            key={1}
+            onClick={handleFilterByColumn}
+            sx={commonMenuItemStyles}
+          >
+            <ListItemIcon>
+              <FilterListIcon />
+            </ListItemIcon>
+            <ListItemText sx={commonMenuItemStyles}>
+              {localization.filterTextFieldPlaceholder?.replace(
+                '{column}',
+                String(column.Header),
+              )}
+            </ListItemText>
+            <IconButton
+              onClick={handleOpenFilterModeMenu}
+              onMouseEnter={handleOpenFilterModeMenu}
+              size="small"
+              sx={{ p: 0 }}
+            >
+              <ArrowRightIcon />
+            </IconButton>
+          </MenuItem>,
+          <MRT_FilterTypeMenu
+            anchorEl={filterMenuAnchorEl}
+            column={column}
+            key={2}
+            setAnchorEl={setFilterMenuAnchorEl}
+            onSelect={handleFilterByColumn}
+          />,
+        ]}
+      {enableColumnGrouping &&
+        column.canGroupBy && [
+          <MenuItem
+            divider={!disableColumnHiding}
+            key={2}
+            onClick={handleGroupByColumn}
+            sx={commonMenuItemStyles}
+          >
+            <ListItemIcon>
+              <DynamicFeedIcon />
+            </ListItemIcon>
+            <ListItemText sx={commonMenuItemStyles}>
+              {localization[
+                column.isGrouped
+                  ? 'columnActionMenuItemUnGroupBy'
+                  : 'columnActionMenuItemGroupBy'
+              ]?.replace('{column}', String(column.Header))}
+            </ListItemText>
+          </MenuItem>,
+        ]}
+      {!disableColumnHiding && [
+        <MenuItem key={1} onClick={handleHideColumn} sx={commonMenuItemStyles}>
+          <ListItemIcon>
+            <VisibilityOffIcon />
+          </ListItemIcon>
+          <ListItemText sx={commonMenuItemStyles}>
+            {localization.columnActionMenuItemHideColumn?.replace(
+              '{column}',
+              String(column.Header),
+            )}
+          </ListItemText>
+        </MenuItem>,
+      ]}
     </Menu>
   );
 };