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

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

@@ -1,8 +1,8 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useMemo, useState, useRef, useCallback, useEffect, Fragment as Fragment$1, memo, useLayoutEffect } from 'react';
-import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
+import { useMemo, useState, memo, useEffect, useRef, useCallback, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { aggregationFns, filterFns, sortingFns, flexRender as flexRender$1, createRow as createRow$1, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-import { alpha, lighten, useTheme, darken } from '@mui/material/styles';
+import { alpha, lighten, darken, useTheme } from '@mui/material/styles';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -32,22 +32,28 @@ import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 import Box from '@mui/material/Box';
-import Dialog from '@mui/material/Dialog';
-import Grow from '@mui/material/Grow';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import ListItemIcon from '@mui/material/ListItemIcon';
-import Menu from '@mui/material/Menu';
+import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
+import TableBody from '@mui/material/TableBody';
+import Typography from '@mui/material/Typography';
+import TableRow from '@mui/material/TableRow';
+import Skeleton from '@mui/material/Skeleton';
+import TableCell from '@mui/material/TableCell';
+import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
 import Button from '@mui/material/Button';
+import highlightWords from 'highlight-words';
+import Collapse from '@mui/material/Collapse';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import Menu from '@mui/material/Menu';
+import CircularProgress from '@mui/material/CircularProgress';
 import Checkbox from '@mui/material/Checkbox';
 import Radio from '@mui/material/Radio';
 import Paper from '@mui/material/Paper';
 import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import Collapse from '@mui/material/Collapse';
 import InputAdornment from '@mui/material/InputAdornment';
-import TextField from '@mui/material/TextField';
 import { debounce } from '@mui/material/utils';
 import LinearProgress from '@mui/material/LinearProgress';
 import TablePagination from '@mui/material/TablePagination';
@@ -57,23 +63,18 @@ import Chip from '@mui/material/Chip';
 import Divider from '@mui/material/Divider';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
-import Typography from '@mui/material/Typography';
 import Fade from '@mui/material/Fade';
 import TableContainer from '@mui/material/TableContainer';
-import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import TableHead from '@mui/material/TableHead';
-import TableRow from '@mui/material/TableRow';
-import TableCell from '@mui/material/TableCell';
 import Slider from '@mui/material/Slider';
 import Stack from '@mui/material/Stack';
 import FormHelperText from '@mui/material/FormHelperText';
+import Grow from '@mui/material/Grow';
 import Badge from '@mui/material/Badge';
 import TableSortLabel from '@mui/material/TableSortLabel';
-import TableBody from '@mui/material/TableBody';
-import Skeleton from '@mui/material/Skeleton';
-import highlightWords from 'highlight-words';
 import TableFooter from '@mui/material/TableFooter';
+import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
 import DialogTitle from '@mui/material/DialogTitle';
@@ -280,13 +281,16 @@ const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
     (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
     props.renderDetailPanel);
 const getLeadingDisplayColumnIds = (props) => {
-    var _a;
+    var _a, _b;
     return [
+        props.enableRowPinning &&
+            !((_a = props.rowPinningDisplayMode) === null || _a === void 0 ? void 0 : _a.startsWith('select')) &&
+            'mrt-row-pin',
         (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
         props.positionActionsColumn === 'first' &&
             (props.enableRowActions ||
                 (props.enableEditing &&
-                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+                    ['row', 'modal'].includes((_b = props.editDisplayMode) !== null && _b !== void 0 ? _b : ''))) &&
             'mrt-row-actions',
         props.positionExpandColumn === 'first' &&
             showExpandColumn(props) &&
@@ -301,7 +305,7 @@ const getTrailingDisplayColumnIds = (props) => {
         props.positionActionsColumn === 'last' &&
             (props.enableRowActions ||
                 (props.enableEditing &&
-                    ['row', 'modal'].includes((_a = props.editingMode) !== null && _a !== void 0 ? _a : ''))) &&
+                    ['row', 'modal'].includes((_a = props.editDisplayMode) !== null && _a !== void 0 ? _a : ''))) &&
             'mrt-row-actions',
         props.positionExpandColumn === 'last' &&
             showExpandColumn(props) &&
@@ -348,6 +352,19 @@ const getTotalRight = (table, column) => {
         .slice(column.getPinnedIndex() + 1)
         .reduce((acc, col) => acc + col.getSize(), 0);
 };
+const getCanRankRows = (table) => {
+    const { options, getState } = table;
+    const { manualExpanding, manualFiltering, manualGrouping, manualSorting, enableGlobalFilterRankedResults, } = options;
+    const { globalFilterFn, expanded } = getState();
+    return (!manualExpanding &&
+        !manualFiltering &&
+        !manualGrouping &&
+        !manualSorting &&
+        enableGlobalFilterRankedResults &&
+        globalFilterFn === 'fuzzy' &&
+        expanded !== true &&
+        !Object.values(expanded).some(Boolean));
+};
 const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const widthStyles = {
@@ -384,9 +401,7 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? `${getTotalRight(table, column)}px`
             : undefined, transition: table.options.enableColumnVirtualization
             ? 'none'
-            : `padding 150ms ease-in-out` }, (!table.options.enableColumnResizing && widthStyles)), ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
-        ? tableCellProps.sx(theme)
-        : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), (table.options.enableColumnResizing && widthStyles));
+            : `padding 150ms ease-in-out` }, (!table.options.enableColumnResizing && widthStyles)), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme)), (table.options.enableColumnResizing && widthStyles));
 };
 const MRT_DefaultColumn = {
     filterVariant: 'text',
@@ -408,38 +423,12 @@ 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 MRT_Default_Icons = {
-    ArrowDownwardIcon,
-    ArrowRightIcon,
-    CancelIcon,
-    ClearAllIcon,
-    CloseIcon,
-    DensityLargeIcon,
-    DensityMediumIcon,
-    DensitySmallIcon,
-    DragHandleIcon,
-    DynamicFeedIcon,
-    EditIcon,
-    ExpandMoreIcon,
-    FilterAltIcon,
-    FilterListIcon,
-    FilterListOffIcon,
-    FullscreenExitIcon,
-    FullscreenIcon,
-    KeyboardDoubleArrowDownIcon,
-    MoreHorizIcon,
-    MoreVertIcon,
-    PushPinIcon,
-    RestartAltIcon,
-    SaveIcon,
-    SearchIcon,
-    SearchOffIcon,
-    SortIcon,
-    ViewColumnIcon,
-    VisibilityOffIcon,
-};
+const flexRender = flexRender$1;
+const createRow = (table, originalRow) => createRow$1(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
+    [getColumnId(col)]: '',
+}))), -1, 0);
 
 const MRT_Localization_EN = {
     actions: 'Actions',
@@ -500,6 +489,7 @@ const MRT_Localization_EN = {
     noResultsFound: 'No results found',
     of: 'of',
     or: 'or',
+    pin: 'Pin',
     pinToLeft: 'Pin to left',
     pinToRight: 'Pin to right',
     resetColumnSize: 'Reset column size',
@@ -530,82 +520,853 @@ const MRT_Localization_EN = {
     ungroupByColumn: 'Ungroup by {column}',
     unpin: 'Unpin',
     unpinAll: 'Unpin all',
-    unsorted: 'Unsorted',
 };
 
-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 isAllRowsExpanded = getIsAllRowsExpanded();
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
-            ? localization.collapseAll
-            : localization.expandAll, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                    ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
-                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })) })) }) }));
+const MRT_Default_Icons = {
+    ArrowDownwardIcon,
+    ArrowRightIcon,
+    CancelIcon,
+    ClearAllIcon,
+    CloseIcon,
+    DensityLargeIcon,
+    DensityMediumIcon,
+    DensitySmallIcon,
+    DragHandleIcon,
+    DynamicFeedIcon,
+    EditIcon,
+    ExpandMoreIcon,
+    FilterAltIcon,
+    FilterListIcon,
+    FilterListOffIcon,
+    FullscreenExitIcon,
+    FullscreenIcon,
+    KeyboardDoubleArrowDownIcon,
+    MoreHorizIcon,
+    MoreVertIcon,
+    PushPinIcon,
+    RestartAltIcon,
+    SaveIcon,
+    SearchIcon,
+    SearchOffIcon,
+    SortIcon,
+    ViewColumnIcon,
+    VisibilityOffIcon,
 };
 
-const MRT_ExpandButton = ({ row, table, }) => {
-    var _a, _b;
-    const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
+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, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
+    const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
+    const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
+    const _filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
+    const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
+    const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
+    const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
+    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
+        layoutMode = 'grid';
+    }
+    if (rest.enableRowVirtualization) {
+        enableStickyHeader = true;
+    }
+    if (enablePagination === false && manualPagination === undefined) {
+        manualPagination = true;
+    }
+    if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
+        manualFiltering = true;
+        manualGrouping = true;
+        manualPagination = true;
+        manualSorting = true;
+    }
+    return Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded,
+        columnFilterDisplayMode,
+        columnResizeMode,
+        createDisplayMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _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: _filterFns, icons: _icons, layoutMode, localization: _localization, manualFiltering,
+        manualGrouping,
+        manualPagination,
+        manualSorting,
+        paginationDisplayMode,
+        positionActionsColumn,
+        positionExpandColumn,
+        positionGlobalFilter,
+        positionPagination,
+        positionToolbarAlertBanner,
+        positionToolbarDropZone,
+        rowNumberMode,
+        rowPinningDisplayMode,
+        selectAllMode, sortingFns: _sortingFns }, rest);
+};
+
+const MRT_RowPinButton = ({ row, table, pinningPosition, }) => {
+    const { options: { icons: { PushPinIcon, CloseIcon }, localization, rowPinningDisplayMode, }, } = table;
+    const isPinned = row.getIsPinned();
+    const [tooltipOpened, setTooltipOpened] = useState(false);
+    const handleTogglePin = (event) => {
+        setTooltipOpened(false);
+        event.stopPropagation();
+        row.pin(isPinned ? false : pinningPosition);
+    };
+    return (jsx(Tooltip, { arrow: true, open: tooltipOpened, enterDelay: 1000, enterNextDelay: 1000, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, { "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small", sx: {
+                height: '24px',
+                width: '24px',
+            }, children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
+                    transform: `rotate(${rowPinningDisplayMode === 'sticky'
+                        ? 135
+                        : pinningPosition === 'top'
+                            ? 180
+                            : 0}deg)`,
+                } })) }) }));
+};
+
+const MRT_TableBodyRowPinButton = ({ row, table, }) => {
+    const { getState, options: { enableRowPinning, rowPinningDisplayMode }, } = table;
     const { density } = getState();
-    const iconButtonProps = muiExpandButtonProps instanceof Function
-        ? muiExpandButtonProps({ table, row })
-        : muiExpandButtonProps;
-    const canExpand = row.getCanExpand();
-    const isExpanded = row.getIsExpanded();
-    const handleToggleExpand = (event) => {
+    const canPin = parseFromValuesOrFunc(enableRowPinning, row);
+    if (!canPin)
+        return null;
+    if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
+        return (jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: density === 'compact' ? 'row' : 'column',
+            }, children: [jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: "top" }), jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: "bottom" })] }));
+    }
+    return (jsx(MRT_RowPinButton, { row: row, table: table, pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top' }));
+};
+
+const MRT_EditCellTextField = ({ cell, table, }) => {
+    var _a, _b, _c;
+    const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, setCreatingRow, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const { creatingRow, editingRow } = getState();
+    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
+    const isSelectEdit = columnDef.editVariant === 'select';
+    const [value, setValue] = useState(() => cell.getValue());
+    const 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;
+        if (isCreating) {
+            setCreatingRow(Object.assign({}, row));
+        }
+        else if (isEditing) {
+            setEditingRow(Object.assign({}, row));
+        }
+    };
+    const handleChange = (event) => {
         var _a;
+        (_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
+        setValue(event.target.value);
+        if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.select) {
+            saveInputValueToRowCache(event.target.value);
+        }
+    };
+    const handleBlur = (event) => {
+        var _a;
+        (_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
+        saveInputValueToRowCache(value);
+        setEditingCell(null);
+    };
+    const handleEnterKeyDown = (event) => {
+        var _a, _b;
+        (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
+        if (event.key === 'Enter' && !event.shiftKey) {
+            (_b = editInputRefs.current[column.id]) === null || _b === void 0 ? void 0 : _b.blur();
+        }
+    };
+    if (columnDef.Edit) {
+        return jsx(Fragment, { children: (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }) });
+    }
+    return (jsx(TextField, Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
+            if (inputRef) {
+                editInputRefs.current[column.id] = inputRef;
+                if (textFieldProps.inputRef) {
+                    textFieldProps.inputRef = inputRef;
+                }
+            }
+        }, label: ['modal', 'custom'].includes((isCreating ? createDisplayMode : editDisplayMode))
+            ? column.columnDef.header
+            : undefined, margin: "none", name: column.id, placeholder: !['modal', 'custom'].includes((isCreating ? createDisplayMode : editDisplayMode))
+            ? columnDef.header
+            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
+            var _a;
+            e.stopPropagation();
+            (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
+        }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown, children: (_b = textFieldProps.children) !== null && _b !== void 0 ? _b : (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _c === void 0 ? void 0 : _c.map((option) => {
+            let value;
+            let text;
+            if (typeof option !== 'object') {
+                value = option;
+                text = option;
+            }
+            else {
+                value = option.value;
+                text = option.text;
+            }
+            return (jsx(MenuItem, { sx: {
+                    display: 'flex',
+                    m: 0,
+                    alignItems: 'center',
+                    gap: '0.5rem',
+                }, value: value, children: text }, value));
+        }) })));
+};
+
+const MRT_CopyButton = ({ cell, children, table, }) => {
+    var _a;
+    const { options: { localization, muiCopyButtonProps }, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const [copied, setCopied] = useState(false);
+    const handleCopy = (event, text) => {
         event.stopPropagation();
-        row.toggleExpanded();
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 4000);
     };
-    return (jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
-            ? localization.collapse
-            : localization.expand, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                    ? iconButtonProps.sx(theme)
-                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
-                        transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })) })) }) }));
+    const buttonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+        cell,
+        column,
+        row,
+        table,
+    }));
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined, children: children })) }));
 };
 
