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

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 { jsx, Fragment, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, memo, useEffect, useRef, useCallback, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { aggregationFns, filterFns, sortingFns, flexRender as flexRender$1, createRow as createRow$1, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
-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';
@@ -31,23 +31,29 @@ import SearchOffIcon from '@mui/icons-material/SearchOff';
 import SortIcon from '@mui/icons-material/Sort';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import Box from '@mui/material/Box';
-import Dialog from '@mui/material/Dialog';
-import Grow from '@mui/material/Grow';
-import IconButton from '@mui/material/IconButton';
+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 Tooltip from '@mui/material/Tooltip';
+import IconButton from '@mui/material/IconButton';
+import Box from '@mui/material/Box';
+import highlightWords from 'highlight-words';
+import Collapse from '@mui/material/Collapse';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
-import MenuItem from '@mui/material/MenuItem';
-import Button from '@mui/material/Button';
+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';
@@ -100,6 +101,10 @@ function __rest(s, e) {
   }
   return t;
 }
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
 
 const MRT_AggregationFns = Object.assign({}, aggregationFns);
 
@@ -282,7 +287,7 @@ const getLeadingDisplayColumnIds = (props) => {
         props.positionActionsColumn === 'first' &&
             (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 === 'first' &&
             showExpandColumn(props) &&
@@ -297,7 +302,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) &&
@@ -344,6 +349,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 = {
@@ -405,37 +423,10 @@ const MRT_DefaultDisplayColumn = {
     enableSorting: false,
 };
 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',
@@ -526,62 +517,711 @@ 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 { density } = getState();
-    const iconButtonProps = muiExpandButtonProps instanceof Function
-        ? muiExpandButtonProps({ table, row })
-        : muiExpandButtonProps;
-    const canExpand = row.getCanExpand();
-    const isExpanded = row.getIsExpanded();
-    const handleToggleExpand = (event) => {
+const useMRT_TableOptions = (_a) => {
+    var _b;
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableColumnPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'static', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableColumnPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    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,
+        enableColumnResizing,
+        enableDensityToggle,
+        enableExpandAll,
+        enableExpanding,
+        enableFilterMatchHighlighting,
+        enableFilters,
+        enableFullScreenToggle,
+        enableGlobalFilter,
+        enableGlobalFilterRankedResults,
+        enableGrouping,
+        enableHiding,
+        enableMultiRowSelection,
+        enableMultiSort,
+        enablePagination,
+        enableColumnPinning,
+        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,
+        selectAllMode, sortingFns: _sortingFns }, rest);
+};
+
+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 mTableBodyCellEditTextFieldProps = muiEditTextFieldProps instanceof Function
+        ? muiEditTextFieldProps({ cell, column, row, table })
+        : muiEditTextFieldProps;
+    const mcTableBodyCellEditTextFieldProps = columnDef.muiEditTextFieldProps instanceof Function
+        ? columnDef.muiEditTextFieldProps({
+            cell,
+            column,
+            row,
+            table,
+        })
+        : columnDef.muiEditTextFieldProps;
+    const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
+    const 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: (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: ['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 mTableBodyCellCopyButtonProps = muiCopyButtonProps instanceof Function
+        ? muiCopyButtonProps({ cell, column, row, table })
+        : muiCopyButtonProps;
+    const mcTableBodyCellCopyButtonProps = columnDef.muiCopyButtonProps instanceof Function
+        ? columnDef.muiCopyButtonProps({
+            cell,
+            column,
+            row,
+            table,
+        })
+        : columnDef.muiCopyButtonProps;
+    const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
+    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
+                ? buttonProps.sx(theme)
+                : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))), title: undefined, children: children })) }));
 };
 
