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

package/src/body/MRT_TableDetailPanel.tsx

@@ -4,6 +4,7 @@ import TableCell from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -33,20 +34,17 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
   } = table;
   const { isLoading } = getState();
 
-  const tableRowProps =
-    muiTableBodyRowProps instanceof Function
-      ? muiTableBodyRowProps({
-          isDetailPanel: true,
-          row,
-          staticRowIndex: rowIndex,
-          table,
-        })
-      : muiTableBodyRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+    isDetailPanel: true,
+    row,
+    staticRowIndex: rowIndex,
+    table,
+  });
 
-  const tableCellProps =
-    muiDetailPanelProps instanceof Function
-      ? muiDetailPanelProps({ row, table })
-      : muiDetailPanelProps;
+  const tableCellProps = parseFromValuesOrFunc(muiDetailPanelProps, {
+    row,
+    table,
+  });
 
   return (
     <TableRow
@@ -63,9 +61,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
           : undefined,
         width: '100%',
         zIndex: virtualRow ? 2 : undefined,
-        ...(tableRowProps?.sx instanceof Function
-          ? tableRowProps.sx(theme)
-          : (tableRowProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
       <TableCell
@@ -82,9 +78,7 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
           pt: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',
           width: `${table.getTotalSize()}px`,
-          ...(tableCellProps?.sx instanceof Function
-            ? tableCellProps.sx(theme)
-            : (tableCellProps?.sx as any)),
+          ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
         })}
       >
         {renderDetailPanel && (

package/src/body/index.ts

@@ -3,4 +3,5 @@ export * from './MRT_TableBodyCell';
 export * from './MRT_TableBodyCellValue';
 export * from './MRT_TableBodyRow';
 export * from './MRT_TableBodyRowGrabHandle';
-export * from './MRT_TableDetailPanel';
+export * from './MRT_TableBodyRowPinButton';
+export * from './MRT_TableDetailPanel';

package/src/buttons/MRT_CopyButton.tsx

@@ -2,6 +2,7 @@ import { type MouseEvent, type ReactNode, useState } from 'react';
 import Button from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   cell: MRT_Cell<TData>;
@@ -29,24 +30,19 @@ export const MRT_CopyButton = <TData extends Record<string, any>>({
     setTimeout(() => setCopied(false), 4000);
   };
 
-  const mTableBodyCellCopyButtonProps =
-    muiCopyButtonProps instanceof Function
-      ? muiCopyButtonProps({ cell, column, row, table })
-      : muiCopyButtonProps;
-
-  const mcTableBodyCellCopyButtonProps =
-    columnDef.muiCopyButtonProps instanceof Function
-      ? columnDef.muiCopyButtonProps({
-          cell,
-          column,
-          row,
-          table,
-        })
-      : columnDef.muiCopyButtonProps;
-
   const buttonProps = {
-    ...mTableBodyCellCopyButtonProps,
-    ...mcTableBodyCellCopyButtonProps,
+    ...parseFromValuesOrFunc(muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+      cell,
+      column,
+      row,
+      table,
+    }),
   };
 
   return (
@@ -78,9 +74,7 @@ export const MRT_CopyButton = <TData extends Record<string, any>>({
           minWidth: 'unset',
           textAlign: 'inherit',
           textTransform: 'inherit',
-          ...(buttonProps?.sx instanceof Function
-            ? buttonProps.sx(theme)
-            : (buttonProps?.sx as any)),
+          ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as any),
         })}
         title={undefined}
       >

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,6 +1,7 @@
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -24,10 +25,9 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
   } = table;
   const { density, isLoading } = getState();
 
-  const iconButtonProps =
-    muiExpandAllButtonProps instanceof Function
-      ? muiExpandAllButtonProps({ table })
-      : muiExpandAllButtonProps;
+  const iconButtonProps = parseFromValuesOrFunc(muiExpandAllButtonProps, {
+    table,
+  });
 
   const isAllRowsExpanded = getIsAllRowsExpanded();
 
@@ -54,9 +54,7 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
             mt: density !== 'compact' ? '-0.25rem' : undefined,
-            ...(iconButtonProps?.sx instanceof Function
-              ? iconButtonProps?.sx(theme)
-              : (iconButtonProps?.sx as any)),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >

package/src/buttons/MRT_ExpandButton.tsx

@@ -2,6 +2,7 @@ import { type MouseEvent } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 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>;
@@ -23,10 +24,10 @@ export const MRT_ExpandButton = <TData extends Record<string, any>>({
   } = table;
   const { density } = getState();
 
-  const iconButtonProps =
-    muiExpandButtonProps instanceof Function
-      ? muiExpandButtonProps({ table, row })
-      : muiExpandButtonProps;
+  const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
+    row,
+    table,
+  });
 
   const canExpand = row.getCanExpand();
   const isExpanded = row.getIsExpanded();