-const mrtFilterOptions = (localization) => [
-    {
-        option: 'fuzzy',
-        symbol: '≈',
-        label: localization.filterFuzzy,
-        divider: false,
-    },
-    {
-        option: 'contains',
-        symbol: '*',
-        label: localization.filterContains,
-        divider: false,
-    },
-    {
-        option: 'startsWith',
-        symbol: 'a',
-        label: localization.filterStartsWith,
-        divider: false,
-    },
-    {
-        option: 'endsWith',
-        symbol: 'z',
-        label: localization.filterEndsWith,
-        divider: true,
-    },
-    {
-        option: 'equals',
-        symbol: '=',
-        label: localization.filterEquals,
-        divider: false,
+const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
+    var _a;
+    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move, children: jsx(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
+                var _a;
+                e.stopPropagation();
+                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
+            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: '0 -0.1rem', opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
+                    backgroundColor: 'transparent',
+                    opacity: 1,
+                }, '&:active': {
+                    cursor: 'grabbing',
+                } }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
+};
+
+const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, }) => {
+    const { options: { muiRowDragHandleProps }, } = table;
+    const iconButtonProps = 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);
+        event.dataTransfer.setDragImage(rowRef.current, 0, 0);
+        table.setDraggingRow(row);
+    };
+    const handleDragEnd = (event) => {
+        var _a;
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+        table.setDraggingRow(null);
+        table.setHoveredRow(null);
+    };
+    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+};
+
+const allowedTypes = ['string', 'number'];
+const MRT_TableBodyCellValue = ({ cell, table, }) => {
+    var _a, _b, _c;
+    const { getState, options: { enableFilterMatchHighlighting }, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const { globalFilter, globalFilterFn } = getState();
+    const filterValue = column.getFilterValue();
+    let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
+        ? columnDef.AggregatedCell({
+            cell,
+            column,
+            row,
+            table,
+        })
+        : row.getIsGrouped() && !cell.getIsGrouped()
+            ? null
+            : cell.getIsGrouped() && columnDef.GroupedCell
+                ? columnDef.GroupedCell({
+                    cell,
+                    column,
+                    row,
+                    table,
+                })
+                : undefined;
+    const isGroupedValue = renderedCellValue !== undefined;
+    if (!isGroupedValue) {
+        renderedCellValue = cell.renderValue();
+    }
+    if (enableFilterMatchHighlighting &&
+        columnDef.enableFilterMatchHighlighting !== false &&
+        renderedCellValue &&
+        allowedTypes.includes(typeof renderedCellValue) &&
+        ((filterValue &&
+            allowedTypes.includes(typeof filterValue) &&
+            columnDef.filterVariant === 'text') ||
+            (globalFilter &&
+                allowedTypes.includes(typeof globalFilter) &&
+                column.getCanGlobalFilter()))) {
+        const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
+            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
+            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
+            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
+        });
+        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
+            renderedCellValue = (jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsx(Box, { "aria-hidden": "true", component: "span", sx: match
+                        ? {
+                            backgroundColor: (theme) => theme.palette.mode === 'dark'
+                                ? darken(theme.palette.warning.dark, 0.25)
+                                : lighten(theme.palette.warning.light, 0.5),
+                            borderRadius: '2px',
+                            color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
+                            padding: '2px 1px',
+                        }
+                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
+        }
+    }
+    if (columnDef.Cell && !isGroupedValue) {
+        renderedCellValue = columnDef.Cell({
+            cell,
+            renderedCellValue,
+            column,
+            row,
+            table,
+        });
+    }
+    return jsx(Fragment, { children: renderedCellValue });
+};
+
+const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
+    var _a, _b, _c, _d;
+    const theme = useTheme();
+    const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { creatingRow, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, density, isLoading, showSkeletons, } = getState();
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyCellProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, {
+        cell,
+        column,
+        row,
+        table,
+    }));
+    const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
+        cell,
+        column,
+        row,
+        table,
+    });
+    const [skeletonWidth, setSkeletonWidth] = useState(100);
+    useEffect(() => {
+        if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
+            return;
+        const size = column.getSize();
+        setSkeletonWidth(columnDefType === 'display'
+            ? size / 2
+            : Math.round(Math.random() * (size - size / 3) + size / 3));
+    }, [isLoading, showSkeletons]);
+    const draggingBorders = useMemo(() => {
+        const isDraggingColumn = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id;
+        const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
+        const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
+        const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
+        const isFirstColumn = getIsFirstColumn(column, table);
+        const isLastColumn = getIsLastColumn(column, table);
+        const isLastRow = rowIndex === numRows - 1;
+        const borderStyle = isDraggingColumn || isDraggingRow
+            ? `1px dashed ${theme.palette.text.secondary} !important`
+            : isHoveredColumn || isHoveredRow
+                ? `2px dashed ${theme.palette.primary.main} !important`
+                : undefined;
+        return borderStyle
+            ? {
+                borderLeft: isDraggingColumn ||
+                    isHoveredColumn ||
+                    ((isDraggingRow || isHoveredRow) && isFirstColumn)
+                    ? borderStyle
+                    : undefined,
+                borderRight: isDraggingColumn ||
+                    isHoveredColumn ||
+                    ((isDraggingRow || isHoveredRow) && isLastColumn)
+                    ? borderStyle
+                    : undefined,
+                borderBottom: isDraggingRow || isHoveredRow || isLastRow
+                    ? borderStyle
+                    : undefined,
+                borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+            }
+            : undefined;
+    }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
+    const isEditable = parseFromValuesOrFunc(enableEditing, row) &&
+        parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
+    const isEditing = isEditable &&
+        !['modal', 'custom'].includes(editDisplayMode) &&
+        (editDisplayMode === 'table' ||
+            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
+            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
+        !row.getIsGrouped();
+    const isCreating = isEditable && createDisplayMode === 'row' && (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const handleDoubleClick = (event) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
+        if (isEditable && editDisplayMode === 'cell') {
+            setEditingCell(cell);
+            queueMicrotask(() => {
+                var _a;
+                const textField = editInputRefs.current[column.id];
+                if (textField) {
+                    textField.focus();
+                    (_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
+                }
+            });
+        }
+    };
+    const handleDragEnter = (e) => {
+        var _a;
+        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            setHoveredColumn(null);
+        }
+        if (enableColumnOrdering && draggingColumn) {
+            setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+        }
+    };
+    return (jsx(TableCell, Object.assign({ "data-index": virtualCell === null || virtualCell === void 0 ? void 0 : virtualCell.index, ref: (node) => {
+            if (node) {
+                measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
+            }
+        } }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: layoutMode === 'grid' ? tableCellProps.align : undefined, overflow: 'hidden', p: density === 'compact'
+                ? columnDefType === 'display'
+                    ? '0 0.5rem'
+                    : '0.5rem'
+                : density === 'comfortable'
+                    ? columnDefType === 'display'
+                        ? '0.5rem 0.75rem'
+                        : '1rem'
+                    : columnDefType === 'display'
+                        ? '1rem 1.25rem'
+                        : '1.5rem', pl: column.id === 'mrt-row-expand'
+                ? `${row.depth +
+                    (density === 'compact'
+                        ? 0.5
+                        : density === 'comfortable'
+                            ? 0.75
+                            : 1.25)}rem`
+                : 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,
+                outlineOffset: '-1px',
+                textOverflow: 'clip',
+            } }, getCommonCellStyles({
+            column,
+            table,
+            theme,
+            tableCellProps,
+        })), draggingBorders)), children: jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : (isLoading || showSkeletons) && cell.getValue() === null ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+                    rowNumberMode === 'static' &&
+                    column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
+                    (column.id === 'mrt-row-select' ||
+                        column.id === 'mrt-row-expand' ||
+                        !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
+                    cell,
+                    renderedCellValue: cell.renderValue(),
+                    column,
+                    row,
+                    table,
+                })) : isCreating || isEditing ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+                    columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) })) : (jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_d = row.subRows) === null || _d === void 0 ? void 0 : _d.length, ")"] }))] }) })));
+};
+const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
+
+const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow, }) => {
+    const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiDetailPanelProps, renderDetailPanel, }, } = table;
+    const { isLoading } = getState();
+    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+        isDetailPanel: true,
+        row,
+        staticRowIndex: rowIndex,
+        table,
+    });
+    const tableCellProps = parseFromValuesOrFunc(muiDetailPanelProps, {
+        row,
+        table,
+    });
+    return (jsx(TableRow, Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
+            var _a, _b;
+            return (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row', position: virtualRow ? 'absolute' : undefined, top: virtualRow
+                    ? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
+                    : undefined, transform: virtualRow
+                    ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
+                    : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
+        }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
+                    ? lighten(theme.palette.background.default, 0.06)
+                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
+};
+
+const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
+    var _a, _b, _c, _d;
+    const theme = useTheme();
+    const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, rowPinningDisplayMode, memoMode, muiTableBodyRowProps, renderDetailPanel, }, refs: { tableHeadRef, tableFooterRef }, setHoveredRow, } = table;
+    const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
+    const isPinned = enableRowPinning && row.getIsPinned();
+    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+        row,
+        staticRowIndex: rowIndex,
+        table,
+    });
+    const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+        if (!enableRowPinning ||
+            !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) ||
+            !pinnedRowIds ||
+            !row.getIsPinned())
+            return [];
+        return [
+            [...pinnedRowIds].reverse().indexOf(row.id),
+            pinnedRowIds.indexOf(row.id),
+        ];
+    }, [pinnedRowIds, rowPinning]);
+    const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
+        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
+        0;
+    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
+    const sx = parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme);
+    const rowHeight = 
+    // @ts-ignore
+    parseInt((_d = (_c = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : sx === null || sx === void 0 ? void 0 : sx.height, 10) ||
+        (density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69);
+    const handleDragEnter = (_e) => {
+        if (enableRowOrdering && draggingRow) {
+            setHoveredRow(row);
+        }
+    };
+    const rowRef = useRef(null);
+    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
+                    if (node) {
+                        rowRef.current = node;
+                        measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
+                    }
+                } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: `${lighten(theme.palette.background.default, 0.06)} !important`, boxSizing: 'border-box', bottom: bottomPinnedIndex !== undefined && isPinned
+                        ? `${bottomPinnedIndex * rowHeight +
+                            (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
+                        : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: isPinned
+                        ? 0.98
+                        : (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
+                            ? 0.5
+                            : 1, position: virtualRow
+                        ? 'absolute'
+                        : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
+                            ? 'sticky'
+                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', top: virtualRow
+                        ? 0
+                        : topPinnedIndex !== undefined && isPinned
+                            ? `${topPinnedIndex * rowHeight +
+                                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
+                            : undefined, width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
+                        ? 1
+                        : undefined, td: {
+                        backgroundColor: row.getIsSelected()
+                            ? alpha(theme.palette.primary.main, 0.2)
+                            : isPinned
+                                ? alpha(theme.palette.primary.main, 0.1)
+                                : undefined,
+                    }, '&:hover td': {
+                        backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
+                            ? row.getIsSelected()
+                                ? `${alpha(theme.palette.primary.main, 0.2)}`
+                                : theme.palette.mode === 'dark'
+                                    ? `${lighten(theme.palette.background.default, 0.12)}`
+                                    : `${darken(theme.palette.background.default, 0.05)}`
+                            : undefined,
+                    } }, sx)), style: Object.assign({ transform: virtualRow
+                        ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
+                        : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
+                        const cell = columnVirtualizer
+                            ? row.getVisibleCells()[cellOrVirtualCell.index]
+                            : cellOrVirtualCell;
+                        const props = {
+                            cell,
+                            measureElement: columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement,
+                            numRows,
+                            rowIndex,
+                            rowRef,
+                            table,
+                            virtualCell: columnVirtualizer
+                                ? cellOrVirtualCell
+                                : undefined,
+                        };
+                        return memoMode === 'cells' &&
+                            cell.column.columnDef.columnDefType === 'data' &&
+                            !draggingColumn &&
+                            !draggingRow &&
+                            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
+                            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id));
+                    }), virtualPaddingRight ? (jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))] }));
+};
+const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
+
+const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    var _a, _b, _c, _d, _e, _f;
+    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getIsSomeRowsPinned, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyHeader, enableStickyFooter, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tablePaperRef, tableFooterRef, tableHeadRef }, } = table;
+    const { columnFilters, density, expanded, globalFilter, globalFilterFn, pagination, sorting, rowPinning, isFullScreen, } = getState();
+    const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
+    const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
+        table,
+    });
+    const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
+        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
+        0;
+    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
+    const shouldRankResults = useMemo(() => !manualExpanding &&
+        !manualFiltering &&
+        !manualGrouping &&
+        !manualSorting &&
+        enableGlobalFilterRankedResults &&
+        globalFilter &&
+        globalFilterFn === 'fuzzy' &&
+        expanded !== true &&
+        !Object.values(sorting).some(Boolean) &&
+        !Object.values(expanded).some(Boolean), [
+        enableGlobalFilterRankedResults,
+        expanded,
+        globalFilter,
+        manualExpanding,
+        manualFiltering,
+        manualGrouping,
+        manualSorting,
+        sorting,
+    ]);
+    const pinnedRowIds = useMemo(() => getRowModel()
+        .rows.filter((row) => row.getIsPinned())
+        .map((r) => r.id), [rowPinning, table.getRowModel().rows]);
+    const rows = useMemo(() => {
+        let rows = [];
+        if (!shouldRankResults) {
+            rows =
+                !enableRowPinning || (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))
+                    ? getRowModel().rows
+                    : getCenterRows();
+        }
+        else {
+            rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
+            if (enablePagination && !manualPagination) {
+                const start = pagination.pageIndex * pagination.pageSize;
+                rows = rows.slice(start, start + pagination.pageSize);
+            }
+        }
+        if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
+            rows = [
+                ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+                ...rows,
+                ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
+            ];
+        }
+        return rows;
+    }, [
+        shouldRankResults,
+        shouldRankResults ? getPrePaginationRowModel().rows : getRowModel().rows,
+        pagination.pageIndex,
+        pagination.pageSize,
+        rowPinning,
+    ]);
+    const rowVirtualizer = enableRowVirtualization
+        ? useVirtualizer(Object.assign({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
+                navigator.userAgent.indexOf('Firefox') === -1
+                ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
+                : undefined, overscan: 4 }, rowVirtualizerProps))
+        : undefined;
+    if (rowVirtualizerInstanceRef && rowVirtualizer) {
+        rowVirtualizerInstanceRef.current = rowVirtualizer;
+    }
+    const virtualRows = rowVirtualizer
+        ? rowVirtualizer.getVirtualItems()
+        : undefined;
+    return (jsxs(Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                getIsSomeRowsPinned('top') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, rowIndex) => {
+                    const props = {
+                        columnVirtualizer,
+                        measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                        numRows: rows.length,
+                        row,
+                        rowIndex,
+                        table,
+                        virtualColumns,
+                        virtualPaddingLeft,
+                        virtualPaddingRight,
+                    };
+                    return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                }) }))), jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: rowVirtualizer
+                        ? `${rowVirtualizer.getTotalSize()}px`
+                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsx("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
+                            display: layoutMode === 'grid' ? 'grid' : 'table-cell',
+                        }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsx(Typography, { sx: {
+                                color: 'text.secondary',
+                                fontStyle: 'italic',
+                                maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
+                                py: '2rem',
+                                textAlign: 'center',
+                                width: '100%',
+                            }, children: globalFilter || columnFilters.length
+                                ? localization.noResultsFound
+                                : localization.noRecordsToDisplay })) }) })) : (jsx(Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+                        const row = rowVirtualizer
+                            ? rows[rowOrVirtualRow.index]
+                            : rowOrVirtualRow;
+                        const props = {
+                            columnVirtualizer,
+                            measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                            numRows: rows.length,
+                            pinnedRowIds,
+                            row,
+                            rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
+                            table,
+                            virtualColumns,
+                            virtualPaddingLeft,
+                            virtualPaddingRight,
+                            virtualRow: rowVirtualizer
+                                ? rowOrVirtualRow
+                                : undefined,
+                        };
+                        return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                    }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', position: 'sticky', bottom: tableFooterHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, rowIndex) => {
+                    const props = {
+                        columnVirtualizer,
+                        measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
+                        numRows: rows.length,
+                        row,
+                        rowIndex,
+                        table,
+                        virtualColumns,
+                        virtualPaddingLeft,
+                        virtualPaddingRight,
+                    };
+                    return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
+                }) })))] }));
+};
+const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
+
+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 = parseFromValuesOrFunc(muiExpandAllButtonProps, {
+        table,
+    });
+    const isAllRowsExpanded = getIsAllRowsExpanded();
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
+            ? localization.collapseAll
+            : localization.expandAll, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
+                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) }));
+};
+
+const MRT_ExpandButton = ({ row, table, }) => {
+    var _a, _b;
+    const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
+    const { density } = getState();
+    const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
+        row,
+        table,
+    });
+    const canExpand = row.getCanExpand();
+    const isExpanded = row.getIsExpanded();
+    const handleToggleExpand = (event) => {
+        var _a;
+        event.stopPropagation();
+        row.toggleExpanded();
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+    };
+    return (jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
+            ? localization.collapse
+            : localization.expand, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
+                        transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) }));
+};
+
+const mrtFilterOptions = (localization) => [
+    {
+        option: 'fuzzy',
+        symbol: '≈',
+        label: localization.filterFuzzy,
+        divider: false,
+    },
+    {
+        option: 'contains',
+        symbol: '*',
+        label: localization.filterContains,
+        divider: false,
+    },
+    {
+        option: 'startsWith',
+        symbol: 'a',
+        label: localization.filterStartsWith,
+        divider: false,
+    },
+    {
+        option: 'endsWith',
+        symbol: 'z',
+        label: localization.filterEndsWith,
+        divider: true,
+    },
+    {
+        option: 'equals',
+        symbol: '=',
+        label: localization.filterEquals,
+        divider: false,
     },
     {
         option: 'notEquals',
@@ -665,6 +1426,7 @@ const mrtFilterOptions = (localization) => [
 const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
 const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
+const rangeVariants = ['range-slider', 'date-range', 'range'];
 const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }) => {
     var _a, _b, _c, _d;
     const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
@@ -673,7 +1435,7 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
     const { columnDef } = column !== null && column !== void 0 ? column : {};
     const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
     let allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
-    if ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant) === 'range-slider') {
+    if (rangeVariants.includes(columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant)) {
         allowedColumnFilterOptions = [
             ...rangeModes,
             ...(allowedColumnFilterOptions !== null && allowedColumnFilterOptions !== void 0 ? allowedColumnFilterOptions : []),
@@ -785,7 +1547,7 @@ const commonListItemStyles = {
 };
 const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowColumnFilters, } = table;
+    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enableColumnPinning, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnSizingInfo, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
@@ -866,10 +1628,10 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             : []),
         ...(enableGrouping && column.getCanGroup()
             ? [
-                jsx(MenuItem, { divider: enablePinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(DynamicFeedIcon, {}) }), (_e = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }) }, 6),
+                jsx(MenuItem, { divider: enableColumnPinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(DynamicFeedIcon, {}) }), (_e = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }) }, 6),
             ]
             : []),