-const mrtFilterOptions = (localization) => [
-    {
-        option: 'fuzzy',
-        symbol: '≈',
-        label: localization.filterFuzzy,
-        divider: false,
-    },
-    {
-        option: 'contains',
-        symbol: '*',
+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_TableBodyRowGrabHandle = ({ row, rowRef, table, }) => {
+    const { options: { muiRowDragHandleProps }, } = table;
+    const iconButtonProps = muiRowDragHandleProps instanceof Function
+        ? muiRowDragHandleProps({ row, table })
+        : muiRowDragHandleProps;
+    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 mTableCellBodyProps = muiTableBodyCellProps instanceof Function
+        ? muiTableBodyCellProps({ cell, column, row, table })
+        : muiTableBodyCellProps;
+    const mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function
+        ? columnDef.muiTableBodyCellProps({ cell, column, row, table })
+        : columnDef.muiTableBodyCellProps;
+    const tableCellProps = Object.assign(Object.assign({}, mTableCellBodyProps), mcTableCellBodyProps);
+    const skeletonProps = muiSkeletonProps instanceof Function
+        ? muiSkeletonProps({ cell, column, row, table })
+        : muiSkeletonProps;
+    const [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 = (enableEditing instanceof Function ? enableEditing(row) : enableEditing) &&
+        (columnDef.enableEditing instanceof Function
+            ? columnDef.enableEditing(row)
+            : columnDef.enableEditing) !== 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: 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 = muiTableBodyRowProps instanceof Function
+        ? muiTableBodyRowProps({
+            isDetailPanel: true,
+            row,
+            staticRowIndex: rowIndex,
+            table,
+        })
+        : muiTableBodyRowProps;
+    const tableCellProps = muiDetailPanelProps instanceof Function
+        ? muiDetailPanelProps({ row, table })
+        : muiDetailPanelProps;
+    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 }) })) })) })));
+};
+
+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 Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.rowIndex === next.rowIndex);
+
+const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+    var _a, _b, _c, _d;
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tablePaperRef }, } = table;
+    const { columnFilters, density, expanded, globalFilter, globalFilterFn, pagination, sorting, } = getState();
+    const tableBodyProps = muiTableBodyProps instanceof Function
+        ? muiTableBodyProps({ table })
+        : muiTableBodyProps;
+    const vProps = rowVirtualizerOptions instanceof Function
+        ? rowVirtualizerOptions({ table })
+        : rowVirtualizerOptions;
+    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({ count: rows.length, estimateSize: () => density === 'compact' ? 37 : density === 'comfortable' ? 58 : 73, getScrollElement: () => tableContainerRef.current, measureElement: typeof window !== 'undefined' &&
+                navigator.userAgent.indexOf('Firefox') === -1
+                ? (element) => element === null || element === void 0 ? void 0 : element.getBoundingClientRect().height
+                : undefined, overscan: 4 }, vProps))
+        : undefined;
+    if (rowVirtualizerInstanceRef && rowVirtualizer) {
+        rowVirtualizerInstanceRef.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 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 = 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_ExpandButton = ({ row, table, }) => {
+    var _a, _b;
+    const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
+    const { density } = getState();
+    const iconButtonProps = muiExpandButtonProps instanceof Function
+        ? muiExpandButtonProps({ table, row })
+        : muiExpandButtonProps;
+    const 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' }, ((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 mrtFilterOptions = (localization) => [
+    {
+        option: 'fuzzy',
+        symbol: '≈',
+        label: localization.filterFuzzy,
+        divider: false,
+    },
+    {
+        option: 'contains',
+        symbol: '*',
         label: localization.filterContains,
         divider: false,
     },
@@ -661,6 +1301,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;
@@ -669,7 +1310,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 : []),
@@ -781,7 +1422,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();
@@ -862,10 +1503,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),
@@ -915,30 +1556,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 = {
@@ -952,8 +1612,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();
@@ -965,13 +1629,13 @@ 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 &&
+    return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
             (enableEditing instanceof Function
                 ? enableEditing(row)
                 : enableEditing) ? (jsx(Tooltip, { placement: "right", arrow: true, title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, sx: commonIconButtonStyles, onClick: handleStartEditMode, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
-const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
+const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
     var _a;
     const { getState, options: { localization, enableMultiRowSelection, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
     const { density, isLoading } = getState();
@@ -1009,6 +1673,288 @@ 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;
+        return [
+            ((_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), header: tableOptions.localization.move, size: 60 }, tableOptions.defaultDisplayColumn), (_c = tableOptions.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-drag']), { id: 'mrt-row-drag' }),
+            (((_e = (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-actions') ||
+                (creatingRow && tableOptions.createDisplayMode === 'row')) && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: tableOptions.localization.actions, size: 70 }, tableOptions.defaultDisplayColumn), (_f = tableOptions.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            ((_h = (_g = tableOptions.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-expand') &&
+                showExpandColumn(tableOptions, (_k = (_j = tableOptions.state) === null || _j === void 0 ? void 0 : _j.grouping) !== null && _k !== void 0 ? _k : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: tableOptions.enableExpandAll
+                    ? ({ table }) => jsx(MRT_ExpandAllButton, { table: table })
+                    : null, header: tableOptions.localization.expand, size: 60 }, tableOptions.defaultDisplayColumn), (_l = tableOptions.displayColumnDefOptions) === null || _l === void 0 ? void 0 : _l['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            ((_o = (_m = tableOptions.state) === null || _m === void 0 ? void 0 : _m.columnOrder) !== null && _o !== void 0 ? _o : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: tableOptions.enableSelectAll &&
+                    tableOptions.enableMultiRowSelection
+                    ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
+                    : null, header: tableOptions.localization.select, size: 60 }, tableOptions.defaultDisplayColumn), (_p = tableOptions.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-select']), { id: 'mrt-row-select' }),
+            ((_r = (_q = tableOptions.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber, header: tableOptions.localization.rowNumbers, size: 60 }, tableOptions.defaultDisplayColumn), (_s = tableOptions.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
+        ].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 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,
+    };
+    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;
@@ -1132,49 +2078,34 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
                 : 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] })] })) }));
 };
 
