material-react-table 2.11.1 → 2.11.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.11.1",
+  "version": "2.11.3",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",
@@ -65,26 +65,26 @@
     "@babel/preset-react": "^7.23.3",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.4.0",
-    "@mui/icons-material": "^5.15.7",
-    "@mui/material": "^5.15.7",
-    "@mui/x-date-pickers": "^6.19.3",
+    "@faker-js/faker": "^8.4.1",
+    "@mui/icons-material": "^5.15.10",
+    "@mui/material": "^5.15.10",
+    "@mui/x-date-pickers": "^6.19.4",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.2",
-    "@storybook/addon-a11y": "^7.6.12",
-    "@storybook/addon-essentials": "^7.6.12",
-    "@storybook/addon-interactions": "^7.6.12",
-    "@storybook/addon-links": "^7.6.12",
-    "@storybook/addon-storysource": "^7.6.12",
-    "@storybook/blocks": "^7.6.12",
-    "@storybook/react": "^7.6.12",
-    "@storybook/react-vite": "^7.6.12",
+    "@storybook/addon-a11y": "^7.6.15",
+    "@storybook/addon-essentials": "^7.6.15",
+    "@storybook/addon-interactions": "^7.6.15",
+    "@storybook/addon-links": "^7.6.15",
+    "@storybook/addon-storysource": "^7.6.15",
+    "@storybook/blocks": "^7.6.15",
+    "@storybook/react": "^7.6.15",
+    "@storybook/react-vite": "^7.6.15",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.11.16",
-    "@types/react": "^18.2.52",
-    "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.20.0",
-    "@typescript-eslint/parser": "^6.20.0",
+    "@types/node": "^20.11.17",
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.0.1",
+    "@typescript-eslint/parser": "^7.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
@@ -99,11 +99,11 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "size-limit": "^11.0.2",
-    "storybook": "^7.6.12",
+    "storybook": "^7.6.15",
     "storybook-dark-mode": "^3.0.3",
     "tslib": "^2.6.2",
     "typescript": "^5.3.3",
-    "vite": "^5.0.12"
+    "vite": "^5.1.1"
   },
   "peerDependencies": {
     "@emotion/react": ">=11.11",
@@ -116,7 +116,7 @@
   },
   "dependencies": {
     "@tanstack/match-sorter-utils": "8.11.8",
-    "@tanstack/react-table": "8.11.8",
+    "@tanstack/react-table": "8.12.0",
     "@tanstack/react-virtual": "3.0.4",
     "highlight-words": "1.2.2"
   }

package/src/components/body/MRT_TableBody.tsx

@@ -64,7 +64,7 @@ export const MRT_TableBody = <TData extends MRT_RowData>({
       .map((r) => r.id);
   }, [rowPinning, getRowModel().rows]);
 
-  const rows = useMRT_Rows(table, pinnedRowIds);
+  const rows = useMRT_Rows(table);
 
   const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
 

package/src/components/body/MRT_TableBodyCell.tsx

@@ -17,8 +17,7 @@ import {
   type MRT_TableInstance,
 } from '../../types';
 import { isCellEditable, openEditingCell } from '../../utils/cell.utils';
-import { getIsFirstColumn, getIsLastColumn } from '../../utils/column.utils';
-import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils';
+import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
@@ -56,6 +55,7 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
       enableColumnPinning,
       enableGrouping,
       layoutMode,
+      mrtTheme: { draggingBorderColor },
       muiSkeletonProps,
       muiTableBodyCellProps,
     },
@@ -93,8 +93,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     table,
   });
 
-  const { draggingBorderColor } = getMRTTheme(table, theme);
-
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
     if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
@@ -111,8 +109,8 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
     const isHoveredColumn = hoveredColumn?.id === column.id;
     const isDraggingRow = draggingRow?.id === row.id;
     const isHoveredRow = hoveredRow?.id === row.id;
-    const isFirstColumn = getIsFirstColumn(column, table);
-    const isLastColumn = getIsLastColumn(column, table);
+    const isFirstColumn = column.getIsFirstColumn();
+    const isLastColumn = column.getIsLastColumn();
     const isLastRow = numRows && staticRowIndex === numRows - 1;
     const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
     const showResizeBorder =

package/src/components/body/MRT_TableBodyCellValue.tsx