-        ...(enablePinning && column.getCanPin()
+        ...(enableColumnPinning && column.getCanPin()
             ? [
                 jsx(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(90deg)' } }) }), localization.pinToLeft] }) }, 7),
                 jsx(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(PushPinIcon, { style: { transform: 'rotate(-90deg)' } }) }), localization.pinToRight] }) }, 8),
@@ -909,9 +1671,7 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
     const { density } = getState();
     return (jsxs(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), MenuListProps: {
             dense: density === 'compact',
-        }, children: [enableEditing instanceof Function
-                ? enableEditing(row)
-                : enableEditing && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+        }, children: [parseFromValuesOrFunc(enableEditing, row) && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
                 row,
                 table,
                 closeMenu: () => setAnchorEl(null),
@@ -919,30 +1679,49 @@ const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) =
 };
 
 const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
-    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditingRowSave, onEditingRowCancel, }, refs: { editInputRefs }, setEditingRow, } = table;
-    const { editingRow } = getState();
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowSave, onEditingRowCancel, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
+    const { creatingRow, editingRow, isSaving } = getState();
+    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
     const handleCancel = () => {
-        onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
-        setEditingRow(null);
+        if (isCreating) {
+            onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
+            setCreatingRow(null);
+        }
+        else if (isEditing) {
+            onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
+            setEditingRow(null);
+        }
+        row._valuesCache = {}; //reset values cache
     };
-    const handleSave = () => {
-        var _a, _b;
+    const handleSubmitRow = () => {
+        var _a;
         //look for auto-filled input values
-        (_a = Object.values(editInputRefs === null || editInputRefs === void 0 ? void 0 : editInputRefs.current)) === null || _a === void 0 ? void 0 : _a.forEach((input) => {
+        (_a = Object.values(editInputRefs === null || editInputRefs === void 0 ? void 0 : editInputRefs.current)
+            .filter((inputRef) => { var _a, _b; return row.id === ((_b = (_a = inputRef === null || inputRef === void 0 ? void 0 : inputRef.name) === null || _a === void 0 ? void 0 : _a.split('_')) === null || _b === void 0 ? void 0 : _b[0]); })) === null || _a === void 0 ? void 0 : _a.forEach((input) => {
             if (input.value !== undefined &&
-                Object.hasOwn(editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache, input.name)) {
+                Object.hasOwn(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
                 // @ts-ignore
-                editingRow._valuesCache[input.name] = input.value;
+                row._valuesCache[input.name] = input.value;
             }
         });
-        onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
-            exitEditingMode: () => setEditingRow(null),
-            row: editingRow !== null && editingRow !== void 0 ? editingRow : row,
-            table,
-            values: (_b = editingRow === null || editingRow === void 0 ? void 0 : editingRow._valuesCache) !== null && _b !== void 0 ? _b : Object.assign({}, row.original),
-        });
+        if (isCreating)
+            onCreatingRowSave === null || onCreatingRowSave === void 0 ? void 0 : onCreatingRowSave({
+                exitCreatingMode: () => setCreatingRow(null),
+                row,
+                table,
+                values: row._valuesCache,
+            });
+        else if (isEditing) {
+            onEditingRowSave === null || onEditingRowSave === void 0 ? void 0 : onEditingRowSave({
+                exitEditingMode: () => setEditingRow(null),
+                row,
+                table,
+                values: row === null || row === void 0 ? void 0 : row._valuesCache,
+            });
+        }
     };
-    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' }, children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { arrow: true, title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave, children: jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, children: localization.cancel }), jsx(Button, { onClick: handleSave, variant: "contained", children: localization.save })] })) }));
+    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' }, children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { arrow: true, title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { sx: { minWidth: '100px' }, onClick: handleCancel, children: localization.cancel }), jsxs(Button, { sx: { minWidth: '100px' }, onClick: handleSubmitRow, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
 };
 
 const commonIconButtonStyles = {
@@ -956,8 +1735,12 @@ const commonIconButtonStyles = {
     },
 };
 const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
-    const { getState, options: { editingMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
-    const { editingRow } = getState();
+    const { getState, options: { createDisplayMode, editDisplayMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
+    const { creatingRow, editingRow } = getState();
+    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
+    const showEditActionButtons = (isCreating && createDisplayMode === 'row') ||
+        (isEditing && editDisplayMode === 'row');
     const [anchorEl, setAnchorEl] = useState(null);
     const handleOpenRowActionMenu = (event) => {
         event.stopPropagation();
@@ -969,23 +1752,17 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (jsx(Fragment, { children: renderRowActions ? (renderRowActions({ cell, row, table })) : row.id === (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) && editingMode === 'row' ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
-            (enableEditing instanceof Function
-                ? enableEditing(row)
-                : enableEditing) ? (jsx(Tooltip, { placement: "right", arrow: true, title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
+    return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
+            parseFromValuesOrFunc(enableEditing, row) ? (jsx(Tooltip, { placement: "right", arrow: true, title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
-const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
+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()
@@ -995,17 +1772,30 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
             'aria-label': selectAll
                 ? localization.toggleSelectAll
                 : localization.toggleSelectRow,
-        }, onChange: row
-            ? row.getToggleSelectedHandler()
-            : selectAllMode === 'all'
-                ? table.getToggleAllRowsSelectedHandler()
-                : table.getToggleAllPageRowsSelectedHandler(), size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
+        }, onChange: (event) => {
+            event.stopPropagation();
+            row
+                ? row.getToggleSelectedHandler()(event)
+                : selectAllMode === 'all'
+                    ? table.getToggleAllRowsSelectedHandler()(event)
+                    : table.getToggleAllPageRowsSelectedHandler()(event);
+            if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
+                if (row) {
+                    row.pin(!row.getIsPinned() && event.target.checked
+                        ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
+                            ? 'bottom'
+                            : 'top'
+                        : false);
+                }
+                else {
+                    table.setRowPinning({ bottom: [], top: [] });
+                }
+            }
+        }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
-        }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
-            ? checkboxProps.sx(theme)
-            : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))), title: undefined });
+        }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
     return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
@@ -1013,13 +1803,302 @@ const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
                 : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) }));
 };
 
