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

package/dist/esm/material-react-table.esm.js

@@ -1,4 +1,4 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { useMemo, useState, memo, useEffect, useRef, useCallback, Fragment as Fragment$1, useLayoutEffect } from 'react';
 import { aggregationFns, filterFns, sortingFns, flexRender as flexRender$1, createRow as createRow$1, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
@@ -31,6 +31,9 @@ import SearchOffIcon from '@mui/icons-material/SearchOff';
 import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import Box from '@mui/material/Box';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
@@ -40,9 +43,6 @@ import TableCell from '@mui/material/TableCell';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import IconButton from '@mui/material/IconButton';
-import Box from '@mui/material/Box';
 import highlightWords from 'highlight-words';
 import Collapse from '@mui/material/Collapse';
 import ListItemIcon from '@mui/material/ListItemIcon';
@@ -281,13 +281,16 @@ const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
     (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
     props.renderDetailPanel);
 const getLeadingDisplayColumnIds = (props) => {
-    var _a;
+    var _a, _b;
     return [
+        props.enableRowPinning &&
+            !((_a = props.rowPinningDisplayMode) === null || _a === void 0 ? void 0 : _a.startsWith('select')) &&
+            'mrt-row-pin',
         (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
         props.positionActionsColumn === 'first' &&
             (props.enableRowActions ||
                 (props.enableEditing &&
-                    ['row', 'modal'].includes((_a = props.editDisplayMode) !== null && _a !== void 0 ? _a : ''))) &&
+                    ['row', 'modal'].includes((_b = props.editDisplayMode) !== null && _b !== void 0 ? _b : ''))) &&
             'mrt-row-actions',
         props.positionExpandColumn === 'first' &&
             showExpandColumn(props) &&
@@ -398,9 +401,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? `${getTotalRight(table, column)}px`
             : undefined, transition: table.options.enableColumnVirtualization
             ? 'none'
-            : `padding 150ms ease-in-out` }, (!table.options.enableColumnResizing && widthStyles)), ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
-        ? tableCellProps.sx(theme)
-        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), (table.options.enableColumnResizing && widthStyles));
+            : `padding 150ms ease-in-out` }, (!table.options.enableColumnResizing && widthStyles)), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme)), (table.options.enableColumnResizing && widthStyles));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -422,6 +423,7 @@ const MRT_DefaultDisplayColumn = {
     enableResizing: false,
     enableSorting: false,
 };
+const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
 const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
 const flexRender = flexRender$1;
 const createRow = (table, originalRow) => createRow$1(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
@@ -487,6 +489,7 @@ const MRT_Localization_EN = {
     noResultsFound: 'No results found',
     of: 'of',
     or: 'or',
+    pin: 'Pin',
     pinToLeft: 'Pin to left',
     pinToRight: 'Pin to right',
     resetColumnSize: 'Reset column size',
@@ -552,7 +555,7 @@ const MRT_Default_Icons = {
 
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableColumnPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'static', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableColumnPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
     const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
@@ -583,6 +586,7 @@ const useMRT_TableOptions = (_a) => {
         enableColumnActions,
         enableColumnFilters,
         enableColumnOrdering,
+        enableColumnPinning,
         enableColumnResizing,
         enableDensityToggle,
         enableExpandAll,
@@ -597,7 +601,7 @@ const useMRT_TableOptions = (_a) => {
         enableMultiRowSelection,
         enableMultiSort,
         enablePagination,
-        enableColumnPinning,
+        enableRowPinning,
         enableRowSelection,
         enableSelectAll,
         enableSorting,
@@ -617,9 +621,46 @@ const useMRT_TableOptions = (_a) => {
         positionToolbarAlertBanner,
         positionToolbarDropZone,
         rowNumberMode,
+        rowPinningDisplayMode,
         selectAllMode, sortingFns: _sortingFns }, rest);
 };
 
+const MRT_RowPinButton = ({ row, table, pinningPosition, }) => {
+    const { options: { icons: { PushPinIcon, CloseIcon }, localization, rowPinningDisplayMode, }, } = table;
+    const isPinned = row.getIsPinned();
+    const [tooltipOpened, setTooltipOpened] = useState(false);
+    const handleTogglePin = (event) => {
+        setTooltipOpened(false);
+        event.stopPropagation();
+        row.pin(isPinned ? false : pinningPosition);
+    };
+    return (jsx(Tooltip, { arrow: true, open: tooltipOpened, enterDelay: 1000, enterNextDelay: 1000, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, { "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small", sx: {
+                height: '24px',
+                width: '24px',
+            }, children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
+                    transform: `rotate(${rowPinningDisplayMode === 'sticky'
+                        ? 135
+                        : pinningPosition === 'top'
+                            ? 180
+                            : 0}deg)`,
+                } })) }) }));
+};
+
+const MRT_TableBodyRowPinButton = ({ row, table, }) => {
+    const { getState, options: { enableRowPinning, rowPinningDisplayMode }, } = table;
+    const { density } = getState();
+    const canPin = parseFromValuesOrFunc(enableRowPinning, row);
+    if (!canPin)
+        return null;
+    if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
+        return (jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: density === 'compact' ? 'row' : 'column',
+            }, children: [jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: "top" }), jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: "bottom" })] }));
+    }
+    return (jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top' }));
+};
+
 const MRT_EditCellTextField = ({ cell, table, }) => {
     var _a, _b, _c;
     const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, setCreatingRow, } = table;
@@ -630,18 +671,17 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
     const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
     const isSelectEdit = columnDef.editVariant === 'select';
     const [value, setValue] = useState(() => cell.getValue());