@@ -5,7 +5,6 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];
@@ -27,7 +26,10 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
 }: MRT_TableBodyCellValueProps<TData>) => {
   const {
     getState,
-    options: { enableFilterMatchHighlighting },
+    options: {
+      enableFilterMatchHighlighting,
+      mrtTheme: { matchHighlightColor },
+    },
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
@@ -88,8 +90,7 @@ export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
               sx={
                 match
                   ? {
-                      backgroundColor: (theme) =>
-                        getMRTTheme(table, theme).matchHighlightColor,
+                      backgroundColor: matchHighlightColor,
                       borderRadius: '2px',
                       color: (theme) =>
                         theme.palette.mode === 'dark'

package/src/components/body/MRT_TableBodyRow.tsx

@@ -23,7 +23,6 @@ import { getIsRowSelected } from '../../utils/row.utils';
 import {
   commonCellBeforeAfterStyles,
   getCommonPinnedCellStyles,
-  getMRTTheme,
 } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
@@ -61,6 +60,11 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
       enableStickyHeader,
       layoutMode,
       memoMode,
+      mrtTheme: {
+        baseBackgroundColor,
+        pinnedRowBackgroundColor,
+        selectedRowBackgroundColor,
+      },
       muiTableBodyRowProps,
       renderDetailPanel,
       rowPinningDisplayMode,
@@ -138,12 +142,6 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
 
   const rowRef = useRef<HTMLTableRowElement | null>(null);
 
-  const {
-    baseBackgroundColor,
-    pinnedRowBackgroundColor,
-    selectedRowBackgroundColor,
-  } = getMRTTheme(table, theme);
-
   const cellHighlightColor = isRowSelected
     ? selectedRowBackgroundColor
     : isRowPinned

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -9,7 +9,6 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableDetailPanelProps<TData extends MRT_RowData>
@@ -37,6 +36,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
     options: {
       enableRowVirtualization,
       layoutMode,
+      mrtTheme: { baseBackgroundColor },
       muiDetailPanelProps,
       muiTableBodyRowProps,
       renderDetailPanel,
@@ -89,9 +89,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
         colSpan={getVisibleLeafColumns().length}
         {...tableCellProps}
         sx={(theme) => ({
-          backgroundColor: virtualRow
-            ? getMRTTheme(table, theme).baseBackgroundColor
-            : undefined,
+          backgroundColor: virtualRow ? baseBackgroundColor : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
           py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -8,7 +8,6 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableFooterRowProps<TData extends MRT_RowData>
@@ -25,7 +24,11 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableFooterRowProps<TData>) => {
   const {
-    options: { layoutMode, muiTableFooterRowProps },
+    options: {
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiTableFooterRowProps,
+    },
   } = table;
 
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
@@ -55,7 +58,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+        backgroundColor: baseBackgroundColor,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         position: 'relative',
         width: '100%',

package/src/components/head/MRT_TableHeadCell.tsx

@@ -15,7 +15,7 @@ import {
   type MRT_RowData,
   type MRT_TableInstance,
 } from '../../types';
-import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils';
+import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
@@ -47,6 +47,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       enableGrouping,
       enableMultiSort,
       layoutMode,
+      mrtTheme: { draggingBorderColor },
       muiTableHeadCellProps,
     },
     refs: { tableHeadCellRefs },
@@ -73,8 +74,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
-  const { draggingBorderColor } = getMRTTheme(table, theme);
-
   const isColumnPinned =
     enableColumnPinning &&
     columnDef.columnDefType !== 'group' &&

package/src/components/head/MRT_TableHeadRow.tsx

@@ -9,7 +9,6 @@ import {
   type MRT_TableInstance,
   type MRT_VirtualItem,
 } from '../../types';
-import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
 export interface MRT_TableHeadRowProps<TData extends MRT_RowData>
@@ -26,7 +25,12 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   ...rest
 }: MRT_TableHeadRowProps<TData>) => {
   const {
-    options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
+    options: {
+      enableStickyHeader,
+      layoutMode,
+      mrtTheme: { baseBackgroundColor },
+      muiTableHeadRowProps,
+    },
   } = table;
 
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
@@ -44,7 +48,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+        backgroundColor: baseBackgroundColor,
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         position:

package/src/components/inputs/MRT_SelectCheckbox.tsx

@@ -1,4 +1,4 @@
-import { type ChangeEvent, type MouseEvent } from 'react';
+import { type MouseEvent } from 'react';
 import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
 import Radio, { type RadioProps } from '@mui/material/Radio';
 import Tooltip from '@mui/material/Tooltip';
@@ -11,6 +11,7 @@ import {
 import {
   getIsRowSelected,
   getMRT_RowSelectionHandler,
+  getMRT_SelectAllHandler,
 } from '../../utils/row.utils';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -32,22 +33,16 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     getState,
     options: {
       enableMultiRowSelection,
-      enableRowPinning,
       localization,
       muiSelectAllCheckboxProps,
       muiSelectCheckboxProps,
-      rowPinningDisplayMode,
       selectAllMode,
     },
-    refs: { lastSelectedRowId },
   } = table;
   const { density, isLoading } = getState();
 
   const selectAll = !row;
 
-  const isStickySelection =
-    enableRowPinning && rowPinningDisplayMode?.includes('select');
-
   const allRowsSelected = selectAll
     ? selectAllMode === 'page'
       ? table.getIsAllPageRowsSelected()
@@ -63,22 +58,21 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
       ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
       : parseFromValuesOrFunc(muiSelectCheckboxProps, {
           row,
+          staticRowIndex,
           table,
         })),
     ...rest,
   };
 
-  const onSelectionChange = getMRT_RowSelectionHandler();
+  const onSelectionChange = row
+    ? getMRT_RowSelectionHandler({
+        row,
+        staticRowIndex,
+        table,
+      })
+    : undefined;
 
-  const onSelectAllChange = (event: ChangeEvent<HTMLInputElement>) => {
-    selectAllMode === 'all'
-      ? table.getToggleAllRowsSelectedHandler()(event)
-      : table.getToggleAllPageRowsSelectedHandler()(event);
-    if (isStickySelection) {
-      table.setRowPinning({ bottom: [], top: [] });
-    }
-    lastSelectedRowId.current = null;
-  };
+  const onSelectAllChange = getMRT_SelectAllHandler({ table });
 
   const commonProps = {
     'aria-label': selectAll
@@ -94,9 +88,7 @@ export const MRT_SelectCheckbox = <TData extends MRT_RowData>({
     },
     onChange: (event) => {
       event.stopPropagation();
-      row
-        ? onSelectionChange({ event, row, staticRowIndex, table })
-        : 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,
@@ -64,7 +64,7 @@ export const MRT_TablePaper = <TData extends MRT_RowData>({
         ...paperProps?.style,
       }}
       sx={(theme) => ({
-        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+        backgroundColor: baseBackgroundColor,
         backgroundImage: 'unset',
         overflow: 'hidden',
         transition: 'all 100ms ease-in-out',