+const useMRT_DisplayColumns = ({ creatingRow, columnOrder, grouping, tableOptions, }) => {
+    var _a, _b;
+    return useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _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-pin') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), header: tableOptions.localization.pin, size: 60 }, tableOptions.defaultDisplayColumn), (_c = tableOptions.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-pin']), { id: 'mrt-row-pin' }),
+            ((_e = (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), header: tableOptions.localization.move, size: 60 }, tableOptions.defaultDisplayColumn), (_f = tableOptions.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-drag']), { id: 'mrt-row-drag' }),
+            (((_h = (_g = tableOptions.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-actions') ||
+                (creatingRow && tableOptions.createDisplayMode === 'row')) && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: tableOptions.localization.actions, size: 70 }, tableOptions.defaultDisplayColumn), (_j = tableOptions.displayColumnDefOptions) === null || _j === void 0 ? void 0 : _j['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            ((_l = (_k = tableOptions.state) === null || _k === void 0 ? void 0 : _k.columnOrder) !== null && _l !== void 0 ? _l : columnOrder).includes('mrt-row-expand') &&
+                showExpandColumn(tableOptions, (_o = (_m = tableOptions.state) === null || _m === void 0 ? void 0 : _m.grouping) !== null && _o !== void 0 ? _o : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: tableOptions.enableExpandAll
+                    ? ({ table }) => jsx(MRT_ExpandAllButton, { table: table })
+                    : null, header: tableOptions.localization.expand, size: 60 }, tableOptions.defaultDisplayColumn), (_p = tableOptions.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            ((_r = (_q = tableOptions.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: tableOptions.enableSelectAll &&
+                    tableOptions.enableMultiRowSelection
+                    ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
+                    : null, header: tableOptions.localization.select, size: 60 }, tableOptions.defaultDisplayColumn), (_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,
+        grouping,
+        tableOptions.displayColumnDefOptions,
+        tableOptions.editDisplayMode,
+        tableOptions.enableColumnDragging,
+        tableOptions.enableColumnFilterModes,
+        tableOptions.enableColumnOrdering,
+        tableOptions.enableEditing,
+        tableOptions.enableExpandAll,
+        tableOptions.enableExpanding,
+        tableOptions.enableGrouping,
+        tableOptions.enableRowActions,
+        tableOptions.enableRowDragging,
+        tableOptions.enableRowNumbers,
+        tableOptions.enableRowOrdering,
+        tableOptions.enableRowSelection,
+        tableOptions.enableSelectAll,
+        tableOptions.localization,
+        tableOptions.positionActionsColumn,
+        tableOptions.renderDetailPanel,
+        tableOptions.renderRowActionMenuItems,
+        tableOptions.renderRowActions,
+        (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder,
+        (_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.grouping,
+    ]);
+};
+
+const useMRT_Effects = (table) => {
+    const { getState, options: { enablePagination, rowCount }, } = table;
+    const { globalFilter, isFullScreen, pagination, sorting, isLoading, showSkeletons, } = getState();
+    const isMounted = useRef(false);
+    const initialBodyHeight = useRef();
+    const previousTop = useRef();
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            initialBodyHeight.current = document.body.style.height;
+        }
+    }, []);
+    useEffect(() => {
+        if (isMounted && typeof window !== 'undefined') {
+            if (isFullScreen) {
+                previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
+                document.body.style.height = '100vh'; //hide page scrollbars when table is in full screen mode
+            }
+            else {
+                document.body.style.height = initialBodyHeight.current;
+                if (!previousTop.current)
+                    return;
+                //restore scroll position
+                window.scrollTo({
+                    top: -1 * previousTop.current,
+                    behavior: 'instant',
+                });
+            }
+        }
+        isMounted.current = true;
+    }, [isFullScreen]);
+    //if page index is out of bounds, set it to the last page
+    useEffect(() => {
+        if (!enablePagination || isLoading || showSkeletons)
+            return;
+        const { pageIndex, pageSize } = pagination;
+        const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : table.getPrePaginationRowModel().rows.length;
+        const firstVisibleRowIndex = pageIndex * pageSize;
+        if (firstVisibleRowIndex > totalRowCount) {
+            table.setPageIndex(Math.floor(totalRowCount / pageSize));
+        }
+    }, [rowCount, table.getPrePaginationRowModel().rows.length]);
+    //turn off sort when global filter is looking for ranked results
+    const appliedSort = useRef(sorting);
+    useEffect(() => {
+        if (sorting.length) {
+            appliedSort.current = sorting;
+        }
+    }, [sorting]);
+    useEffect(() => {
+        if (!getCanRankRows(table))
+            return;
+        if (globalFilter) {
+            table.setSorting([]);
+        }
+        else {
+            table.setSorting(() => appliedSort.current || []);
+        }
+    }, [globalFilter]);
+};
+
+const useMRT_TableInstance = (tableOptions) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+    const bottomToolbarRef = useRef(null);
+    const editInputRefs = useRef({});
+    const filterInputRefs = useRef({});
+    const searchInputRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const tableHeadCellRefs = useRef({});
+    const tablePaperRef = useRef(null);
+    const topToolbarRef = useRef(null);
+    const tableHeadRef = useRef(null);
+    const tableFooterRef = useRef(null);
+    const initialState = useMemo(() => {
+        var _a, _b, _c;
+        const initState = (_a = tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
+        initState.columnOrder =
+            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(tableOptions);
+        initState.globalFilterFn = (_c = tableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
+        return initState;
+    }, []);
+    const [creatingRow, _setCreatingRow] = useState((_a = initialState.creatingRow) !== null && _a !== void 0 ? _a : null);
+    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => {
+        var _a, _b, _c, _d;
+        return ({
+            [getColumnId(col)]: col.filterFn instanceof Function
+                ? (_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom'
+                : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
+        });
+    })));
+    const [columnOrder, setColumnOrder] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
+    const [density, setDensity] = useState((_c = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _c !== void 0 ? _c : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = useState((_d = initialState.draggingColumn) !== null && _d !== void 0 ? _d : null);
+    const [draggingRow, setDraggingRow] = useState((_e = initialState.draggingRow) !== null && _e !== void 0 ? _e : null);
+    const [editingCell, setEditingCell] = useState((_f = initialState.editingCell) !== null && _f !== void 0 ? _f : null);
+    const [editingRow, setEditingRow] = useState((_g = initialState.editingRow) !== null && _g !== void 0 ? _g : null);
+    const [globalFilterFn, setGlobalFilterFn] = useState((_h = initialState.globalFilterFn) !== null && _h !== void 0 ? _h : 'fuzzy');
+    const [grouping, setGrouping] = useState((_j = initialState.grouping) !== null && _j !== void 0 ? _j : []);
+    const [hoveredColumn, setHoveredColumn] = useState((_k = initialState.hoveredColumn) !== null && _k !== void 0 ? _k : null);
+    const [hoveredRow, setHoveredRow] = useState((_l = initialState.hoveredRow) !== null && _l !== void 0 ? _l : null);
+    const [isFullScreen, setIsFullScreen] = useState((_m = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _m !== void 0 ? _m : false);
+    const [showAlertBanner, setShowAlertBanner] = useState((_p = (_o = tableOptions.initialState) === null || _o === void 0 ? void 0 : _o.showAlertBanner) !== null && _p !== void 0 ? _p : false);
+    const [showColumnFilters, setShowColumnFilters] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _q !== void 0 ? _q : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _r !== void 0 ? _r : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _s !== void 0 ? _s : false);
+    const displayColumns = useMRT_DisplayColumns({
+        columnOrder,
+        creatingRow,
+        grouping,
+        tableOptions,
+    });
+    const columnDefs = useMemo(() => {
+        var _a, _b, _c;
+        return prepareColumns({
+            aggregationFns: tableOptions.aggregationFns,
+            columnDefs: [...displayColumns, ...tableOptions.columns],
+            columnFilterFns: (_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
+            defaultDisplayColumn: (_c = tableOptions.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
+            filterFns: tableOptions.filterFns,
+            sortingFns: tableOptions.sortingFns,
+        });
+    }, [
+        columnFilterFns,
+        displayColumns,
+        tableOptions.columns,
+        (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnFilterFns,
+    ]);
+    const data = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        return (((_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.isLoading) || ((_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.showSkeletons)) &&
+            !tableOptions.data.length
+            ? [
+                ...Array(((_d = (_c = tableOptions.state) === null || _c === void 0 ? void 0 : _c.pagination) === null || _d === void 0 ? void 0 : _d.pageSize) ||
+                    ((_e = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) === null || _e === void 0 ? void 0 : _e.pageSize) ||
+                    10).fill(null),
+            ].map(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => ({
+                [getColumnId(col)]: null,
+            }))))
+            : tableOptions.data;
+    }, [
+        tableOptions.data,
+        (_u = tableOptions.state) === null || _u === void 0 ? void 0 : _u.isLoading,
+        (_v = tableOptions.state) === null || _v === void 0 ? void 0 : _v.showSkeletons,
+    ]);
+    //@ts-ignore
+    const table = useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: tableOptions.enableExpanding || tableOptions.enableGrouping
+            ? getExpandedRowModel()
+            : undefined, getFacetedMinMaxValues: tableOptions.enableFacetedValues
+            ? getFacetedMinMaxValues()
+            : undefined, getFacetedRowModel: tableOptions.enableFacetedValues
+            ? getFacetedRowModel()
+            : undefined, getFacetedUniqueValues: tableOptions.enableFacetedValues
+            ? getFacetedUniqueValues()
+            : undefined, getFilteredRowModel: tableOptions.enableColumnFilters ||
+            tableOptions.enableGlobalFilter ||
+            tableOptions.enableFilters
+            ? getFilteredRowModel()
+            : undefined, getGroupedRowModel: tableOptions.enableGrouping
+            ? getGroupedRowModel()
+            : undefined, getPaginationRowModel: tableOptions.enablePagination
+            ? getPaginationRowModel()
+            : undefined, getSortedRowModel: tableOptions.enableSorting
+            ? getSortedRowModel()
+            : undefined, onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, tableOptions), { 
+        //@ts-ignore
+        columns: columnDefs, data, globalFilterFn: (_w = tableOptions.filterFns) === null || _w === void 0 ? void 0 : _w[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'], initialState, state: Object.assign({ creatingRow,
+            columnFilterFns,
+            columnOrder,
+            density,
+            draggingColumn,
+            draggingRow,
+            editingCell,
+            editingRow,
+            globalFilterFn,
+            grouping,
+            hoveredColumn,
+            hoveredRow,
+            isFullScreen,
+            showAlertBanner,
+            showColumnFilters,
+            showGlobalFilter,
+            showToolbarDropZone }, tableOptions.state) }));
+    // @ts-ignore
+    table.refs = {
+        // @ts-ignore
+        bottomToolbarRef,
+        editInputRefs,
+        filterInputRefs,
+        // @ts-ignore
+        searchInputRef,
+        // @ts-ignore
+        tableContainerRef,
+        tableHeadCellRefs,
+        // @ts-ignore
+        tablePaperRef,
+        // @ts-ignore
+        topToolbarRef,
+        // @ts-ignore
+        tableFooterRef,
+        // @ts-ignore
+        tableHeadRef,
+    };
+    const setCreatingRow = (row) => {
+        if (row === true) {
+            table.setCreatingRow(createRow(table));
+        }
+        else {
+            _setCreatingRow(row);
+        }
+    };
+    table.setCreatingRow = setCreatingRow;
+    table.setColumnFilterFns =
+        (_x = tableOptions.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns;
+    table.setDensity = (_y = tableOptions.onDensityChange) !== null && _y !== void 0 ? _y : setDensity;
+    table.setDraggingColumn =
+        (_z = tableOptions.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn;
+    table.setDraggingRow = (_0 = tableOptions.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow;
+    table.setEditingCell = (_1 = tableOptions.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell;
+    table.setEditingRow = (_2 = tableOptions.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow;
+    table.setGlobalFilterFn =
+        (_3 = tableOptions.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn;
+    table.setHoveredColumn =
+        (_4 = tableOptions.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn;
+    table.setHoveredRow = (_5 = tableOptions.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow;
+    table.setIsFullScreen = (_6 = tableOptions.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen;
+    table.setShowAlertBanner =
+        (_7 = tableOptions.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner;
+    table.setShowColumnFilters =
+        (_8 = tableOptions.onShowColumnFiltersChange) !== null && _8 !== void 0 ? _8 : setShowColumnFilters;
+    table.setShowGlobalFilter =
+        (_9 = tableOptions.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter;
+    table.setShowToolbarDropZone =
+        (_10 = tableOptions.onShowToolbarDropZoneChange) !== null && _10 !== void 0 ? _10 : setShowToolbarDropZone;
+    useMRT_Effects(table);
+    return table;
+};
+
+const useMaterialReactTable = (tableOptions) => {
+    const parsedTableOptions = useMRT_TableOptions(tableOptions);
+    const tableInstance = useMRT_TableInstance(parsedTableOptions);
+    return tableInstance;
+};
+
 const MRT_GlobalFilterTextField = ({ table, }) => {
     var _a;
     const { getState, setGlobalFilter, options: { enableGlobalFilterModes, icons: { SearchIcon, CloseIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, } = table;
     const { globalFilter, showGlobalFilter } = getState();
-    const textFieldProps = muiSearchTextFieldProps instanceof Function
-        ? muiSearchTextFieldProps({ table })
-        : muiSearchTextFieldProps;
+    const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
+        table,
+    });
     const isMounted = useRef(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
@@ -1063,9 +2142,10 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
 const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
     const { options: { muiLinearProgressProps }, getState, } = table;
     const { isLoading, showProgressBars } = getState();
-    const linearProgressProps = muiLinearProgressProps instanceof Function
-        ? muiLinearProgressProps({ isTopToolbar, table })
-        : muiLinearProgressProps;
+    const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
+        isTopToolbar,
+        table,
+    });
     return (jsx(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
@@ -1079,9 +2159,9 @@ const MRT_TablePagination = ({ table, position = 'bottom', }) => {
     const { pagination: { pageSize = 10, pageIndex = 0 }, showGlobalFilter, } = getState();
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const showFirstLastPageButtons = totalRowCount / pageSize > 2;
-    const tablePaginationProps = muiTablePaginationProps instanceof Function
-        ? muiTablePaginationProps({ table })
-        : muiTablePaginationProps;
+    const tablePaginationProps = parseFromValuesOrFunc(muiTablePaginationProps, {
+        table,
+    });
     const handleChangeRowsPerPage = (event) => {
         setPageSize(+event.target.value);
     };
@@ -1108,21 +2188,19 @@ const MRT_TablePagination = ({ table, position = 'bottom', }) => {
                 enableToolbarInternalActions &&
                 !showGlobalFilter
                 ? '3.5rem'
-                : undefined, position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
-            ? tablePaginationProps.sx(theme)
-            : tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx))) })));
+                : undefined, position: 'relative', zIndex: 2 }, parseFromValuesOrFunc(tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx, theme))) })));
 };
 
 const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
     var _a, _b;
     const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiToolbarAlertBannerProps, muiToolbarAlertBannerChipProps, positionToolbarAlertBanner, rowCount, }, } = table;
     const { grouping, showAlertBanner } = getState();
-    const alertProps = muiToolbarAlertBannerProps instanceof Function
-        ? muiToolbarAlertBannerProps({ table })
-        : muiToolbarAlertBannerProps;
-    const chipProps = muiToolbarAlertBannerChipProps instanceof Function
-        ? muiToolbarAlertBannerChipProps({ table })
-        : muiToolbarAlertBannerChipProps;
+    const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
+        table,
+    });
+    const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
+        table,
+    });
     const selectMessage = getSelectedRowModel().rows.length > 0
         ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
         : null;
@@ -1131,20 +2209,20 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
                     ? 0
                     : positionToolbarAlertBanner === 'bottom'
                         ? '-1rem'
-                        : undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
-                ? alertProps.sx(theme)
-                : alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))), children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Box, { sx: { p: '0.5rem 1rem' }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsx("br", {}), groupedByMessage] })] })) }));
+                        : undefined, right: 0, top: 0, width: '100%', zIndex: 2 }, parseFromValuesOrFunc(alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx, theme))), children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Box, { sx: { p: '0.5rem 1rem' }, children: [alertProps === null || alertProps === void 0 ? void 0 : alertProps.children, (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (jsx("br", {})), selectMessage, selectMessage && groupedByMessage && jsx("br", {}), groupedByMessage] })] })) }));
 };
 
-const MRT_FullScreenToggleButton = (_a) => {
+const MRT_ToggleFullScreenButton = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setIsFullScreen, } = table;
     const { isFullScreen } = getState();
+    const [tooltipOpened, setTooltipOpened] = useState(false);
     const handleToggleFullScreen = () => {
+        setTooltipOpened(false);
         setIsFullScreen(!isFullScreen);
     };
-    return (jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
+    return (jsx(Tooltip, { open: tooltipOpened, arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
 };
 
 const MRT_ColumnPinningButtons = ({ column, table, }) => {
@@ -1159,26 +2237,9 @@ const MRT_ColumnPinningButtons = ({ column, table, }) => {
                             } }) }) })] })) }));
 };
 
-const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
-    var _a;
-    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move, children: jsx(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
-                var _a;
-                e.stopPropagation();
-                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
-            }, onDragStart: onDragStart, onDragEnd: onDragEnd, sx: (theme) => (Object.assign({ cursor: 'grab', m: '0 -0.1rem', opacity: 0.5, p: '2px', transition: 'all 150ms ease-in-out', '&:hover': {
-                    backgroundColor: 'transparent',
-                    opacity: 1,
-                }, '&:active': {
-                    cursor: 'grabbing',
-                } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                ? iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx(theme)
-                : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
-};
-
 const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredColumn, column, table, }) => {
     var _a;
-    const { getState, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, setColumnOrder, } = table;
+    const { getState, options: { enableColumnOrdering, enableHiding, enableColumnPinning, localization, }, setColumnOrder, } = table;
     const { columnOrder } = getState();
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -1234,7 +2295,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
                     }, children: [columnDefType !== 'group' &&
                             enableColumnOrdering &&
                             !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
-                            (columnDef.enableColumnOrdering !== false ? (jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsx(Box, { sx: { width: '28px' } }))), enablePinning &&
+                            (columnDef.enableColumnOrdering !== false ? (jsx(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (jsx(Box, { sx: { width: '28px' } }))), enableColumnPinning &&
                             (column.getCanPin() ? (jsx(MRT_ColumnPinningButtons, { column: column, table: table })) : (jsx(Box, { sx: { width: '70px' } }))), enableHiding ? (jsx(FormControlLabel, { componentsProps: {
                                 typography: {
                                     sx: {
@@ -1246,7 +2307,7 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, hoveredColumn, setHoveredCol
 };
 
 const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
-    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, toggleAllColumnsVisible, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, } = table;
+    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, toggleAllColumnsVisible, options: { enableColumnOrdering, enableHiding, enableColumnPinning, localization, }, } = table;
     const { density, columnOrder, columnPinning } = getState();
     const hideAllColumns = () => {
         getAllLeafColumns()
@@ -1280,7 +2341,7 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     pt: 0,
-                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns, children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enablePinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] }));
+                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns, children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] }));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -1335,7 +2396,7 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
 
 const MRT_ToolbarInternalButtons = ({ table, }) => {
     var _a;
-    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, initialState, renderToolbarInternalActions, }, } = table;
+    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enableColumnPinning, initialState, renderToolbarInternalActions, }, } = table;
     return (jsx(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
@@ -1344,7 +2405,7 @@ const MRT_ToolbarInternalButtons = ({ table, }) => {
             table,
         })) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [enableFilters &&
                     enableGlobalFilter &&
-                    !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters && enableColumnFilters && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enablePinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_FullScreenToggleButton, { table: table }))] })) }));
+                    !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters && enableColumnFilters && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) }));
 };
 
 const MRT_ToolbarDropZone = ({ table, }) => {
@@ -1395,9 +2456,7 @@ const MRT_TopToolbar = ({ table, }) => {
     const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
     const { isFullScreen, showGlobalFilter } = getState();
     const isMobile = useMediaQuery('(max-width:720px)');
-    const toolbarProps = muiTopToolbarProps instanceof Function
-        ? muiTopToolbarProps({ table })
-        : muiTopToolbarProps;
+    const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
     return (jsxs(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
@@ -1405,9 +2464,7 @@ const MRT_TopToolbar = ({ table, }) => {
                 // @ts-ignore
                 toolbarProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
-            ? toolbarProps.sx(theme)
-            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))), children: [positionToolbarAlertBanner === 'top' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
+        }, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [positionToolbarAlertBanner === 'top' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
                     alignItems: 'flex-start',
                     boxSizing: 'border-box',
                     display: 'flex',
@@ -1430,9 +2487,7 @@ const MRT_BottomToolbar = ({ table, }) => {
     const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
     const { isFullScreen } = getState();
     const isMobile = useMediaQuery('(max-width:720px)');
-    const toolbarProps = muiBottomToolbarProps instanceof Function
-        ? muiBottomToolbarProps({ table })
-        : muiBottomToolbarProps;
+    const toolbarProps = parseFromValuesOrFunc(muiBottomToolbarProps, { table });
     const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
     return (jsxs(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (node) => {
             if (node) {
@@ -1442,9 +2497,7 @@ const MRT_BottomToolbar = ({ table, }) => {
                     toolbarProps.ref.current = node;
                 }
             }
-        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
-            ? toolbarProps.sx(theme)
-            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))), children: [jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
                     alignItems: 'center',
                     boxSizing: 'border-box',
                     display: 'flex',
@@ -1463,7 +2516,7 @@ const MRT_BottomToolbar = ({ table, }) => {
 
 const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
     var _a;
-    const { options: { icons: { MoreVertIcon }, localization, muiTableHeadCellColumnActionsButtonProps, }, } = table;
+    const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const [anchorEl, setAnchorEl] = useState(null);
@@ -1472,43 +2525,27 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
         event.preventDefault();
         setAnchorEl(event.currentTarget);
     };
-    const mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function
-        ? muiTableHeadCellColumnActionsButtonProps({ column, table })
-        : muiTableHeadCellColumnActionsButtonProps;
-    const mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
-        ? columnDef.muiTableHeadCellColumnActionsButtonProps({
-            column,
-            table,
-        })
-        : columnDef.muiTableHeadCellColumnActionsButtonProps;
-    const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnActionsButtonProps, {
+        column,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
+        column,
+        table,
+    }));
     return (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', m: '-8px -4px', opacity: 0.5, transform: 'scale(0.85) translateX(-4px)', transition: 'opacity 150ms', width: '2rem', '&:hover': {
                             opacity: 1,
-                        } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
-                        ? iconButtonProps.sx(theme)
-                        : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))), title: undefined, children: jsx(MoreVertIcon, {}) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
+                        } }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(MoreVertIcon, {}) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-    const { options: { enableColumnFilterModes, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, manualFiltering, muiTableHeadCellFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
+    const { options: { enableColumnFilterModes, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, manualFiltering, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function
-        ? muiTableHeadCellFilterTextFieldProps({
-            column,
-            table,
-            rangeFilterIndex,
-        })
-        : muiTableHeadCellFilterTextFieldProps;
-    const mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
-        ? columnDef.muiTableHeadCellFilterTextFieldProps({
-            column,
-            table,
-            rangeFilterIndex,
-        })
-        : columnDef.muiTableHeadCellFilterTextFieldProps;
-    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';
@@ -1537,7 +2574,9 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const filterSelectOptions = useMemo(() => {
         var _a;
         return (_a = columnDef.filterSelectOptions) !== null && _a !== void 0 ? _a : ((isSelectFilter || isMultiSelectFilter) && facetedUniqueValues
-            ? Array.from(facetedUniqueValues.keys()).sort((a, b) => a.localeCompare(b))
+            ? Array.from(facetedUniqueValues.keys())
+                .filter((value) => value !== null && value !== undefined)
+                .sort((a, b) => a.localeCompare(b))
             : undefined);
     }, [
         columnDef.filterSelectOptions,
@@ -1672,9 +2711,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                             ? '120px'
                             : 'auto', width: 'calc(100% + 4px)', mx: '-2px', '& .MuiSelect-icon': {
                         mr: '1.5rem',
-                    } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
-                    ? textFieldProps.sx(theme)
-                    : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { divider: true, disabled: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.map((option) => {
+                    } }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))), children: [(isSelectFilter || isMultiSelectFilter) && (jsx(MenuItem, { divider: true, disabled: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) })), (_k = textFieldProps.children) !== null && _k !== void 0 ? _k : filterSelectOptions === null || filterSelectOptions === void 0 ? void 0 : filterSelectOptions.map((option) => {
                         var _a;
                         if (!option)
                             return '';
@@ -1698,28 +2735,22 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                     })] })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })] }));
 };
 