-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, }) => {
     const { options: { icons: { PushPinIcon }, localization, }, } = table;
     const handlePinColumn = (pinDirection) => {
-        column.pin(pinDirection);
-    };
-    return (jsx(Box, { sx: { minWidth: '70px', textAlign: 'center' }, children: column.getIsPinned() ? (jsx(Tooltip, { arrow: true, title: localization.unpin, children: jsx(IconButton, { onClick: () => handlePinColumn(false), size: "small", children: jsx(PushPinIcon, {}) }) })) : (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.pinToLeft, children: jsx(IconButton, { onClick: () => handlePinColumn('left'), size: "small", children: jsx(PushPinIcon, { style: {
-                                transform: 'rotate(90deg)',
-                            } }) }) }), jsx(Tooltip, { arrow: true, title: localization.pinToRight, children: jsx(IconButton, { onClick: () => handlePinColumn('right'), size: "small", children: jsx(PushPinIcon, { style: {
-                                transform: 'rotate(-90deg)',
-                            } }) }) })] })) }));
-};
-
-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, {}) })) }));
+        column.pin(pinDirection);
+    };
+    return (jsx(Box, { sx: { minWidth: '70px', textAlign: 'center' }, children: column.getIsPinned() ? (jsx(Tooltip, { arrow: true, title: localization.unpin, children: jsx(IconButton, { onClick: () => handlePinColumn(false), size: "small", children: jsx(PushPinIcon, {}) }) })) : (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.pinToLeft, children: jsx(IconButton, { onClick: () => handlePinColumn('left'), size: "small", children: jsx(PushPinIcon, { style: {
+                                transform: 'rotate(90deg)',
+                            } }) }) }), jsx(Tooltip, { arrow: true, title: localization.pinToRight, children: jsx(IconButton, { onClick: () => handlePinColumn('right'), size: "small", children: jsx(PushPinIcon, { style: {
+                                transform: 'rotate(-90deg)',
+                            } }) }) })] })) }));
 };
 
 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;
