material-react-table 2.11.2 → 2.12.0

package/src/components/inputs/MRT_FilterTextField.tsx

@@ -3,7 +3,6 @@ import {
   type MouseEvent,
   useCallback,
   useEffect,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -35,6 +34,10 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
+import {
+  getColumnFilterInfo,
+  useDropdownOptions,
+} from '../../utils/column.utils';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
@@ -53,7 +56,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
 }: MRT_FilterTextFieldProps<TData>) => {
   const {
     options: {
-      columnFilterModeOptions,
       enableColumnFilterModes,
       icons: { CloseIcon, FilterListIcon },
       localization,
@@ -112,17 +114,20 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     }),
   };
 
-  const isDateFilter =
-    filterVariant?.startsWith('date') || filterVariant?.startsWith('time');
-  const isAutocompleteFilter = filterVariant === 'autocomplete';
-  const isRangeFilter =
-    filterVariant?.includes('range') || rangeFilterIndex !== undefined;
-  const isSelectFilter = filterVariant === 'select';
-  const isMultiSelectFilter = filterVariant === 'multi-select';
-  const isTextboxFilter =
-    ['autocomplete', 'text'].includes(filterVariant!) ||
-    (!isSelectFilter && !isMultiSelectFilter);
-  const currentFilterOption = columnDef._filterFn;
+  const {
+    allowedColumnFilterOptions,
+    currentFilterOption,
+    facetedUniqueValues,
+    isAutocompleteFilter,
+    isDateFilter,
+    isMultiSelectFilter,
+    isRangeFilter,
+    isSelectFilter,
+    isTextboxFilter,
+  } = getColumnFilterInfo({ header, table });
+
+  const dropdownOptions = useDropdownOptions({ header, table });
+
   const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
     ? //@ts-ignore
       localization[
@@ -132,6 +137,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
         }`
       ]
     : '';
+
   const filterPlaceholder = !isRangeFilter
     ? textFieldProps?.placeholder ??
       localization.filterByColumn?.replace('{column}', String(columnDef.header))
@@ -140,16 +146,14 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       : rangeFilterIndex === 1
         ? localization.max
         : '';
-  const allowedColumnFilterOptions =
-    columnDef?.columnFilterModeOptions ?? columnFilterModeOptions;
-  const showChangeModeButton =
+
+  const showChangeModeButton = !!(
     enableColumnFilterModes &&
     columnDef.enableColumnFilterModes !== false &&
     !rangeFilterIndex &&
     (allowedColumnFilterOptions === undefined ||
-      !!allowedColumnFilterOptions?.length);
-
-  const facetedUniqueValues = column.getFacetedUniqueValues();
+      !!allowedColumnFilterOptions?.length)
+  );
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [filterValue, setFilterValue] = useState<string | string[]>(() =>
@@ -257,23 +261,6 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
     );
   }
 
-  const dropdownOptions = useMemo(
-    () =>
-      columnDef.filterSelectOptions ??
-      ((isSelectFilter || isMultiSelectFilter || isAutocompleteFilter) &&
-      facetedUniqueValues
-        ? Array.from(facetedUniqueValues.keys())
-            .filter((value) => value !== null && value !== undefined)
-            .sort((a, b) => a.localeCompare(b))
-        : undefined),
-    [
-      columnDef.filterSelectOptions,
-      facetedUniqueValues,
-      isMultiSelectFilter,
-      isSelectFilter,
-    ],
-  );
-
   const endAdornment =
     !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (
       <InputAdornment
@@ -447,8 +434,12 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
       ) : isAutocompleteFilter ? (
         <Autocomplete
           freeSolo
-          getOptionLabel={(option) => getValueAndLabel(option).label}
-          onChange={(_e, newValue) => handleAutocompleteChange(newValue)}
+          getOptionLabel={(option: DropdownOption) =>
+            getValueAndLabel(option).label
+          }
+          onChange={(_e, newValue: DropdownOption) =>
+            handleAutocompleteChange(newValue)
+          }
           options={
             dropdownOptions?.map((option) => getValueAndLabel(option)) ?? []
           }

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -58,6 +58,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
       : parseFromValuesOrFunc(muiSelectCheckboxProps, {
           row,
+          staticRowIndex,
           table,
         })),
     ...rest,
@@ -87,7 +88,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     },
     onChange: (event) => {
       event.stopPropagation();
-      row ? onSelectionChange!(event) : onSelectAllChange(event);
+      selectAll ? onSelectAllChange(event) : onSelectionChange!(event);
     },
     size: (density === 'compact' ? 'small' : 'medium') as 'medium' | 'small',
     ...checkboxProps,

package/src/components/menus/MRT_CellActionMenu.tsx

@@ -1,9 +1,7 @@
 import Menu, { type MenuProps } from '@mui/material/Menu';
-import { useTheme } from '@mui/material/styles';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { openEditingCell } from '../../utils/cell.utils';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_CellActionMenuProps<TData extends MRT_RowData>
@@ -23,6 +21,7 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
       enableEditing,
       icons: { ContentCopy, EditIcon },
       localization,
+      mrtTheme: { menuBackgroundColor },
       renderCellActionMenuItems,
     },
     refs: { actionCellRef },
@@ -33,9 +32,6 @@ export const MRT_CellActionMenu = <TData extends MRT_RowData>({
   const { column } = cell;
   const { columnDef } = column;
 
-  const theme = useTheme();
-  const { menuBackgroundColor } = getMRTTheme(table, theme);
-
   const handleClose = (event?: any) => {
     event?.stopPropagation();
     table.setActionCell(null);

package/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -1,6 +1,5 @@
 import { type MouseEvent, useState } from 'react';
 import Menu, { type MenuProps } from '@mui/material/Menu';
-import { useTheme } from '@mui/material/styles';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import { MRT_FilterOptionMenu } from './MRT_FilterOptionMenu';
 import {
@@ -8,7 +7,6 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 
 export interface MRT_ColumnActionMenuProps<TData extends MRT_RowData>
   extends Partial<MenuProps> {
@@ -51,6 +49,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
         VisibilityOffIcon,
       },
       localization,
+      mrtTheme: { menuBackgroundColor },
       renderColumnActionsMenuItems,
     },
     refs: { filterInputRefs },
@@ -318,9 +317,6 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
       : []),
   ].filter(Boolean);
 
-  const theme = useTheme();
-  const { menuBackgroundColor } = getMRTTheme(table, theme);
-
   return (
     <Menu
       MenuListProps={{

package/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import Menu, { type MenuProps } from '@mui/material/Menu';
-import { useTheme } from '@mui/material/styles';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import {
   type MRT_FilterOption,
@@ -10,7 +9,6 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 
 export const mrtFilterOptions = (
   localization: MRT_Localization,
@@ -131,6 +129,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
       columnFilterModeOptions,
       globalFilterModeOptions,
       localization,
+      mrtTheme: { menuBackgroundColor },
       renderColumnFilterModeMenuItems,
       renderGlobalFilterModeMenuItems,
     },
@@ -239,9 +238,6 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
   const filterOption =
     !!header && columnDef ? columnDef._filterFn : globalFilterFn;
 
-  const theme = useTheme();
-  const { menuBackgroundColor } = getMRTTheme(table, theme);
-
   return (
     <Menu
       MenuListProps={{

package/src/components/menus/MRT_RowActionMenu.tsx

@@ -1,13 +1,11 @@
 import { type MouseEvent } from 'react';
 import Menu, { type MenuProps } from '@mui/material/Menu';
-import { useTheme } from '@mui/material/styles';
 import { MRT_ActionMenuItem } from './MRT_ActionMenuItem';
 import {
   type MRT_Row,
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_RowActionMenuProps<TData extends MRT_RowData>
@@ -36,14 +34,12 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
       enableEditing,
       icons: { EditIcon },
       localization,
+      mrtTheme: { menuBackgroundColor },
       renderRowActionMenuItems,
     },
   } = table;
   const { density } = getState();
 
-  const theme = useTheme();
-  const { menuBackgroundColor } = getMRTTheme(table, theme);
-
   return (
     <Menu
       MenuListProps={{

package/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -3,7 +3,6 @@ import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Divider from '@mui/material/Divider';
 import Menu, { type MenuProps } from '@mui/material/Menu';
-import { useTheme } from '@mui/material/styles';
 import { MRT_ShowHideColumnsMenuItems } from './MRT_ShowHideColumnsMenuItems';
 import {
   type MRT_Column,
@@ -11,7 +10,6 @@ import {
   type MRT_TableInstance,
 } from '../../types';
 import { getDefaultColumnOrderIds } from '../../utils/displayColumn.utils';
-import { getMRTTheme } from '../../utils/style.utils';
 
 export interface MRT_ShowHideColumnsMenuProps<TData extends MRT_RowData>
   extends Partial<MenuProps> {
@@ -42,6 +40,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
       enableColumnPinning,
       enableHiding,
       localization,
+      mrtTheme: { menuBackgroundColor },
     },
   } = table;
   const { columnOrder, columnPinning, density } = getState();
@@ -84,9 +83,6 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
     null,
   );
 
-  const theme = useTheme();
-  const { menuBackgroundColor } = getMRTTheme(table, theme);
-
   return (
     <Menu
       MenuListProps={{

package/src/components/menus/MRT_ShowHideColumnsMenuItems.tsx

@@ -17,7 +17,7 @@ import {
   type MRT_TableInstance,
 } from '../../types';
 import { reorderColumn } from '../../utils/column.utils';
-import { getCommonTooltipProps, getMRTTheme } from '../../utils/style.utils';
+import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ColumnPinningButtons } from '../buttons/MRT_ColumnPinningButtons';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
@@ -48,6 +48,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
       enableColumnPinning,
       enableHiding,
       localization,
+      mrtTheme: { draggingBorderColor },
     },
     setColumnOrder,
   } = table;
@@ -116,7 +117,7 @@ export const MRT_ShowHideColumnsMenuItems = <TData extends MRT_RowData>({
           outline: isDragging
             ? `2px dashed ${theme.palette.grey[500]}`
             : hoveredColumn?.id === column.id
-              ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
+              ? `2px dashed ${draggingBorderColor}`
               : 'none',
           outlineOffset: '-2px',
           pl: `${(column.depth + 0.5) * 2}rem`,

package/src/components/table/MRT_TableLoadingOverlay.tsx

@@ -4,7 +4,6 @@ import CircularProgress, {
 } from '@mui/material/CircularProgress';
 import { alpha } from '@mui/material/styles';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableLoadingOverlayProps<TData extends MRT_RowData>
@@ -17,7 +16,11 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableLoadingOverlayProps<TData>) => {
   const {
-    options: { localization, muiCircularProgressProps },
+    options: {
+      localization,
+      mrtTheme: { baseBackgroundColor },
+      muiCircularProgressProps,
+    },
   } = table;
 
   const circularProgressProps = {
@@ -27,12 +30,9 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
 
   return (
     <Box
-      sx={(theme) => ({
+      sx={{
         alignItems: 'center',
-        backgroundColor: alpha(
-          getMRTTheme(table, theme).baseBackgroundColor,
-          0.5,
-        ),
+        backgroundColor: alpha(baseBackgroundColor, 0.5),
         bottom: 0,
         display: 'flex',
         justifyContent: 'center',
@@ -43,7 +43,7 @@ export const MRT_TableLoadingOverlay = <TData extends MRT_RowData>({
         top: 0,
         width: '100%',
         zIndex: 3,
-      })}
+      }}
     >
       {circularProgressProps?.Component ?? (
         <CircularProgress

package/src/components/table/MRT_TablePaper.tsx

@@ -1,7 +1,6 @@
 import Paper, { type PaperProps } from '@mui/material/Paper';
 import { MRT_TableContainer } from './MRT_TableContainer';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_BottomToolbar } from '../toolbar/MRT_BottomToolbar';
 import { MRT_TopToolbar } from '../toolbar/MRT_TopToolbar';
@@ -20,6 +19,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
     options: {
       enableBottomToolbar,
       enableTopToolbar,
+      mrtTheme: { baseBackgroundColor },
       muiTablePaperProps,
       renderBottomToolbar,
       renderTopToolbar,
@@ -48,23 +48,23 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
         ...(isFullScreen
           ? {
               bottom: 0,
-              height: '100vh',
+              height: '100dvh',
               left: 0,
               margin: 0,
-              maxHeight: '100vh',
-              maxWidth: '100vw',
+              maxHeight: '100dvh',
+              maxWidth: '100dvw',
               padding: 0,
               position: 'fixed',
               right: 0,
               top: 0,
-              width: '100vw',
+              width: '100dvw',
               zIndex: 999,
             }
           : {}),
         ...paperProps?.style,
       }}
       sx={(theme) => ({
-        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+        backgroundColor: baseBackgroundColor,
         backgroundImage: 'unset',
         overflow: 'hidden',
         transition: 'all 100ms ease-in-out',

package/src/components/toolbar/MRT_ToolbarAlertBanner.tsx

@@ -68,7 +68,9 @@ export const MRT_ToolbarAlertBanner = <TData extends MRT_RowData>({
           ?.replace('{selectedCount}', selectedRowCount.toLocaleString())
           ?.replace('{rowCount}', totalRowCount.toString())}
         <Button
-          onClick={(event) => getMRT_SelectAllHandler({ table })(event, false)}
+          onClick={(event) =>
+            getMRT_SelectAllHandler({ table })(event, false, true)
+          }
           size="small"
           sx={{ p: '2px' }}
         >

package/src/components/toolbar/MRT_ToolbarDropZone.tsx

@@ -29,6 +29,10 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
     setHoveredColumn({ id: 'drop-zone' });
   };
 
+  const handleDragOver = (e: DragEvent) => {
+    e.preventDefault();
+  };
+
   useEffect(() => {
     if (table.options.state?.showToolbarDropZone !== undefined) {
       setShowToolbarDropZone(
@@ -45,6 +49,7 @@ export const MRT_ToolbarDropZone = <TData extends MRT_RowData>({
       <Box
         className="Mui-ToolbarDropZone"
         onDragEnter={handleDragEnter}
+        onDragOver={handleDragOver}
         {...rest}
         sx={(theme) => ({
           alignItems: 'center',

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

@@ -8,7 +8,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowActionsColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ cell, row, staticRowIndex, table }) => (
       <MRT_ToggleRowActionMenuButton

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

@@ -9,7 +9,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowDragColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ row, rowRef, table }) => (
       <MRT_TableBodyRowGrabHandle

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

@@ -13,7 +13,7 @@ import { getCommonTooltipProps } from '../../utils/style.utils';
 
 export const getMRT_RowExpandColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   const {
     defaultColumn,
     enableExpandAll,

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

@@ -7,7 +7,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowNumbersColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   const { localization, rowNumberDisplayMode } = tableOptions;
   const {
     pagination: { pageIndex, pageSize },

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

@@ -8,7 +8,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowPinningColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     Cell: ({ row, table }) => (
       <MRT_TableBodyRowPinButton row={row} table={table} />

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

@@ -8,7 +8,7 @@ import { defaultDisplayColumnProps } from '../../utils/displayColumn.utils';
 
 export const getMRT_RowSelectColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   const { enableMultiRowSelection, enableSelectAll } = tableOptions;
 
   return {

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

@@ -17,7 +17,7 @@ const blankColProps = {
 
 export const getMRT_RowSpacerColumnDef = <TData extends MRT_RowData>(
   tableOptions: MRT_StatefulTableOptions<TData>,
-): MRT_ColumnDef<TData> | null => {
+): MRT_ColumnDef<TData> => {
   return {
     ...defaultDisplayColumnProps({
       id: 'mrt-row-spacer',

package/src/hooks/useMRT_TableOptions.ts

@@ -21,6 +21,7 @@ import {
   type MRT_RowData,
   type MRT_TableOptions,
 } from '../types';
+import { getMRTTheme } from '../utils/style.utils';
 
 export const MRT_DefaultColumn = {
   filterVariant: 'text',
@@ -96,6 +97,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   manualGrouping,
   manualPagination,
   manualSorting,
+  mrtTheme,
   paginationDisplayMode = 'default',
   positionActionsColumn = 'first',
   positionCreatingRow = 'top',
@@ -120,6 +122,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     }),
     [localization],
   );
+  mrtTheme = useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
   aggregationFns = useMemo(
     () => ({ ...MRT_AggregationFns, ...aggregationFns }),
     [],
@@ -241,6 +244,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     manualGrouping,
     manualPagination,
     manualSorting,
+    mrtTheme,
     paginationDisplayMode,
     positionActionsColumn,
     positionCreatingRow,

package/src/types.ts

@@ -1,5 +1,4 @@
 import {
-  type CSSProperties,
   type Dispatch,
   type MutableRefObject,
   type ReactNode,
@@ -257,12 +256,12 @@ export interface MRT_Localization {
 }
 
 export interface MRT_Theme {
-  baseBackgroundColor?: CSSProperties['backgroundColor'];
-  draggingBorderColor?: CSSProperties['borderColor'];
-  matchHighlightColor?: CSSProperties['backgroundColor'];
-  menuBackgroundColor?: CSSProperties['backgroundColor'];
-  pinnedRowBackgroundColor?: CSSProperties['backgroundColor'];
-  selectedRowBackgroundColor?: CSSProperties['backgroundColor'];
+  baseBackgroundColor: string;
+  draggingBorderColor: string;
+  matchHighlightColor: string;
+  menuBackgroundColor: string;
+  pinnedRowBackgroundColor: string;
+  selectedRowBackgroundColor: string;
 }
 
 export interface MRT_RowModel<TData extends MRT_RowData> {
@@ -348,11 +347,14 @@ export type MRT_TableInstance<TData extends MRT_RowData> = Omit<
   setShowToolbarDropZone: Dispatch<SetStateAction<boolean>>;
 };
 
-export type MRT_DefinedTableOptions<TData extends MRT_RowData> =
-  MRT_TableOptions<TData> & {
-    icons: MRT_Icons;
-    localization: MRT_Localization;
-  };
+export type MRT_DefinedTableOptions<TData extends MRT_RowData> = Omit<
+  MRT_TableOptions<TData>,
+  'icons' | 'localization' | 'mrtTheme'
+> & {
+  icons: MRT_Icons;
+  localization: MRT_Localization;
+  mrtTheme: Required<MRT_Theme>;
+};
 
 export type MRT_StatefulTableOptions<TData extends MRT_RowData> =
   MRT_DefinedTableOptions<TData> & {
@@ -914,7 +916,7 @@ export type MRT_TableOptions<TData extends MRT_RowData> = Omit<
    * @link https://www.material-react-table.com/docs/guides/memoize-components
    */
   memoMode?: 'cells' | 'rows' | 'table-body';
-  mrtTheme?: ((theme: Theme) => MRT_Theme) | MRT_Theme;
+  mrtTheme?: ((theme: Theme) => Partial<MRT_Theme>) | Partial<MRT_Theme>;
   muiBottomToolbarProps?:
     | ((props: { table: MRT_TableInstance<TData> }) => BoxProps)
     | BoxProps;