-const MRT_FilterRangeFields = ({ header, table }) => {
+const MRT_FilterRangeFields = ({ header, table, }) => {
     return (jsxs(Box, { sx: { display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1rem' }, children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] }));
 };
 
-const MRT_FilterCheckbox = ({ column, table }) => {
+const MRT_FilterCheckbox = ({ column, table, }) => {
     var _a, _b, _c;
-    const { getState, options: { localization, muiTableHeadCellFilterCheckboxProps }, } = table;
+    const { getState, options: { localization, muiFilterCheckboxProps }, } = table;
     const { density } = getState();
     const { columnDef } = column;
-    const mTableHeadCellFilterCheckboxProps = muiTableHeadCellFilterCheckboxProps instanceof Function
-        ? muiTableHeadCellFilterCheckboxProps({
-            column,
-            table,
-        })
-        : muiTableHeadCellFilterCheckboxProps;
-    const mcTableHeadCellFilterCheckboxProps = columnDef.muiTableHeadCellFilterCheckboxProps instanceof Function
-        ? columnDef.muiTableHeadCellFilterCheckboxProps({
-            column,
-            table,
-        })
-        : columnDef.muiTableHeadCellFilterCheckboxProps;
-    const checkboxProps = Object.assign(Object.assign({}, mTableHeadCellFilterCheckboxProps), mcTableHeadCellFilterCheckboxProps);
+    const checkboxProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterCheckboxProps, {
+        column,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
+        column,
+        table,
+    }));
     const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
     return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel, children: jsx(FormControlLabel, { control: jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', indeterminate: column.getFilterValue() === undefined, color: column.getFilterValue() === undefined ? 'default' : 'primary', size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onClick: (e) => {
                     var _a;
@@ -1733,31 +2764,17 @@ 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 }) => {
+const MRT_FilterRangeSlider = ({ header, table, }) => {
     var _a, _b;
-    const { options: { localization, muiTableHeadCellFilterSliderProps, enableColumnFilterModes, }, refs: { filterInputRefs }, } = table;
+    const { options: { localization, muiFilterSliderProps, enableColumnFilterModes }, refs: { filterInputRefs }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const currentFilterOption = columnDef._filterFn;
     const showChangeModeButton = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
-    const mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterSliderProps instanceof Function
-        ? muiTableHeadCellFilterSliderProps({
-            column,
-            table,
-        })
-        : muiTableHeadCellFilterSliderProps;
-    const mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterSliderProps instanceof Function
-        ? columnDef.muiTableHeadCellFilterSliderProps({
-            column,
-            table,
-        })
-        : columnDef.muiTableHeadCellFilterSliderProps;
-    const sliderProps = Object.assign(Object.assign({}, mTableHeadCellFilterTextFieldProps), mcTableHeadCellFilterTextFieldProps);
+    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];
@@ -1810,9 +2827,7 @@ const MRT_FilterRangeSlider = ({ header, table }) => {
                             }
                         },
                     },
-                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, ((sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx) instanceof Function
-                    ? sliderProps.sx(theme)
-                    : sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx))) })), showChangeModeButton ? (jsx(FormHelperText, { sx: {
+                }, sx: (theme) => (Object.assign({ m: 'auto', mt: !showChangeModeButton ? '10px' : '6px', px: '4px', width: 'calc(100% - 8px)' }, parseFromValuesOrFunc(sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.sx, theme))) })), showChangeModeButton ? (jsx(FormHelperText, { sx: {
                     m: '-3px -6px',
                     fontSize: '0.75rem',
                     lineHeight: '0.8rem',
@@ -1823,7 +2838,7 @@ const MRT_FilterRangeSlider = ({ header, table }) => {
                     (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
 };
 
-const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
+const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
     const { getState } = table;
     const { showColumnFilters } = getState();
     const { column } = header;
@@ -1832,7 +2847,7 @@ const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
             ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) }));
 };
 
-const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
+const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
     var _a, _b, _c, _d;
     const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
@@ -1871,16 +2886,13 @@ const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
 };
 
 const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
-    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
+    const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
     const { columnDef } = column;
     const { hoveredColumn, draggingColumn, columnOrder } = getState();
-    const mIconButtonProps = muiTableHeadCellDragHandleProps instanceof Function
-        ? muiTableHeadCellDragHandleProps({ column, table })
-        : muiTableHeadCellDragHandleProps;
-    const mcIconButtonProps = columnDef.muiTableHeadCellDragHandleProps instanceof Function
-        ? columnDef.muiTableHeadCellDragHandleProps({ column, table })
-        : columnDef.muiTableHeadCellDragHandleProps;
-    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);
@@ -1904,7 +2916,7 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
     return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
 };
 
-const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
+const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
     var _a;
     const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
     const { density } = getState();
@@ -1933,730 +2945,196 @@ const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
                 touchAction: 'none',
                 transition: column.getIsResizing()
                     ? undefined
-                    : 'all 150ms ease-in-out',
-                userSelect: 'none',
-                zIndex: 4,
-            } }) }));
-};
-
-const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
-    const { getState, options: { icons: { ArrowDownwardIcon }, localization, }, } = table;
-    const { column } = header;
-    const { columnDef } = column;
-    const { sorting } = getState();
-    const sortTooltip = column.getIsSorted()
-        ? column.getIsSorted() === 'desc'
-            ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
-            : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-        : localization.unsorted;
-    return (jsx(Tooltip, { arrow: true, placement: "top", title: sortTooltip, children: jsx(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsx(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
-                    ? column.getIsSorted()
-                    : undefined, sx: {
-                    flex: '0 0',
-                    width: '2.4ch',
-                    transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
-                        ? 'translateX(-0.5ch)'
-                        : undefined,
-                }, IconComponent: ArrowDownwardIcon, onClick: (e) => {
-                    var _a;
-                    e.stopPropagation();
-                    (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
-                } }) }) }));
-};
-
-const MRT_TableHeadCell = ({ header, table }) => {
-    var _a, _b, _c, _d, _f, _g;
-    const theme = useTheme();
-    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
-    const { density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
-    const { column } = header;
-    const { columnDef } = column;
-    const { columnDefType } = columnDef;
-    const mTableHeadCellProps = muiTableHeadCellProps instanceof Function
-        ? muiTableHeadCellProps({ column, table })
-        : muiTableHeadCellProps;
-    const mcTableHeadCellProps = columnDef.muiTableHeadCellProps instanceof Function
-        ? columnDef.muiTableHeadCellProps({ column, table })
-        : columnDef.muiTableHeadCellProps;
-    const tableCellProps = Object.assign(Object.assign({}, mTableHeadCellProps), mcTableHeadCellProps);
-    const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
-        columnDef.enableColumnActions !== false;
-    const showDragHandle = enableColumnDragging !== false &&
-        columnDef.enableColumnDragging !== false &&
-        (enableColumnDragging ||
-            (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
-            (enableGrouping &&
-                columnDef.enableGrouping !== false &&
-                !grouping.includes(column.id)));
-    const headerPL = useMemo(() => {
-        let pl = 0;
-        if (column.getCanSort())
-            pl++;
-        if (showColumnActions)
-            pl += 1.75;
-        if (showDragHandle)
-            pl += 1.25;
-        return pl;
-    }, [showColumnActions, showDragHandle]);
-    const draggingBorder = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-        ? `1px dashed ${theme.palette.text.secondary}`
-        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-            ? `2px dashed ${theme.palette.primary.main}`
-            : undefined, [draggingColumn, hoveredColumn]);
-    const draggingBorders = draggingBorder
-        ? {
-            borderLeft: draggingBorder,
-            borderRight: draggingBorder,
-            borderTop: draggingBorder,
-        }
-        : undefined;
-    const handleDragEnter = (_e) => {
-        if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
-            setHoveredColumn(null);
-        }
-        if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
-            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;
-    return (jsxs(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
-            if (node) {
-                tableHeadCellRefs.current[column.id] = node;
-            }
-        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
-                ? '0.5rem'
-                : density === 'comfortable'
-                    ? columnDefType === 'display'
-                        ? '0.75rem'
-                        : '1rem'
-                    : columnDefType === 'display'
-                        ? '1rem 1.25rem'
-                        : '1.5rem', pb: columnDefType === 'display'
-                ? 0
-                : showColumnFilters || density === 'compact'
-                    ? '0.4rem'
-                    : '0.6rem', pt: columnDefType === 'group' || density === 'compact'
-                ? '0.25rem'
-                : density === 'comfortable'
-                    ? '.75rem'
-                    : '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-                ? 3
-                : column.getIsPinned() && columnDefType !== 'group'
-                    ? 2
-                    : 1 }, getCommonCellStyles({
-            column,
-            header,
-            table,
-            tableCellProps,
-            theme,
-        })), draggingBorders)), children: [header.isPlaceholder ? null : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                    justifyContent: columnDefType === 'group' || (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
-                        ? 'center'
-                        : column.getCanResize()
-                            ? 'space-between'
-                            : 'flex-start',
-                    position: 'relative',
-                    width: '100%',
-                }, children: [jsxs(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
-                            alignItems: 'center',
-                            cursor: column.getCanSort() && columnDefType !== 'group'
-                                ? 'pointer'
-                                : undefined,
-                            display: 'flex',
-                            flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                            overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                            pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
-                                ? `${headerPL}rem`
-                                : undefined,
-                        }, children: [jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
-                                    minWidth: `${Math.min((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0, 5)}ch`,
-                                    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',
-                                    '&:hover': {
-                                        textOverflow: 'clip',
-                                    },
-                                }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
-                                    current: tableHeadCellRefs.current[column.id],
-                                } })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
-};
-
-const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    const { options: { layoutMode, muiTableHeadRowProps }, } = table;
-    const tableRowProps = muiTableHeadRowProps instanceof Function
-        ? muiTableHeadRowProps({ headerGroup, table })
-        : muiTableHeadRowProps;
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
-            ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
-            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
-                const header = virtualColumns
-                    ? headerGroup.headers[headerOrVirtualHeader.index]
-                    : headerOrVirtualHeader;
-                return (jsx(MRT_TableHeadCell, { header: header, table: table }, header.id));
-            }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
-};
-
-const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    const { getHeaderGroups, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps }, } = table;
-    const { isFullScreen } = getState();
-    const tableHeadProps = muiTableHeadProps instanceof Function
-        ? muiTableHeadProps({ table })
-        : muiTableHeadProps;
-    const stickyHeader = enableStickyHeader || isFullScreen;
-    return (jsx(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, ((tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx) instanceof Function
-            ? tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx(theme)
-            : tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx))), children: getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
-};
-
-const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
-    var _a, _b, _c;
-    const { getState, options: { muiTableBodyCellEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, } = table;
-    const { column, row } = cell;
-    const { columnDef } = column;
-    const { editingRow } = getState();
-    const [value, setValue] = useState(() => cell.getValue());
-    const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
-        ? muiTableBodyCellEditTextFieldProps({ cell, column, row, table })
-        : muiTableBodyCellEditTextFieldProps;
-    const mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
-        ? columnDef.muiTableBodyCellEditTextFieldProps({
-            cell,
-            column,
-            row,
-            table,
-        })
-        : columnDef.muiTableBodyCellEditTextFieldProps;
-    const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
-    const isSelectEdit = columnDef.editVariant === 'select';
-    const saveRow = (newValue) => {
-        if (editingRow) {
-            setEditingRow(Object.assign(Object.assign({}, editingRow), { _valuesCache: Object.assign(Object.assign({}, editingRow._valuesCache), { [column.id]: newValue }) }));
-        }
-    };
-    const handleChange = (event) => {
-        var _a;
-        (_a = textFieldProps.onChange) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
-        setValue(event.target.value);
-        if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.select) {
-            saveRow(event.target.value);
-        }
-    };
-    const handleBlur = (event) => {
-        var _a;
-        (_a = textFieldProps.onBlur) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
-        saveRow(value);
-        setEditingCell(null);
-    };
-    const handleEnterKeyDown = (event) => {
-        var _a, _b;
-        (_a = textFieldProps.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, event);
-        if (event.key === 'Enter') {
-            (_b = editInputRefs.current[column.id]) === null || _b === void 0 ? void 0 : _b.blur();
-        }
-    };
-    if (columnDef.Edit) {
-        return jsx(Fragment, { children: (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }) });
-    }
-    return (jsx(TextField, Object.assign({ disabled: (columnDef.enableEditing instanceof Function
-            ? columnDef.enableEditing(row)
-            : columnDef.enableEditing) === false, fullWidth: true, inputRef: (inputRef) => {
-            if (inputRef) {
-                editInputRefs.current[column.id] = inputRef;
-                if (textFieldProps.inputRef) {
-                    textFieldProps.inputRef = inputRef;
-                }
-            }
-        }, label: showLabel ? column.columnDef.header : undefined, margin: "none", name: column.id, placeholder: columnDef.header, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { onClick: (e) => {
-            var _a;
-            e.stopPropagation();
-            (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
-        }, onBlur: handleBlur, onChange: handleChange, onKeyDown: handleEnterKeyDown, children: (_b = textFieldProps.children) !== null && _b !== void 0 ? _b : (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _c === void 0 ? void 0 : _c.map((option) => {
-            let value;
-            let text;
-            if (typeof option !== 'object') {
-                value = option;
-                text = option;
-            }
-            else {
-                value = option.value;
-                text = option.text;
-            }
-            return (jsx(MenuItem, { sx: {
-                    display: 'flex',
-                    m: 0,
-                    alignItems: 'center',
-                    gap: '0.5rem',
-                }, value: value, children: text }, value));
-        }) })));
-};
-
-const MRT_CopyButton = ({ cell, children, table, }) => {
-    var _a;
-    const { options: { localization, muiTableBodyCellCopyButtonProps }, } = table;
-    const { column, row } = cell;
-    const { columnDef } = column;
-    const [copied, setCopied] = useState(false);
-    const handleCopy = (event, text) => {
-        event.stopPropagation();
-        navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 4000);
-    };
-    const mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function
-        ? muiTableBodyCellCopyButtonProps({ cell, column, row, table })
-        : muiTableBodyCellCopyButtonProps;
-    const mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function
-        ? columnDef.muiTableBodyCellCopyButtonProps({
-            cell,
-            column,
-            row,
-            table,
-        })
-        : columnDef.muiTableBodyCellCopyButtonProps;
-    const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
-                ? buttonProps.sx(theme)
-                : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined, children: children })) }));
-};
-
-const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
-    const { options: { muiTableBodyRowDragHandleProps }, } = table;
-    const { row } = cell;
-    const iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function
-        ? muiTableBodyRowDragHandleProps({ row, table })
-        : muiTableBodyRowDragHandleProps;
-    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);
-        event.dataTransfer.setDragImage(rowRef.current, 0, 0);
-        table.setDraggingRow(row);
-    };
-    const handleDragEnd = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragEnd) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        table.setDraggingRow(null);
-        table.setHoveredRow(null);
-    };
-    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+                    : 'all 150ms ease-in-out',
+                userSelect: 'none',
+                zIndex: 4,
+            } }) }));
 };
 