-    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 = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
+    const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiEditTextFieldProps, {
+        cell,
+        column,
+        row,
+        table,
+    }));
     const saveInputValueToRowCache = (newValue) => {
         //@ts-ignore
         row._valuesCache[column.id] = newValue;
@@ -676,9 +716,7 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
     if (columnDef.Edit) {
         return jsx(Fragment, { children: (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }) });
     }
-    return (jsx(TextField, Object.assign({ disabled: (columnDef.enableEditing instanceof Function
-            ? columnDef.enableEditing(row)
-            : columnDef.enableEditing) === false, fullWidth: true, inputRef: (inputRef) => {
+    return (jsx(TextField, Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
                 editInputRefs.current[column.id] = inputRef;
                 if (textFieldProps.inputRef) {
@@ -725,21 +763,18 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
         setCopied(true);
         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 = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
-                ? buttonProps.sx(theme)
-                : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined, children: children })) }));
+    const buttonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+        cell,
+        column,
+        row,
+        table,
+    }));
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined, children: children })) }));
 };
 
 const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
@@ -754,16 +789,15 @@ const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table,
                     opacity: 1,
                 }, '&:active': {
                     cursor: 'grabbing',
-                } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
+                } }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
 };
 
 const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, }) => {
     const { options: { muiRowDragHandleProps }, } = table;
-    const iconButtonProps = muiRowDragHandleProps instanceof Function
-        ? muiRowDragHandleProps({ row, table })
-        : muiRowDragHandleProps;
+    const iconButtonProps = parseFromValuesOrFunc(muiRowDragHandleProps, {
+        row,
+        table,
+    });
     const handleDragStart = (event) => {
         var _a;
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
@@ -856,16 +890,23 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    const mTableCellBodyProps = muiTableBodyCellProps instanceof Function
-        ? muiTableBodyCellProps({ cell, column, row, table })
-        : muiTableBodyCellProps;
-    const mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function
-        ? columnDef.muiTableBodyCellProps({ cell, column, row, table })
-        : columnDef.muiTableBodyCellProps;
-    const tableCellProps = Object.assign(Object.assign({}, mTableCellBodyProps), mcTableCellBodyProps);
-    const skeletonProps = muiSkeletonProps instanceof Function
-        ? muiSkeletonProps({ cell, column, row, table })
-        : muiSkeletonProps;
+    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyCellProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, {
+        cell,
+        column,
+        row,
+        table,
+    }));
+    const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
+        cell,
+        column,
+        row,
+        table,
+    });
     const [skeletonWidth, setSkeletonWidth] = useState(100);
     useEffect(() => {
         if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
@@ -907,10 +948,8 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             }
             : undefined;
     }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