@@ -1230,7 +2161,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: {
@@ -1242,7 +2173,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()
@@ -1276,7 +2207,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) => {
@@ -1331,7 +2262,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',
@@ -1340,7 +2271,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, }) => {
@@ -1459,7 +2390,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);
@@ -1468,15 +2399,15 @@ 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({
+    const mTableHeadCellColumnActionsButtonProps = muiColumnActionsButtonProps instanceof Function
+        ? muiColumnActionsButtonProps({ column, table })
+        : muiColumnActionsButtonProps;
+    const mcTableHeadCellColumnActionsButtonProps = columnDef.muiColumnActionsButtonProps instanceof Function
+        ? columnDef.muiColumnActionsButtonProps({
             column,
             table,
         })
-        : columnDef.muiTableHeadCellColumnActionsButtonProps;
+        : columnDef.muiColumnActionsButtonProps;
     const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
     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,
@@ -1487,23 +2418,23 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, 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({
+    const mTableHeadCellFilterTextFieldProps = muiFilterTextFieldProps instanceof Function
+        ? muiFilterTextFieldProps({
             column,
             table,
             rangeFilterIndex,
         })
-        : muiTableHeadCellFilterTextFieldProps;
-    const mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
-        ? columnDef.muiTableHeadCellFilterTextFieldProps({
+        : muiFilterTextFieldProps;
+    const mcTableHeadCellFilterTextFieldProps = columnDef.muiFilterTextFieldProps instanceof Function
+        ? columnDef.muiFilterTextFieldProps({
             column,
             table,
             rangeFilterIndex,
         })
-        : columnDef.muiTableHeadCellFilterTextFieldProps;
+        : columnDef.muiFilterTextFieldProps;
     const textFieldProps = Object.assign(Object.assign({}, mTableHeadCellFilterTextFieldProps), mcTableHeadCellFilterTextFieldProps);
     const isRangeFilter = columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
     const isSelectFilter = columnDef.filterVariant === 'select';
@@ -1533,7 +2464,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,
@@ -1680,966 +2613,442 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                             value = option;
                             text = option;
                         }
-                        else {
-                            value = option.value;
-                            text = option.text;
-                        }
-                        return (jsxs(MenuItem, { sx: {
-                                display: 'flex',
-                                m: 0,
-                                alignItems: 'center',
-                                gap: '0.5rem',
-                            }, value: value, children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
-                                    `(${facetedUniqueValues.get(value)})`] }, value));
-                    })] })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })] }));
-};
-
-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 }) => {
-    var _a, _b, _c;
-    const { getState, options: { localization, muiTableHeadCellFilterCheckboxProps }, } = 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 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;
-                    e.stopPropagation();
-                    (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
-                }, onChange: (e, checked) => {
-                    var _a;
-                    column.setFilterValue(column.getFilterValue() === undefined
-                        ? 'true'
-                        : column.getFilterValue() === 'true'
-                            ? '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 }) }));
-};
-
-const MRT_FilterRangeSlider = ({ header, table }) => {
-    var _a, _b;
-    const { options: { localization, muiTableHeadCellFilterSliderProps, 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);
-    let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
-        ? [sliderProps.min, sliderProps.max]
-        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 1];
-    //fix potential TanStack Table bugs where min or max is an array
-    if (Array.isArray(min))
-        min = min[0];
-    if (Array.isArray(max))
-        max = max[0];
-    if (min === null)
-        min = 0;
-    if (max === null)
-        max = 1;
-    const [filterValues, setFilterValues] = useState([min, max]);
-    const columnFilterValue = column.getFilterValue();
-    const isMounted = useRef(false);
-    useEffect(() => {
-        if (isMounted.current) {
-            if (columnFilterValue === undefined) {
-                setFilterValues([min, max]);
-            }
-            else if (Array.isArray(columnFilterValue)) {
-                setFilterValues(columnFilterValue);
-            }
-        }
-        isMounted.current = true;
-    }, [columnFilterValue, min, max]);
-    return (jsxs(Stack, { children: [jsx(Slider, Object.assign({ disableSwap: true, min: min, max: max, onChange: (_event, values) => {
-                    setFilterValues(values);
-                }, onChangeCommitted: (_event, value) => {
-                    if (Array.isArray(value)) {
-                        if (value[0] <= min && value[1] >= max) {
-                            //if the user has selected the entire range, remove the filter
-                            column.setFilterValue(undefined);
-                        }
-                        else {
-                            column.setFilterValue(value);
-                        }
-                    }
-                }, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
-                    input: {
-                        ref: (node) => {
-                            var _a, _b;
-                            if (node) {
-                                filterInputRefs.current[`${column.id}-0`] = node;
-                                // @ts-ignore
-                                if ((_b = (_a = sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.slotProps) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.ref) {
-                                    //@ts-ignore
-                                    sliderProps.slotProps.input.ref = node;
-                                }
-                            }
-                        },
-                    },
-                }, 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: {
-                    m: '-3px -6px',
-                    fontSize: '0.75rem',
-                    lineHeight: '0.8rem',
-                    whiteSpace: 'nowrap',
-                }, children: localization.filterMode.replace('{filterType}', 
-                // @ts-ignore
-                localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
-                    (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
-};
-
-const MRT_TableHeadCellFilterContainer = ({ header, table }) => {
-    const { getState } = table;
-    const { showColumnFilters } = getState();
-    const { column } = header;
-    const { columnDef } = column;
-    return (jsx(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : columnDef.filterVariant === 'range' ||
-            ['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 }) => {
-    var _a, _b, _c, _d;
-    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
-    const { column } = header;
-    const { columnDef } = column;
-    const isRangeFilter = ['range', 'ranger-slider'].includes((_a = columnDef.filterVariant) !== null && _a !== void 0 ? _a : '') ||
-        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
-    const currentFilterOption = columnDef._filterFn;
-    const filterTooltip = localization.filteringByColumn
-        .replace('{column}', String(columnDef.header))
-        .replace('{filterType}', 
-    // @ts-ignore
-    localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
-        (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`])
-        .replace('{filterValue}', `"${Array.isArray(column.getFilterValue())
-        ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
-        : column.getFilterValue()}"`)
-        .replace('" "', '');
-    return (jsx(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
-            (isRangeFilter && // @ts-ignore
-                (!!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[0]) || !!((_d = column.getFilterValue()) === null || _d === void 0 ? void 0 : _d[1]))), children: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { disableRipple: true, onClick: (event) => {
-                        setShowColumnFilters(true);
-                        queueMicrotask(() => {
-                            var _a, _b;
-                            (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus();
-                            (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
-                        });
-                        event.stopPropagation();
-                    }, size: "small", sx: {
-                        height: '12px',
-                        m: 0,
-                        opacity: 0.8,
-                        p: '2px',
-                        transform: 'scale(0.66)',
-                        width: '12px',
-                    }, children: jsx(FilterAltIcon, {}) }) }) }) }));
-};
-
-const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
-    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps }, 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 handleDragStart = (event) => {
-        var _a;
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-        setDraggingColumn(column);
-        event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
-    };
-    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);
-        if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
-            column.toggleGrouping();
-        }
-        else if (enableColumnOrdering &&
-            hoveredColumn &&
-            (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
-            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
-        }
-        setDraggingColumn(null);
-        setHoveredColumn(null);
-    };
-    return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
-};
-
-const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
-    var _a;
-    const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
-    const { density } = getState();
-    const { column } = header;
-    return (jsx(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
-            setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
-            column.resetSize();
-        }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
-            cursor: 'col-resize',
-            mr: density === 'compact' ? '-0.75rem' : '-1rem',
-            position: 'absolute',
-            right: '4px',
-            px: '4px',
-            '&:active > hr': {
-                backgroundColor: theme.palette.info.main,
-                opacity: 1,
-            },
-        }), style: {
-            transform: column.getIsResizing() && columnResizeMode === 'onEnd'
-                ? `translateX(${(_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0}px)`
-                : undefined,
-        }, children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
-                borderRadius: '2px',
-                borderWidth: '2px',
-                height: '24px',
-                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);
-                } }) }) }));
+                        else {
+                            value = option.value;
+                            text = option.text;
+                        }
+                        return (jsxs(MenuItem, { sx: {
+                                display: 'flex',
+                                m: 0,
+                                alignItems: 'center',
+                                gap: '0.5rem',
+                            }, value: value, children: [isMultiSelectFilter && (jsx(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })), text, ' ', !columnDef.filterSelectOptions &&
+                                    `(${facetedUniqueValues.get(value)})`] }, value));
+                    })] })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table, setFilterValue: setFilterValue })] }));
 };
 
