material-react-table 2.10.0 → 2.11.1

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -8,7 +8,8 @@ import {
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableCellProps {
+export interface MRT_TableFooterCellProps<TData extends MRT_RowData>
+  extends TableCellProps {
   footer: MRT_Header<TData>;
   staticColumnIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -19,7 +20,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   staticColumnIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableFooterCellProps<TData>) => {
   const theme = useTheme();
   const {
     getState,

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -11,7 +11,8 @@ import {
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableRowProps {
+export interface MRT_TableFooterRowProps<TData extends MRT_RowData>
+  extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   footerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
@@ -22,7 +23,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   footerGroup,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableFooterRowProps<TData>) => {
   const {
     options: { layoutMode, muiTableFooterRowProps },
   } = table;
@@ -38,8 +39,9 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
           !!header.column.columnDef.footer) ||
         header.column.columnDef.Footer,
     )
-  )
+  ) {
     return null;
+  }
 
   const tableRowProps = {
     ...parseFromValuesOrFunc(muiTableFooterRowProps, {

package/src/components/head/MRT_TableHead.tsx

@@ -8,7 +8,8 @@ import {
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ToolbarAlertBanner } from '../toolbar/MRT_ToolbarAlertBanner';
 
-interface Props<TData extends MRT_RowData> extends TableHeadProps {
+export interface MRT_TableHeadProps<TData extends MRT_RowData>
+  extends TableHeadProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
 }
@@ -17,7 +18,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadProps<TData>) => {
   const {
     getHeaderGroups,
     getSelectedRowModel,

package/src/components/head/MRT_TableHeadCell.tsx

@@ -18,7 +18,8 @@ import {
 import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableCellProps {
+export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
+  extends TableCellProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   header: MRT_Header<TData>;
   staticColumnIndex?: number;
@@ -31,7 +32,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   staticColumnIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellProps<TData>) => {
   const theme = useTheme();
   const {
     getState,
@@ -267,9 +268,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                         ? 'nowrap'
                         : 'normal',
                   }}
-                  title={
-                    columnDefType === 'data' ? columnDef.header : undefined
-                  }
                 >
                   {HeaderElement}
                 </Box>

package/src/components/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -10,7 +10,9 @@ import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableHeadCellColumnActionsButtonProps<
+  TData extends MRT_RowData,
+> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -21,7 +23,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellColumnActionsButtonProps<TData>) => {
   const {
     options: {
       icons: { MoreVertIcon },

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -9,7 +9,9 @@ import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 
-interface Props<TData extends MRT_RowData> extends CollapseProps {
+export interface MRT_TableHeadCellFilterContainerProps<
+  TData extends MRT_RowData,
+> extends CollapseProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +20,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellFilterContainerProps<TData>) => {
   const {
     getState,
     options: { columnFilterDisplayMode },

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -12,7 +12,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableHeadCellFilterLabelProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -21,7 +22,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellFilterLabelProps<TData>) => {
   const {
     options: {
       columnFilterDisplayMode,

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -9,7 +9,8 @@ import { reorderColumn } from '../../utils/column.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableHeadCellGrabHandleProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
   tableHeadCellRef: RefObject<HTMLTableCellElement>;
@@ -20,7 +21,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   table,
   tableHeadCellRef,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellGrabHandleProps<TData>) => {
   const {
     getState,
     options: { enableColumnOrdering, muiColumnDragHandleProps },
@@ -73,7 +74,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
 
   return (
     <MRT_GrabHandleButton
-      iconButtonProps={iconButtonProps}
+      {...iconButtonProps}
       onDragEnd={handleDragEnd}
       onDragStart={handleDragStart}
       table={table}

package/src/components/head/MRT_TableHeadCellResizeHandle.tsx

@@ -7,7 +7,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends DividerProps {
+export interface MRT_TableHeadCellResizeHandleProps<TData extends MRT_RowData>
+  extends DividerProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -16,7 +17,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellResizeHandleProps<TData>) => {
   const {
     getState,
     options: { columnResizeDirection, columnResizeMode },

package/src/components/head/MRT_TableHeadCellSortLabel.tsx

@@ -10,7 +10,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableSortLabelProps {
+export interface MRT_TableHeadCellSortLabelProps<TData extends MRT_RowData>
+  extends TableSortLabelProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -19,7 +20,7 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellSortLabelProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/head/MRT_TableHeadRow.tsx

@@ -12,7 +12,8 @@ import {
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableRowProps {
+export interface MRT_TableHeadRowProps<TData extends MRT_RowData>
+  extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   headerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
@@ -23,7 +24,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   headerGroup,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadRowProps<TData>) => {
   const {
     options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
   } = table;

package/src/components/inputs/MRT_EditCellTextField.tsx

@@ -14,7 +14,8 @@ import {
 } from '../../types';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
+export interface MRT_EditCellTextFieldProps<TData extends MRT_RowData>
+  extends TextFieldProps<'standard'> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -23,7 +24,7 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   cell,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_EditCellTextFieldProps<TData>) => {
   const {
     getState,
     options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps },

package/src/components/inputs/MRT_FilterCheckbox.tsx

@@ -9,7 +9,8 @@ import {
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends CheckboxProps {
+export interface MRT_FilterCheckboxProps<TData extends MRT_RowData>
+  extends CheckboxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +19,7 @@ export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
   column,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterCheckboxProps<TData>) => {
   const {
     getState,
     options: { localization, muiFilterCheckboxProps },

package/src/components/inputs/MRT_FilterRangeFields.tsx

@@ -7,7 +7,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends BoxProps {
+export interface MRT_FilterRangeFieldsProps<TData extends MRT_RowData>
+  extends BoxProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -16,7 +17,7 @@ export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterRangeFieldsProps<TData>) => {
   return (
     <Box
       {...rest}

package/src/components/inputs/MRT_FilterRangeSlider.tsx

@@ -9,7 +9,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends SliderProps {
+export interface MRT_FilterRangeSliderProps<TData extends MRT_RowData>
+  extends SliderProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +19,7 @@ export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterRangeSliderProps<TData>) => {
   const {
     options: { enableColumnFilterModes, localization, muiFilterSliderProps },
     refs: { filterInputRefs },

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -30,6 +30,7 @@ import {
   type TimePickerProps,
 } from '@mui/x-date-pickers/TimePicker';
 import {
+  type DropdownOption,
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
@@ -37,7 +38,8 @@ import {
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
-interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
+export interface MRT_FilterTextFieldProps<TData extends MRT_RowData>
+  extends TextFieldProps<'standard'> {
   header: MRT_Header<TData>;
   rangeFilterIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -48,7 +50,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
   rangeFilterIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterTextFieldProps<TData>) => {
   const {
     options: {
       columnFilterModeOptions,
@@ -159,6 +161,10 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           ] || ''
         : (column.getFilterValue() as string) ?? '',
   );
+  const [autocompleteValue, setAutocompleteValue] =
+    useState<DropdownOption | null>(
+      isAutocompleteFilter ? (filterValue as DropdownOption | null) : null,
+    );
 
   const handleChangeDebounced = useCallback(
     debounce(
@@ -194,6 +200,11 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     textFieldProps?.onChange?.(event);
   };
 
+  const handleAutocompleteChange = (newValue: DropdownOption) => {
+    setAutocompleteValue(newValue);
+    handleChange(getValueAndLabel(newValue).value);
+  };
+
   const handleClear = () => {
     if (isMultiSelectFilter) {
       setFilterValue([]);
@@ -437,9 +448,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         <Autocomplete
           freeSolo
           getOptionLabel={(option) => getValueAndLabel(option).label}
-          onChange={(_e, newValue) =>
-            handleChange(getValueAndLabel(newValue).value)
-          }
+          onChange={(_e, newValue) => handleAutocompleteChange(newValue)}
           options={
             dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
           }
@@ -461,7 +470,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
               onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}
             />
           )}
-          value={filterValue}
+          value={autocompleteValue}
         />
       ) : (
         <TextField

package/src/components/inputs/MRT_GlobalFilterTextField.tsx

@@ -16,14 +16,15 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
-interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
+export interface MRT_GlobalFilterTextFieldProps<TData extends MRT_RowData>
+  extends TextFieldProps<'standard'> {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_GlobalFilterTextFieldProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -8,11 +8,15 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getIsRowSelected } from '../../utils/row.utils';
+import {
+  getIsRowSelected,
+  getMRT_RowSelectionHandler,
+} from '../../utils/row.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends CheckboxProps {
+export interface MRT_SelectCheckboxProps<TData extends MRT_RowData>
+  extends CheckboxProps {
   row?: MRT_Row<TData>;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -23,7 +27,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_SelectCheckboxProps<TData>) => {
   const {
     getState,
     options: {
@@ -35,22 +39,12 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       rowPinningDisplayMode,
       selectAllMode,
     },
+    refs: { lastSelectedRowId },
   } = table;
   const { density, isLoading } = getState();
 
   const selectAll = !row;
 
-  const checkboxProps = {
-    ...(!row
-      ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-      : parseFromValuesOrFunc(muiSelectCheckboxProps, {
-          row,
-          staticRowIndex,
-          table,
-        })),
-    ...rest,
-  };
-
   const isStickySelection =
     enableRowPinning && rowPinningDisplayMode?.includes('select');
 
@@ -60,26 +54,22 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       : table.getIsAllRowsSelected()
     : undefined;
 
-  const onSelectionChange = (
-    event: ChangeEvent<HTMLInputElement>,
-    row: MRT_Row<TData>,
-  ) => {
-    if (row.getIsAllSubRowsSelected() && row.getCanSelectSubRows()) {
-      row.subRows?.forEach((r) => r.toggleSelected(false));
-    }
-    row.getToggleSelectedHandler()(event);
+  const isChecked = selectAll
+    ? allRowsSelected
+    : getIsRowSelected({ row, table });
 
-    if (isStickySelection) {
-      row.pin(
-        !row.getIsPinned() && event.target.checked
-          ? rowPinningDisplayMode?.includes('bottom')
-            ? 'bottom'
-            : 'top'
-          : false,
-      );
-    }
+  const checkboxProps = {
+    ...(selectAll
+      ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+      : parseFromValuesOrFunc(muiSelectCheckboxProps, {
+          row,
+          table,
+        })),
+    ...rest,
   };
 
+  const onSelectionChange = getMRT_RowSelectionHandler();
+
   const onSelectAllChange = (event: ChangeEvent<HTMLInputElement>) => {
     selectAllMode === 'all'
       ? table.getToggleAllRowsSelectedHandler()(event)
@@ -87,13 +77,14 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     if (isStickySelection) {
       table.setRowPinning({ bottom: [], top: [] });
     }
+    lastSelectedRowId.current = null;
   };
 
   const commonProps = {
     'aria-label': selectAll
       ? localization.toggleSelectAll
       : localization.toggleSelectRow,
-    checked: selectAll ? allRowsSelected : getIsRowSelected({ row, table }),
+    checked: isChecked,
     disabled:
       isLoading || (row && !row.getCanSelect()) || row?.id === 'mrt-row-create',
     inputProps: {
@@ -103,7 +94,9 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     },
     onChange: (event) => {
       event.stopPropagation();
-      row ? onSelectionChange(event, row) : onSelectAllChange(event);
+      row
+        ? onSelectionChange({ event, row, staticRowIndex, table })
+        : onSelectAllChange(event);
     },
     size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small',
     ...checkboxProps,
@@ -136,8 +129,8 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       ) : (
         <Checkbox
           indeterminate={
-            selectAll
-              ? table.getIsSomeRowsSelected() && !allRowsSelected
+            !isChecked && selectAll
+              ? table.getIsSomeRowsSelected()
               : row?.getIsSomeSelected() && row.getCanSelectSubRows()
           }
           {...commonProps}

package/src/components/menus/MRT_ActionMenuItem.tsx

@@ -5,7 +5,8 @@ import ListItemIcon from '@mui/material/ListItemIcon';
 import MenuItem, { type MenuItemProps } from '@mui/material/MenuItem';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-interface Props<TData extends MRT_RowData> extends MenuItemProps {
+export interface MRT_ActionMenuItemProps<TData extends MRT_RowData>
+  extends MenuItemProps {
   icon: ReactNode;
   label: string;
   onOpenSubMenu?: MenuItemProps['onClick'] | MenuItemProps['onMouseEnter'];
@@ -18,7 +19,7 @@ export const MRT_ActionMenuItem = <TData extends MRT_RowData>({
   onOpenSubMenu,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ActionMenuItemProps<TData>) => {
   const {
     options: {
       icons: { ArrowRightIcon },

package/src/components/menus/MRT_CellActionMenu.tsx

@@ -6,14 +6,15 @@ import { openEditingCell } from '../../utils/cell.utils';
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
+export interface MRT_CellActionMenuProps<TData extends MRT_RowData>
+  extends Partial<MenuProps> {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_CellActionMenu = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_CellActionMenuProps<TData>) => {
   const {
     getState,
     options: {
@@ -46,8 +47,8 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
       parseFromValuesOrFunc(columnDef.enableClickToCopy, cell) ===
         'context-menu') && (
       <MRT_ActionMenuItem
-        key={'mrt-copy'}
         icon={<ContentCopy />}
+        key={'mrt-copy'}
         label={localization.copy}
         onClick={(event) => {
           event.stopPropagation();
@@ -59,8 +60,8 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
     ),
     parseFromValuesOrFunc(enableEditing, row) && editDisplayMode === 'cell' && (
       <MRT_ActionMenuItem
-        key={'mrt-edit'}
         icon={<EditIcon />}
+        key={'mrt-edit'}
         label={localization.edit}
         onClick={() => {
           openEditingCell({ cell, table });

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -1,8 +1,8 @@
 import { type MouseEvent, useState } from 'react';
 import Menu, { type MenuProps } from '@mui/material/Menu';
 import { useTheme } from '@mui/material/styles';
-import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
+import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import {
   type MRT_Header,
   type MRT_RowData,
@@ -10,7 +10,8 @@ import {
 } from '../../types';
 import { getMRTTheme } from '../../utils/style.utils';
 
-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;
@@ -23,10 +24,10 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   setAnchorEl,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ColumnActionMenuProps<TData>) => {
   const {
-    getState,
     getAllLeafColumns,
+    getState,
     options: {
       columnFilterDisplayMode,
       columnFilterModeOptions,

package/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -106,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;
@@ -123,7 +124,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   setFilterValue,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_FilterOptionMenuProps<TData>) => {
   const {
     getState,
     options: {