-    const isEditable = (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
-        (columnDef.enableEditing instanceof Function
-            ? columnDef.enableEditing(row)
-            : columnDef.enableEditing) !== false;
+    const isEditable = parseFromValuesOrFunc(enableEditing, row) &&
+        parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
     const isEditing = isEditable &&
         !['modal', 'custom'].includes(editDisplayMode) &&
         (editDisplayMode === 'table' ||
@@ -964,7 +1003,7 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                         : density === 'comfortable'
                             ? 0.75
                             : 1.25)}rem`
-                : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
+                : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0, '&:hover': {
                 outline: ['table', 'cell'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')
                     ? `1px solid ${theme.palette.text.secondary}`
                     : undefined,
@@ -994,39 +1033,59 @@ const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell
 const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow, }) => {
     const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiDetailPanelProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
-    const tableRowProps = muiTableBodyRowProps instanceof Function
-        ? muiTableBodyRowProps({
-            isDetailPanel: true,
-            row,
-            staticRowIndex: rowIndex,
-            table,
-        })
-        : muiTableBodyRowProps;
-    const tableCellProps = muiDetailPanelProps instanceof Function
-        ? muiDetailPanelProps({ row, table })
-        : muiDetailPanelProps;
+    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+        isDetailPanel: true,
+        row,
+        staticRowIndex: rowIndex,
+        table,
+    });
+    const tableCellProps = parseFromValuesOrFunc(muiDetailPanelProps, {
+        row,
+        table,
+    });
     return (jsx(TableRow, Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
             var _a, _b;
             return (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row', position: virtualRow ? 'absolute' : undefined, top: virtualRow
                     ? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
                     : undefined, transform: virtualRow
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
-                    : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
-                ? tableRowProps.sx(theme)
-                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)));
+                    : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
         }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
                     ? lighten(theme.palette.background.default, 0.06)
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
-                ? tableCellProps.sx(theme)
-                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
+                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
 };
 
-const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
-    const { getState, options: { enableRowOrdering, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, setHoveredRow, } = table;
-    const { draggingColumn, draggingRow, editingCell, editingRow, hoveredRow } = getState();
-    const tableRowProps = muiTableBodyRowProps instanceof Function
-        ? muiTableBodyRowProps({ row, staticRowIndex: rowIndex, table })
-        : muiTableBodyRowProps;
+const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
+    var _a, _b, _c, _d;
+    const theme = useTheme();
+    const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, rowPinningDisplayMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, refs: { tableHeadRef, tableFooterRef }, setHoveredRow, } = table;
+    const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
+    const isPinned = enableRowPinning && row.getIsPinned();
+    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+        row,
+        staticRowIndex: rowIndex,
+        table,
+    });
+    const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+        if (!enableRowPinning ||
+            !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) ||
+            !pinnedRowIds ||
+            !row.getIsPinned())
+            return [];
+        return [
+            [...pinnedRowIds].reverse().indexOf(row.id),
+            pinnedRowIds.indexOf(row.id),
+        ];
+    }, [pinnedRowIds, rowPinning]);
+    const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
+        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
+        0;
+    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
+    const sx = parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme);
+    const rowHeight = 
+    // @ts-ignore
+    parseInt((_d = (_c = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : sx === null || sx === void 0 ? void 0 : sx.height, 10) ||
+        (density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69);
     const handleDragEnter = (_e) => {
         if (enableRowOrdering && draggingRow) {
             setHoveredRow(row);
@@ -1038,7 +1097,31 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                         rowRef.current = node;
                         measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
                     }
-                } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), boxSizing: 'border-box', display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', top: virtualRow ? 0 : undefined, width: '100%', '&:hover td': {
+                } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: `${lighten(theme.palette.background.default, 0.06)} !important`, boxSizing: 'border-box', bottom: bottomPinnedIndex !== undefined && isPinned
+                        ? `${bottomPinnedIndex * rowHeight +
+                            (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
+                        : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: isPinned
+                        ? 0.98
+                        : (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
+                            ? 0.5
+                            : 1, position: virtualRow
+                        ? 'absolute'
+                        : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
+                            ? 'sticky'
+                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', top: virtualRow
+                        ? 0
+                        : topPinnedIndex !== undefined && isPinned
+                            ? `${topPinnedIndex * rowHeight +
+                                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
+                            : undefined, width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
+                        ? 1
+                        : undefined, td: {
+                        backgroundColor: row.getIsSelected()
+                            ? alpha(theme.palette.primary.main, 0.2)
+                            : isPinned
+                                ? alpha(theme.palette.primary.main, 0.1)
+                                : undefined,
+                    }, '&:hover td': {
                         backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
                             ? row.getIsSelected()
                                 ? `${alpha(theme.palette.primary.main, 0.2)}`
@@ -1046,9 +1129,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                                     ? `${lighten(theme.palette.background.default, 0.12)}`
                                     : `${darken(theme.palette.background.default, 0.05)}`
                             : undefined,
-                    } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
-                    ? tableRowProps.sx(theme)
-                    : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), style: Object.assign({ transform: virtualRow
+                    } }, sx)), style: Object.assign({ transform: virtualRow
                         ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                         : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
                         const cell = columnVirtualizer
@@ -1076,15 +1157,17 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
 const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
 
 const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    var _a, _b, _c, _d;
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tablePaperRef }, } = table;
-    const { columnFilters, density, expanded, globalFilter, globalFilterFn, pagination, sorting, } = getState();
-    const tableBodyProps = muiTableBodyProps instanceof Function
-        ? muiTableBodyProps({ table })
-        : muiTableBodyProps;
-    const vProps = rowVirtualizerOptions instanceof Function
-        ? rowVirtualizerOptions({ table })
-        : rowVirtualizerOptions;
+    var _a, _b, _c, _d, _e, _f;
+    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getIsSomeRowsPinned, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyHeader, enableStickyFooter, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tablePaperRef, tableFooterRef, tableHeadRef }, } = table;
+    const { columnFilters, density, expanded, globalFilter, globalFilterFn, pagination, sorting, rowPinning, isFullScreen, } = getState();
+    const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
+    const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
+        table,
+    });
+    const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
+        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
+        0;
+    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
     const shouldRankResults = useMemo(() => !manualExpanding &&
         !manualFiltering &&
         !manualGrouping &&
@@ -1104,26 +1187,44 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
         manualSorting,
         sorting,
     ]);
+    const pinnedRowIds = useMemo(() => getRowModel()
+        .rows.filter((row) => row.getIsPinned())
+        .map((r) => r.id), [rowPinning, table.getRowModel().rows]);
     const rows = useMemo(() => {
-        if (!shouldRankResults)
-            return getRowModel().rows;
-        const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
-        if (enablePagination && !manualPagination) {
-            const start = pagination.pageIndex * pagination.pageSize;
-            return rankedRows.slice(start, start + pagination.pageSize);
+        let rows = [];
+        if (!shouldRankResults) {
+            rows =
+                !enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
+                    ? getRowModel().rows
+                    : getCenterRows();
+        }
+        else {
+            rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
+            if (enablePagination && !manualPagination) {
+                const start = pagination.pageIndex * pagination.pageSize;
+                rows = rows.slice(start, start + pagination.pageSize);
+            }
+        }
+        if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
+            rows = [
+                ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+                ...rows,
+                ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
+            ];
         }
-        return rankedRows;
+        return rows;
     }, [
         shouldRankResults,
         shouldRankResults ? getPrePaginationRowModel().rows : getRowModel().rows,
         pagination.pageIndex,
         pagination.pageSize,
+        rowPinning,
     ]);
     const rowVirtualizer = enableRowVirtualization
         ? useVirtualizer(Object.assign({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
                 navigator.userAgent.indexOf('Firefox') === -1
                 ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
-                : undefined, overscan: 4 }, vProps))
+                : undefined, overscan: 4 }, rowVirtualizerProps))
         : undefined;
     if (rowVirtualizerInstanceRef && rowVirtualizer) {
         rowVirtualizerInstanceRef.current = rowVirtualizer;
@@ -1131,41 +1232,68 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
     const virtualRows = rowVirtualizer
         ? rowVirtualizer.getVirtualItems()
         : undefined;
-    return (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: rowVirtualizer
-                ? `${rowVirtualizer.getTotalSize()}px`
-                : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
-            ? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
-            : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))), children: (_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : (!rows.length ? (jsx("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                    display: layoutMode === 'grid' ? 'grid' : 'table-cell',
-                }, children: (_b = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _b !== void 0 ? _b : (jsx(Typography, { sx: {
-                        color: 'text.secondary',
-                        fontStyle: 'italic',
-                        maxWidth: `min(100vw, ${(_d = (_c = tablePaperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 360}px)`,
-                        py: '2rem',
-                        textAlign: 'center',
-                        width: '100%',
-                    }, children: globalFilter || columnFilters.length
-                        ? localization.noResultsFound
-                        : localization.noRecordsToDisplay })) }) })) : (jsx(Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
-                const row = rowVirtualizer
-                    ? rows[rowOrVirtualRow.index]
-                    : rowOrVirtualRow;
-                const props = {
-                    columnVirtualizer,
-                    measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                    numRows: rows.length,
-                    row,
-                    rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
-                    table,
-                    virtualColumns,
-                    virtualPaddingLeft,
-                    virtualPaddingRight,
-                    virtualRow: rowVirtualizer
-                        ? rowOrVirtualRow
-                        : undefined,
-                };
-                return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-            }) }))) })));
+    return (jsxs(Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                getIsSomeRowsPinned('top') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, rowIndex) => {
+                    const props = {
+                        columnVirtualizer,
+                        measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                        numRows: rows.length,
+                        row,
+                        rowIndex,
+                        table,
+                        virtualColumns,
+                        virtualPaddingLeft,
+                        virtualPaddingRight,
+                    };
+                    return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                }) }))), jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: rowVirtualizer
+                        ? `${rowVirtualizer.getTotalSize()}px`
+                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsx("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
+                            display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+                        }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsx(Typography, { sx: {
+                                color: 'text.secondary',
+                                fontStyle: 'italic',
+                                maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
+                                py: '2rem',
+                                textAlign: 'center',
+                                width: '100%',
+                            }, children: globalFilter || columnFilters.length
+                                ? localization.noResultsFound
+                                : localization.noRecordsToDisplay })) }) })) : (jsx(Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+                        const row = rowVirtualizer
+                            ? rows[rowOrVirtualRow.index]
+                            : rowOrVirtualRow;
+                        const props = {
+                            columnVirtualizer,
+                            measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                            numRows: rows.length,
+                            pinnedRowIds,
+                            row,
+                            rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
+                            table,
+                            virtualColumns,
+                            virtualPaddingLeft,
+                            virtualPaddingRight,
+                            virtualRow: rowVirtualizer
+                                ? rowOrVirtualRow
+                                : undefined,
+                        };
+                        return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                    }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', position: 'sticky', bottom: tableFooterHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
+                    const props = {
+                        columnVirtualizer,
+                        measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                        numRows: rows.length,
+                        row,
+                        rowIndex,
+                        table,
+                        virtualColumns,
+                        virtualPaddingLeft,
+                        virtualPaddingRight,
+                    };
+                    return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                }) })))] }));
 };
 const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
@@ -1173,15 +1301,13 @@ const MRT_ExpandAllButton = ({ table, }) => {
     var _a, _b;
     const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
     const { density, isLoading } = getState();
-    const iconButtonProps = muiExpandAllButtonProps instanceof Function
-        ? muiExpandAllButtonProps({ table })
-        : muiExpandAllButtonProps;
+    const iconButtonProps = parseFromValuesOrFunc(muiExpandAllButtonProps, {
+        table,
+    });
     const isAllRowsExpanded = getIsAllRowsExpanded();
     return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
             ? localization.collapseAll
-            : localization.expandAll, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                    ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
+            : localization.expandAll, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
                         transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -1191,9 +1317,10 @@ const MRT_ExpandButton = ({ row, table, }) => {
     var _a, _b;
     const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = 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();
     const handleToggleExpand = (event) => {
@@ -1204,9 +1331,7 @@ const MRT_ExpandButton = ({ row, table, }) => {
     };
     return (jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
             ? localization.collapse
-            : localization.expand, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                    ? iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
+            : localization.expand, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
                         transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -1546,9 +1671,7 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
     const { density } = getState();
     return (jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        }, children: [enableEditing instanceof Function
-                ? enableEditing(row)
-                : enableEditing && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+        }, children: [parseFromValuesOrFunc(enableEditing, row) && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
                 row,
                 table,
                 closeMenu: () => setAnchorEl(null),
@@ -1630,22 +1753,16 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
         setAnchorEl(null);
     };
     return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
-            (enableEditing instanceof Function
-                ? enableEditing(row)
-                : enableEditing) ? (jsx(Tooltip, { placement: "right", arrow: true, title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
+            parseFromValuesOrFunc(enableEditing, row) ? (jsx(Tooltip, { placement: "right", arrow: true, title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
 const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
     var _a;
-    const { getState, options: { localization, enableMultiRowSelection, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
+    const { getState, options: { localization, enableMultiRowSelection, rowPinningDisplayMode, enableRowPinning, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
     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'
             ? table.getIsAllPageRowsSelected()
@@ -1655,17 +1772,30 @@ const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
-        }, onChange: row
-            ? row.getToggleSelectedHandler()
-            : selectAllMode === 'all'
-                ? table.getToggleAllRowsSelectedHandler()
-                : table.getToggleAllPageRowsSelectedHandler(), size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
+        }, onChange: (event) => {
+            event.stopPropagation();
+            row
+                ? row.getToggleSelectedHandler()(event)
+                : selectAllMode === 'all'
+                    ? table.getToggleAllRowsSelectedHandler()(event)
+                    : table.getToggleAllPageRowsSelectedHandler()(event);
+            if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
+                if (row) {
+                    row.pin(!row.getIsPinned() && event.target.checked
+                        ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
+                            ? 'bottom'
+                            : 'top'
+                        : false);
+                }
+                else {
+                    table.setRowPinning({ bottom: [], top: [] });
+                }
+            }
+        }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
-        }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
-            ? checkboxProps.sx(theme)
-            : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined });
+        }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
     return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
@@ -1676,20 +1806,21 @@ const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
 const useMRT_DisplayColumns = ({ creatingRow, columnOrder, grouping, tableOptions, }) => {
     var _a, _b;
     return useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v;
         return [
-            ((_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), header: tableOptions.localization.move, size: 60 }, tableOptions.defaultDisplayColumn), (_c = tableOptions.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            (((_e = (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-actions') ||
-                (creatingRow && tableOptions.createDisplayMode === 'row')) && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: tableOptions.localization.actions, size: 70 }, tableOptions.defaultDisplayColumn), (_f = tableOptions.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-actions']), { id: 'mrt-row-actions' }),
-            ((_h = (_g = tableOptions.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-expand') &&
-                showExpandColumn(tableOptions, (_k = (_j = tableOptions.state) === null || _j === void 0 ? void 0 : _j.grouping) !== null && _k !== void 0 ? _k : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: tableOptions.enableExpandAll
+            ((_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-pin') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), header: tableOptions.localization.pin, size: 60 }, tableOptions.defaultDisplayColumn), (_c = tableOptions.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-pin']), { id: 'mrt-row-pin' }),
+            ((_e = (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), header: tableOptions.localization.move, size: 60 }, tableOptions.defaultDisplayColumn), (_f = tableOptions.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-drag']), { id: 'mrt-row-drag' }),
+            (((_h = (_g = tableOptions.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-actions') ||
+                (creatingRow && tableOptions.createDisplayMode === 'row')) && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: tableOptions.localization.actions, size: 70 }, tableOptions.defaultDisplayColumn), (_j = tableOptions.displayColumnDefOptions) === null || _j === void 0 ? void 0 : _j['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            ((_l = (_k = tableOptions.state) === null || _k === void 0 ? void 0 : _k.columnOrder) !== null && _l !== void 0 ? _l : columnOrder).includes('mrt-row-expand') &&
+                showExpandColumn(tableOptions, (_o = (_m = tableOptions.state) === null || _m === void 0 ? void 0 : _m.grouping) !== null && _o !== void 0 ? _o : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: tableOptions.enableExpandAll
                     ? ({ table }) => jsx(MRT_ExpandAllButton, { table: table })
-                    : null, header: tableOptions.localization.expand, size: 60 }, tableOptions.defaultDisplayColumn), (_l = tableOptions.displayColumnDefOptions) === null || _l === void 0 ? void 0 : _l['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            ((_o = (_m = tableOptions.state) === null || _m === void 0 ? void 0 : _m.columnOrder) !== null && _o !== void 0 ? _o : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: tableOptions.enableSelectAll &&
+                    : null, header: tableOptions.localization.expand, size: 60 }, tableOptions.defaultDisplayColumn), (_p = tableOptions.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            ((_r = (_q = tableOptions.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: tableOptions.enableSelectAll &&
                     tableOptions.enableMultiRowSelection
                     ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
-                    : null, header: tableOptions.localization.select, size: 60 }, tableOptions.defaultDisplayColumn), (_p = tableOptions.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-select']), { id: 'mrt-row-select' }),
-            ((_r = (_q = tableOptions.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber, header: tableOptions.localization.rowNumbers, size: 60 }, tableOptions.defaultDisplayColumn), (_s = tableOptions.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
+                    : null, header: tableOptions.localization.select, size: 60 }, tableOptions.defaultDisplayColumn), (_s = tableOptions.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-select']), { id: 'mrt-row-select' }),
+            ((_u = (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnOrder) !== null && _u !== void 0 ? _u : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber, header: tableOptions.localization.rowNumbers, size: 60 }, tableOptions.defaultDisplayColumn), (_v = tableOptions.displayColumnDefOptions) === null || _v === void 0 ? void 0 : _v['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
         ].filter(Boolean);
     }, [
         columnOrder,
@@ -1789,6 +1920,8 @@ const useMRT_TableInstance = (tableOptions) => {
     const tableHeadCellRefs = useRef({});
     const tablePaperRef = useRef(null);
     const topToolbarRef = useRef(null);
+    const tableHeadRef = useRef(null);
+    const tableFooterRef = useRef(null);
     const initialState = useMemo(() => {
         var _a, _b, _c;
         const initState = (_a = tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
@@ -1913,6 +2046,10 @@ const useMRT_TableInstance = (tableOptions) => {
         tablePaperRef,
         // @ts-ignore
         topToolbarRef,
+        // @ts-ignore
+        tableFooterRef,
+        // @ts-ignore
+        tableHeadRef,
     };
     const setCreatingRow = (row) => {
         if (row === true) {
@@ -1959,9 +2096,9 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
     var _a;
     const { getState, setGlobalFilter, options: { enableGlobalFilterModes, icons: { SearchIcon, CloseIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, } = 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);
     const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
@@ -2005,9 +2142,10 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
 const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
     const { options: { muiLinearProgressProps }, getState, } = table;
     const { isLoading, showProgressBars } = getState();
-    const linearProgressProps = muiLinearProgressProps instanceof Function
-        ? muiLinearProgressProps({ isTopToolbar, table })
-        : muiLinearProgressProps;
+    const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
+        isTopToolbar,
+        table,
+    });
     return (jsx(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
@@ -2021,9 +2159,9 @@ const MRT_TablePagination = ({ table, position = 'bottom', }) => {
     const { pagination: { pageSize = 10, pageIndex = 0 }, showGlobalFilter, } = getState();
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-    const tablePaginationProps = muiTablePaginationProps instanceof Function
-        ? muiTablePaginationProps({ table })
-        : muiTablePaginationProps;
+    const tablePaginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+        table,
+    });
     const handleChangeRowsPerPage = (event) => {
         setPageSize(+event.target.value);
     };
@@ -2050,21 +2188,19 @@ const MRT_TablePagination = ({ table, position = 'bottom', }) => {
                 enableToolbarInternalActions &&
                 !showGlobalFilter
                 ? '3.5rem'
-                : undefined, position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
-            ? tablePaginationProps.sx(theme)
-            : tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx))) })));
+                : undefined, position: 'relative', zIndex: 2 }, parseFromValuesOrFunc(tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx, theme))) })));
 };
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
     var _a, _b;
     const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerProps, muiToolbarAlertBannerChipProps, positionToolbarAlertBanner, rowCount, }, } = table;
     const { grouping, showAlertBanner } = getState();
-    const alertProps = muiToolbarAlertBannerProps instanceof Function
-        ? muiToolbarAlertBannerProps({ table })
-        : muiToolbarAlertBannerProps;
-    const chipProps = muiToolbarAlertBannerChipProps instanceof Function
-        ? muiToolbarAlertBannerChipProps({ table })
-        : muiToolbarAlertBannerChipProps;
+    const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
+        table,
+    });
+    const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
+        table,
+    });
     const selectMessage = getSelectedRowModel().rows.length > 0
         ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
         : null;
@@ -2073,9 +2209,7 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
                     ? 0
                     : positionToolbarAlertBanner === 'bottom'
                         ? '-1rem'
-                        : undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
-                ? alertProps.sx(theme)
-                : alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))), children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Box, { sx: { p: '0.5rem 1rem' }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsx("br", {}), groupedByMessage] })] })) }));
+                        : undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, parseFromValuesOrFunc(alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx, theme))), children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Box, { sx: { p: '0.5rem 1rem' }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsx("br", {}), groupedByMessage] })] })) }));
 };
 
 const MRT_ToggleFullScreenButton = (_a) => {
@@ -2322,9 +2456,7 @@ const MRT_TopToolbar = ({ table, }) => {
     const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
     const { isFullScreen, showGlobalFilter } = getState();
     const isMobile = useMediaQuery('(max-width:720px)');
-    const toolbarProps = muiTopToolbarProps instanceof Function
-        ? muiTopToolbarProps({ table })
-        : muiTopToolbarProps;
+    const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
     return (jsxs(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
@@ -2332,9 +2464,7 @@ const MRT_TopToolbar = ({ table, }) => {
                 // @ts-ignore
                 toolbarProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
-            ? toolbarProps.sx(theme)
-            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))), children: [positionToolbarAlertBanner === 'top' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
+        }, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [positionToolbarAlertBanner === 'top' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
                     alignItems: 'flex-start',
                     boxSizing: 'border-box',
                     display: 'flex',
@@ -2357,9 +2487,7 @@ const MRT_BottomToolbar = ({ table, }) => {
     const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
     const { isFullScreen } = getState();
     const isMobile = useMediaQuery('(max-width:720px)');
-    const toolbarProps = muiBottomToolbarProps instanceof Function
-        ? muiBottomToolbarProps({ table })
-        : muiBottomToolbarProps;
+    const toolbarProps = parseFromValuesOrFunc(muiBottomToolbarProps, { table });
     const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
     return (jsxs(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (node) => {
             if (node) {
@@ -2369,9 +2497,7 @@ const MRT_BottomToolbar = ({ table, }) => {
                     toolbarProps.ref.current = node;
                 }
             }
-        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
-            ? toolbarProps.sx(theme)
-            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))), children: [jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
                     alignItems: 'center',
                     boxSizing: 'border-box',
                     display: 'flex',
@@ -2399,21 +2525,16 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
         event.preventDefault();
         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 = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnActionsButtonProps, {
+        column,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
+        column,
+        table,
+    }));
     return (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85) translateX(-4px)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
                             opacity: 1,
-                        } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                        ? iconButtonProps.sx(theme)
-                        : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: jsx(MoreVertIcon, {}) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
+                        } }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(MoreVertIcon, {}) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
@@ -2421,21 +2542,10 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const { options: { enableColumnFilterModes, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, manualFiltering, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     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 = Object.assign(Object.assign({}, mTableHeadCellFilterTextFieldProps), mcTableHeadCellFilterTextFieldProps);
+    const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
+        column,
+        table,
+    }));
     const isRangeFilter = columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
     const isSelectFilter = columnDef.filterVariant === 'select';
     const isMultiSelectFilter = columnDef.filterVariant === 'multi-select';
@@ -2601,9 +2711,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                             ? '120px'
                             : 'auto', width: 'calc(100% + 4px)', mx: '-2px', '& .MuiSelect-icon': {
                         mr: '1.5rem',
-                    } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
-                    ? textFieldProps.sx(theme)
-                    : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { divider: true, disabled: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.map((option) => {
+                    } }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { divider: true, disabled: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.map((option) => {
                         var _a;
                         if (!option)
                             return '';
@@ -2636,19 +2744,13 @@ const MRT_FilterCheckbox = ({ column, table, }) => {
     const { getState, options: { localization, muiFilterCheckboxProps }, } = table;
     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 = Object.assign(Object.assign({}, mTableHeadCellFilterCheckboxProps), mcTableHeadCellFilterCheckboxProps);
+    const checkboxProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterCheckboxProps, {
+        column,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
+        column,
+        table,
+    }));
     const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
     return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel, children: jsx(FormControlLabel, { control: jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
                     var _a;
@@ -2662,9 +2764,7 @@ const MRT_FilterCheckbox = ({ column, table, }) => {
                             ? 'false'
                             : undefined);
                     (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onChange) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e, checked);
-                }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
-                    ? checkboxProps.sx(theme)
-                    : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined }) }));
+                }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', mt: '-4px', fontWeight: 'normal' }, title: undefined }) }));
 };
 
 const MRT_FilterRangeSlider = ({ header, table, }) => {
@@ -2674,19 +2774,7 @@ const MRT_FilterRangeSlider = ({ header, table, }) => {
     const { columnDef } = column;
     const currentFilterOption = columnDef._filterFn;
     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 = Object.assign(Object.assign({}, mFilterSliderProps), mcFilterSliderProps);
+    const sliderProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterSliderProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }));
     let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
         ? [sliderProps.min, sliderProps.max]
         : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 1];
@@ -2739,9 +2827,7 @@ const MRT_FilterRangeSlider = ({ header, table, }) => {
                             }
                         },
                     },
-                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, ((sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx) instanceof Function
-                    ? sliderProps.sx(theme)
-                    : sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx))) })), showChangeModeButton ? (jsx(FormHelperText, { sx: {
+                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsx(FormHelperText, { sx: {
                     m: '-3px -6px',
                     fontSize: '0.75rem',
                     lineHeight: '0.8rem',
@@ -2803,13 +2889,10 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
     const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
     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 = Object.assign(Object.assign({}, mIconButtonProps), mcIconButtonProps);
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table })), parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
+        column,
+        table,
+    }));
     const handleDragStart = (event) => {
         var _a;
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
@@ -2896,20 +2979,14 @@ const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
 };
 
 const MRT_TableHeadCell = ({ header, table, }) => {
-    var _a, _b, _c, _d, _f, _g;
+    var _a, _b, _c, _d, _f;
     const theme = useTheme();
     const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     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 = Object.assign(Object.assign({}, mTableHeadCellProps), mcTableHeadCellProps);
+    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, { column, table }));
     const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
         columnDef.enableColumnActions !== false;
     const showDragHandle = enableColumnDragging !== false &&
@@ -2949,13 +3026,11 @@ const MRT_TableHeadCell = ({ header, table, }) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const headerElement = (columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) instanceof Function
-        ? (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
-            column,
-            header,
-            table,
-        })
-        : (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) !== null && _b !== void 0 ? _b : columnDef.header;
+    const headerElement = (_a = parseFromValuesOrFunc(columnDef.Header, {
+        column,
+        header,
+        table,
+    })) !== null && _a !== void 0 ? _a : columnDef.header;
     return (jsxs(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
@@ -3009,10 +3084,10 @@ const MRT_TableHeadCell = ({ header, table, }) => {
                                 ? `${headerPL}rem`
                                 : undefined,
                         }, children: [jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
-                                    minWidth: `${Math.min((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0, 5)}ch`,
+                                    minWidth: `${Math.min((_c = (_b = columnDef.header) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0, 5)}ch`,
                                     overflow: columnDefType === 'data' ? 'hidden' : undefined,
                                     textOverflow: 'ellipsis',
-                                    whiteSpace: ((_g = (_f = columnDef.header) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : 0) < 20 ? 'nowrap' : 'normal',
+                                    whiteSpace: ((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0) < 20 ? 'nowrap' : 'normal',
                                     '&:hover': {
                                         textOverflow: 'clip',
                                     },
@@ -3023,12 +3098,11 @@ const MRT_TableHeadCell = ({ header, table, }) => {
 
 const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
     const { options: { layoutMode, muiTableHeadRowProps }, } = table;
-    const tableRowProps = muiTableHeadRowProps instanceof Function
-        ? muiTableHeadRowProps({ headerGroup, table })
-        : muiTableHeadRowProps;
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
-            ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
-            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
+    const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
+        headerGroup,
+        table,
+    });
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
                 const header = virtualColumns
                     ? headerGroup.headers[headerOrVirtualHeader.index]
                     : headerOrVirtualHeader;
@@ -3037,31 +3111,30 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
 };
 
 const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    const { getHeaderGroups, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps }, } = table;
+    const { 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;
-    return (jsx(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
-            ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
-            : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))), children: getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
+    return (jsx(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), ref: (ref) => {
+            tableHeadRef.current = ref;
+            if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
+                // @ts-ignore
+                tableHeadProps.ref.current = ref;
+            }
+        }, children: getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
 };
 
 const MRT_TableFooterCell = ({ footer, table, }) => {
-    var _a, _b, _c;
+    var _a, _b;
     const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
     const { density } = getState();
     const { column } = footer;
     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 = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
+    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
+        column,
+        table,
+    }));
     return (jsx(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
@@ -3073,13 +3146,7 @@ const MRT_TableFooterCell = ({ footer, table, }) => {
             tableCellProps,
         }))), children: jsx(Fragment, { children: footer.isPlaceholder
                 ? null
-                : (_c = (_b = (columnDef.Footer instanceof Function
-                    ? (_a = columnDef.Footer) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
-                        column,
-                        footer,
-                        table,
-                    })
-                    : columnDef.Footer)) !== null && _b !== void 0 ? _b : columnDef.footer) !== null && _c !== void 0 ? _c : null }) })));
+                : (_b = (_a = parseFromValuesOrFunc(columnDef.Footer, { column, footer, table })) !== null && _a !== void 0 ? _a : columnDef.footer) !== null && _b !== void 0 ? _b : null }) })));
 };
 
 const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -3090,12 +3157,11 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
         !!header.column.columnDef.footer) ||
         header.column.columnDef.Footer)))
         return null;
-    const tableRowProps = muiTableFooterRowProps instanceof Function
-        ? muiTableFooterRowProps({ footerGroup, table })
-        : muiTableFooterRowProps;
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
-            ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
-            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
+    const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
+        footerGroup,
+        table,
+    });
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
                 const footer = virtualColumns
                     ? footerGroup.headers[footerOrVirtualFooter.index]
                     : footerOrVirtualFooter;
@@ -3104,31 +3170,31 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
 };
 
 const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, } = table;
+    const { 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;
     return (jsx(TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
-            ? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
-            : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
+                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), ref: (ref) => {
+            tableFooterRef.current = ref;
+            if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
+                // @ts-ignore
+                tableFooterProps.ref.current = ref;
+            }
+        }, children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
 };
 
 const MRT_Table = ({ table, }) => {
     var _a, _b, _c, _d;
     const { getFlatHeaders, getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, columns, enableColumnResizing, enableColumnVirtualization, enableColumnPinning, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
     const { columnPinning, columnSizing, columnSizingInfo, columnVisibility, isFullScreen, } = getState();
-    const tableProps = muiTableProps instanceof Function
-        ? muiTableProps({ table })
-        : muiTableProps;
-    const vProps = columnVirtualizerOptions instanceof Function
-        ? columnVirtualizerOptions({ table })
-        : columnVirtualizerOptions;
+    const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
+    const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
     const columnSizeVars = useMemo(() => {
         const headers = getFlatHeaders();
         const colSizes = {};
@@ -3165,7 +3231,7 @@ const MRT_Table = ({ table, }) => {
                     ...defaultRangeExtractor(range),
                     ...rightPinnedIndexes,
                 ]),
-            ], [leftPinnedIndexes, rightPinnedIndexes]) }, vProps))
+            ], [leftPinnedIndexes, rightPinnedIndexes]) }, columnVirtualizerProps))
         : undefined;
     if (columnVirtualizerInstanceRef && columnVirtualizer) {
         columnVirtualizerInstanceRef.current = columnVirtualizer;
@@ -3187,9 +3253,7 @@ const MRT_Table = ({ table, }) => {
         virtualPaddingLeft,
         virtualPaddingRight,
     };
-    return (jsx(Fragment, { children: jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
-                ? tableProps.sx(theme)
-                : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
+    return (jsx(Fragment, { children: jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
 };
 
 const MRT_EditRowModal = ({ open, table, }) => {
@@ -3197,13 +3261,8 @@ const MRT_EditRowModal = ({ open, table, }) => {
     const { getState, options: { localization, onEditingRowCancel, onCreatingRowCancel, renderEditRowModalContent, renderCreateRowModalContent, muiCreateRowModalProps, muiEditRowModalProps, }, setEditingRow, setCreatingRow, } = table;
     const { creatingRow, editingRow } = getState();
     const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
-    const createModalProps = muiCreateRowModalProps instanceof Function
-        ? muiCreateRowModalProps({ row, table })
-        : muiCreateRowModalProps;
-    const editModalProps = muiEditRowModalProps instanceof Function
-        ? muiEditRowModalProps({ row, table })
-        : muiEditRowModalProps;
-    const dialogProps = Object.assign(Object.assign({}, editModalProps), (creatingRow && createModalProps));
+    const dialogProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowModalProps, { row, table })), (creatingRow &&
+        parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })));
     const internalEditComponents = row
         .getAllCells()
         .filter((cell) => cell.column.columnDef.columnDefType === 'data')
@@ -3230,7 +3289,7 @@ const MRT_EditRowModal = ({ open, table, }) => {
                 row,
                 table,
                 internalEditComponents,
-            })))) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: (creatingRow && localization.create) || localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
+            })))) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
                                 gap: '24px',
                                 paddingTop: '16px',
                                 width: '100%',
@@ -3240,11 +3299,11 @@ const MRT_EditRowModal = ({ open, table, }) => {
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
 const MRT_TableContainer = ({ table, }) => {
     const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, 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(() => {
         var _a, _b, _c, _d;
         const topToolbarHeight = typeof document !== 'undefined'
@@ -3267,28 +3326,23 @@ const MRT_TableContainer = ({ table, }) => {
             }
         }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-                : undefined, overflow: 'auto' }, ((tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx) instanceof Function
-            ? tableContainerProps.sx(theme)
-            : tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
+                : undefined, overflow: 'auto' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), style: Object.assign({ maxHeight: isFullScreen
                 ? `calc(100vh - ${totalToolbarHeight}px)`
                 : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), children: [jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
 };
 
 const MRT_TablePaper = ({ table, }) => {
+    var _a, _b;
     const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
-    const tablePaperProps = muiTablePaperProps instanceof Function
-        ? muiTablePaperProps({ table })
-        : muiTablePaperProps;
+    const tablePaperProps = parseFromValuesOrFunc(muiTablePaperProps, { table });
     return (jsxs(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
                 //@ts-ignore
                 tablePaperProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
-            ? tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx(theme)
-            : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), (isFullScreen
+        }, sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), (isFullScreen
             ? {
                 bottom: 0,
                 height: '100vh',
@@ -3304,12 +3358,8 @@ const MRT_TablePaper = ({ table, }) => {
                 zIndex: 10,
             }
             : {})), children: [enableTopToolbar &&
-                (renderTopToolbar instanceof Function
-                    ? renderTopToolbar({ table })
-                    : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : jsx(MRT_TopToolbar, { table: table })), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
-                (renderBottomToolbar instanceof Function
-                    ? renderBottomToolbar({ table })
-                    : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : jsx(MRT_BottomToolbar, { table: table }))] })));
+                ((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
+                ((_b = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_BottomToolbar, { table: table })))] })));
 };
 
 const isTableInstanceProp = (props) => props.table !== undefined;
@@ -3324,5 +3374,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
+export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
 //# sourceMappingURL=material-react-table.esm.js.map