material-react-table 2.0.0-beta.1 → 2.0.0-beta.11

package/src/inputs/MRT_FilterRangeFields.tsx

@@ -1,18 +1,32 @@
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 import { MRT_FilterTextField } from './MRT_FilterTextField';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterRangeFields = <TData extends Record<string, any>>({
+export const MRT_FilterRangeFields = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   return (
-    <Box sx={{ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }}>
+    <Box
+      {...rest}
+      sx={(theme) => ({
+        display: 'grid',
+        gap: '1rem',
+        gridTemplateColumns: '1fr 1fr',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
       <MRT_FilterTextField header={header} rangeFilterIndex={0} table={table} />
       <MRT_FilterTextField header={header} rangeFilterIndex={1} table={table} />
     </Box>

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -1,18 +1,23 @@
 import { useEffect, useRef, useState } from 'react';
 import FormHelperText from '@mui/material/FormHelperText';
-import Slider from '@mui/material/Slider';
+import Slider, { type SliderProps } from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends SliderProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
+export const MRT_FilterRangeSlider = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { enableColumnFilterModes, localization, muiFilterSliderProps },
@@ -29,6 +34,7 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
   const sliderProps = {
     ...parseFromValuesOrFunc(muiFilterSliderProps, { column, table }),
     ...parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }),
+    ...rest,
   };
 
   let [min, max] =

package/src/inputs/MRT_FilterTextField.tsx

@@ -23,18 +23,23 @@ import {
 } from '@mui/x-date-pickers/DatePicker';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   header: MRT_Header<TData>;
   rangeFilterIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterTextField = <TData extends Record<string, any>>({
+export const MRT_FilterTextField = <TData extends MRT_RowData>({
   header,
   rangeFilterIndex,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -60,6 +65,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
       column,
       table,
     }),
+    ...rest,
   };
 
   const autocompleteProps = {
@@ -236,7 +242,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
         position="end"
         sx={{ mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }}
       >
-        <Tooltip arrow placement="right" title={localization.clearFilter ?? ''}>
+        <Tooltip placement="right" title={localization.clearFilter ?? ''}>
           <span>
             <IconButton
               aria-label={localization.clearFilter}
@@ -258,7 +264,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
 
   const startAdornment = showChangeModeButton ? (
     <InputAdornment position="start">
-      <Tooltip arrow title={localization.changeFilterMode}>
+      <Tooltip title={localization.changeFilterMode}>
         <span>
           <IconButton
             aria-label={localization.changeFilterMode}
@@ -329,6 +335,8 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
     sx: (theme) => ({
       minWidth: isDateFilter
         ? '160px'
+        : enableColumnFilterModes && rangeFilterIndex === 0
+        ? '110px'
         : isRangeFilter
         ? '100px'
         : !filterChipLabel

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -9,19 +9,20 @@ import {
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
 import InputAdornment from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
+import TextField, { type TextFieldProps } from '@mui/material/TextField';
 import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TextFieldProps<'standard'> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
+export const MRT_GlobalFilterTextField = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -37,9 +38,12 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
-  const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
-    table,
-  });
+  const textFieldProps = {
+    ...parseFromValuesOrFunc(muiSearchTextFieldProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   const isMounted = useRef(false);
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
@@ -91,7 +95,7 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
         InputProps={{
           endAdornment: (
             <InputAdornment position="end">
-              <Tooltip arrow title={localization.clearSearch ?? ''}>
+              <Tooltip title={localization.clearSearch ?? ''}>
                 <span>
                   <IconButton
                     aria-label={localization.clearSearch}
@@ -107,7 +111,7 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
           ),
           startAdornment: enableGlobalFilterModes ? (
             <InputAdornment position="start">
-              <Tooltip arrow title={localization.changeSearchMode}>
+              <Tooltip title={localization.changeSearchMode}>
                 <IconButton
                   aria-label={localization.changeSearchMode}
                   onClick={handleGlobalFilterMenuOpen}
@@ -121,11 +125,24 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
           ) : (
             <SearchIcon style={{ marginRight: '4px' }} />
           ),
+          ...textFieldProps.InputProps,
+          sx: (theme) => ({
+            mb: 0,
+            ...(parseFromValuesOrFunc(
+              textFieldProps?.InputProps?.sx,
+              theme,
+            ) as any),
+          }),
+        }}
+        inputProps={{
+          autoComplete: 'new-password', // disable autocomplete and autofill
+          ...textFieldProps.inputProps,
         }}
         onChange={handleChange}
         placeholder={localization.search}
+        size="small"
         value={searchValue ?? ''}
-        variant="standard"
+        variant="outlined"
         {...textFieldProps}
         inputRef={(inputRef) => {
           searchInputRef.current = inputRef;

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -4,18 +4,23 @@ import Radio, { type RadioProps } from '@mui/material/Radio';
 import Tooltip from '@mui/material/Tooltip';
 import { type Theme } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends CheckboxProps {
   row?: MRT_Row<TData>;
   selectAll?: boolean;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
+export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
   row,
   selectAll,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -31,9 +36,12 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
   } = table;
   const { density, isLoading } = getState();
 
-  const checkboxProps = !row
-    ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-    : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table });
+  const checkboxProps = {
+    ...(!row
+      ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+      : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table })),
+    ...rest,
+  };
 
   const allRowsSelected = selectAll
     ? selectAllMode === 'page'
@@ -88,7 +96,6 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       title={

package/src/locales/az.ts

@@ -0,0 +1,94 @@
+import { type MRT_Localization } from '..';
+
+export const MRT_Localization_AZ: MRT_Localization = {
+  actions: 'Əməliyyatlar',
+  and: 'və',
+  cancel: 'Ləğv Et',
+  changeFilterMode: 'Filter Rejimini Dəyiş',
+  changeSearchMode: 'Axtarış Rejimini Dəyiş',
+  clearFilter: 'Filteri təmizlə',
+  clearSearch: 'Axtarışı təmizlə',
+  clearSort: 'Sıralamanı sıfırla',
+  clickToCopy: 'Köçür',
+  columnActions: 'Sütun Əməliyyatları',
+  copiedToClipboard: 'Panelə Köçürüldü',
+  collapse: 'Daralt',
+  collapseAll: 'Hamısını Daralt',
+  dropToGroupBy: '{column} İlə Qruplandırmaq Üçün Buraxın',
+  edit: 'Düzəliş Et',
+  expand: 'Genişlət',
+  expandAll: 'Hamısını Genişlət',
+  filterArrIncludes: 'Daxil Et',
+  filterArrIncludesAll: 'Hamısını Daxil Et',
+  filterArrIncludesSome: 'Daxildir',
+  filterBetween: 'Arasında',
+  filterBetweenInclusive: 'Daxildir Arasında',
+  filterByColumn: '{column} Filteri',
+  filterContains: 'Daxildir',
+  filterEmpty: 'Boş',
+  filterEndsWith: 'Sonu',
+  filterEquals: 'Bərabər',
+  filterEqualsString: 'Bərabər',
+  filterFuzzy: 'Təxmini',
+  filterGreaterThan: 'Böyükdür',
+  filterGreaterThanOrEqualTo: 'Böyük Bərabərdir',
+  filterInNumberRange: 'Arasında',
+  filterIncludesString: 'Daxil',
+  filterIncludesStringSensitive: 'Daxil',
+  filterLessThan: 'Kiçikdir',
+  filterLessThanOrEqualTo: 'Kiçik Bərabərdir',
+  filterMode: 'Filter Rejimi: {filterType}',
+  filterNotEmpty: 'Boş Deyil',
+  filterNotEquals: 'Bərabər Deyil',
+  filterStartsWith: 'Başlanğıcı',
+  filterWeakEquals: 'Bərabərdir',
+  filteringByColumn: 'Filter Rejimi - {filterType} {filterValue}',
+  goToFirstPage: 'İlk Səhifəyə Get',
+  goToLastPage: 'Son Səhifəyə Get',
+  goToNextPage: 'Sonrakı Səhifəyə Get',
+  goToPreviousPage: 'Əvvəlki Səhifəyə Get',
+  grab: 'Tut',
+  groupByColumn: "{column}'a Görə Qruplandır",
+  groupedBy: 'Qruplandı ',
+  hideAll: 'Hamısını Gizlə',
+  hideColumn: '{column} Sütununu Gizlə',
+  max: 'Maksimum',
+  min: 'Minimum',
+  move: 'Daşı',
+  noRecordsToDisplay: 'Göstəriləcək Qeyd Yoxdur',
+  noResultsFound: 'Heç Bir Nəticə Tapılmadı',
+  of: 'of',
+  or: 'və ya',
+  pin: 'Sabitlə',
+  pinToLeft: 'Sola Sabitlə',
+  pinToRight: 'Sağa Sabitlə',
+  resetColumnSize: 'Sütun Ölçüsünü Sıfırla',
+  resetOrder: 'Sıranı Temizlə',
+  rowActions: 'Sətir Əməliyyatları',
+  rowNumber: '#',
+  rowNumbers: 'Sətir Sayl',
+  rowsPerPage: 'Səhifə Başına Sətirlər',
+  save: 'Yadda Saxla',
+  search: 'Axtar',
+  selectedCountOfRowCountRowsSelected:
+    '{rowCount} Sətir Arasında {selectedCount} Ədəd Seçildi',
+  select: 'Seç',
+  showAll: 'Hamısını Göstər',
+  showAllColumns: 'Bütün Sütunları Göstər',
+  showHideColumns: 'Sütunları Göstər/Gizlə',
+  showHideFilters: 'Filterləri Göstər/Gizlə',
+  showHideSearch: 'Axtarışı Göstər/Gizlə',
+  sortByColumnAsc: 'Artan Şəkildə Sırala',
+  sortByColumnDesc: 'Azalan Şəkildə Sırala',
+  sortedByColumnAsc: 'Artan Şəkildə Sıralandı',
+  sortedByColumnDesc: 'Azalan Şəkildə Sıralandı',
+  thenBy: ', sonra ',
+  toggleDensity: 'Sıxlığı Dəyiş',
+  toggleFullScreen: 'Tam Ekranı Dəyiş',
+  toggleSelectAll: 'Hamısını Seç',
+  toggleSelectRow: 'Sətir Seç',
+  toggleVisibility: 'Görünməni Dəyiş',
+  ungroupByColumn: '{column} Sütununu Ayır',
+  unpin: 'Ayır',
+  unpinAll: 'Hamısını Ayır',
+};

package/src/locales/no.ts

@@ -1,4 +1,4 @@
-import { type MRT_Localization } from '../types';
+import { type MRT_Localization } from '..';
 
 export const MRT_Localization_NO: MRT_Localization = {
   cancel: 'Avbryt',

package/src/locales/zh-Hans.ts

@@ -5,14 +5,14 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   and: '与',
   cancel: '取消',
   changeFilterMode: '更改过滤模式',
-  changeSearchMode: '更改搜寻模式',
+  changeSearchMode: '更改搜索模式',
   clearFilter: '清除过滤',
-  clearSearch: '清除搜寻',
+  clearSearch: '清除搜索',
   clearSort: '清除排序',
   clickToCopy: '点击以复制',
   collapse: '折叠',
   collapseAll: '全部折叠',
-  columnActions: '栏位动作',
+  columnActions: '列动作',
   copiedToClipboard: '已复制至剪贴板',
   dropToGroupBy: '拖放以按 {column} 分组',
   edit: '编辑',
@@ -42,7 +42,7 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   filterNotEquals: '不等于',
   filterStartsWith: '开首为',
   filterWeakEquals: '等于',
-  filteringByColumn: '正以 {column} 过滤：{filterType} {filterValue}',
+  filteringByColumn: '以 {column} 过滤：{filterType} {filterValue}',
   goToFirstPage: '到第一页',
   goToLastPage: '到最后一页',
   goToNextPage: '下一页',
@@ -51,7 +51,7 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   groupByColumn: '按 {column} 分组',
   groupedBy: '分组依据 ',
   hideAll: '隐藏全部',
-  hideColumn: '隐藏 {column} 栏位',
+  hideColumn: '隐藏 {column} 列',
   max: '最大',
   min: '最小',
   move: '移动',
@@ -62,30 +62,30 @@ export const MRT_Localization_ZH_HANS: MRT_Localization = {
   pin: '固定',
   pinToLeft: '固定至左边',
   pinToRight: '固定至右边',
-  resetColumnSize: '重置栏位大小',
+  resetColumnSize: '重置列大小',
   resetOrder: '重置排序',
-  rowActions: '横列动作',
+  rowActions: '行动作',
   rowNumber: '#',
-  rowNumbers: '横列号码',
-  rowsPerPage: '每页横列数目',
-  save: '储存',
-  search: '搜寻',
-  selectedCountOfRowCountRowsSelected: '已选择横列：{selectedCount}/{rowCount}',
+  rowNumbers: '行号码',
+  rowsPerPage: '每页行数',
+  save: '保存',
+  search: '搜索',
+  selectedCountOfRowCountRowsSelected: '已选择行：{selectedCount}/{rowCount}',
   select: '选择',
   showAll: '显示全部',
-  showAllColumns: '显示全部栏位',
-  showHideColumns: '显示/隐藏 栏位',
+  showAllColumns: '显示全部列',
+  showHideColumns: '显示/隐藏 列',
   showHideFilters: '显示/隐藏 过滤条件',
-  showHideSearch: '显示/隐藏 搜寻条件',
+  showHideSearch: '显示/隐藏 搜索条件',
   sortByColumnAsc: '按 {column} 顺序排序',
   sortByColumnDesc: '按 {column} 倒序排序',
   sortedByColumnAsc: '已按 {column} 顺序排序',
   sortedByColumnDesc: '已按 {column} 倒序排序',
   thenBy: '，然后以',
-  toggleDensity: '切换密度',
+  toggleDensity: '切换间距',
   toggleFullScreen: '切换全屏',
   toggleSelectAll: '切换选择全部',
-  toggleSelectRow: '切换选择横列',
+  toggleSelectRow: '切换选择行',
   toggleVisibility: '切换可见度',
   ungroupByColumn: '取消按 {column} 分组',
   unpin: '取消固定',

package/src/menus/MRT_ColumnActionMenu.tsx

@@ -3,10 +3,14 @@ import * as React from 'react';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 export const commonMenuItemStyles = {
   alignItems: 'center',
@@ -20,18 +24,19 @@ export const commonListItemStyles = {
   display: 'flex',
 };
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header: MRT_Header<TData>;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
+export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
   anchorEl,
   header,
   setAnchorEl,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -392,6 +397,7 @@ export const MRT_ColumnActionMenu = <TData extends Record<string, any>>({
       anchorEl={anchorEl}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       {columnDef.renderColumnActionsMenuItems?.({
         closeMenu: () => setAnchorEl(null),

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,12 +1,13 @@
 import { useMemo } from 'react';
 import Box from '@mui/material/Box';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import {
   type MRT_FilterOption,
   type MRT_Header,
   type MRT_InternalFilterOption,
   type MRT_Localization,
+  type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
@@ -104,7 +105,7 @@ const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
 const rangeVariants = ['range-slider', 'date-range', 'range'];
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header<TData>;
   onSelect?: () => void;
@@ -113,13 +114,14 @@ interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
+export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   anchorEl,
   header,
   onSelect,
   setAnchorEl,
   setFilterValue,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -239,6 +241,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any>>({
       anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       {(header && column && columnDef
         ? columnDef.renderColumnFilterModeMenuItems?.({

package/src/menus/MRT_RowActionMenu.tsx

@@ -1,16 +1,20 @@
 import { type MouseEvent } from 'react';
 import Box from '@mui/material/Box';
 import ListItemIcon from '@mui/material/ListItemIcon';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import {
   commonListItemStyles,
   commonMenuItemStyles,
 } from './MRT_ColumnActionMenu';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   handleEdit: (event: MouseEvent) => void;
   row: MRT_Row<TData>;
@@ -18,12 +22,13 @@ interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_RowActionMenu = <TData extends Record<string, any>>({
+export const MRT_RowActionMenu = <TData extends MRT_RowData>({
   anchorEl,
   handleEdit,
   row,
   setAnchorEl,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -45,6 +50,7 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
       onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       {parseFromValuesOrFunc(enableEditing, row) && (
         <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>

package/src/menus/MRT_ShowHideColumnsMenu.tsx

@@ -2,22 +2,27 @@ import { useMemo, useState } from 'react';
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
-import Menu from '@mui/material/Menu';
+import Menu, { type MenuProps } from '@mui/material/Menu';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import { getDefaultColumnOrderIds } from '../column.utils';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends Partial<MenuProps> {
   anchorEl: HTMLElement | null;
   isSubMenu?: boolean;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
+export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
   anchorEl,
   setAnchorEl,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getAllColumns,
@@ -81,6 +86,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends Record<string, any>>({
       anchorEl={anchorEl}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
+      {...rest}
     >
       <Box
         sx={{