-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 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, }) => {
+    var _a, _b, _c;
+    const { getState, options: { localization, muiFilterCheckboxProps }, } = table;
+    const { density } = getState();
     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, {
+    const mTableHeadCellFilterCheckboxProps = muiFilterCheckboxProps instanceof Function
+        ? muiFilterCheckboxProps({
             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({
+        : muiFilterCheckboxProps;
+    const mcTableHeadCellFilterCheckboxProps = columnDef.muiFilterCheckboxProps instanceof Function
+        ? columnDef.muiFilterCheckboxProps({
             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))) })));
+        })
+        : columnDef.muiFilterCheckboxProps;
+    const checkboxProps = Object.assign(Object.assign({}, mTableHeadCellFilterCheckboxProps), mcTableHeadCellFilterCheckboxProps);
+    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;
+                    e.stopPropagation();
+                    (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
+                }, onChange: (e, checked) => {
+                    var _a;
+                    column.setFilterValue(column.getFilterValue() === undefined
+                        ? 'true'
+                        : column.getFilterValue() === 'true'
+                            ? '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 }) }));
 };
 
-const MRT_EditCellTextField = ({ cell, showLabel, table, }) => {
-    var _a, _b, _c;
-    const { getState, options: { muiTableBodyCellEditTextFieldProps }, refs: { editInputRefs }, setEditingCell, setEditingRow, } = table;
-    const { column, row } = cell;
+const MRT_FilterRangeSlider = ({ header, table, }) => {
+    var _a, _b;
+    const { options: { localization, muiFilterSliderProps, enableColumnFilterModes }, refs: { filterInputRefs }, } = table;
+    const { column } = header;
     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,
+    const currentFilterOption = columnDef._filterFn;
+    const showChangeModeButton = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
+    const mFilterSliderProps = muiFilterSliderProps instanceof Function
+        ? muiFilterSliderProps({
             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;
+        : muiFilterSliderProps;
+    const mcFilterSliderProps = columnDef.muiFilterSliderProps instanceof Function
+        ? columnDef.muiFilterSliderProps({
+            column,
+            table,
+        })
+        : columnDef.muiFilterSliderProps;
+    const sliderProps = Object.assign(Object.assign({}, mFilterSliderProps), mcFilterSliderProps);
+    let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
+        ? [sliderProps.min, sliderProps.max]
+        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 1];
+    //fix potential TanStack Table bugs where min or max is an array
+    if (Array.isArray(min))
+        min = min[0];
+    if (Array.isArray(max))
+        max = max[0];
+    if (min === null)
+        min = 0;
+    if (max === null)
+        max = 1;
+    const [filterValues, setFilterValues] = useState([min, max]);
+    const columnFilterValue = column.getFilterValue();
+    const isMounted = useRef(false);
+    useEffect(() => {
+        if (isMounted.current) {
+            if (columnFilterValue === undefined) {
+                setFilterValues([min, max]);
             }
-            else {
-                value = option.value;
-                text = option.text;
+            else if (Array.isArray(columnFilterValue)) {
+                setFilterValues(columnFilterValue);
             }
-            return (jsx(MenuItem, { sx: {
-                    display: 'flex',
-                    m: 0,
-                    alignItems: 'center',
-                    gap: '0.5rem',
-                }, value: value, children: text }, value));
-        }) })));
+        }
+        isMounted.current = true;
+    }, [columnFilterValue, min, max]);
+    return (jsxs(Stack, { children: [jsx(Slider, Object.assign({ disableSwap: true, min: min, max: max, onChange: (_event, values) => {
+                    setFilterValues(values);
+                }, onChangeCommitted: (_event, value) => {
+                    if (Array.isArray(value)) {
+                        if (value[0] <= min && value[1] >= max) {
+                            //if the user has selected the entire range, remove the filter
+                            column.setFilterValue(undefined);
+                        }
+                        else {
+                            column.setFilterValue(value);
+                        }
+                    }
+                }, value: filterValues, valueLabelDisplay: "auto" }, sliderProps, { slotProps: {
+                    input: {
+                        ref: (node) => {
+                            var _a, _b;
+                            if (node) {
+                                filterInputRefs.current[`${column.id}-0`] = node;
+                                // @ts-ignore
+                                if ((_b = (_a = sliderProps === null || sliderProps === void 0 ? void 0 : sliderProps.slotProps) === null || _a === void 0 ? void 0 : _a.input) === null || _b === void 0 ? void 0 : _b.ref) {
+                                    //@ts-ignore
+                                    sliderProps.slotProps.input.ref = node;
+                                }
+                            }
+                        },
+                    },
+                }, 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: {
+                    m: '-3px -6px',
+                    fontSize: '0.75rem',
+                    lineHeight: '0.8rem',
+                    whiteSpace: 'nowrap',
+                }, children: localization.filterMode.replace('{filterType}', 
+                // @ts-ignore
+                localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
+                    (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
 };
 
-const MRT_CopyButton = ({ cell, children, table, }) => {
-    var _a;
-    const { options: { localization, muiTableBodyCellCopyButtonProps }, } = table;
-    const { column, row } = cell;
+const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
+    const { getState } = table;
+    const { showColumnFilters } = getState();
+    const { column } = header;
     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 })) }));
+    return (jsx(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : columnDef.filterVariant === 'range' ||
+            ['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, }) => {
+    var _a, _b, _c, _d;
+    const { options: { icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
+    const { column } = header;
+    const { columnDef } = column;
+    const isRangeFilter = ['range', 'ranger-slider'].includes((_a = columnDef.filterVariant) !== null && _a !== void 0 ? _a : '') ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
+    const currentFilterOption = columnDef._filterFn;
+    const filterTooltip = localization.filteringByColumn
+        .replace('{column}', String(columnDef.header))
+        .replace('{filterType}', 
+    // @ts-ignore
+    localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
+        (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`])
+        .replace('{filterValue}', `"${Array.isArray(column.getFilterValue())
+        ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
+        : column.getFilterValue()}"`)
+        .replace('" "', '');
+    return (jsx(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && !isRangeFilter) ||
+            (isRangeFilter && // @ts-ignore
+                (!!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[0]) || !!((_d = column.getFilterValue()) === null || _d === void 0 ? void 0 : _d[1]))), children: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { disableRipple: true, onClick: (event) => {
+                        setShowColumnFilters(true);
+                        queueMicrotask(() => {
+                            var _a, _b;
+                            (_a = filterInputRefs.current[`${column.id}-0`]) === null || _a === void 0 ? void 0 : _a.focus();
+                            (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
+                        });
+                        event.stopPropagation();
+                    }, size: "small", sx: {
+                        height: '12px',
+                        m: 0,
+                        opacity: 0.8,
+                        p: '2px',
+                        transform: 'scale(0.66)',
+                        width: '12px',
+                    }, children: jsx(FilterAltIcon, {}) }) }) }) }));
 };
 
-const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table }) => {
-    const { options: { muiTableBodyRowDragHandleProps }, } = table;
-    const { row } = cell;
-    const iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function
-        ? muiTableBodyRowDragHandleProps({ row, table })
-        : muiTableBodyRowDragHandleProps;
+const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
+    const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
+    const { columnDef } = column;
+    const { hoveredColumn, draggingColumn, columnOrder } = getState();
+    const mIconButtonProps = muiColumnDragHandleProps instanceof Function
+        ? muiColumnDragHandleProps({ column, table })
+        : muiColumnDragHandleProps;
+    const mcIconButtonProps = columnDef.muiColumnDragHandleProps instanceof Function
+        ? columnDef.muiColumnDragHandleProps({ column, table })
+        : columnDef.muiColumnDragHandleProps;
+    const iconButtonProps = Object.assign(Object.assign({}, mIconButtonProps), mcIconButtonProps);
     const 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);