@@ -58,9 +59,7 @@ export const MRT_ExpandButton = <TData extends Record<string, any>>({
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
             width: density === 'compact' ? '1.75rem' : '2.25rem',
-            ...(iconButtonProps?.sx instanceof Function
-              ? iconButtonProps.sx(theme)
-              : (iconButtonProps?.sx as any)),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -2,6 +2,7 @@ import { type DragEventHandler } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type IconButtonProps } from '@mui/material/IconButton';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -56,9 +57,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
           '&:active': {
             cursor: 'grabbing',
           },
-          ...(iconButtonProps?.sx instanceof Function
-            ? iconButtonProps?.sx(theme)
-            : (iconButtonProps?.sx as any)),
+          ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
         })}
         title={undefined}
       >

package/src/buttons/MRT_RowPinButton.tsx

@@ -0,0 +1,74 @@
+import { useState, type MouseEvent } from 'react';
+import { type RowPinningPosition } from '@tanstack/react-table';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
+
+interface Props<TData extends Record<string, any>> {
+  row: MRT_Row<TData>;
+  table: MRT_TableInstance<TData>;
+  pinningPosition: RowPinningPosition;
+}
+
+export const MRT_RowPinButton = <TData extends Record<string, any>>({
+  row,
+  table,
+  pinningPosition,
+}: Props<TData>) => {
+  const {
+    options: {
+      icons: { PushPinIcon, CloseIcon },
+      localization,
+      rowPinningDisplayMode,
+    },
+  } = table;
+
+  const isPinned = row.getIsPinned();
+
+  const [tooltipOpened, setTooltipOpened] = useState(false);
+
+  const handleTogglePin = (event: MouseEvent<HTMLButtonElement>) => {
+    setTooltipOpened(false);
+    event.stopPropagation();
+    row.pin(isPinned ? false : pinningPosition);
+  };
+
+  return (
+    <Tooltip
+      arrow
+      open={tooltipOpened}
+      enterDelay={1000}
+      enterNextDelay={1000}
+      title={isPinned ? localization.unpin : localization.pin}
+    >
+      <IconButton
+        aria-label={localization.pin}
+        onClick={handleTogglePin}
+        onMouseEnter={() => setTooltipOpened(true)}
+        onMouseLeave={() => setTooltipOpened(false)}
+        size="small"
+        sx={{
+          height: '24px',
+          width: '24px',
+        }}
+      >
+        {isPinned ? (
+          <CloseIcon />
+        ) : (
+          <PushPinIcon
+            fontSize="small"
+            style={{
+              transform: `rotate(${
+                rowPinningDisplayMode === 'sticky'
+                  ? 135
+                  : pinningPosition === 'top'
+                  ? 180
+                  : 0
+              }deg)`,
+            }}
+          />
+        )}
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -4,6 +4,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 const commonIconButtonStyles = {
   height: '2rem',
@@ -73,9 +74,7 @@ export const MRT_ToggleRowActionMenuButton = <
       ) : showEditActionButtons ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
-        (enableEditing instanceof Function
-          ? enableEditing(row)
-          : enableEditing) ? (
+        parseFromValuesOrFunc(enableEditing, row) ? (
         <Tooltip placement="right" arrow title={localization.edit}>
           <IconButton
             aria-label={localization.edit}

package/src/buttons/index.ts

@@ -3,10 +3,11 @@ export * from './MRT_CopyButton';
 export * from './MRT_EditActionButtons';
 export * from './MRT_ExpandAllButton';
 export * from './MRT_ExpandButton';
-export * from './MRT_ToggleFullScreenButton';
 export * from './MRT_GrabHandleButton';
+export * from './MRT_RowPinButton';
 export * from './MRT_ShowHideColumnsButton';
 export * from './MRT_ToggleDensePaddingButton';
 export * from './MRT_ToggleFiltersButton';
+export * from './MRT_ToggleFullScreenButton';
 export * from './MRT_ToggleGlobalFilterButton';
 export * from './MRT_ToggleRowActionMenuButton';

package/src/column.utils.ts

@@ -94,8 +94,8 @@ export const prepareColumns = <TData extends Record<string, any>>({
           leafRows: Row<TData>[],
           childRows: Row<TData>[],
         ) =>
-          aggFns.map((fn) =>
-            aggregationFns[fn]?.(columnId, leafRows, childRows),
+          aggFns.map(
+            (fn) => aggregationFns[fn]?.(columnId, leafRows, childRows),
           );
       }
 
@@ -152,6 +152,9 @@ export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
   props: MRT_TableOptions<TData>,
 ) =>
   [
+    props.enableRowPinning &&
+      !props.rowPinningDisplayMode?.startsWith('select') &&
+      'mrt-row-pin',
     (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
     props.positionActionsColumn === 'first' &&
       (props.enableRowActions ||
@@ -356,9 +359,7 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
       ? 'none'
       : `padding 150ms ease-in-out`,
     ...(!table.options.enableColumnResizing && widthStyles), //let devs pass in width styles if column resizing is disabled
-    ...(tableCellProps?.sx instanceof Function
-      ? tableCellProps.sx(theme)
-      : (tableCellProps?.sx as any)),
+    ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
     ...(table.options.enableColumnResizing && widthStyles), //don't let devs pass in width styles if column resizing is enabled
   };
 };
@@ -385,6 +386,11 @@ export const MRT_DefaultDisplayColumn = {
   enableSorting: false,
 } as const;
 
+export const parseFromValuesOrFunc = <T, U>(
+  fn: T | ((arg: U) => T) | undefined,
+  arg: U,
+): T | undefined => (fn instanceof Function ? fn(arg) : fn);
+
 export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
 
 export const flexRender = _flexRender as (

package/src/footer/MRT_TableFooter.tsx

@@ -2,6 +2,7 @@ import TableFooter from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -20,13 +21,13 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
     getFooterGroups,
     getState,
     options: { enableStickyFooter, layoutMode, muiTableFooterProps },
+    refs: { tableFooterRef },
   } = table;
   const { isFullScreen } = getState();
 
-  const tableFooterProps =
-    muiTableFooterProps instanceof Function
-      ? muiTableFooterProps({ table })
-      : muiTableFooterProps;
+  const tableFooterProps = parseFromValuesOrFunc(muiTableFooterProps, {
+    table,
+  });
 
   const stickFooter =
     (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
@@ -45,10 +46,15 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
           : undefined,
         position: stickFooter ? 'sticky' : undefined,
         zIndex: stickFooter ? 1 : undefined,
-        ...(tableFooterProps?.sx instanceof Function
-          ? tableFooterProps?.sx(theme)
-          : (tableFooterProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
       })}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableFooterRef.current = ref;
+        if (tableFooterProps?.ref) {
+          // @ts-ignore
+          tableFooterProps.ref.current = ref;
+        }
+      }}
     >
       {getFooterGroups().map((footerGroup) => (
         <MRT_TableFooterRow

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,5 +1,5 @@
 import TableCell from '@mui/material/TableCell';
-import { getCommonCellStyles } from '../column.utils';
+import { getCommonCellStyles, parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -20,19 +20,12 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableFooterCellProps =
-    muiTableFooterCellProps instanceof Function
-      ? muiTableFooterCellProps({ column, table })
-      : muiTableFooterCellProps;
-
-  const mcTableFooterCellProps =
-    columnDef.muiTableFooterCellProps instanceof Function
-      ? columnDef.muiTableFooterCellProps({ column, table })
-      : columnDef.muiTableFooterCellProps;
-
   const tableCellProps = {
-    ...mTableFooterCellProps,
-    ...mcTableFooterCellProps,
+    ...parseFromValuesOrFunc(muiTableFooterCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
+      column,
+      table,
+    }),
   };
 
   return (
@@ -64,13 +57,7 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
       <>
         {footer.isPlaceholder
           ? null
-          : (columnDef.Footer instanceof Function
-              ? columnDef.Footer?.({
-                  column,
-                  footer,
-                  table,
-                })
-              : columnDef.Footer) ??
+          : parseFromValuesOrFunc(columnDef.Footer, { column, footer, table }) ??
             columnDef.footer ??
             null}
       </>

package/src/footer/MRT_TableFooterRow.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>> {
   footerGroup: MRT_HeaderGroup<TData>;
@@ -38,10 +39,10 @@ export const MRT_TableFooterRow = <TData extends Record<string, any>>({
   )
     return null;
 
-  const tableRowProps =
-    muiTableFooterRowProps instanceof Function
-      ? muiTableFooterRowProps({ footerGroup, table })
-      : muiTableFooterRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
+    footerGroup,
+    table,
+  });
 
   return (
     <TableRow
@@ -50,9 +51,7 @@ export const MRT_TableFooterRow = <TData extends Record<string, any>>({
         backgroundColor: lighten(theme.palette.background.default, 0.04),
         display: layoutMode === 'grid' ? 'flex' : 'table-row',
         width: '100%',
-        ...(tableRowProps?.sx instanceof Function
-          ? tableRowProps?.sx(theme)
-          : (tableRowProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
       {virtualPaddingLeft ? (

package/src/head/MRT_TableHead.tsx

@@ -2,6 +2,7 @@ import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -20,13 +21,11 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
     getHeaderGroups,
     getState,
     options: { enableStickyHeader, layoutMode, muiTableHeadProps },
+    refs: { tableHeadRef },
   } = table;
   const { isFullScreen } = getState();
 
-  const tableHeadProps =
-    muiTableHeadProps instanceof Function
-      ? muiTableHeadProps({ table })
-      : muiTableHeadProps;
+  const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
 
   const stickyHeader = enableStickyHeader || isFullScreen;
 
@@ -39,10 +38,15 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
         position: stickyHeader ? 'sticky' : 'relative',
         top: stickyHeader && layoutMode === 'grid' ? 0 : undefined,
         zIndex: stickyHeader ? 2 : undefined,
-        ...(tableHeadProps?.sx instanceof Function
-          ? tableHeadProps?.sx(theme)
-          : (tableHeadProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
       })}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableHeadRef.current = ref;
+        if (tableHeadProps?.ref) {
+          // @ts-ignore
+          tableHeadProps.ref.current = ref;
+        }
+      }}
     >
       {getHeaderGroups().map((headerGroup) => (
         <MRT_TableHeadRow

package/src/head/MRT_TableHeadCell.tsx

@@ -1,4 +1,4 @@
-import { type DragEvent, type ReactNode, useMemo } from 'react';
+import { type DragEvent, useMemo } from 'react';
 import Box from '@mui/material/Box';
 import TableCell from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
@@ -10,6 +10,7 @@ import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { getCommonCellStyles } from '../column.utils';
 import { type Theme } from '@mui/material/styles';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -47,19 +48,9 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableHeadCellProps =
-    muiTableHeadCellProps instanceof Function
-      ? muiTableHeadCellProps({ column, table })
-      : muiTableHeadCellProps;
-
-  const mcTableHeadCellProps =
-    columnDef.muiTableHeadCellProps instanceof Function
-      ? columnDef.muiTableHeadCellProps({ column, table })
-      : columnDef.muiTableHeadCellProps;
-
   const tableCellProps = {
-    ...mTableHeadCellProps,
-    ...mcTableHeadCellProps,
+    ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, { column, table }),
   };
 
   const showColumnActions =
@@ -113,13 +104,11 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
   };
 
   const headerElement =
-    columnDef?.Header instanceof Function
-      ? columnDef?.Header?.({
-          column,
-          header,
-          table,
-        })
-      : columnDef?.Header ?? (columnDef.header as ReactNode);
+    parseFromValuesOrFunc(columnDef.Header, {
+      column,
+      header,
+      table,
+    }) ?? columnDef.header;
 
   return (
     <TableCell

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -2,6 +2,7 @@ import { type MouseEvent, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -33,22 +34,15 @@ export const MRT_TableHeadCellColumnActionsButton = <
     setAnchorEl(event.currentTarget);
   };
 
-  const mTableHeadCellColumnActionsButtonProps =
-    muiColumnActionsButtonProps instanceof Function
-      ? muiColumnActionsButtonProps({ column, table })
-      : muiColumnActionsButtonProps;
-
-  const mcTableHeadCellColumnActionsButtonProps =
-    columnDef.muiColumnActionsButtonProps instanceof Function
-      ? columnDef.muiColumnActionsButtonProps({
-          column,
-          table,
-        })
-      : columnDef.muiColumnActionsButtonProps;
-
   const iconButtonProps = {
-    ...mTableHeadCellColumnActionsButtonProps,
-    ...mcTableHeadCellColumnActionsButtonProps,
+    ...parseFromValuesOrFunc(muiColumnActionsButtonProps, {
+      column,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
+      column,
+      table,
+    }),
   };
 
   return (
@@ -75,9 +69,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
             '&:hover': {
               opacity: 1,
             },
-            ...(iconButtonProps?.sx instanceof Function
-              ? iconButtonProps.sx(theme)
-              : (iconButtonProps?.sx as any)),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -1,6 +1,6 @@
 import { type DragEvent, type RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../column.utils';
+import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -24,19 +24,12 @@ export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { hoveredColumn, draggingColumn, columnOrder } = getState();
 
-  const mIconButtonProps =
-    muiColumnDragHandleProps instanceof Function
-      ? muiColumnDragHandleProps({ column, table })
-      : muiColumnDragHandleProps;
-
-  const mcIconButtonProps =
-    columnDef.muiColumnDragHandleProps instanceof Function
-      ? columnDef.muiColumnDragHandleProps({ column, table })
-      : columnDef.muiColumnDragHandleProps;
-
   const iconButtonProps = {
-    ...mIconButtonProps,
-    ...mcIconButtonProps,
+    ...parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
+      column,
+      table,
+    }),
   };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {