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

package/dist/cjs/index.js

@@ -35,6 +35,9 @@ var SearchOffIcon = require('@mui/icons-material/SearchOff');
 var SortIcon = require('@mui/icons-material/Sort');
 var ViewColumnIcon = require('@mui/icons-material/ViewColumn');
 var VisibilityOffIcon = require('@mui/icons-material/VisibilityOff');
+var Box = require('@mui/material/Box');
+var IconButton = require('@mui/material/IconButton');
+var Tooltip = require('@mui/material/Tooltip');
 var reactVirtual = require('@tanstack/react-virtual');
 var TableBody = require('@mui/material/TableBody');
 var Typography = require('@mui/material/Typography');
@@ -44,9 +47,6 @@ var TableCell = require('@mui/material/TableCell');
 var TextField = require('@mui/material/TextField');
 var MenuItem = require('@mui/material/MenuItem');
 var Button = require('@mui/material/Button');
-var Tooltip = require('@mui/material/Tooltip');
-var IconButton = require('@mui/material/IconButton');
-var Box = require('@mui/material/Box');
 var highlightWords = require('highlight-words');
 var Collapse = require('@mui/material/Collapse');
 var ListItemIcon = require('@mui/material/ListItemIcon');
@@ -113,6 +113,9 @@ var SearchOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(SearchOffIcon);
 var SortIcon__default = /*#__PURE__*/_interopDefaultLegacy(SortIcon);
 var ViewColumnIcon__default = /*#__PURE__*/_interopDefaultLegacy(ViewColumnIcon);
 var VisibilityOffIcon__default = /*#__PURE__*/_interopDefaultLegacy(VisibilityOffIcon);
+var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
+var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
+var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
 var TableBody__default = /*#__PURE__*/_interopDefaultLegacy(TableBody);
 var Typography__default = /*#__PURE__*/_interopDefaultLegacy(Typography);
 var TableRow__default = /*#__PURE__*/_interopDefaultLegacy(TableRow);
@@ -121,9 +124,6 @@ var TableCell__default = /*#__PURE__*/_interopDefaultLegacy(TableCell);
 var TextField__default = /*#__PURE__*/_interopDefaultLegacy(TextField);
 var MenuItem__default = /*#__PURE__*/_interopDefaultLegacy(MenuItem);
 var Button__default = /*#__PURE__*/_interopDefaultLegacy(Button);
-var Tooltip__default = /*#__PURE__*/_interopDefaultLegacy(Tooltip);
-var IconButton__default = /*#__PURE__*/_interopDefaultLegacy(IconButton);
-var Box__default = /*#__PURE__*/_interopDefaultLegacy(Box);
 var highlightWords__default = /*#__PURE__*/_interopDefaultLegacy(highlightWords);
 var Collapse__default = /*#__PURE__*/_interopDefaultLegacy(Collapse);
 var ListItemIcon__default = /*#__PURE__*/_interopDefaultLegacy(ListItemIcon);
@@ -361,13 +361,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) &&
@@ -478,9 +481,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',
@@ -502,6 +503,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 = reactTable.flexRender;
 const createRow = (table, originalRow) => reactTable.createRow(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
@@ -567,6 +569,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',
@@ -632,7 +635,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 = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     const _localization = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
     const _aggregationFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
@@ -663,6 +666,7 @@ const useMRT_TableOptions = (_a) => {
         enableColumnActions,
         enableColumnFilters,
         enableColumnOrdering,
+        enableColumnPinning,
         enableColumnResizing,
         enableDensityToggle,
         enableExpandAll,
@@ -677,7 +681,7 @@ const useMRT_TableOptions = (_a) => {
         enableMultiRowSelection,
         enableMultiSort,
         enablePagination,
-        enableColumnPinning,
+        enableRowPinning,
         enableRowSelection,
         enableSelectAll,
         enableSorting,
@@ -697,9 +701,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] = react.useState(false);
+    const handleTogglePin = (event) => {
+        setTooltipOpened(false);
+        event.stopPropagation();
+        row.pin(isPinned ? false : pinningPosition);
+    };
+    return (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, open: tooltipOpened, enterDelay: 1000, enterNextDelay: 1000, title: isPinned ? localization.unpin : localization.pin, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small", sx: {
+                height: '24px',
+                width: '24px',
+            }, children: isPinned ? (jsxRuntime.jsx(CloseIcon, {})) : (jsxRuntime.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 (jsxRuntime.jsxs(Box__default["default"], { sx: {
+                display: 'flex',
+                flexDirection: density === 'compact' ? 'row' : 'column',
+            }, children: [jsxRuntime.jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: "top" }), jsxRuntime.jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: "bottom" })] }));
+    }
+    return (jsxRuntime.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;
@@ -710,18 +751,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] = react.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;
@@ -756,9 +796,7 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
     if (columnDef.Edit) {
         return jsxRuntime.jsx(jsxRuntime.Fragment, { children: (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }) });
     }