+        setDraggingColumn(column);
+        event.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
     };
     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);
+        if ((hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone') {
+            column.toggleGrouping();
+        }
+        else if (enableColumnOrdering &&
+            hoveredColumn &&
+            (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) !== (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)) {
+            setColumnOrder(reorderColumn(column, hoveredColumn, columnOrder));
+        }
+        setDraggingColumn(null);
+        setHoveredColumn(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 MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
+    var _a;
+    const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
+    const { density } = getState();
+    const { column } = header;
+    return (jsx(Box, { className: "Mui-TableHeadCell-ResizeHandle-Wrapper", onDoubleClick: () => {
+            setColumnSizingInfo((old) => (Object.assign(Object.assign({}, old), { isResizingColumn: false })));
+            column.resetSize();
+        }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), sx: (theme) => ({
+            cursor: 'col-resize',
+            mr: density === 'compact' ? '-0.75rem' : '-1rem',
+            position: 'absolute',
+            right: '4px',
+            px: '4px',
+            '&:active > hr': {
+                backgroundColor: theme.palette.info.main,
+                opacity: 1,
+            },
+        }), style: {
+            transform: column.getIsResizing() && columnResizeMode === 'onEnd'
+                ? `translateX(${(_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0}px)`
+                : undefined,
+        }, children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
+                borderRadius: '2px',
+                borderWidth: '2px',
+                height: '24px',
+                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 { 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, _g;
     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 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,
         }
-    };
-    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 = (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) {
-                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 ? (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 }) })) })) })));
-};
-
-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 }))] }));
+            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 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_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 Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
-const MRT_TableFooterCell = ({ footer, table }) => {
+const MRT_TableFooterCell = ({ footer, table, }) => {
     var _a, _b, _c;
     const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
     const { density } = getState();
@@ -2710,16 +3119,16 @@ const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPad
             : 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))) })));
 };
 
