material-react-table 2.9.1 → 2.10.0

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -1,12 +1,8 @@
-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_FilterOptionMenu } from './MRT_FilterOptionMenu';
+import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import {
   type MRT_Header,
   type MRT_RowData,
@@ -14,18 +10,6 @@ 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> {
   anchorEl: HTMLElement | null;
   header: MRT_Header<TData>;
@@ -42,6 +26,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
 }: Props<TData>) => {
   const {
     getState,
+    getAllLeafColumns,
     options: {
       columnFilterDisplayMode,
       columnFilterModeOptions,
@@ -54,7 +39,6 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       enableSorting,
       enableSortingRemoval,
       icons: {
-        ArrowRightIcon,
         ClearAllIcon,
         DynamicFeedIcon,
         FilterListIcon,
@@ -73,7 +57,6 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
     setColumnOrder,
     setColumnSizingInfo,
     setShowColumnFilters,
-    toggleAllColumnsVisible,
   } = table;
   const { column } = header;
   const { columnDef } = column;
@@ -139,11 +122,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 +149,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 +233,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);
@@ -410,6 +329,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
         },
       }}
       anchorEl={anchorEl}
+      disableScrollLock
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       {...rest}

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,
@@ -252,6 +251,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
       }}
       anchorEl={anchorEl}
       anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
+      disableScrollLock
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       {...rest}
@@ -276,23 +276,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,
@@ -58,6 +52,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
         },
       }}
       anchorEl={anchorEl}
+      disableScrollLock
       onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
@@ -65,14 +60,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

@@ -91,6 +91,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         },
       }}
       anchorEl={anchorEl}
+      disableScrollLock
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       {...rest}
@@ -114,7 +115,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}

package/src/components/table/MRT_Table.tsx

@@ -67,6 +67,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
       sx={(theme) => ({
         borderCollapse: 'separate',
         display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+        position: 'relative',
         ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
       })}
     >

package/src/components/table/MRT_TableContainer.tsx

@@ -6,6 +6,7 @@ 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 =
@@ -24,12 +25,14 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
     options: {
       createDisplayMode,
       editDisplayMode,
+      enableCellActions,
       enableStickyHeader,
       muiTableContainerProps,
     },
     refs: { bottomToolbarRef, tableContainerRef, topToolbarRef },
   } = table;
   const {
+    actionCell,
     creatingRow,
     editingRow,
     isFullScreen,
@@ -101,6 +104,7 @@ export const MRT_TableContainer = <TData extends MRT_RowData>({
       {(createModalOpen || editModalOpen) && (
         <MRT_EditRowModal open table={table} />
       )}
+      {enableCellActions && actionCell && <MRT_CellActionMenu table={table} />}
     </TableContainer>
   );
 };

package/src/components/toolbar/MRT_TablePagination.tsx

@@ -8,6 +8,7 @@ import Select, { type SelectProps } from '@mui/material/Select';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { flipIconStyles, getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -33,6 +34,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   ...rest
 }: Props<TData>) => {
   const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width: 720px)');
 
   const {
     getPrePaginationRowModel,
@@ -67,18 +69,22 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
 
   const {
-    SelectProps,
+    SelectProps = {},
     disabled = false,
     rowsPerPageOptions = defaultRowsPerPage,
     showFirstButton = showFirstLastPageButtons,
     showLastButton = showFirstLastPageButtons,
     showRowsPerPage = true,
-    ..._rest
+    ...restPaginationProps
   } = paginationProps ?? {};
 
   const disableBack = pageIndex <= 0 || disabled;
   const disableNext = lastRowIndex >= totalRowCount || disabled;
 
+  if (isMobile && SelectProps?.native !== false) {
+    SelectProps.native = true;
+  }
+
   const tooltipProps = getCommonTooltipProps();
 
   return (
@@ -109,10 +115,13 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             {localization.rowsPerPage}
           </InputLabel>
           <Select
+            MenuProps={{ disableScrollLock: true }}
             disableUnderline
             disabled={disabled}
-            id="mrt-rows-per-page"
-            inputProps={{ 'aria-label': localization.rowsPerPage }}
+            inputProps={{
+              'aria-label': localization.rowsPerPage,
+              id: 'mrt-rows-per-page',
+            }}
             label={localization.rowsPerPage}
             onChange={(event) => setPageSize(+(event.target.value as any))}
             sx={{ mb: 0 }}
@@ -159,7 +168,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           )}
           showFirstButton={showFirstButton}
           showLastButton={showLastButton}
-          {..._rest}
+          {...restPaginationProps}
         />
       ) : paginationDisplayMode === 'default' ? (
         <>

package/src/hooks/display-columns/getMRT_RowActionsColumnDef.tsx

@@ -4,18 +4,11 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowActionsColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowActionsColumn(tableOptions)) {
-    return null;
-  }
-
   return {
     Cell: ({ cell, row, staticRowIndex, table }) => (
       <MRT_ToggleRowActionMenuButton

package/src/hooks/display-columns/getMRT_RowDragColumnDef.tsx

@@ -5,18 +5,11 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowDragColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowDragColumn(tableOptions)) {
-    return null;
-  }
-
   return {
     Cell: ({ row, rowRef, table }) => (
       <MRT_TableBodyRowGrabHandle

package/src/hooks/display-columns/getMRT_RowExpandColumnDef.tsx

@@ -8,19 +8,12 @@ import {
   type MRT_RowData,
   type MRT_StatefulTableOptions,
 } from '../../types';
-import {
-  defaultDisplayColumnProps,
-  showRowExpandColumn,
-} from '../../utils/displayColumn.utils';
+import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 
 export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
 ): MRT_ColumnDef<TData> | null => {
-  if (!showRowExpandColumn(tableOptions)) {
-    return null;
-  }
-
   const {
     defaultColumn,
     enableExpandAll,