-    return (jsxRuntime.jsx(TextField__default["default"], Object.assign({ disabled: (columnDef.enableEditing instanceof Function
-            ? columnDef.enableEditing(row)
-            : columnDef.enableEditing) === false, fullWidth: true, inputRef: (inputRef) => {
+    return (jsxRuntime.jsx(TextField__default["default"], Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
                 editInputRefs.current[column.id] = inputRef;
                 if (textFieldProps.inputRef) {
@@ -805,21 +843,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 (jsxRuntime.jsx(Tooltip__default["default"], { 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: jsxRuntime.jsx(Button__default["default"], 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 (jsxRuntime.jsx(Tooltip__default["default"], { 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: jsxRuntime.jsx(Button__default["default"], 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, }) => {
@@ -834,16 +869,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: jsxRuntime.jsx(DragHandleIcon, {}) })) }));
+                } }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsxRuntime.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);
@@ -936,16 +970,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] = react.useState(100);
     react.useEffect(() => {
         if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
@@ -987,10 +1028,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' ||
@@ -1044,7 +1083,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,
@@ -1074,39 +1113,59 @@ const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => nex
 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 (jsxRuntime.jsx(TableRow__default["default"], 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: jsxRuntime.jsx(TableCell__default["default"], Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
                     ? styles.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 && (jsxRuntime.jsx(Collapse__default["default"], { 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 && (jsxRuntime.jsx(Collapse__default["default"], { 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 = styles.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] = react.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);
@@ -1118,7 +1177,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: styles.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: `${styles.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()
+                            ? styles.alpha(theme.palette.primary.main, 0.2)
+                            : isPinned
+                                ? styles.alpha(theme.palette.primary.main, 0.1)
+                                : undefined,
+                    }, '&:hover td': {
                         backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
                             ? row.getIsSelected()
                                 ? `${styles.alpha(theme.palette.primary.main, 0.2)}`
@@ -1126,9 +1209,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
                                     ? `${styles.lighten(theme.palette.background.default, 0.12)}`
                                     : `${styles.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 ? (jsxRuntime.jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
                         const cell = columnVirtualizer
@@ -1156,15 +1237,17 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, row, row
 const Memo_MRT_TableBodyRow = react.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 = react.useMemo(() => !manualExpanding &&
         !manualFiltering &&
         !manualGrouping &&
@@ -1184,26 +1267,44 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
         manualSorting,
         sorting,
     ]);
+    const pinnedRowIds = react.useMemo(() => getRowModel()
+        .rows.filter((row) => row.getIsPinned())
+        .map((r) => r.id), [rowPinning, table.getRowModel().rows]);
     const rows = react.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();
         }
-        return rankedRows;
+        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 rows;
     }, [
         shouldRankResults,
         shouldRankResults ? getPrePaginationRowModel().rows : getRowModel().rows,
         pagination.pageIndex,
         pagination.pageSize,
+        rowPinning,
     ]);
     const rowVirtualizer = enableRowVirtualization
         ? reactVirtual.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;
@@ -1211,41 +1312,68 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
     const virtualRows = rowVirtualizer
         ? rowVirtualizer.getVirtualItems()
         : undefined;
-    return (jsxRuntime.jsx(TableBody__default["default"], 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 ? (jsxRuntime.jsx("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' }, children: jsxRuntime.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 : (jsxRuntime.jsx(Typography__default["default"], { 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 })) }) })) : (jsxRuntime.jsx(jsxRuntime.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' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-            }) }))) })));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                getIsSomeRowsPinned('top') && (jsxRuntime.jsx(TableBody__default["default"], 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' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                }) }))), jsxRuntime.jsx(TableBody__default["default"], 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 ? (jsxRuntime.jsx("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' }, children: jsxRuntime.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 : (jsxRuntime.jsx(Typography__default["default"], { 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 })) }) })) : (jsxRuntime.jsx(jsxRuntime.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' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                    }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                getIsSomeRowsPinned('bottom') && (jsxRuntime.jsx(TableBody__default["default"], 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' ? (jsxRuntime.jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsxRuntime.jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                }) })))] }));
 };
 const Memo_MRT_TableBody = react.memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
@@ -1253,15 +1381,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 (jsxRuntime.jsx(Tooltip__default["default"], { 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: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], 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 : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
+            : localization.expandAll, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], 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 : (jsxRuntime.jsx(KeyboardDoubleArrowDownIcon, { style: {
                         transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -1271,9 +1397,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) => {
@@ -1284,9 +1411,7 @@ const MRT_ExpandButton = ({ row, table, }) => {
     };
     return (jsxRuntime.jsx(Tooltip__default["default"], { 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: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], 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 : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
+            : localization.expand, children: jsxRuntime.jsx("span", { children: jsxRuntime.jsx(IconButton__default["default"], 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 : (jsxRuntime.jsx(ExpandMoreIcon, { style: {
                         transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -1626,9 +1751,7 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
     const { density } = getState();
     return (jsxRuntime.jsxs(Menu__default["default"], { anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        }, children: [enableEditing instanceof Function
-                ? enableEditing(row)
-                : enableEditing && (jsxRuntime.jsx(MenuItem__default["default"], { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+        }, children: [parseFromValuesOrFunc(enableEditing, row) && (jsxRuntime.jsx(MenuItem__default["default"], { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxRuntime.jsxs(Box__default["default"], { sx: commonListItemStyles, children: [jsxRuntime.jsx(ListItemIcon__default["default"], { children: jsxRuntime.jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
                 row,
                 table,
                 closeMenu: () => setAnchorEl(null),
@@ -1710,22 +1833,16 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
         setAnchorEl(null);
     };
     return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, table })) : showEditActionButtons ? (jsxRuntime.jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
-            (enableEditing instanceof Function
-                ? enableEditing(row)
-                : enableEditing) ? (jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", arrow: true, title: localization.edit, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode, children: jsxRuntime.jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsxRuntime.jsx(MoreHorizIcon, {}) }) }), jsxRuntime.jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
+            parseFromValuesOrFunc(enableEditing, row) ? (jsxRuntime.jsx(Tooltip__default["default"], { placement: "right", arrow: true, title: localization.edit, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode, children: jsxRuntime.jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsxRuntime.jsx(IconButton__default["default"], { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsxRuntime.jsx(MoreHorizIcon, {}) }) }), jsxRuntime.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()
@@ -1735,17 +1852,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 (jsxRuntime.jsx(Tooltip__default["default"], { 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 ? (jsxRuntime.jsx(Radio__default["default"], Object.assign({}, commonProps))) : (jsxRuntime.jsx(Checkbox__default["default"], Object.assign({ indeterminate: selectAll
@@ -1756,20 +1886,21 @@ const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
 const useMRT_DisplayColumns = ({ creatingRow, columnOrder, grouping, tableOptions, }) => {
     var _a, _b;
     return react.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 }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.jsx(MRT_ExpandButton, { row: row, table: table })), Header: tableOptions.enableExpandAll
                     ? ({ table }) => jsxRuntime.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 }) => (jsxRuntime.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 }) => (jsxRuntime.jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: tableOptions.enableSelectAll &&
                     tableOptions.enableMultiRowSelection
                     ? ({ table }) => jsxRuntime.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,
@@ -1869,6 +2000,8 @@ const useMRT_TableInstance = (tableOptions) => {
     const tableHeadCellRefs = react.useRef({});
     const tablePaperRef = react.useRef(null);
     const topToolbarRef = react.useRef(null);
+    const tableHeadRef = react.useRef(null);
+    const tableFooterRef = react.useRef(null);
     const initialState = react.useMemo(() => {
         var _a, _b, _c;
         const initState = (_a = tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
@@ -1993,6 +2126,10 @@ const useMRT_TableInstance = (tableOptions) => {
         tablePaperRef,
         // @ts-ignore
         topToolbarRef,
+        // @ts-ignore
+        tableFooterRef,
+        // @ts-ignore
+        tableHeadRef,
     };
     const setCreatingRow = (row) => {
         if (row === true) {
@@ -2039,9 +2176,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 = react.useRef(false);
     const [anchorEl, setAnchorEl] = react.useState(null);
     const [searchValue, setSearchValue] = react.useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
@@ -2085,9 +2222,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 (jsxRuntime.jsx(Collapse__default["default"], { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
@@ -2101,9 +2239,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);
     };
@@ -2130,21 +2268,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;
@@ -2153,9 +2289,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) && jsxRuntime.jsx(AlertTitle__default["default"], { children: alertProps.title }), jsxRuntime.jsxs(Box__default["default"], { 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) && (jsxRuntime.jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsxRuntime.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) && jsxRuntime.jsx(AlertTitle__default["default"], { children: alertProps.title }), jsxRuntime.jsxs(Box__default["default"], { 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) && (jsxRuntime.jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsxRuntime.jsx("br", {}), groupedByMessage] })] })) }));
 };
 
 const MRT_ToggleFullScreenButton = (_a) => {
@@ -2402,9 +2536,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__default["default"]('(max-width:720px)');
-    const toolbarProps = muiTopToolbarProps instanceof Function
-        ? muiTopToolbarProps({ table })
-        : muiTopToolbarProps;
+    const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
     return (jsxRuntime.jsxs(Toolbar__default["default"], Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
@@ -2412,9 +2544,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' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { 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' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
                     alignItems: 'flex-start',
                     boxSizing: 'border-box',
                     display: 'flex',
@@ -2437,9 +2567,7 @@ const MRT_BottomToolbar = ({ table, }) => {
     const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
     const { isFullScreen } = getState();
     const isMobile = useMediaQuery__default["default"]('(max-width:720px)');
-    const toolbarProps = muiBottomToolbarProps instanceof Function
-        ? muiBottomToolbarProps({ table })
-        : muiBottomToolbarProps;
+    const toolbarProps = parseFromValuesOrFunc(muiBottomToolbarProps, { table });
     const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
     return (jsxRuntime.jsxs(Toolbar__default["default"], Object.assign({ variant: "dense" }, toolbarProps, { ref: (node) => {
             if (node) {
@@ -2449,9 +2577,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 ${styles.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: [jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${styles.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: [jsxRuntime.jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsxRuntime.jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsxRuntime.jsx(MRT_ToolbarDropZone, { table: table })), jsxRuntime.jsxs(Box__default["default"], { sx: {
                     alignItems: 'center',
                     boxSizing: 'border-box',
                     display: 'flex',
@@ -2479,21 +2605,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 (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(Tooltip__default["default"], { 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: jsxRuntime.jsx(IconButton__default["default"], 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: jsxRuntime.jsx(MoreVertIcon, {}) })) }), anchorEl && (jsxRuntime.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: jsxRuntime.jsx(MoreVertIcon, {}) })) }), anchorEl && (jsxRuntime.jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
@@ -2501,21 +2622,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';
@@ -2681,9 +2791,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) && (jsxRuntime.jsx(MenuItem__default["default"], { divider: true, disabled: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { 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) && (jsxRuntime.jsx(MenuItem__default["default"], { divider: true, disabled: true, hidden: true, value: "", children: jsxRuntime.jsx(Box__default["default"], { 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 '';
@@ -2716,19 +2824,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 (jsxRuntime.jsx(Tooltip__default["default"], { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel, children: jsxRuntime.jsx(FormControlLabel__default["default"], { control: jsxRuntime.jsx(Checkbox__default["default"], 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;
@@ -2742,9 +2844,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, }) => {
@@ -2754,19 +2854,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];
@@ -2819,9 +2907,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 ? (jsxRuntime.jsx(FormHelperText__default["default"], { 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 ? (jsxRuntime.jsx(FormHelperText__default["default"], { sx: {
                     m: '-3px -6px',
                     fontSize: '0.75rem',
                     lineHeight: '0.8rem',
@@ -2883,13 +2969,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);
@@ -2976,20 +3059,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 = styles.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 &&
@@ -3029,13 +3106,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 (jsxRuntime.jsxs(TableCell__default["default"], Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
@@ -3089,10 +3164,10 @@ const MRT_TableHeadCell = ({ header, table, }) => {
                                 ? `${headerPL}rem`
                                 : undefined,
                         }, children: [jsxRuntime.jsx(Box__default["default"], { 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',
                                     },
@@ -3103,12 +3178,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 (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${styles.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 ? (jsxRuntime.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 (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${styles.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 ? (jsxRuntime.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;
@@ -3117,31 +3191,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 (jsxRuntime.jsx(TableHead__default["default"], 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) => (jsxRuntime.jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
+    return (jsxRuntime.jsx(TableHead__default["default"], 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) => (jsxRuntime.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 (jsxRuntime.jsx(TableCell__default["default"], 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'
@@ -3153,13 +3226,7 @@ const MRT_TableFooterCell = ({ footer, table, }) => {
             tableCellProps,
         }))), children: jsxRuntime.jsx(jsxRuntime.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, }) => {
@@ -3170,12 +3237,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 (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.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 ? (jsxRuntime.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 (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: styles.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 ? (jsxRuntime.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;
@@ -3184,31 +3250,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 (jsxRuntime.jsx(TableFooter__default["default"], 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) => (jsxRuntime.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) => (jsxRuntime.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 = react.useMemo(() => {
         const headers = getFlatHeaders();
         const colSizes = {};
@@ -3245,7 +3311,7 @@ const MRT_Table = ({ table, }) => {
                     ...reactVirtual.defaultRangeExtractor(range),
                     ...rightPinnedIndexes,
                 ]),
-            ], [leftPinnedIndexes, rightPinnedIndexes]) }, vProps))
+            ], [leftPinnedIndexes, rightPinnedIndexes]) }, columnVirtualizerProps))
         : undefined;
     if (columnVirtualizerInstanceRef && columnVirtualizer) {
         columnVirtualizerInstanceRef.current = columnVirtualizer;
@@ -3267,9 +3333,7 @@ const MRT_Table = ({ table, }) => {
         virtualPaddingLeft,
         virtualPaddingRight,
     };
-    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Table__default["default"], 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 && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
+    return (jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs(Table__default["default"], 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 && jsxRuntime.jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsxRuntime.jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsxRuntime.jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsxRuntime.jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
 };
 
 const MRT_EditRowModal = ({ open, table, }) => {
@@ -3277,13 +3341,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')
@@ -3310,7 +3369,7 @@ const MRT_EditRowModal = ({ open, table, }) => {
                 row,
                 table,
                 internalEditComponents,
-            })))) !== null && _a !== void 0 ? _a : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DialogTitle__default["default"], { sx: { textAlign: 'center' }, children: (creatingRow && localization.create) || localization.edit }), jsxRuntime.jsx(DialogContent__default["default"], { children: jsxRuntime.jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsxRuntime.jsx(Stack__default["default"], { sx: {
+            })))) !== null && _a !== void 0 ? _a : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(DialogTitle__default["default"], { sx: { textAlign: 'center' }, children: localization.edit }), jsxRuntime.jsx(DialogContent__default["default"], { children: jsxRuntime.jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsxRuntime.jsx(Stack__default["default"], { sx: {
                                 gap: '24px',
                                 paddingTop: '16px',
                                 width: '100%',
@@ -3320,11 +3379,11 @@ const MRT_EditRowModal = ({ open, table, }) => {
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? react.useLayoutEffect : react.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] = react.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'
@@ -3347,28 +3406,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: [jsxRuntime.jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsxRuntime.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 (jsxRuntime.jsxs(Paper__default["default"], 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',
@@ -3384,12 +3438,8 @@ const MRT_TablePaper = ({ table, }) => {
                 zIndex: 10,
             }
             : {})), children: [enableTopToolbar &&
-                (renderTopToolbar instanceof Function
-                    ? renderTopToolbar({ table })
-                    : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : jsxRuntime.jsx(MRT_TopToolbar, { table: table })), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
-                (renderBottomToolbar instanceof Function
-                    ? renderBottomToolbar({ table })
-                    : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : jsxRuntime.jsx(MRT_BottomToolbar, { table: table }))] })));
+                ((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
+                ((_b = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _b !== void 0 ? _b : (jsxRuntime.jsx(MRT_BottomToolbar, { table: table })))] })));
 };
 
 const isTableInstanceProp = (props) => props.table !== undefined;
@@ -3426,6 +3476,7 @@ exports.MRT_GlobalFilterTextField = MRT_GlobalFilterTextField;
 exports.MRT_GrabHandleButton = MRT_GrabHandleButton;
 exports.MRT_LinearProgressBar = MRT_LinearProgressBar;
 exports.MRT_RowActionMenu = MRT_RowActionMenu;
+exports.MRT_RowPinButton = MRT_RowPinButton;
 exports.MRT_SelectCheckbox = MRT_SelectCheckbox;
 exports.MRT_ShowHideColumnsButton = MRT_ShowHideColumnsButton;
 exports.MRT_ShowHideColumnsMenu = MRT_ShowHideColumnsMenu;
@@ -3437,6 +3488,7 @@ exports.MRT_TableBodyCell = MRT_TableBodyCell;
 exports.MRT_TableBodyCellValue = MRT_TableBodyCellValue;
 exports.MRT_TableBodyRow = MRT_TableBodyRow;
 exports.MRT_TableBodyRowGrabHandle = MRT_TableBodyRowGrabHandle;
+exports.MRT_TableBodyRowPinButton = MRT_TableBodyRowPinButton;
 exports.MRT_TableContainer = MRT_TableContainer;
 exports.MRT_TableDetailPanel = MRT_TableDetailPanel;
 exports.MRT_TableFooter = MRT_TableFooter;
@@ -3486,6 +3538,7 @@ exports.getTotalRight = getTotalRight;
 exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
 exports.mrtFilterOptions = mrtFilterOptions;
 exports.parseCSSVarId = parseCSSVarId;
+exports.parseFromValuesOrFunc = parseFromValuesOrFunc;
 exports.prepareColumns = prepareColumns;
 exports.rankGlobalFuzzy = rankGlobalFuzzy;
 exports.reorderColumn = reorderColumn;