material-react-table 2.11.2 → 2.11.3

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.11.2",
+  "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_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

@@ -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,
@@ -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',

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/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;