-const allowedTypes = ['string', 'number'];
-const MRT_TableBodyCellValue = ({ cell, table }) => {
-    var _a, _b, _c;
-    const { getState, options: { enableFilterMatchHighlighting }, } = table;
-    const { column, row } = cell;
+const MRT_TableHeadCellSortLabel = ({ header, table, tableCellProps, }) => {
+    const { getState, options: { icons: { ArrowDownwardIcon }, localization, }, } = table;
+    const { column } = header;
     const { columnDef } = column;
-    const { globalFilter, globalFilterFn } = getState();
-    const filterValue = column.getFilterValue();
-    let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
-        ? columnDef.AggregatedCell({
-            cell,
-            column,
-            row,
-            table,
-        })
-        : row.getIsGrouped() && !cell.getIsGrouped()
-            ? null
-            : cell.getIsGrouped() && columnDef.GroupedCell
-                ? columnDef.GroupedCell({
-                    cell,
-                    column,
-                    row,
-                    table,
-                })
-                : undefined;
-    const isGroupedValue = renderedCellValue !== undefined;
-    if (!isGroupedValue) {
-        renderedCellValue = cell.renderValue();
-    }
-    if (enableFilterMatchHighlighting &&
-        columnDef.enableFilterMatchHighlighting !== false &&
-        renderedCellValue &&
-        allowedTypes.includes(typeof renderedCellValue) &&
-        ((filterValue &&
-            allowedTypes.includes(typeof filterValue) &&
-            columnDef.filterVariant === 'text') ||
-            (globalFilter &&
-                allowedTypes.includes(typeof globalFilter) &&
-                column.getCanGlobalFilter()))) {
-        const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
-            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
-            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
-            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
-        });
-        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
-            renderedCellValue = (jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsx(Box, { "aria-hidden": "true", component: "span", sx: match
-                        ? {
-                            backgroundColor: (theme) => theme.palette.mode === 'dark'
-                                ? darken(theme.palette.warning.dark, 0.25)
-                                : lighten(theme.palette.warning.light, 0.5),
-                            borderRadius: '2px',
-                            color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
-                            padding: '2px 1px',
-                        }
-                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
-        }
-    }
-    if (columnDef.Cell && !isGroupedValue) {
-        renderedCellValue = columnDef.Cell({
-            cell,
-            renderedCellValue,
-            column,
-            row,
-            table,
-        });
-    }
-    return jsx(Fragment, { children: renderedCellValue });
+    const { sorting } = getState();
+    const sortTooltip = column.getIsSorted()
+        ? column.getIsSorted() === 'desc'
+            ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+            : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+        : column.getNextSortingOrder() === 'desc'
+            ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+            : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+    return (jsx(Tooltip, { arrow: true, placement: "top", title: sortTooltip, children: jsx(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsx(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
+                    ? column.getIsSorted()
+                    : undefined, sx: {
+                    flex: '0 0',
+                    width: '2.4ch',
+                    transform: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) !== 'right'
+                        ? 'translateX(-0.5ch)'
+                        : undefined,
+                }, IconComponent: ArrowDownwardIcon, onClick: (e) => {
+                    var _a;
+                    e.stopPropagation();
+                    (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
+                } }) }) }));
 };
 
