material-react-table 2.9.2 → 2.11.0

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -1,11 +1,7 @@
-import { useState } from 'react';
-import * as React from 'react';
-import Box from '@mui/material/Box';
-import IconButton from '@mui/material/IconButton';
-import ListItemIcon from '@mui/material/ListItemIcon';
+import { type MouseEvent, useState } from 'react';
 import Menu, { type MenuProps } from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import { useTheme } from '@mui/material/styles';
+import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import {
   type MRT_Header,
@@ -14,19 +10,8 @@ import {
 } from '../../types';
 import { getMRTTheme } from '../../utils/style.utils';
 
-export const commonMenuItemStyles = {
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  my: 0,
-  py: '6px',
-};
-
-export const commonListItemStyles = {
-  alignItems: 'center',
-  display: 'flex',
-};
-
-interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
+export interface MRT_ColumnActionMenuProps<TData extends MRT_RowData>
+  extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header: MRT_Header<TData>;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
@@ -39,8 +24,9 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   setAnchorEl,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ColumnActionMenuProps<TData>) => {
   const {
+    getAllLeafColumns,
     getState,
     options: {
       columnFilterDisplayMode,
@@ -54,7 +40,6 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       enableSorting,
       enableSortingRemoval,
       icons: {
-        ArrowRightIcon,
         ClearAllIcon,
         DynamicFeedIcon,
         FilterListIcon,
@@ -73,7 +58,6 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
     setColumnOrder,
     setColumnSizingInfo,
     setShowColumnFilters,
-    toggleAllColumnsVisible,
   } = table;
   const { column } = header;
   const { columnDef } = column;
@@ -139,11 +123,13 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   };
 
   const handleShowAllColumns = () => {
-    toggleAllColumnsVisible(true);
+    getAllLeafColumns()
+      .filter((col) => col.columnDef.enableHiding !== false)
+      .forEach((col) => col.toggleVisibility(true));
     setAnchorEl(null);
   };
 
-  const handleOpenFilterModeMenu = (event: React.MouseEvent<HTMLElement>) => {
+  const handleOpenFilterModeMenu = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
     setFilterMenuAnchorEl(event.currentTarget);
   };
@@ -164,106 +150,75 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
     ...(enableSorting && column.getCanSort()
       ? [
           enableSortingRemoval !== false && (
-            <MenuItem
-              disabled={!column.getIsSorted()}
+            <MRT_ActionMenuItem
+              icon={<ClearAllIcon />}
               key={0}
+              label={localization.clearSort}
               onClick={handleClearSort}
-              sx={commonMenuItemStyles}
-            >
-              <Box sx={commonListItemStyles}>
-                <ListItemIcon>
-                  <ClearAllIcon />
-                </ListItemIcon>
-                {localization.clearSort}
-              </Box>
-            </MenuItem>
+              table={table}
+            />
           ),
-          <MenuItem
+          <MRT_ActionMenuItem
             disabled={column.getIsSorted() === 'asc'}
+            icon={
+              <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
+            }
             key={1}
+            label={localization.sortByColumnAsc?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
             onClick={handleSortAsc}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <SortIcon style={{ transform: 'rotate(180deg) scaleX(-1)' }} />
-              </ListItemIcon>
-              {localization.sortByColumnAsc?.replace(
-                '{column}',
-                String(columnDef.header),
-              )}
-            </Box>
-          </MenuItem>,
-          <MenuItem
+            table={table}
+          />,
+          <MRT_ActionMenuItem
             disabled={column.getIsSorted() === 'desc'}
             divider={enableColumnFilters || enableGrouping || enableHiding}
+            icon={<SortIcon />}
             key={2}
+            label={localization.sortByColumnDesc?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
             onClick={handleSortDesc}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <SortIcon />
-              </ListItemIcon>
-              {localization.sortByColumnDesc?.replace(
-                '{column}',
-                String(columnDef.header),
-              )}
-            </Box>
-          </MenuItem>,
+            table={table}
+          />,
         ]
       : []),
     ...(enableColumnFilters && column.getCanFilter()
       ? [
-          <MenuItem
+          <MRT_ActionMenuItem
             disabled={
               !columnFilterValue ||
               (Array.isArray(columnFilterValue) &&
                 !columnFilterValue.filter((value) => value).length)
             }
+            icon={<FilterListOffIcon />}
             key={3}
+            label={localization.clearFilter}
             onClick={handleClearFilter}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <FilterListOffIcon />
-              </ListItemIcon>
-              {localization.clearFilter}
-            </Box>
-          </MenuItem>,
+            table={table}
+          />,
           columnFilterDisplayMode === 'subheader' && (
-            <MenuItem
+            <MRT_ActionMenuItem
               disabled={showColumnFilters && !enableColumnFilterModes}
               divider={enableGrouping || enableHiding}
+              icon={<FilterListIcon />}
               key={4}
+              label={localization.filterByColumn?.replace(
+                '{column}',
+                String(columnDef.header),
+              )}
               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>
-              )}
-            </MenuItem>
+              onOpenSubMenu={
+                showFilterModeSubMenu ? handleOpenFilterModeMenu : undefined
+              }
+              table={table}
+            />
           ),
           showFilterModeSubMenu && (
             <MRT_FilterOptionMenu
@@ -279,121 +234,86 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       : []),
     ...(enableGrouping && column.getCanGroup()
       ? [
-          <MenuItem
+          <MRT_ActionMenuItem
             divider={enableColumnPinning}
+            icon={<DynamicFeedIcon />}
             key={6}
+            label={localization[
+              column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
+            ]?.replace('{column}', String(columnDef.header))}
             onClick={handleGroupByColumn}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <DynamicFeedIcon />
-              </ListItemIcon>
-              {localization[
-                column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn'
-              ]?.replace('{column}', String(columnDef.header))}
-            </Box>
-          </MenuItem>,
+            table={table}
+          />,
         ]
       : []),
     ...(enableColumnPinning && column.getCanPin()
       ? [
-          <MenuItem
+          <MRT_ActionMenuItem
             disabled={column.getIsPinned() === 'left' || !column.getCanPin()}
+            icon={<PushPinIcon style={{ transform: 'rotate(90deg)' }} />}
             key={7}
+            label={localization.pinToLeft}
             onClick={() => handlePinColumn('left')}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <PushPinIcon style={{ transform: 'rotate(90deg)' }} />
-              </ListItemIcon>
-              {localization.pinToLeft}
-            </Box>
-          </MenuItem>,
-          <MenuItem
+            table={table}
+          />,
+          <MRT_ActionMenuItem
             disabled={column.getIsPinned() === 'right' || !column.getCanPin()}
+            icon={<PushPinIcon style={{ transform: 'rotate(-90deg)' }} />}
             key={8}
+            label={localization.pinToRight}
             onClick={() => handlePinColumn('right')}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <PushPinIcon style={{ transform: 'rotate(-90deg)' }} />
-              </ListItemIcon>
-              {localization.pinToRight}
-            </Box>
-          </MenuItem>,
-          <MenuItem
+            table={table}
+          />,
+          <MRT_ActionMenuItem
             disabled={!column.getIsPinned()}
             divider={enableHiding}
+            icon={<PushPinIcon />}
             key={9}
+            label={localization.unpin}
             onClick={() => handlePinColumn(false)}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <PushPinIcon />
-              </ListItemIcon>
-              {localization.unpin}
-            </Box>
-          </MenuItem>,
+            table={table}
+          />,
         ]
       : []),
     ...(enableColumnResizing && column.getCanResize()
       ? [
-          <MenuItem
+          <MRT_ActionMenuItem
             disabled={!columnSizing[column.id]}
+            icon={<RestartAltIcon />}
             key={10}
+            label={localization.resetColumnSize}
             onClick={handleResetColumnSize}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <RestartAltIcon />
-              </ListItemIcon>
-              {localization.resetColumnSize}
-            </Box>
-          </MenuItem>,
+            table={table}
+          />,
         ]
       : []),
     ...(enableHiding
       ? [
-          <MenuItem
+          <MRT_ActionMenuItem
             disabled={!column.getCanHide()}
+            icon={<VisibilityOffIcon />}
             key={11}
+            label={localization.hideColumn?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
             onClick={handleHideColumn}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <VisibilityOffIcon />
-              </ListItemIcon>
-              {localization.hideColumn?.replace(
-                '{column}',
-                String(columnDef.header),
-              )}
-            </Box>
-          </MenuItem>,
-          <MenuItem
+            table={table}
+          />,
+          <MRT_ActionMenuItem
             disabled={
               !Object.values(columnVisibility).filter((visible) => !visible)
                 .length
             }
+            icon={<ViewColumnIcon />}
             key={12}
+            label={localization.showAllColumns?.replace(
+              '{column}',
+              String(columnDef.header),
+            )}
             onClick={handleShowAllColumns}
-            sx={commonMenuItemStyles}
-          >
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <ViewColumnIcon />
-              </ListItemIcon>
-              {localization.showAllColumns?.replace(
-                '{column}',
-                String(columnDef.header),
-              )}
-            </Box>
-          </MenuItem>,
+            table={table}
+          />,
         ]
       : []),
   ].filter(Boolean);

package/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -1,8 +1,7 @@
 import { useMemo } from 'react';
-import Box from '@mui/material/Box';
 import Menu, { type MenuProps } from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import { useTheme } from '@mui/material/styles';
+import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import {
   type MRT_FilterOption,
   type MRT_Header,
@@ -107,7 +106,8 @@ const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
 const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
 
-interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
+export interface MRT_FilterOptionMenuProps<TData extends MRT_RowData>
+  extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header<TData>;
   onSelect?: () => void;
@@ -124,7 +124,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   setFilterValue,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterOptionMenuProps<TData>) => {
   const {
     getState,
     options: {
@@ -277,23 +277,16 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
           })) ??
         internalFilterOptions.map(
           ({ divider, label, option, symbol }, index) => (
-            <MenuItem
+            <MRT_ActionMenuItem
               divider={divider}
+              icon={symbol}
               key={index}
+              label={label}
               onClick={() => handleSelectFilterMode(option as MRT_FilterOption)}
               selected={option === filterOption}
-              sx={{
-                alignItems: 'center',
-                display: 'flex',
-                gap: '2ch',
-                my: 0,
-                py: '6px',
-              }}
+              table={table}
               value={option}
-            >
-              <Box sx={{ fontSize: '1.25rem', width: '2ch' }}>{symbol}</Box>
-              {label}
-            </MenuItem>
+            />
           ),
         )}
     </Menu>

package/src/components/menus/MRT_RowActionMenu.tsx

@@ -1,13 +1,7 @@
 import { type MouseEvent } from 'react';
-import Box from '@mui/material/Box';
-import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu, { type MenuProps } from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
 import { useTheme } from '@mui/material/styles';
-import {
-  commonListItemStyles,
-  commonMenuItemStyles,
-} from './MRT_ColumnActionMenu';
+import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import {
   type MRT_Row,
   type MRT_RowData,
@@ -16,7 +10,8 @@ import {
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
+export interface MRT_RowActionMenuProps<TData extends MRT_RowData>
+  extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   handleEdit: (event: MouseEvent) => void;
   row: MRT_Row<TData>;
@@ -33,7 +28,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_RowActionMenuProps<TData>) => {
   const {
     getState,
     options: {
@@ -66,14 +61,12 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
     >
       {parseFromValuesOrFunc(enableEditing, row) &&
         ['modal', 'row'].includes(editDisplayMode!) && (
-          <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-            <Box sx={commonListItemStyles}>
-              <ListItemIcon>
-                <EditIcon />
-              </ListItemIcon>
-              {localization.edit}
-            </Box>
-          </MenuItem>
+          <MRT_ActionMenuItem
+            icon={<EditIcon />}
+            label={localization.edit}
+            onClick={handleEdit}
+            table={table}
+          />
         )}
       {renderRowActionMenuItems?.({
         closeMenu: () => setAnchorEl(null),

package/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -13,7 +13,8 @@ import {
 import { getDefaultColumnOrderIds } from '../../utils/displayColumn.utils';
 import { getMRTTheme } from '../../utils/style.utils';
 
-interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
+export interface MRT_ShowHideColumnsMenuProps<TData extends MRT_RowData>
+  extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
@@ -25,7 +26,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
   setAnchorEl,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ShowHideColumnsMenuProps<TData>) => {
   const {
     getAllColumns,
     getAllLeafColumns,
@@ -75,6 +76,10 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
     getRightLeafColumns(),
   ]) as MRT_Column<TData>[];
 
+  const isNestedColumns = allColumns.some(
+    (col) => col.columnDef.columnDefType === 'group',
+  );
+
   const [hoveredColumn, setHoveredColumn] = useState<MRT_Column<TData> | null>(
     null,
   );
@@ -115,7 +120,9 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         {enableColumnOrdering && (
           <Button
             onClick={() =>
-              table.setColumnOrder(getDefaultColumnOrderIds(table.options))
+              table.setColumnOrder(
+                getDefaultColumnOrderIds(table.options, true),
+              )
             }
           >
             {localization.resetOrder}
@@ -144,6 +151,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
           allColumns={allColumns}
           column={column}
           hoveredColumn={hoveredColumn}
+          isNestedColumns={isNestedColumns}
           key={`${index}-${column.id}`}
           setHoveredColumn={setHoveredColumn}
           table={table}

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -22,10 +22,12 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
-interface Props<TData extends MRT_RowData> extends MenuItemProps {
+export interface MRT_ShowHideColumnsMenuItemsProps<TData extends MRT_RowData>
+  extends MenuItemProps {
   allColumns: MRT_Column<TData>[];
   column: MRT_Column<TData>;
   hoveredColumn: MRT_Column<TData> | null;
+  isNestedColumns: boolean;
   setHoveredColumn: Dispatch<SetStateAction<MRT_Column<TData> | null>>;
   table: MRT_TableInstance<TData>;
 }
@@ -34,10 +36,11 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
   allColumns,
   column,
   hoveredColumn,
+  isNestedColumns,
   setHoveredColumn,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ShowHideColumnsMenuItemsProps<TData>) => {
   const {
     getState,
     options: {
@@ -130,9 +133,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
         >
           {columnDefType !== 'group' &&
             enableColumnOrdering &&
-            !allColumns.some(
-              (col) => col.columnDef.columnDefType === 'group',
-            ) &&
+            !isNestedColumns &&
             (columnDef.enableColumnOrdering !== false ? (
               <MRT_GrabHandleButton
                 onDragEnd={handleDragEnd}
@@ -183,6 +184,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
           allColumns={allColumns}
           column={c}
           hoveredColumn={hoveredColumn}
+          isNestedColumns={isNestedColumns}
           key={`${i}-${c.id}`}
           setHoveredColumn={setHoveredColumn}
           table={table}

package/src/components/modals/MRT_EditRowModal.tsx

@@ -12,7 +12,8 @@ import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 
-interface Props<TData extends MRT_RowData> extends Partial<DialogProps> {
+export interface MRT_EditRowModalProps<TData extends MRT_RowData>
+  extends Partial<DialogProps> {
   open: boolean;
   table: MRT_TableInstance<TData>;
 }
@@ -21,7 +22,7 @@ export const MRT_EditRowModal = <TData extends MRT_RowData>({
   open,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_EditRowModalProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/table/MRT_Table.tsx

@@ -8,14 +8,14 @@ import { MRT_TableBody, Memo_MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 
-interface Props<TData extends MRT_RowData> extends TableProps {
+export interface MRT_TableProps<TData extends MRT_RowData> extends TableProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_Table = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableProps<TData>) => {
   const {
     getFlatHeaders,
     getState,

package/src/components/table/MRT_TableContainer.tsx

@@ -6,30 +6,34 @@ import { MRT_Table } from './MRT_Table';
 import { MRT_TableLoadingOverlay } from './MRT_TableLoadingOverlay';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
+import { MRT_CellActionMenu } from '../menus/MRT_CellActionMenu';
 import { MRT_EditRowModal } from '../modals/MRT_EditRowModal';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 
-interface Props<TData extends MRT_RowData> extends TableContainerProps {
+export interface MRT_TableContainerProps<TData extends MRT_RowData>
+  extends TableContainerProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableContainer = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableContainerProps<TData>) => {
   const {
     getState,
     options: {
       createDisplayMode,
       editDisplayMode,
+      enableCellActions,
       enableStickyHeader,
       muiTableContainerProps,
     },
     refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
   } = table;
   const {
+    actionCell,
     creatingRow,
     editingRow,
     isFullScreen,
@@ -101,6 +105,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
       {(createModalOpen || editModalOpen) && (
         <MRT_EditRowModal open table={table} />
       )}
+      {enableCellActions && actionCell && <MRT_CellActionMenu table={table} />}
     </TableContainer>
   );
 };