-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 vProps = columnVirtualizerOptions instanceof Function
+        ? columnVirtualizerOptions({ table })
+        : columnVirtualizerOptions;
     const columnSizeVars = useMemo(() => {
         const headers = getFlatHeaders();
         const colSizes = {};
@@ -2741,14 +3150,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([
@@ -2778,15 +3187,60 @@ 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 }, ((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))] })) }));
+};
+
+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 createModalProps = muiCreateRowModalProps instanceof Function
+        ? muiCreateRowModalProps({ row, table })
+        : muiCreateRowModalProps;
+    const editModalProps = muiEditRowModalProps instanceof Function
+        ? muiEditRowModalProps({ row, table })
+        : muiEditRowModalProps;
+    const dialogProps = Object.assign(Object.assign({}, editModalProps), (creatingRow && createModalProps));
+    const 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: (creatingRow && localization.create) || 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 })
@@ -2801,7 +3255,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,10 +3271,10 @@ const MRT_TableContainer = ({ table }) => {
             ? tableContainerProps.sx(theme)
             : tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), 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, }) => {
     const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
     const tablePaperProps = muiTablePaperProps instanceof Function
@@ -2830,16 +3286,22 @@ const MRT_TablePaper = ({ table }) => {
                 //@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
+        }, sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, ((tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx) instanceof Function
             ? tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx(theme)
             : tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx))), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), (isFullScreen
             ? {
+                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
@@ -2850,237 +3312,17 @@ const MRT_TablePaper = ({ 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 }))] }));
-};
-
-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_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
 //# sourceMappingURL=material-react-table.esm.js.map