-const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
-    var _a, _b, _c, _d;
+const MRT_TableHeadCell = ({ header, table, }) => {
+    var _a, _b, _c, _d, _f;
     const theme = useTheme();
-    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, density, isLoading, showSkeletons, } = getState();
-    const { column, row } = cell;
+    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 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 = muiTableBodyCellSkeletonProps instanceof Function
-        ? muiTableBodyCellSkeletonProps({ cell, column, row, table })
-        : muiTableBodyCellSkeletonProps;
-    const [skeletonWidth, setSkeletonWidth] = useState(0);
-    useEffect(() => setSkeletonWidth(isLoading || showSkeletons
-        ? columnDefType === 'display'
-            ? column.getSize() / 2
-            : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
-                column.getSize() / 3)
-        : 100), []);
-    const draggingBorders = useMemo(() => {
-        const isDraggingColumn = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id;
-        const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
-        const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
-        const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
-        const isFirstColumn = getIsFirstColumn(column, table);
-        const isLastColumn = getIsLastColumn(column, table);
-        const isLastRow = rowIndex === numRows - 1;
-        const borderStyle = isDraggingColumn || isDraggingRow
-            ? `1px dashed ${theme.palette.text.secondary} !important`
-            : isHoveredColumn || isHoveredRow
-                ? `2px dashed ${theme.palette.primary.main} !important`
-                : undefined;
-        return borderStyle
-            ? {
-                borderLeft: isDraggingColumn ||
-                    isHoveredColumn ||
-                    ((isDraggingRow || isHoveredRow) && isFirstColumn)
-                    ? borderStyle
-                    : undefined,
-                borderRight: isDraggingColumn ||
-                    isHoveredColumn ||
-                    ((isDraggingRow || isHoveredRow) && isLastColumn)
-                    ? borderStyle
-                    : undefined,
-                borderBottom: isDraggingRow || isHoveredRow || isLastRow
-                    ? borderStyle
-                    : undefined,
-                borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
-            }
-            : 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 isEditing = isEditable &&
-        editingMode !== 'modal' &&
-        (editingMode === 'table' ||
-            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id ||
-            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) === cell.id) &&
-        !row.getIsGrouped();
-    const handleDoubleClick = (event) => {
-        var _a;
-        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDoubleClick) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, event);
-        if (isEditable && editingMode === 'cell') {
-            setEditingCell(cell);
-            queueMicrotask(() => {
-                var _a;
-                const textField = editInputRefs.current[column.id];
-                if (textField) {
-                    textField.focus();
-                    (_a = textField.select) === null || _a === void 0 ? void 0 : _a.call(textField);
-                }
-            });
+    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 &&
+        columnDef.enableColumnDragging !== false &&
+        (enableColumnDragging ||
+            (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
+            (enableGrouping &&
+                columnDef.enableGrouping !== false &&
+                !grouping.includes(column.id)));
+    const headerPL = useMemo(() => {
+        let pl = 0;
+        if (column.getCanSort())
+            pl++;
+        if (showColumnActions)
+            pl += 1.75;
+        if (showDragHandle)
+            pl += 1.25;
+        return pl;
+    }, [showColumnActions, showDragHandle]);
+    const draggingBorder = useMemo(() => (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
+            ? `2px dashed ${theme.palette.primary.main}`
+            : undefined, [draggingColumn, hoveredColumn]);
+    const draggingBorders = draggingBorder
+        ? {
+            borderLeft: draggingBorder,
+            borderRight: draggingBorder,
+            borderTop: draggingBorder,
         }
-    };
-    const handleDragEnter = (e) => {
-        var _a;
-        (_a = tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.onDragEnter) === null || _a === void 0 ? void 0 : _a.call(tableCellProps, e);
+        : undefined;
+    const handleDragEnter = (_e) => {
         if (enableGrouping && (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
             setHoveredColumn(null);
         }
-        if (enableColumnOrdering && draggingColumn) {
+        if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (jsx(TableCell, Object.assign({ "data-index": virtualCell === null || virtualCell === void 0 ? void 0 : virtualCell.index, ref: (node) => {
+    const headerElement = (_a = parseFromValuesOrFunc(columnDef.Header, {
+        column,
+        header,
+        table,
+    })) !== null && _a !== void 0 ? _a : columnDef.header;
+    return (jsxs(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
-                measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
+                tableHeadCellRefs.current[column.id] = node;
             }
-        } }, tableCellProps, { onDragEnter: handleDragEnter, onDoubleClick: handleDoubleClick, sx: (theme) => (Object.assign(Object.assign({ alignItems: layoutMode === 'grid' ? 'center' : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'inherit', justifyContent: layoutMode === 'grid' ? tableCellProps.align : undefined, overflow: 'hidden', p: density === 'compact'
-                ? columnDefType === 'display'
-                    ? '0 0.5rem'
-                    : '0.5rem'
+        } }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ flexDirection: layoutMode === 'grid' ? 'column' : undefined, fontWeight: 'bold', overflow: 'visible', p: density === 'compact'
+                ? '0.5rem'
                 : density === 'comfortable'
                     ? columnDefType === 'display'
-                        ? '0.5rem 0.75rem'
+                        ? '0.75rem'
                         : '1rem'
                     : columnDefType === 'display'
                         ? '1rem 1.25rem'
-                        : '1.5rem', pl: column.id === 'mrt-row-expand'
-                ? `${row.depth +
-                    (density === 'compact'
-                        ? 0.5
-                        : 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': {
-                outline: ['table', 'cell'].includes(editingMode !== null && editingMode !== void 0 ? editingMode : '')
-                    ? `1px solid ${theme.palette.text.secondary}`
-                    : undefined,
-                outlineOffset: '-1px',
-                textOverflow: 'clip',
-            } }, getCommonCellStyles({
+                        : '1.5rem', pb: columnDefType === 'display'
+                ? 0
+                : showColumnFilters || density === 'compact'
+                    ? '0.4rem'
+                    : '0.6rem', pt: columnDefType === 'group' || density === 'compact'
+                ? '0.25rem'
+                : density === 'comfortable'
+                    ? '.75rem'
+                    : '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+                ? 3
+                : column.getIsPinned() && columnDefType !== 'group'
+                    ? 2
+                    : 1 }, getCommonCellStyles({
             column,
+            header,
             table,
-            theme,
             tableCellProps,
-        })), draggingBorders)), children: jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : (isLoading || showSkeletons) && cell.getValue() === null ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
-                    rowNumberMode === 'static' &&
-                    column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsx(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
-                    (column.id === 'mrt-row-select' ||
-                        column.id === 'mrt-row-expand' ||
-                        !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
-                    cell,
-                    renderedCellValue: cell.renderValue(),
-                    column,
-                    row,
-                    table,
-                })) : isEditing ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                    columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) })) : (jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_d = row.subRows) === null || _d === void 0 ? void 0 : _d.length, ")"] }))] }) })));
-};
-const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
-
-const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow, }) => {
-    const { getVisibleLeafColumns, getState, options: { layoutMode, muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
-    const { isLoading } = getState();
-    const tableRowProps = muiTableBodyRowProps instanceof Function
-        ? muiTableBodyRowProps({
-            isDetailPanel: true,
-            row,
-            staticRowIndex: rowIndex,
-            table,
-        })
-        : muiTableBodyRowProps;
-    const tableCellProps = muiTableDetailPanelProps instanceof Function
-        ? muiTableDetailPanelProps({ row, table })
-        : muiTableDetailPanelProps;
-    return (jsx(TableRow, Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
-            var _a, _b;
-            return (Object.assign({ display: layoutMode === 'grid' ? 'flex' : 'table-row', position: virtualRow ? 'absolute' : undefined, top: virtualRow
-                    ? `${(_b = (_a = parentRowRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height}px`
-                    : undefined, transform: virtualRow
-                    ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
-                    : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
-                ? tableRowProps.sx(theme)
-                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)));
-        }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
-                    ? lighten(theme.palette.background.default, 0.06)
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: layoutMode === 'grid' ? 'flex' : 'table-cell', pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
-                ? tableCellProps.sx(theme)
-                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
+            theme,
+        })), draggingBorders)), children: [header.isPlaceholder ? null : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
+                    justifyContent: columnDefType === 'group' || (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                        ? 'center'
+                        : column.getCanResize()
+                            ? 'space-between'
+                            : 'flex-start',
+                    position: 'relative',
+                    width: '100%',
+                }, children: [jsxs(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
+                            alignItems: 'center',
+                            cursor: column.getCanSort() && columnDefType !== 'group'
+                                ? 'pointer'
+                                : undefined,
+                            display: 'flex',
+                            flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
+                            overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                            pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                                ? `${headerPL}rem`
+                                : undefined,
+                        }, children: [jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                                    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: ((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0) < 20 ? 'nowrap' : 'normal',
+                                    '&:hover': {
+                                        textOverflow: 'clip',
+                                    },
+                                }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                                    current: tableHeadCellRefs.current[column.id],
+                                } })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: 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 handleDragEnter = (_e) => {
-        if (enableRowOrdering && draggingRow) {
-            setHoveredRow(row);
-        }
-    };
-    const rowRef = useRef(null);
-    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, selected: row.getIsSelected(), ref: (node) => {
-                    if (node) {
-                        rowRef.current = node;
-                        measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
-                    }
-                } }, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), boxSizing: 'border-box', display: layoutMode === 'grid' ? 'flex' : 'table-row', opacity: (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id ? 0.5 : 1, position: virtualRow ? 'absolute' : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', top: virtualRow ? 0 : undefined, width: '100%', '&:hover td': {
-                        backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
-                            ? row.getIsSelected()
-                                ? `${alpha(theme.palette.primary.main, 0.2)}`
-                                : theme.palette.mode === 'dark'
-                                    ? `${lighten(theme.palette.background.default, 0.12)}`
-                                    : `${darken(theme.palette.background.default, 0.05)}`
-                            : undefined,
-                    } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
-                    ? tableRowProps.sx(theme)
-                    : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), style: Object.assign({ transform: virtualRow
-                        ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
-                        : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : row.getVisibleCells()).map((cellOrVirtualCell) => {
-                        const cell = columnVirtualizer
-                            ? row.getVisibleCells()[cellOrVirtualCell.index]
-                            : cellOrVirtualCell;
-                        const props = {
-                            cell,
-                            measureElement: columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement,
-                            numRows,
-                            rowIndex,
-                            rowRef,
-                            table,
-                            virtualCell: columnVirtualizer
-                                ? cellOrVirtualCell
-                                : undefined,
-                        };
-                        return memoMode === 'cells' &&
-                            cell.column.columnDef.columnDefType === 'data' &&
-                            !draggingColumn &&
-                            !draggingRow &&
-                            (editingCell === null || editingCell === void 0 ? void 0 : editingCell.id) !== cell.id &&
-                            (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) !== row.id ? (jsx(Memo_MRT_TableBodyCell, Object.assign({}, props), cell.id)) : (jsx(MRT_TableBodyCell, Object.assign({}, props), cell.id));
-                    }), virtualPaddingRight ? (jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowIndex: rowIndex, table: table, virtualRow: virtualRow }))] }));
+const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    const { options: { layoutMode, muiTableHeadRowProps }, } = table;
+    const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
+        headerGroup,
+        table,
+    });
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: layoutMode === 'grid' ? 'flex' : 'table-row', top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
+                const header = virtualColumns
+                    ? headerGroup.headers[headerOrVirtualHeader.index]
+                    : headerOrVirtualHeader;
+                return (jsx(MRT_TableHeadCell, { header: header, table: table }, header.id));
+            }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
-const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
 
-const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    var _a, _b, _c, _d;
-    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowVirtualizerInstanceRef, rowVirtualizerProps, virtualizerInstanceRef, virtualizerProps, }, refs: { tableContainerRef, tablePaperRef }, } = table;
-    const { columnFilters, density, expanded, globalFilter, globalFilterFn, pagination, sorting, } = getState();
-    const tableBodyProps = muiTableBodyProps instanceof Function
-        ? muiTableBodyProps({ table })
-        : muiTableBodyProps;
-    const vProps_old = virtualizerProps instanceof Function
-        ? virtualizerProps({ table })
-        : virtualizerProps;
-    const vProps = rowVirtualizerProps instanceof Function
-        ? rowVirtualizerProps({ table })
-        : rowVirtualizerProps;
-    const shouldRankResults = useMemo(() => !manualExpanding &&
-        !manualFiltering &&
-        !manualGrouping &&
-        !manualSorting &&
-        enableGlobalFilterRankedResults &&
-        globalFilter &&
-        globalFilterFn === 'fuzzy' &&
-        expanded !== true &&
-        !Object.values(sorting).some(Boolean) &&
-        !Object.values(expanded).some(Boolean), [
-        enableGlobalFilterRankedResults,
-        expanded,
-        globalFilter,
-        manualExpanding,
-        manualFiltering,
-        manualGrouping,
-        manualSorting,
-        sorting,
-    ]);
-    const rows = useMemo(() => {
-        if (!shouldRankResults)
-            return getRowModel().rows;
-        const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
-        if (enablePagination && !manualPagination) {
-            const start = pagination.pageIndex * pagination.pageSize;
-            return rankedRows.slice(start, start + pagination.pageSize);
-        }
-        return rankedRows;
-    }, [
-        shouldRankResults,
-        shouldRankResults ? getPrePaginationRowModel().rows : getRowModel().rows,
-        pagination.pageIndex,
-        pagination.pageSize,
-    ]);
-    const rowVirtualizer = enableRowVirtualization
-        ? useVirtualizer(Object.assign(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_old), vProps))
-        : undefined;
-    if (rowVirtualizerInstanceRef && rowVirtualizer) {
-        rowVirtualizerInstanceRef.current = rowVirtualizer;
-    }
-    //deprecated
-    if (virtualizerInstanceRef && rowVirtualizer) {
-        virtualizerInstanceRef.current = rowVirtualizer;
-    }
-    const virtualRows = rowVirtualizer
-        ? rowVirtualizer.getVirtualItems()
-        : undefined;
-    return (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', height: rowVirtualizer
-                ? `${rowVirtualizer.getTotalSize()}px`
-                : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, ((tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx) instanceof Function
-            ? tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx(theme)
-            : tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx))), children: (_a = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _a !== void 0 ? _a : (!rows.length ? (jsx("tr", { style: { display: layoutMode === 'grid' ? 'grid' : 'table-row' }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                    display: layoutMode === 'grid' ? 'grid' : 'table-cell',
-                }, children: (_b = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _b !== void 0 ? _b : (jsx(Typography, { sx: {
-                        color: 'text.secondary',
-                        fontStyle: 'italic',
-                        maxWidth: `min(100vw, ${(_d = (_c = tablePaperRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth) !== null && _d !== void 0 ? _d : 360}px)`,
-                        py: '2rem',
-                        textAlign: 'center',
-                        width: '100%',
-                    }, children: globalFilter || columnFilters.length
-                        ? localization.noResultsFound
-                        : localization.noRecordsToDisplay })) }) })) : (jsx(Fragment, { children: (virtualRows !== null && virtualRows !== void 0 ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
-                const row = rowVirtualizer
-                    ? rows[rowOrVirtualRow.index]
-                    : rowOrVirtualRow;
-                const props = {
-                    columnVirtualizer,
-                    measureElement: rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement,
-                    numRows: rows.length,
-                    row,
-                    rowIndex: rowVirtualizer ? rowOrVirtualRow.index : rowIndex,
-                    table,
-                    virtualColumns,
-                    virtualPaddingLeft,
-                    virtualPaddingRight,
-                    virtualRow: rowVirtualizer
-                        ? rowOrVirtualRow
-                        : undefined,
-                };
-                return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-            }) }))) })));
+const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    const { getHeaderGroups, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps }, refs: { tableHeadRef }, } = table;
+    const { isFullScreen } = getState();
+    const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
+    const stickyHeader = enableStickyHeader || isFullScreen;
+    return (jsx(TableHead, Object.assign({}, tableHeadProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && layoutMode === 'grid' ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), ref: (ref) => {
+            tableHeadRef.current = ref;
+            if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
+                // @ts-ignore
+                tableHeadProps.ref.current = ref;
+            }
+        }, children: getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id))) })));
 };
-const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
-const MRT_TableFooterCell = ({ footer, table }) => {
-    var _a, _b, _c;
+const MRT_TableFooterCell = ({ footer, table, }) => {
+    var _a, _b;
     const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    const mTableFooterCellProps = muiTableFooterCellProps instanceof Function
-        ? muiTableFooterCellProps({ column, table })
-        : muiTableFooterCellProps;
-    const mcTableFooterCellProps = columnDef.muiTableFooterCellProps instanceof Function
-        ? columnDef.muiTableFooterCellProps({ column, table })
-        : columnDef.muiTableFooterCellProps;
-    const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
+    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
+        column,
+        table,
+    }));
     return (jsx(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: layoutMode === 'grid' ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
@@ -2668,13 +3146,7 @@ const MRT_TableFooterCell = ({ footer, table }) => {
             tableCellProps,
         }))), children: jsx(Fragment, { children: footer.isPlaceholder
                 ? null
-                : (_c = (_b = (columnDef.Footer instanceof Function
-                    ? (_a = columnDef.Footer) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
-                        column,
-                        footer,
-                        table,
-                    })
-                    : columnDef.Footer)) !== null && _b !== void 0 ? _b : columnDef.footer) !== null && _c !== void 0 ? _c : null }) })));
+                : (_b = (_a = parseFromValuesOrFunc(columnDef.Footer, { column, footer, table })) !== null && _a !== void 0 ? _a : columnDef.footer) !== null && _b !== void 0 ? _b : null }) })));
 };
 
 const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
@@ -2685,12 +3157,11 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
         !!header.column.columnDef.footer) ||
         header.column.columnDef.Footer)))
         return null;
-    const tableRowProps = muiTableFooterRowProps instanceof Function
-        ? muiTableFooterRowProps({ footerGroup, table })
-        : muiTableFooterRowProps;
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
-            ? tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx(theme)
-            : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
+    const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
+        footerGroup,
+        table,
+    });
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.04), display: layoutMode === 'grid' ? 'flex' : 'table-row', width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
                 const footer = virtualColumns
                     ? footerGroup.headers[footerOrVirtualFooter.index]
                     : footerOrVirtualFooter;
@@ -2699,31 +3170,31 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
 };
 
 const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, } = table;
+    const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
     const { isFullScreen } = getState();
-    const tableFooterProps = muiTableFooterProps instanceof Function
-        ? muiTableFooterProps({ table })
-        : muiTableFooterProps;
+    const tableFooterProps = parseFromValuesOrFunc(muiTableFooterProps, {
+        table,
+    });
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
     return (jsx(TableFooter, Object.assign({}, tableFooterProps, { sx: (theme) => (Object.assign({ bottom: stickFooter ? 0 : undefined, display: layoutMode === 'grid' ? 'grid' : 'table-row-group', opacity: stickFooter ? 0.97 : undefined, outline: stickFooter
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, ((tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx) instanceof Function
-            ? tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx(theme)
-            : tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
+                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), ref: (ref) => {
+            tableFooterRef.current = ref;
+            if (tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.ref) {
+                // @ts-ignore
+                tableFooterProps.ref.current = ref;
+            }
+        }, children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { footerGroup: footerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, footerGroup.id))) })));
 };
 
-const MRT_Table = ({ table }) => {
+const MRT_Table = ({ table, }) => {
     var _a, _b, _c, _d;
-    const { getFlatHeaders, getState, options: { columns, columnVirtualizerInstanceRef, columnVirtualizerProps, enableColumnResizing, enableColumnVirtualization, enablePinning, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
+    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 = columnVirtualizerProps instanceof Function
-        ? columnVirtualizerProps({ table })
-        : columnVirtualizerProps;
+    const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
+    const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
     const columnSizeVars = useMemo(() => {
         const headers = getFlatHeaders();
         const colSizes = {};
@@ -2745,14 +3216,14 @@ const MRT_Table = ({ table }) => {
             .rows[0]) === null || _a === void 0 ? void 0 : _a.getCenterVisibleCells()) === null || _b === void 0 ? void 0 : _b.slice(0, 16)) === null || _c === void 0 ? void 0 : _c.map((cell) => cell.column.getSize() * 1.2)) !== null && _d !== void 0 ? _d : [];
         return columnsWidths.reduce((a, b) => a + b, 0) / columnsWidths.length;
     }, [table.getRowModel().rows, columnPinning, columnVisibility]);
-    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnVirtualization && enablePinning
+    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnVirtualization && enableColumnPinning
         ? [
             table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
             table
                 .getRightLeafColumns()
                 .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1),
         ]
-        : [[], []], [columnPinning, enableColumnVirtualization, enablePinning]);
+        : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
     const columnVirtualizer = enableColumnVirtualization
         ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => [
                 ...new Set([
@@ -2760,7 +3231,7 @@ const MRT_Table = ({ table }) => {
                     ...defaultRangeExtractor(range),
                     ...rightPinnedIndexes,
                 ]),
-            ], [leftPinnedIndexes, rightPinnedIndexes]) }, vProps))
+            ], [leftPinnedIndexes, rightPinnedIndexes]) }, columnVirtualizerProps))
         : undefined;
     if (columnVirtualizerInstanceRef && columnVirtualizer) {
         columnVirtualizerInstanceRef.current = columnVirtualizer;
@@ -2782,19 +3253,57 @@ const MRT_Table = ({ table }) => {
         virtualPaddingLeft,
         virtualPaddingRight,
     };
-    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
-            ? tableProps.sx(theme)
-            : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })));
+    return (jsx(Fragment, { children: jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: layoutMode === 'grid' ? 'grid' : 'table', tableLayout: layoutMode !== 'grid' && enableColumnResizing ? 'fixed' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
+};
+
+const MRT_EditRowModal = ({ open, table, }) => {
+    var _a;
+    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 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')
+        .map((cell) => (jsx(MRT_EditCellTextField, { cell: cell, table: table }, cell.id)));
+    return (jsx(Dialog, Object.assign({ fullWidth: true, maxWidth: "xs", onClose: (event, reason) => {
+            var _a;
+            if (creatingRow) {
+                onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
+                setCreatingRow(null);
+            }
+            else {
+                onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
+                setEditingRow(null);
+            }
+            row._valuesCache = {}; //reset values cache
+            (_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, event, reason);
+        }, open: open }, dialogProps, { children: (_a = ((creatingRow &&
+            (renderCreateRowModalContent === null || renderCreateRowModalContent === void 0 ? void 0 : renderCreateRowModalContent({
+                row,
+                table,
+                internalEditComponents,
+            }))) ||
+            (renderEditRowModalContent === null || renderEditRowModalContent === void 0 ? void 0 : renderEditRowModalContent({
+                row,
+                table,
+                internalEditComponents,
+            })))) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
+                                gap: '24px',
+                                paddingTop: '16px',
+                                width: '100%',
+                            }, children: internalEditComponents }) }) }), jsx(DialogActions, { sx: { p: '1.25rem' }, children: jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
 };
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-const MRT_TableContainer = ({ table }) => {
-    const { getState, options: { enableStickyHeader, muiTableContainerProps }, refs: { tableContainerRef, bottomToolbarRef, topToolbarRef }, } = table;
-    const { isFullScreen } = getState();
+const MRT_TableContainer = ({ table, }) => {
+    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { tableContainerRef, bottomToolbarRef, topToolbarRef }, } = table;
+    const { isFullScreen, creatingRow, editingRow } = getState();
     const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
-    const tableContainerProps = muiTableContainerProps instanceof Function
-        ? muiTableContainerProps({ table })
-        : muiTableContainerProps;
+    const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
+        table,
+    });
     useIsomorphicLayoutEffect(() => {
         var _a, _b, _c, _d;
         const topToolbarHeight = typeof document !== 'undefined'
@@ -2805,7 +3314,9 @@ const MRT_TableContainer = ({ table }) => {
             : 0;
         setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
     });
-    return (jsx(TableContainer, Object.assign({}, tableContainerProps, { ref: (node) => {
+    const createModalOpen = createDisplayMode === 'modal' && creatingRow;
+    const editModalOpen = editDisplayMode === 'modal' && editingRow;
+    return (jsxs(TableContainer, Object.assign({}, tableContainerProps, { ref: (node) => {
             if (node) {
                 tableContainerRef.current = node;
                 if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
@@ -2815,276 +3326,53 @@ const MRT_TableContainer = ({ table }) => {
             }
         }, sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-                : undefined, overflow: 'auto' }, ((tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx) instanceof Function
-            ? tableContainerProps.sx(theme)
-            : tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
+                : undefined, overflow: 'auto' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), style: Object.assign({ maxHeight: isFullScreen
                 ? `calc(100vh - ${totalToolbarHeight}px)`
-                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), children: jsx(MRT_Table, { table: table }) })));
+                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), children: [jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
 };
 
-const MRT_TablePaper = ({ table }) => {
+const MRT_TablePaper = ({ table, }) => {
+    var _a, _b;
     const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
-    const tablePaperProps = muiTablePaperProps instanceof Function
-        ? muiTablePaperProps({ table })
-        : muiTablePaperProps;
+    const tablePaperProps = parseFromValuesOrFunc(muiTablePaperProps, { table });
     return (jsxs(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
                 //@ts-ignore
                 tablePaperProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign({ transition: 'all 150ms 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',
+                left: 0,
                 margin: 0,
                 maxHeight: '100vh',
                 maxWidth: '100vw',
                 padding: 0,
+                position: 'fixed',
+                right: 0,
+                top: 0,
                 width: '100vw',
+                zIndex: 10,
             }
             : {})), children: [enableTopToolbar &&
-                (renderTopToolbar instanceof Function
-                    ? renderTopToolbar({ table })
-                    : renderTopToolbar !== null && renderTopToolbar !== void 0 ? renderTopToolbar : jsx(MRT_TopToolbar, { table: table })), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
-                (renderBottomToolbar instanceof Function
-                    ? renderBottomToolbar({ table })
-                    : renderBottomToolbar !== null && renderBottomToolbar !== void 0 ? renderBottomToolbar : jsx(MRT_BottomToolbar, { table: table }))] })));
-};
-
-const MRT_EditRowModal = ({ open, row, table, }) => {
-    const { options: { localization }, } = table;
-    return (jsxs(Dialog, { open: open, children: [jsx(DialogTitle, { textAlign: "center", children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
-                            gap: '1.5rem',
-                            minWidth: { xs: '300px', sm: '360px', md: '400px' },
-                            pt: '1rem',
-                            width: '100%',
-                        }, children: row
-                            .getAllCells()
-                            .filter((cell) => cell.column.columnDef.columnDefType === 'data')
-                            .map((cell) => (jsx(MRT_EditCellTextField, { cell: cell, showLabel: true, table: table }, cell.id))) }) }) }), jsx(DialogActions, { sx: { p: '1.25rem' }, children: jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] }));
-};
-
-const MRT_TableRoot = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10, _11, _12, _13;
-    const bottomToolbarRef = useRef(null);
-    const editInputRefs = useRef({});
-    const filterInputRefs = useRef({});
-    const searchInputRef = useRef(null);
-    const tableContainerRef = useRef(null);
-    const tableHeadCellRefs = useRef({});
-    const tablePaperRef = useRef(null);
-    const topToolbarRef = useRef(null);
-    const initialState = useMemo(() => {
-        var _a, _b, _c;
-        const initState = (_a = props.initialState) !== null && _a !== void 0 ? _a : {};
-        initState.columnOrder =
-            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(props);
-        initState.globalFilterFn = (_c = props.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
-        return initState;
-    }, []);
-    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
-        var _a, _b, _c, _d;
-        return ({
-            [getColumnId(col)]: col.filterFn instanceof Function
-                ? (_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom'
-                : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
-        });
-    })));
-    const [columnOrder, setColumnOrder] = useState((_a = initialState.columnOrder) !== null && _a !== void 0 ? _a : []);
-    const [density, setDensity] = useState((_b = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _b !== void 0 ? _b : 'comfortable');
-    const [draggingColumn, setDraggingColumn] = useState((_c = initialState.draggingColumn) !== null && _c !== void 0 ? _c : null);
-    const [draggingRow, setDraggingRow] = useState((_d = initialState.draggingRow) !== null && _d !== void 0 ? _d : null);
-    const [editingCell, setEditingCell] = useState((_e = initialState.editingCell) !== null && _e !== void 0 ? _e : null);
-    const [editingRow, setEditingRow] = useState((_f = initialState.editingRow) !== null && _f !== void 0 ? _f : null);
-    const [globalFilterFn, setGlobalFilterFn] = useState((_g = initialState.globalFilterFn) !== null && _g !== void 0 ? _g : 'fuzzy');
-    const [grouping, setGrouping] = useState((_h = initialState.grouping) !== null && _h !== void 0 ? _h : []);
-    const [hoveredColumn, setHoveredColumn] = useState((_j = initialState.hoveredColumn) !== null && _j !== void 0 ? _j : null);
-    const [hoveredRow, setHoveredRow] = useState((_k = initialState.hoveredRow) !== null && _k !== void 0 ? _k : null);
-    const [isFullScreen, setIsFullScreen] = useState((_l = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _l !== void 0 ? _l : false);
-    const [showAlertBanner, setShowAlertBanner] = useState((_o = (_m = props.initialState) === null || _m === void 0 ? void 0 : _m.showAlertBanner) !== null && _o !== void 0 ? _o : false);
-    const [showColumnFilters, setShowColumnFilters] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _p !== void 0 ? _p : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _q !== void 0 ? _q : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _r !== void 0 ? _r : false);
-    const displayColumns = useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
-        return [
-            ((_b = (_a = props.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({ header: props.localization.move, size: 60 }, props.defaultDisplayColumn), (_c = props.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            ((_e = (_d = props.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: props.localization.actions, size: 70 }, props.defaultDisplayColumn), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-actions']), { id: 'mrt-row-actions' }),
-            ((_h = (_g = props.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-expand') &&
-                showExpandColumn(props, (_k = (_j = props.state) === null || _j === void 0 ? void 0 : _j.grouping) !== null && _k !== void 0 ? _k : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: props.enableExpandAll
-                    ? () => jsx(MRT_ExpandAllButton, { table: table })
-                    : null, header: props.localization.expand, size: 60 }, props.defaultDisplayColumn), (_l = props.displayColumnDefOptions) === null || _l === void 0 ? void 0 : _l['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            ((_o = (_m = props.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 }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: props.enableSelectAll && props.enableMultiRowSelection
-                    ? () => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
-                    : null, header: props.localization.select, size: 60 }, props.defaultDisplayColumn), (_p = props.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-select']), { id: 'mrt-row-select' }),
-            ((_r = (_q = props.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: () => props.localization.rowNumber, header: props.localization.rowNumbers, size: 60 }, props.defaultDisplayColumn), (_s = props.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
-        ].filter(Boolean);
-    }, [
-        columnOrder,
-        grouping,
-        props.displayColumnDefOptions,
-        props.editingMode,
-        props.enableColumnDragging,
-        props.enableColumnFilterModes,
-        props.enableColumnOrdering,
-        props.enableEditing,
-        props.enableExpandAll,
-        props.enableExpanding,
-        props.enableGrouping,
-        props.enableRowActions,
-        props.enableRowDragging,
-        props.enableRowNumbers,
-        props.enableRowOrdering,
-        props.enableRowSelection,
-        props.enableSelectAll,
-        props.localization,
-        props.positionActionsColumn,
-        props.renderDetailPanel,
-        props.renderRowActionMenuItems,
-        props.renderRowActions,
-        (_s = props.state) === null || _s === void 0 ? void 0 : _s.columnOrder,
-        (_t = props.state) === null || _t === void 0 ? void 0 : _t.grouping,
-    ]);
-    const columnDefs = useMemo(() => {
-        var _a, _b, _c;
-        return prepareColumns({
-            aggregationFns: props.aggregationFns,
-            columnDefs: [...displayColumns, ...props.columns],
-            columnFilterFns: (_b = (_a = props.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
-            defaultDisplayColumn: (_c = props.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
-            filterFns: props.filterFns,
-            sortingFns: props.sortingFns,
-        });
-    }, [
-        columnFilterFns,
-        displayColumns,
-        props.columns,
-        (_u = props.state) === null || _u === void 0 ? void 0 : _u.columnFilterFns,
-    ]);
-    const data = useMemo(() => {
-        var _a, _b, _c, _d, _e;
-        return (((_a = props.state) === null || _a === void 0 ? void 0 : _a.isLoading) || ((_b = props.state) === null || _b === void 0 ? void 0 : _b.showSkeletons)) &&
-            !props.data.length
-            ? [
-                ...Array(((_d = (_c = props.state) === null || _c === void 0 ? void 0 : _c.pagination) === null || _d === void 0 ? void 0 : _d.pageSize) ||
-                    ((_e = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) === null || _e === void 0 ? void 0 : _e.pageSize) ||
-                    10).fill(null),
-            ].map(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => ({
-                [getColumnId(col)]: null,
-            }))))
-            : props.data;
-    }, [props.data, (_v = props.state) === null || _v === void 0 ? void 0 : _v.isLoading, (_w = props.state) === null || _w === void 0 ? void 0 : _w.showSkeletons]);
-    //@ts-ignore
-    const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: props.enableExpanding || props.enableGrouping
-            ? getExpandedRowModel()
-            : undefined, getFacetedMinMaxValues: props.enableFacetedValues
-            ? getFacetedMinMaxValues()
-            : undefined, getFacetedRowModel: props.enableFacetedValues
-            ? getFacetedRowModel()
-            : undefined, getFacetedUniqueValues: props.enableFacetedValues
-            ? getFacetedUniqueValues()
-            : undefined, getFilteredRowModel: props.enableColumnFilters ||
-            props.enableGlobalFilter ||
-            props.enableFilters
-            ? getFilteredRowModel()
-            : undefined, getGroupedRowModel: props.enableGrouping
-            ? getGroupedRowModel()
-            : undefined, getPaginationRowModel: props.enablePagination
-            ? getPaginationRowModel()
-            : undefined, getSortedRowModel: props.enableSorting ? getSortedRowModel() : undefined, onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
-        //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_y = (_x = props.filterFns) === null || _x === void 0 ? void 0 : _x[globalFilterFn]) !== null && _y !== void 0 ? _y : (_z = props.filterFns) === null || _z === void 0 ? void 0 : _z.fuzzy, initialState, state: Object.assign({ columnFilterFns,
-            columnOrder,
-            density,
-            draggingColumn,
-            draggingRow,
-            editingCell,
-            editingRow,
-            globalFilterFn,
-            grouping,
-            hoveredColumn,
-            hoveredRow,
-            isFullScreen,
-            showAlertBanner,
-            showColumnFilters,
-            showGlobalFilter,
-            showToolbarDropZone }, props.state) }))), { refs: {
-            bottomToolbarRef,
-            editInputRefs,
-            filterInputRefs,
-            searchInputRef,
-            tableContainerRef,
-            tableHeadCellRefs,
-            tablePaperRef,
-            topToolbarRef,
-        }, setColumnFilterFns: (_0 = props.onColumnFilterFnsChange) !== null && _0 !== void 0 ? _0 : setColumnFilterFns, setDensity: (_1 = props.onDensityChange) !== null && _1 !== void 0 ? _1 : setDensity, setDraggingColumn: (_2 = props.onDraggingColumnChange) !== null && _2 !== void 0 ? _2 : setDraggingColumn, setDraggingRow: (_3 = props.onDraggingRowChange) !== null && _3 !== void 0 ? _3 : setDraggingRow, setEditingCell: (_4 = props.onEditingCellChange) !== null && _4 !== void 0 ? _4 : setEditingCell, setEditingRow: (_5 = props.onEditingRowChange) !== null && _5 !== void 0 ? _5 : setEditingRow, setGlobalFilterFn: (_6 = props.onGlobalFilterFnChange) !== null && _6 !== void 0 ? _6 : setGlobalFilterFn, setHoveredColumn: (_7 = props.onHoveredColumnChange) !== null && _7 !== void 0 ? _7 : setHoveredColumn, setHoveredRow: (_8 = props.onHoveredRowChange) !== null && _8 !== void 0 ? _8 : setHoveredRow, setIsFullScreen: (_9 = props.onIsFullScreenChange) !== null && _9 !== void 0 ? _9 : setIsFullScreen, setShowAlertBanner: (_10 = props.onShowAlertBannerChange) !== null && _10 !== void 0 ? _10 : setShowAlertBanner, setShowColumnFilters: (_11 = props.onShowColumnFiltersChange) !== null && _11 !== void 0 ? _11 : setShowColumnFilters, setShowGlobalFilter: (_12 = props.onShowGlobalFilterChange) !== null && _12 !== void 0 ? _12 : setShowGlobalFilter, setShowToolbarDropZone: (_13 = props.onShowToolbarDropZoneChange) !== null && _13 !== void 0 ? _13 : setShowToolbarDropZone });
-    if (props.tableFeatures) {
-        props.tableFeatures.forEach((feature) => {
-            Object.assign(table, feature(table));
-        });
-    }
-    if (props.tableInstanceRef) {
-        props.tableInstanceRef.current = table;
-    }
-    const initialBodyHeight = useRef();
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            initialBodyHeight.current = document.body.style.height;
-        }
-    }, []);
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            if (table.getState().isFullScreen) {
-                document.body.style.height = '100vh';
-            }
-            else {
-                document.body.style.height = initialBodyHeight.current;
-            }
-        }
-    }, [table.getState().isFullScreen]);
-    //if page index is out of bounds, set it to the last page
-    useEffect(() => {
-        var _a;
-        const { pageIndex, pageSize } = table.getState().pagination;
-        const totalRowCount = (_a = props.rowCount) !== null && _a !== void 0 ? _a : table.getPrePaginationRowModel().rows.length;
-        const firstVisibleRowIndex = pageIndex * pageSize;
-        if (firstVisibleRowIndex > totalRowCount) {
-            table.setPageIndex(Math.floor(totalRowCount / pageSize));
-        }
-    }, [props.rowCount, table.getPrePaginationRowModel().rows.length]);
-    return (jsxs(Fragment, { children: [jsx(Dialog, { PaperComponent: Box, TransitionComponent: !props.enableRowVirtualization ? Grow : undefined, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => table.setIsFullScreen(false), open: table.getState().isFullScreen, transitionDuration: 400, children: jsx(MRT_TablePaper, { table: table }) }), !table.getState().isFullScreen && (jsx(MRT_TablePaper, { table: table })), editingRow && props.editingMode === 'modal' && (jsx(MRT_EditRowModal, { row: editingRow, table: table, open: true }))] }));
+                ((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
+                ((_b = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_BottomToolbar, { table: table })))] })));
 };
 
-const MaterialReactTable = (_a) => {
-    var _b;
-    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onChange', defaultColumn, defaultDisplayColumn, editingMode = '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, enablePinning = 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, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "defaultDisplayColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
-    const _icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
-    const _localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
-    const _aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
-    const _filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
-    const _sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
-    const _defaultColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultColumn), defaultColumn)), [defaultColumn]);
-    const _defaultDisplayColumn = useMemo(() => (Object.assign(Object.assign({}, MRT_DefaultDisplayColumn), defaultDisplayColumn)), [defaultDisplayColumn]);
-    if (rest.enableRowVirtualization || rest.enableColumnVirtualization) {
-        layoutMode = 'grid';
-    }
-    if (rest.enableRowVirtualization) {
-        enableStickyHeader = true;
+const isTableInstanceProp = (props) => props.table !== undefined;
+const MaterialReactTable = (props) => {
+    let table;
+    if (isTableInstanceProp(props)) {
+        table = props.table;
     }
-    if (enablePagination === false && manualPagination === undefined) {
-        manualPagination = true;
-    }
-    if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
-        manualFiltering = true;
-        manualGrouping = true;
-        manualPagination = true;
-        manualSorting = true;
+    else {
+        table = useMaterialReactTable(props);
     }
-    return (jsx(MRT_TableRoot, Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableExpanding: enableExpanding, enableFilterMatchHighlighting: enableFilterMatchHighlighting, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode: layoutMode, localization: _localization, manualFiltering: manualFiltering, manualGrouping: manualGrouping, manualPagination: manualPagination, manualSorting: manualSorting, positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: _sortingFns }, rest)));
+    return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_CopyButton, MRT_EditActionButtons, MRT_ExpandButton, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_ShowHideColumnsButton, MRT_SortingFns, MRT_TableHeadCellFilterContainer, MRT_TablePagination, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, MaterialReactTable as default };
+export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
 //# sourceMappingURL=material-react-table.esm.js.map