material-react-table 2.0.0-alpha.0 → 2.0.0-alpha.1

package/src/head/MRT_TableHeadRow.tsx

@@ -7,6 +7,7 @@ import {
   type MRT_HeaderGroup,
   type MRT_TableInstance,
 } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   headerGroup: MRT_HeaderGroup<TData>;
@@ -27,10 +28,10 @@ export const MRT_TableHeadRow = <TData extends Record<string, any>>({
     options: { layoutMode, muiTableHeadRowProps },
   } = table;
 
-  const tableRowProps =
-    muiTableHeadRowProps instanceof Function
-      ? muiTableHeadRowProps({ headerGroup, table })
-      : muiTableHeadRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
+    headerGroup,
+    table,
+  });
 
   return (
     <TableRow
@@ -40,9 +41,7 @@ export const MRT_TableHeadRow = <TData extends Record<string, any>>({
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode === 'grid' ? 'flex' : 'table-row',
         top: 0,
-        ...(tableRowProps?.sx instanceof Function
-          ? tableRowProps?.sx(theme)
-          : (tableRowProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
       {virtualPaddingLeft ? (

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -1,5 +1,6 @@
 import { type RefObject, useMemo } from 'react';
 import { showExpandColumn } from '../column.utils';
+import { MRT_TableBodyRowPinButton } from '../body/MRT_TableBodyRowPinButton';
 import { MRT_TableBodyRowGrabHandle } from '../body';
 import { MRT_ExpandAllButton } from '../buttons/MRT_ExpandAllButton';
 import { MRT_ExpandButton } from '../buttons/MRT_ExpandButton';
@@ -30,6 +31,18 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
     () =>
       (
         [
+          (tableOptions.state?.columnOrder ?? columnOrder).includes(
+            'mrt-row-pin',
+          ) && {
+            Cell: ({ row, table }) => (
+              <MRT_TableBodyRowPinButton row={row} table={table} />
+            ),
+            header: tableOptions.localization.pin,
+            size: 60,
+            ...tableOptions.defaultDisplayColumn,
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-pin'],
+            id: 'mrt-row-pin',
+          },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
             'mrt-row-drag',
           ) && {

package/src/hooks/useMRT_TableInstance.ts

@@ -50,6 +50,8 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
   const tableHeadCellRefs = useRef<Record<string, HTMLTableCellElement>>({});
   const tablePaperRef = useRef<HTMLDivElement>(null);
   const topToolbarRef = useRef<HTMLDivElement>(null);
+  const tableHeadRef = useRef<HTMLTableSectionElement>(null);
+  const tableFooterRef = useRef<HTMLTableSectionElement>(null);
 
   const initialState: Partial<MRT_TableState<TData>> = useMemo(() => {
     const initState = tableOptions.initialState ?? {};
@@ -251,6 +253,10 @@ export const useMRT_TableInstance: <TData extends Record<string, any>>(
     tablePaperRef,
     // @ts-ignore
     topToolbarRef,
+    // @ts-ignore
+    tableFooterRef,
+    // @ts-ignore
+    tableHeadRef,
   };
 
   const setCreatingRow = (row: MRT_Updater<MRT_Row<TData> | null | true>) => {

package/src/hooks/useMRT_TableOptions.ts

@@ -22,6 +22,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
   enableColumnActions = true,
   enableColumnFilters = true,
   enableColumnOrdering = false,
+  enableColumnPinning = false,
   enableColumnResizing = false,
   enableDensityToggle = true,
   enableExpandAll = true,
@@ -36,7 +37,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
   enableMultiRowSelection = true,
   enableMultiSort = true,
   enablePagination = true,
-  enableColumnPinning = false,
+  enableRowPinning = false,
   enableRowSelection = false,
   enableSelectAll = true,
   enableSorting = true,
@@ -61,6 +62,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
   positionToolbarAlertBanner = 'top',
   positionToolbarDropZone = 'top',
   rowNumberMode = 'static',
+  rowPinningDisplayMode = 'sticky',
   selectAllMode = 'page',
   sortingFns,
   ...rest
@@ -123,6 +125,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
     enableColumnActions,
     enableColumnFilters,
     enableColumnOrdering,
+    enableColumnPinning,
     enableColumnResizing,
     enableDensityToggle,
     enableExpandAll,
@@ -137,7 +140,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
     enableMultiRowSelection,
     enableMultiSort,
     enablePagination,
-    enableColumnPinning,
+    enableRowPinning,
     enableRowSelection,
     enableSelectAll,
     enableSorting,
@@ -162,6 +165,7 @@ export const useMRT_TableOptions: <TData extends Record<string, any>>(
     positionToolbarAlertBanner,
     positionToolbarDropZone,
     rowNumberMode,
+    rowPinningDisplayMode,
     selectAllMode,
     sortingFns: _sortingFns,
     ...rest,

package/src/inputs/MRT_EditCellTextField.tsx

@@ -7,6 +7,7 @@ import {
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import { type TextFieldProps } from '@mui/material/TextField';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -36,24 +37,19 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
 
   const [value, setValue] = useState(() => cell.getValue<string>());
 
-  const mTableBodyCellEditTextFieldProps =
-    muiEditTextFieldProps instanceof Function
-      ? muiEditTextFieldProps({ cell, column, row, table })
-      : muiEditTextFieldProps;
-
-  const mcTableBodyCellEditTextFieldProps =
-    columnDef.muiEditTextFieldProps instanceof Function
-      ? columnDef.muiEditTextFieldProps({
-          cell,
-          column,
-          row,
-          table,
-        })
-      : columnDef.muiEditTextFieldProps;
-
   const textFieldProps: TextFieldProps = {
-    ...mTableBodyCellEditTextFieldProps,
-    ...mcTableBodyCellEditTextFieldProps,
+    ...parseFromValuesOrFunc(muiEditTextFieldProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiEditTextFieldProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
   };
 
   const saveInputValueToRowCache = (newValue: string) => {
@@ -93,11 +89,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
 
   return (
     <TextField
-      disabled={
-        (columnDef.enableEditing instanceof Function
-          ? columnDef.enableEditing(row)
-          : columnDef.enableEditing) === false
-      }
+      disabled={parseFromValuesOrFunc(columnDef.enableEditing, row) === false}
       fullWidth
       inputRef={(inputRef) => {
         if (inputRef) {

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -1,8 +1,8 @@
 import Checkbox from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
-import { type CheckboxProps } from '@mui/material/Checkbox';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   column: MRT_Column<TData>;
@@ -20,26 +20,16 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
   const { density } = getState();
   const { columnDef } = column;
 
-  const mTableHeadCellFilterCheckboxProps =
-    muiFilterCheckboxProps instanceof Function
-      ? muiFilterCheckboxProps({
-          column,
-          table,
-        })
-      : muiFilterCheckboxProps;
-
-  const mcTableHeadCellFilterCheckboxProps =
-    columnDef.muiFilterCheckboxProps instanceof Function
-      ? columnDef.muiFilterCheckboxProps({
-          column,
-          table,
-        })
-      : columnDef.muiFilterCheckboxProps;
-
   const checkboxProps = {
-    ...mTableHeadCellFilterCheckboxProps,
-    ...mcTableHeadCellFilterCheckboxProps,
-  } as CheckboxProps;
+    ...parseFromValuesOrFunc(muiFilterCheckboxProps, {
+      column,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
+      column,
+      table,
+    }),
+  };
 
   const filterLabel = localization.filterByColumn?.replace(
     '{column}',
@@ -80,9 +70,7 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
             sx={(theme) => ({
               height: '2.5rem',
               width: '2.5rem',
-              ...(checkboxProps?.sx instanceof Function
-                ? checkboxProps.sx(theme)
-                : (checkboxProps?.sx as any)),
+              ...(parseFromValuesOrFunc(checkboxProps?.sx, theme) as any),
             })}
           />
         }

package/src/inputs/MRT_FilterRangeSlider.tsx

@@ -1,8 +1,9 @@
-import Slider, { type SliderProps } from '@mui/material/Slider';
+import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 import FormHelperText from '@mui/material/FormHelperText';
 import { type MRT_TableInstance, type MRT_Header } from '../types';
 import { useEffect, useRef, useState } from 'react';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   header: MRT_Header<TData>;
@@ -25,26 +26,10 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
   const showChangeModeButton =
     enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
 
-  const mFilterSliderProps =
-    muiFilterSliderProps instanceof Function
-      ? muiFilterSliderProps({
-          column,
-          table,
-        })
-      : muiFilterSliderProps;
-
-  const mcFilterSliderProps =
-    columnDef.muiFilterSliderProps instanceof Function
-      ? columnDef.muiFilterSliderProps({
-          column,
-          table,
-        })
-      : columnDef.muiFilterSliderProps;
-
   const sliderProps = {
-    ...mFilterSliderProps,
-    ...mcFilterSliderProps,
-  } as SliderProps;
+    ...parseFromValuesOrFunc(muiFilterSliderProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }),
+  };
 
   let [min, max] =
     sliderProps.min !== undefined && sliderProps.max !== undefined
@@ -114,9 +99,7 @@ export const MRT_FilterRangeSlider = <TData extends Record<string, any>>({
           mt: !showChangeModeButton ? '10px' : '6px',
           px: '4px',
           width: 'calc(100% - 8px)',
-          ...(sliderProps?.sx instanceof Function
-            ? sliderProps.sx(theme)
-            : (sliderProps?.sx as any)),
+          ...(parseFromValuesOrFunc(sliderProps?.sx, theme) as any),
         })}
       />
       {showChangeModeButton ? (

package/src/inputs/MRT_FilterTextField.tsx

@@ -19,6 +19,7 @@ import { debounce } from '@mui/material/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { type TextFieldProps } from '@mui/material/TextField';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   header: MRT_Header<TData>;
@@ -46,28 +47,13 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
   const { column } = header;
   const { columnDef } = column;
 
-  const mTableHeadCellFilterTextFieldProps =
-    muiFilterTextFieldProps instanceof Function
-      ? muiFilterTextFieldProps({
-          column,
-          table,
-          rangeFilterIndex,
-        })
-      : muiFilterTextFieldProps;
-
-  const mcTableHeadCellFilterTextFieldProps =
-    columnDef.muiFilterTextFieldProps instanceof Function
-      ? columnDef.muiFilterTextFieldProps({
-          column,
-          table,
-          rangeFilterIndex,
-        })
-      : columnDef.muiFilterTextFieldProps;
-
-  const textFieldProps = {
-    ...mTableHeadCellFilterTextFieldProps,
-    ...mcTableHeadCellFilterTextFieldProps,
-  } as TextFieldProps;
+  const textFieldProps: TextFieldProps = {
+    ...parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
+      column,
+      table,
+    }),
+  };
 
   const isRangeFilter =
     columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
@@ -358,9 +344,7 @@ export const MRT_FilterTextField = <TData extends Record<string, any>>({
           '& .MuiSelect-icon': {
             mr: '1.5rem',
           },
-          ...(textFieldProps?.sx instanceof Function
-            ? textFieldProps.sx(theme)
-            : (textFieldProps?.sx as any)),
+          ...(parseFromValuesOrFunc(textFieldProps?.sx, theme) as any),
         })}
       >
         {(isSelectFilter || isMultiSelectFilter) && (

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -14,6 +14,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { debounce } from '@mui/material/utils';
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -36,10 +37,9 @@ export const MRT_GlobalFilterTextField = <TData extends Record<string, any>>({
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
-  const textFieldProps =
-    muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ table })
-      : muiSearchTextFieldProps;
+  const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
+    table,
+  });
 
   const isMounted = useRef(false);
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);

package/src/inputs/MRT_SelectCheckbox.tsx

@@ -1,9 +1,10 @@
 import { type MouseEvent } from 'react';
-import Checkbox from '@mui/material/Checkbox';
+import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
 import Tooltip from '@mui/material/Tooltip';
-import Radio from '@mui/material/Radio';
+import Radio, { type RadioProps } from '@mui/material/Radio';
 import { type Theme } from '@mui/material/styles';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   row?: MRT_Row<TData>;
@@ -21,6 +22,8 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
     options: {
       localization,
       enableMultiRowSelection,
+      rowPinningDisplayMode,
+      enableRowPinning,
       muiSelectCheckboxProps,
       muiSelectAllCheckboxProps,
       selectAllMode,
@@ -29,12 +32,8 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
   const { density, isLoading } = getState();
 
   const checkboxProps = !row
-    ? muiSelectAllCheckboxProps instanceof Function
-      ? muiSelectAllCheckboxProps({ table })
-      : muiSelectAllCheckboxProps
-    : muiSelectCheckboxProps instanceof Function
-    ? muiSelectCheckboxProps({ row, table })
-    : muiSelectCheckboxProps;
+    ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
+    : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table });
 
   const allRowsSelected = selectAll
     ? selectAllMode === 'page'
@@ -50,11 +49,27 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
         ? localization.toggleSelectAll
         : localization.toggleSelectRow,
     },
-    onChange: row
-      ? row.getToggleSelectedHandler()
-      : selectAllMode === 'all'
-      ? table.getToggleAllRowsSelectedHandler()
-      : table.getToggleAllPageRowsSelectedHandler(),
+    onChange: (event) => {
+      event.stopPropagation();
+      row
+        ? row.getToggleSelectedHandler()(event)
+        : selectAllMode === 'all'
+        ? table.getToggleAllRowsSelectedHandler()(event)
+        : table.getToggleAllPageRowsSelectedHandler()(event);
+      if (enableRowPinning && rowPinningDisplayMode?.includes('select')) {
+        if (row) {
+          row.pin(
+            !row.getIsPinned() && event.target.checked
+              ? rowPinningDisplayMode?.includes('bottom')
+                ? 'bottom'
+                : 'top'
+              : false,
+          );
+        } else {
+          table.setRowPinning({ bottom: [], top: [] });
+        }
+      }
+    },
     size: (density === 'compact' ? 'small' : 'medium') as 'small' | 'medium',
     ...checkboxProps,
     onClick: (e: MouseEvent<HTMLButtonElement>) => {
@@ -65,12 +80,11 @@ export const MRT_SelectCheckbox = <TData extends Record<string, any>>({
       height: density === 'compact' ? '1.75rem' : '2.5rem',
       width: density === 'compact' ? '1.75rem' : '2.5rem',
       m: density !== 'compact' ? '-0.4rem' : undefined,
-      ...(checkboxProps?.sx instanceof Function
-        ? checkboxProps.sx(theme)
-        : (checkboxProps?.sx as any)),
+      zIndex: 0,
+      ...parseFromValuesOrFunc(checkboxProps?.sx, theme),
     }),
     title: undefined,
-  };
+  } as CheckboxProps | RadioProps;
 
   return (
     <Tooltip

package/src/locales/en.ts

@@ -14,7 +14,6 @@ export const MRT_Localization_EN: MRT_Localization = {
   collapseAll: 'Collapse all',
   columnActions: 'Column Actions',
   copiedToClipboard: 'Copied to clipboard',
-
   dropToGroupBy: 'Drop to group by {column}',
   edit: 'Edit',
   expand: 'Expand',
@@ -60,6 +59,7 @@ export const MRT_Localization_EN: MRT_Localization = {
   noResultsFound: 'No results found',
   of: 'of',
   or: 'or',
+  pin: 'Pin',
   pinToLeft: 'Pin to left',
   pinToRight: 'Pin to right',
   resetColumnSize: 'Reset column size',

package/src/menus/MRT_RowActionMenu.tsx

@@ -8,6 +8,7 @@ import {
   commonMenuItemStyles,
 } from './MRT_ColumnActionMenu';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   anchorEl: HTMLElement | null;
@@ -45,18 +46,16 @@ export const MRT_RowActionMenu = <TData extends Record<string, any>>({
         dense: density === 'compact',
       }}
     >
-      {enableEditing instanceof Function
-        ? enableEditing(row)
-        : enableEditing && (
-            <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
-              <Box sx={commonListItemStyles}>
-                <ListItemIcon>
-                  <EditIcon />
-                </ListItemIcon>
-                {localization.edit}
-              </Box>
-            </MenuItem>
-          )}
+      {parseFromValuesOrFunc(enableEditing, row) && (
+        <MenuItem onClick={handleEdit} sx={commonMenuItemStyles}>
+          <Box sx={commonListItemStyles}>
+            <ListItemIcon>
+              <EditIcon />
+            </ListItemIcon>
+            {localization.edit}
+          </Box>
+        </MenuItem>
+      )}
       {renderRowActionMenuItems?.({
         row,
         table,

package/src/modals/MRT_EditRowModal.tsx

@@ -6,6 +6,7 @@ import Stack from '@mui/material/Stack';
 import { MRT_EditActionButtons } from '../buttons/MRT_EditActionButtons';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   open: boolean;
@@ -33,19 +34,10 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
   const { creatingRow, editingRow } = getState();
   const row = (creatingRow ?? editingRow) as MRT_Row<TData>;
 
-  const createModalProps =
-    muiCreateRowModalProps instanceof Function
-      ? muiCreateRowModalProps({ row, table })
-      : muiCreateRowModalProps;
-
-  const editModalProps =
-    muiEditRowModalProps instanceof Function
-      ? muiEditRowModalProps({ row, table })
-      : muiEditRowModalProps;
-
   const dialogProps = {
-    ...editModalProps,
-    ...(creatingRow && createModalProps),
+    ...parseFromValuesOrFunc(muiEditRowModalProps, { row, table }),
+    ...(creatingRow &&
+      parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })),
   };
 
   const internalEditComponents = row
@@ -90,7 +82,7 @@ export const MRT_EditRowModal = <TData extends Record<string, any>>({
         })) ?? (
         <>
           <DialogTitle sx={{ textAlign: 'center' }}>
-            {(creatingRow && localization.create) || localization.edit}
+            {localization.edit}
           </DialogTitle>
           <DialogContent>
             <form onSubmit={(e) => e.preventDefault()}>

package/src/table/MRT_Table.tsx

@@ -9,7 +9,7 @@ import Table from '@mui/material/Table';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { Memo_MRT_TableBody, MRT_TableBody } from '../body/MRT_TableBody';
 import { MRT_TableFooter } from '../footer/MRT_TableFooter';
-import { parseCSSVarId } from '../column.utils';
+import { parseCSSVarId, parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -46,15 +46,12 @@ export const MRT_Table = <TData extends Record<string, any>>({
     isFullScreen,
   } = getState();
 
-  const tableProps =
-    muiTableProps instanceof Function
-      ? muiTableProps({ table })
-      : muiTableProps;
+  const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
 
-  const vProps =
-    columnVirtualizerOptions instanceof Function
-      ? columnVirtualizerOptions({ table })
-      : columnVirtualizerOptions;
+  const columnVirtualizerProps = parseFromValuesOrFunc(
+    columnVirtualizerOptions,
+    { table },
+  );
 
   const columnSizeVars = useMemo(() => {
     const headers = getFlatHeaders();
@@ -115,7 +112,7 @@ export const MRT_Table = <TData extends Record<string, any>>({
           ],
           [leftPinnedIndexes, rightPinnedIndexes],
         ),
-        ...vProps,
+        ...columnVirtualizerProps,
       })
     : undefined;
 
@@ -155,9 +152,7 @@ export const MRT_Table = <TData extends Record<string, any>>({
           display: layoutMode === 'grid' ? 'grid' : 'table',
           tableLayout:
             layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined,
-          ...(tableProps?.sx instanceof Function
-            ? tableProps.sx(theme)
-            : (tableProps?.sx as any)),
+          ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
         })}
         style={{ ...columnSizeVars, ...tableProps?.style }}
       >

package/src/table/MRT_TableContainer.tsx

@@ -3,6 +3,7 @@ import TableContainer from '@mui/material/TableContainer';
 import { MRT_Table } from './MRT_Table';
 import { MRT_EditRowModal } from '../modals';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 const useIsomorphicLayoutEffect =
   typeof window !== 'undefined' ? useLayoutEffect : useEffect;
@@ -24,18 +25,13 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
     },
     refs: { tableContainerRef, bottomToolbarRef, topToolbarRef },
   } = table;
-  const {
-    isFullScreen,
-    creatingRow,
-    editingRow,
-  } = getState();
+  const { isFullScreen, creatingRow, editingRow } = getState();
 
   const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
 
-  const tableContainerProps =
-    muiTableContainerProps instanceof Function
-      ? muiTableContainerProps({ table })
-      : muiTableContainerProps;
+  const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
+    table,
+  });
 
   useIsomorphicLayoutEffect(() => {
     const topToolbarHeight =
@@ -72,9 +68,7 @@ export const MRT_TableContainer = <TData extends Record<string, any>>({
           ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
           : undefined,
         overflow: 'auto',
-        ...(tableContainerProps?.sx instanceof Function
-          ? tableContainerProps.sx(theme)
-          : (tableContainerProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableContainerProps?.sx, theme) as any),
       })}
       style={{
         maxHeight: isFullScreen