material-react-table 2.6.1 → 2.8.0

package/dist/index.esm.js

@@ -1,31 +1,19 @@
-import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
-import Paper from '@mui/material/Paper';
-import { useState, memo, useEffect, useMemo, useRef, useCallback, useReducer, Fragment as Fragment$1, useLayoutEffect } from 'react';
-import TableContainer from '@mui/material/TableContainer';
-import Table from '@mui/material/Table';
-import TableBody from '@mui/material/TableBody';
-import Typography from '@mui/material/Typography';
-import TableRow from '@mui/material/TableRow';
-import { lighten, darken, alpha, useTheme } from '@mui/material/styles';
-import Skeleton from '@mui/material/Skeleton';
-import TableCell from '@mui/material/TableCell';
+import { flexRender as flexRender$1, createRow as createRow$1, aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
+import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
+import { useMemo, useState, useReducer, useRef, useEffect, useCallback, memo, Fragment as Fragment$1, useLayoutEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import IconButton from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import Box from '@mui/material/Box';
-import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, aggregationFns, filterFns } from '@tanstack/react-table';
-import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
-import highlightWords from 'highlight-words';
 import Button from '@mui/material/Button';
-import Tooltip from '@mui/material/Tooltip';
-import MenuItem from '@mui/material/MenuItem';
-import TextField from '@mui/material/TextField';
-import Collapse from '@mui/material/Collapse';
-import Stack from '@mui/material/Stack';
-import IconButton from '@mui/material/IconButton';
 import CircularProgress from '@mui/material/CircularProgress';
+import { lighten, darken, alpha, useTheme } from '@mui/material/styles';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import Stack from '@mui/material/Stack';
 import Checkbox from '@mui/material/Checkbox';
 import Radio from '@mui/material/Radio';
-import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowRightIcon from '@mui/icons-material/ArrowRight';
 import CancelIcon from '@mui/icons-material/Cancel';
@@ -59,6 +47,18 @@ import SortIcon from '@mui/icons-material/Sort';
 import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
+import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
+import Paper from '@mui/material/Paper';
+import TableContainer from '@mui/material/TableContainer';
+import Table from '@mui/material/Table';
+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 highlightWords from 'highlight-words';
+import TextField from '@mui/material/TextField';
+import Collapse from '@mui/material/Collapse';
 import TableFooter from '@mui/material/TableFooter';
 import TableHead from '@mui/material/TableHead';
 import FormControlLabel from '@mui/material/FormControlLabel';
@@ -76,52 +76,20 @@ import Popover from '@mui/material/Popover';
 import Divider from '@mui/material/Divider';
 import Badge from '@mui/material/Badge';
 import TableSortLabel from '@mui/material/TableSortLabel';
+import Alert from '@mui/material/Alert';
+import AlertTitle from '@mui/material/AlertTitle';
+import Dialog from '@mui/material/Dialog';
+import DialogActions from '@mui/material/DialogActions';
+import DialogContent from '@mui/material/DialogContent';
+import DialogTitle from '@mui/material/DialogTitle';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import LinearProgress from '@mui/material/LinearProgress';
 import InputLabel from '@mui/material/InputLabel';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 import Select from '@mui/material/Select';
-import Alert from '@mui/material/Alert';
-import AlertTitle from '@mui/material/AlertTitle';
 import Fade from '@mui/material/Fade';
 import Switch from '@mui/material/Switch';
-import Dialog from '@mui/material/Dialog';
-import DialogActions from '@mui/material/DialogActions';
-import DialogContent from '@mui/material/DialogContent';
-import DialogTitle from '@mui/material/DialogTitle';
-
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    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 getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
 const getAllLeafColumnDefs = (columns) => {
@@ -139,53 +107,49 @@ const getAllLeafColumnDefs = (columns) => {
     getLeafColumns(columns);
     return allLeafColumnDefs;
 };
-const prepareColumns = ({ aggregationFns, columnDefs, columnFilterFns, defaultDisplayColumn, filterFns, sortingFns, }) => columnDefs.map((columnDef) => {
-    var _a, _b;
-    //assign columnId
-    if (!columnDef.id)
-        columnDef.id = getColumnId(columnDef);
-    if (process.env.NODE_ENV !== 'production' && !columnDef.id) {
-        console.error('Column definitions must have a valid `accessorKey` or `id` property');
-    }
-    //assign columnDefType
-    if (!columnDef.columnDefType)
-        columnDef.columnDefType = 'data';
-    if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
-        columnDef.columnDefType = 'group';
-        //recursively prepare columns if this is a group column
-        columnDef.columns = prepareColumns({
-            aggregationFns,
-            columnDefs: columnDef.columns,
-            columnFilterFns,
-            defaultDisplayColumn,
-            filterFns,
-            sortingFns,
-        });
-    }
-    else if (columnDef.columnDefType === 'data') {
-        //assign aggregationFns if multiple aggregationFns are provided
-        if (Array.isArray(columnDef.aggregationFn)) {
-            const aggFns = columnDef.aggregationFn;
-            columnDef.aggregationFn = (columnId, leafRows, childRows) => aggFns.map((fn) => { var _a; return (_a = aggregationFns[fn]) === null || _a === void 0 ? void 0 : _a.call(aggregationFns, columnId, leafRows, childRows); });
-        }
-        //assign filterFns
-        if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
-            columnDef.filterFn =
-                (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
-            columnDef._filterFn =
-                columnFilterFns[columnDef.id];
-        }
-        //assign sortingFns
-        if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
-            // @ts-ignore
-            columnDef.sortingFn = sortingFns[columnDef.sortingFn];
+const prepareColumns = ({ columnDefs, tableOptions, }) => {
+    const { aggregationFns = {}, defaultDisplayColumn, filterFns = {}, sortingFns = {}, state: { columnFilterFns = {} } = {}, } = tableOptions;
+    return columnDefs.map((columnDef) => {
+        var _a, _b;
+        //assign columnId
+        if (!columnDef.id)
+            columnDef.id = getColumnId(columnDef);
+        //assign columnDefType
+        if (!columnDef.columnDefType)
+            columnDef.columnDefType = 'data';
+        if ((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length) {
+            columnDef.columnDefType = 'group';
+            //recursively prepare columns if this is a group column
+            columnDef.columns = prepareColumns({
+                columnDefs: columnDef.columns,
+                tableOptions,
+            });
         }
-    }
-    else if (columnDef.columnDefType === 'display') {
-        columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
-    }
-    return columnDef;
-});
+        else if (columnDef.columnDefType === 'data') {
+            //assign aggregationFns if multiple aggregationFns are provided
+            if (Array.isArray(columnDef.aggregationFn)) {
+                const aggFns = columnDef.aggregationFn;
+                columnDef.aggregationFn = (columnId, leafRows, childRows) => aggFns.map((fn) => { var _a; return (_a = aggregationFns[fn]) === null || _a === void 0 ? void 0 : _a.call(aggregationFns, columnId, leafRows, childRows); });
+            }
+            //assign filterFns
+            if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
+                columnDef.filterFn =
+                    (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
+                columnDef._filterFn =
+                    columnFilterFns[columnDef.id];
+            }
+            //assign sortingFns
+            if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
+                // @ts-ignore
+                columnDef.sortingFn = sortingFns[columnDef.sortingFn];
+            }
+        }
+        else if (columnDef.columnDefType === 'display') {
+            columnDef = Object.assign(Object.assign({}, defaultDisplayColumn), columnDef);
+        }
+        return columnDef;
+    });
+};
 const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
     if (draggedColumn.getCanPin()) {
         draggedColumn.pin(targetColumn.getIsPinned());
@@ -194,51 +158,6 @@ const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
     newColumnOrder.splice(newColumnOrder.indexOf(targetColumn.id), 0, newColumnOrder.splice(newColumnOrder.indexOf(draggedColumn.id), 1)[0]);
     return newColumnOrder;
 };
-const showExpandColumn = (props, grouping) => !!(props.enableExpanding ||
-    (props.enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
-    props.renderDetailPanel);
-const getLeadingDisplayColumnIds = (props) => {
-    var _a, _b;
-    return [
-        props.enableRowPinning &&
-            !((_a = props.rowPinningDisplayMode) === null || _a === void 0 ? void 0 : _a.startsWith('select')) &&
-            'mrt-row-pin',
-        (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
-        props.positionActionsColumn === 'first' &&
-            (props.enableRowActions ||
-                (props.enableEditing &&
-                    ['modal', 'row'].includes((_b = props.editDisplayMode) !== null && _b !== void 0 ? _b : ''))) &&
-            'mrt-row-actions',
-        props.positionExpandColumn === 'first' &&
-            showExpandColumn(props) &&
-            'mrt-row-expand',
-        props.enableRowSelection && 'mrt-row-select',
-        props.enableRowNumbers && 'mrt-row-numbers',
-    ].filter(Boolean);
-};
-const getTrailingDisplayColumnIds = (props) => {
-    var _a;
-    return [
-        props.positionActionsColumn === 'last' &&
-            (props.enableRowActions ||
-                (props.enableEditing &&
-                    ['modal', 'row'].includes((_a = props.editDisplayMode) !== null && _a !== void 0 ? _a : ''))) &&
-            'mrt-row-actions',
-        props.positionExpandColumn === 'last' &&
-            showExpandColumn(props) &&
-            'mrt-row-expand',
-        props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
-    ].filter(Boolean);
-};
-const getDefaultColumnOrderIds = (props) => {
-    const leadingDisplayCols = getLeadingDisplayColumnIds(props);
-    const trailingDisplayCols = getTrailingDisplayColumnIds(props);
-    const allLeafColumnDefs = getAllLeafColumnDefs(props.columns)
-        .map((columnDef) => getColumnId(columnDef))
-        .filter((columnId) => !leadingDisplayCols.includes(columnId) &&
-        !trailingDisplayCols.includes(columnId));
-    return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
-};
 const getDefaultColumnFilterFn = (columnDef) => {
     var _a;
     if (columnDef.filterVariant === 'multi-select')
@@ -276,37 +195,8 @@ const getTotalRight = (table, column) => {
         .slice(column.getPinnedIndex() + 1)
         .reduce((acc, col) => acc + col.getSize(), 0);
 };
-const getCanRankRows = (table) => {
-    const { getState, options } = table;
-    const { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, } = options;
-    const { expanded, globalFilterFn } = getState();
-    return (!manualExpanding &&
-        !manualFiltering &&
-        !manualGrouping &&
-        !manualSorting &&
-        enableGlobalFilterRankedResults &&
-        globalFilterFn === 'fuzzy' &&
-        expanded !== true &&
-        !Object.values(expanded).some(Boolean));
-};
-const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
+
 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 extraIndexRangeExtractor = (range, draggingIndex) => {
-    const newIndexes = defaultRangeExtractor(range);
-    if (draggingIndex === undefined)
-        return newIndexes;
-    if (draggingIndex >= 0 &&
-        draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
-        newIndexes.unshift(draggingIndex);
-    }
-    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
-        newIndexes.push(draggingIndex);
-    }
-    return newIndexes;
-};
 function createMRTColumnHelper() {
     return {
         accessor: (accessor, column) => {
@@ -318,807 +208,346 @@ function createMRTColumnHelper() {
         group: (column) => column,
     };
 }
-const getValueAndLabel = (option) => {
-    var _a, _b, _c;
-    let label = '';
-    let value = '';
-    if (option) {
-        if (typeof option !== 'object') {
-            label = option;
-            value = option;
-        }
-        else {
-            label = (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : option.value;
-            value = (_c = option.value) !== null && _c !== void 0 ? _c : label;
-        }
-    }
-    return { label, value };
+const createRow = (table, originalRow, rowIndex = -1, depth = 0, subRows, parentId) => createRow$1(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
+    [getColumnId(col)]: '',
+}))), rowIndex, depth, subRows, parentId);
+
+function defaultDisplayColumnProps({ header, id, size = 60, tableOptions, }) {
+    const { defaultDisplayColumn, displayColumnDefOptions, localization } = tableOptions;
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumn), { header: header ? localization[header] : '', size }), displayColumnDefOptions === null || displayColumnDefOptions === void 0 ? void 0 : displayColumnDefOptions[id]), { id });
+}
+const showRowPinningColumn = (tableOptions) => {
+    const { enableRowPinning, rowPinningDisplayMode } = tableOptions;
+    return enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.startsWith('select'));
+};
+const showRowDragColumn = (tableOptions) => {
+    const { enableRowDragging, enableRowOrdering } = tableOptions;
+    return enableRowDragging || enableRowOrdering;
+};
+const showRowExpandColumn = (tableOptions) => {
+    const { enableExpanding, enableGrouping, renderDetailPanel, state: { grouping }, } = tableOptions;
+    return !!(enableExpanding ||
+        (enableGrouping && (grouping === undefined || (grouping === null || grouping === void 0 ? void 0 : grouping.length))) ||
+        renderDetailPanel);
+};
+const showRowActionsColumn = (tableOptions) => {
+    const { createDisplayMode, editDisplayMode, enableEditing, enableRowActions, state: { creatingRow }, } = tableOptions;
+    return (enableRowActions ||
+        (creatingRow && createDisplayMode === 'row') ||
+        (enableEditing && ['modal', 'row'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')));
+};
+const showRowSelectionColumn = (tableOptions) => tableOptions.enableRowSelection;
+const showRowNumbersColumn = (tableOptions) => tableOptions.enableRowNumbers;
+const showRowSpacerColumn = (tableOptions) => tableOptions.layoutMode === 'grid-no-grow';
+const getLeadingDisplayColumnIds = (tableOptions) => [
+    showRowPinningColumn(tableOptions) && 'mrt-row-pin',
+    showRowDragColumn(tableOptions) && 'mrt-row-drag',
+    tableOptions.positionActionsColumn === 'first' &&
+        showRowActionsColumn(tableOptions) &&
+        'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'first' &&
+        showRowExpandColumn(tableOptions) &&
+        'mrt-row-expand',
+    showRowSelectionColumn(tableOptions) && 'mrt-row-select',
+    showRowNumbersColumn(tableOptions) && 'mrt-row-numbers',
+].filter(Boolean);
+const getTrailingDisplayColumnIds = (tableOptions) => [
+    tableOptions.positionActionsColumn === 'last' &&
+        showRowActionsColumn(tableOptions) &&
+        'mrt-row-actions',
+    tableOptions.positionExpandColumn === 'last' &&
+        showRowExpandColumn(tableOptions) &&
+        'mrt-row-expand',
+    showRowSpacerColumn(tableOptions) && 'mrt-row-spacer',
+].filter(Boolean);
+const getDefaultColumnOrderIds = (tableOptions) => {
+    const leadingDisplayCols = getLeadingDisplayColumnIds(tableOptions);
+    const trailingDisplayCols = getTrailingDisplayColumnIds(tableOptions);
+    const allLeafColumnDefs = getAllLeafColumnDefs(tableOptions.columns)
+        .map((columnDef) => getColumnId(columnDef))
+        .filter((columnId) => !leadingDisplayCols.includes(columnId) &&
+        !trailingDisplayCols.includes(columnId));
+    return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
 
-const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
-const getMRTTheme = (table, theme) => (Object.assign({ baseBackgroundColor: theme.palette.mode === 'dark'
-        ? lighten(theme.palette.background.default, 0.05)
-        : theme.palette.background.default, draggingBorderColor: theme.palette.primary.main, matchHighlightColor: theme.palette.mode === 'dark'
-        ? darken(theme.palette.warning.dark, 0.25)
-        : lighten(theme.palette.warning.light, 0.5), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2) }, parseFromValuesOrFunc(table.options.mrtTheme, theme)));
-const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { options: { layoutMode }, } = table;
-    const widthStyles = {
-        minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = column.columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
-        width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px${header ? ` + ${(_e = (_d = header === null || header === void 0 ? void 0 : header.subHeaders) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0}rem` : ''})`,
-    };
-    if (layoutMode === 'grid') {
-        widthStyles.flex = `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_f = header === null || header === void 0 ? void 0 : header.id) !== null && _f !== void 0 ? _f : column.id)}-size) 0 auto`;
-    }
-    else if (layoutMode === 'grid-no-grow') {
-        widthStyles.flex = '0 0 auto';
-    }
-    return Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-            ? alpha(darken(getMRTTheme(table, theme).baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97)
-            : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
-            ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-            : getIsFirstRightPinnedColumn(column)
-                ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
-                : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, left: column.getIsPinned() === 'left'
-            ? `${column.getStart('left')}px`
-            : undefined, opacity: ((_g = table.getState().draggingColumn) === null || _g === void 0 ? void 0 : _g.id) === column.id ||
-            ((_h = table.getState().hoveredColumn) === null || _h === void 0 ? void 0 : _h.id) === column.id
-            ? 0.5
-            : 1, position: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-            ? 'sticky'
-            : undefined, right: column.getIsPinned() === 'right'
-            ? `${getTotalRight(table, column)}px`
-            : undefined, transition: table.options.enableColumnVirtualization
-            ? 'none'
-            : `padding 150ms ease-in-out` }, widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
+const getCanRankRows = (table) => {
+    const { getState, options } = table;
+    const { enableGlobalFilterRankedResults, manualExpanding, manualFiltering, manualGrouping, manualSorting, } = options;
+    const { expanded, globalFilterFn } = getState();
+    return (!manualExpanding &&
+        !manualFiltering &&
+        !manualGrouping &&
+        !manualSorting &&
+        enableGlobalFilterRankedResults &&
+        globalFilterFn === 'fuzzy' &&
+        expanded !== true &&
+        !Object.values(expanded).some(Boolean));
 };
-const getCommonToolbarStyles = ({ table, theme, }) => ({
-    alignItems: 'flex-start',
-    backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
-    display: 'grid',
-    flexWrap: 'wrap-reverse',
-    minHeight: '3.5rem',
-    overflow: 'hidden',
-    position: 'relative',
-    transition: 'all 150ms ease-in-out',
-    zIndex: 1,
-});
-const flipIconStyles = (theme) => theme.direction === 'rtl'
-    ? { style: { transform: 'scaleX(-1)' } }
-    : undefined;
 
-const allowedTypes = ['string', 'number'];
-const MRT_TableBodyCellValue = ({ cell, rowRef, staticRowIndex, 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 &&
-        String(renderedCellValue) &&
-        allowedTypes.includes(typeof renderedCellValue) &&
-        ((filterValue &&
-            allowedTypes.includes(typeof filterValue) &&
-            ['autocomplete', 'text'].includes(columnDef.filterVariant)) ||
-            (globalFilter &&
-                allowedTypes.includes(typeof globalFilter) &&
-                column.getCanGlobalFilter()))) {
-        const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
-            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
-            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
-            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
-        });
-        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) => getMRTTheme(table, theme).matchHighlightColor,
-                            borderRadius: '2px',
-                            color: (theme) => theme.palette.mode === 'dark'
-                                ? theme.palette.common.white
-                                : theme.palette.common.black,
-                            padding: '2px 1px',
-                        }
-                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
-        }
-    }
-    if (columnDef.Cell && !isGroupedValue) {
-        renderedCellValue = columnDef.Cell({
-            cell,
-            column,
-            renderedCellValue,
-            row,
-            rowRef,
-            staticRowIndex,
-            table,
-        });
+const MRT_AggregationFns = Object.assign({}, aggregationFns);
+
+const fuzzy$1 = (row, columnId, filterValue, addMeta) => {
+    const itemRank = rankItem(row.getValue(columnId), filterValue, {
+        threshold: rankings.MATCHES,
+    });
+    addMeta(itemRank);
+    return itemRank.passed;
+};
+fuzzy$1.autoRemove = (val) => !val;
+const contains = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .includes(filterValue.toString().toLowerCase().trim());
+contains.autoRemove = (val) => !val;
+const startsWith = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .startsWith(filterValue.toString().toLowerCase().trim());
+startsWith.autoRemove = (val) => !val;
+const endsWith = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .endsWith(filterValue.toString().toLowerCase().trim());
+endsWith.autoRemove = (val) => !val;
+const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
+    (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
+equals.autoRemove = (val) => !val;
+const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
+    filterValue.toString().toLowerCase().trim();
+notEquals.autoRemove = (val) => !val;
+const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) > +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() >
+        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
+greaterThan.autoRemove = (val) => !val;
+const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+greaterThanOrEqualTo.autoRemove = (val) => !val;
+const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) < +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() <
+        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
+lessThan.autoRemove = (val) => !val;
+const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
+lessThanOrEqualTo.autoRemove = (val) => !val;
+const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
+    greaterThan(row, id, filterValues[0])) &&
+    ((!isNaN(+filterValues[0]) &&
+        !isNaN(+filterValues[1]) &&
+        +filterValues[0] > +filterValues[1]) ||
+        ['', undefined].includes(filterValues[1]) ||
+        lessThan(row, id, filterValues[1]));
+between.autoRemove = (val) => !val;
+const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
+    greaterThanOrEqualTo(row, id, filterValues[0])) &&
+    ((!isNaN(+filterValues[0]) &&
+        !isNaN(+filterValues[1]) &&
+        +filterValues[0] > +filterValues[1]) ||
+        ['', undefined].includes(filterValues[1]) ||
+        lessThanOrEqualTo(row, id, filterValues[1]));
+betweenInclusive.autoRemove = (val) => !val;
+const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
+empty.autoRemove = (val) => !val;
+const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
+notEmpty.autoRemove = (val) => !val;
+const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
+    betweenInclusive,
+    contains,
+    empty,
+    endsWith,
+    equals,
+    fuzzy: fuzzy$1,
+    greaterThan,
+    greaterThanOrEqualTo,
+    lessThan,
+    lessThanOrEqualTo,
+    notEmpty,
+    notEquals,
+    startsWith });
+
+const fuzzy = (rowA, rowB, columnId) => {
+    let dir = 0;
+    if (rowA.columnFiltersMeta[columnId]) {
+        dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
     }
-    return renderedCellValue;
+    // Provide a fallback for when the item ranks are equal
+    return dir === 0
+        ? sortingFns.alphanumeric(rowA, rowB, columnId)
+        : dir;
 };
+const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy });
+const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
+    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
 
-const MRT_CopyButton = (_a) => {
-    var _b;
-    var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
-    const { options: { localization, muiCopyButtonProps }, } = table;
-    const { column, row } = cell;
-    const { columnDef } = column;
-    const [copied, setCopied] = useState(false);
-    const handleCopy = (event, text) => {
-        event.stopPropagation();
-        navigator.clipboard.writeText(text);
-        setCopied(true);
-        setTimeout(() => setCopied(false), 4000);
-    };
-    const buttonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
-        cell,
-        column,
-        row,
-        table,
-    })), parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
-        cell,
-        column,
-        row,
-        table,
-    })), rest);
-    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) }));
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    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_EditCellTextField = (_a) => {
-    var _b, _c, _d;
-    var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
-    const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow, } = table;
-    const { column, row } = cell;
-    const { columnDef } = column;
-    const { creatingRow, editingRow } = getState();
+const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
+const getValueAndLabel = (option) => {
+    var _a, _b, _c;
+    let label = '';
+    let value = '';
+    if (option) {
+        if (typeof option !== 'object') {
+            label = option;
+            value = option;
+        }
+        else {
+            label = (_b = (_a = option.label) !== null && _a !== void 0 ? _a : option.text) !== null && _b !== void 0 ? _b : option.value;
+            value = (_c = option.value) !== null && _c !== void 0 ? _c : label;
+        }
+    }
+    return { label, value };
+};
+
+const MRT_EditActionButtons = (_a) => {
+    var { row, table, variant = 'icon' } = _a, rest = __rest(_a, ["row", "table", "variant"]);
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, 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 isSelectEdit = columnDef.editVariant === 'select';
-    const [value, setValue] = useState(() => cell.getValue());
-    const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
-        cell,
-        column,
-        row,
-        table,
-    })), parseFromValuesOrFunc(columnDef.muiEditTextFieldProps, {
-        cell,
-        column,
-        row,
-        table,
-    })), rest);
-    const saveInputValueToRowCache = (newValue) => {
-        //@ts-ignore
-        row._valuesCache[column.id] = newValue;
+    const handleCancel = () => {
         if (isCreating) {
-            setCreatingRow(row);
+            onCreatingRowCancel === null || onCreatingRowCancel === void 0 ? void 0 : onCreatingRowCancel({ row, table });
+            setCreatingRow(null);
         }
         else if (isEditing) {
-            setEditingRow(row);
+            onEditingRowCancel === null || onEditingRowCancel === void 0 ? void 0 : onEditingRowCancel({ row, table });
+            setEditingRow(null);
         }
+        row._valuesCache = {}; //reset values cache
     };
-    const handleChange = (event) => {
+    const handleSubmitRow = () => {
         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);
+        //look for auto-filled input values
+        (_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(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
+                // @ts-ignore
+                row._valuesCache[input.name] = input.value;
+            }
+        });
+        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,
+            });
         }
     };
-    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: (_b = columnDef.Edit) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, row, table }) });
-    }
-    return (jsx(TextField, Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
-            if (inputRef) {
-                editInputRefs.current[column.id] = inputRef;
-                if (textFieldProps.inputRef) {
-                    textFieldProps.inputRef = inputRef;
-                }
-            }
-        }, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
-            ? columnDef.header
-            : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
-            ? columnDef.header
-            : undefined, select: isSelectEdit, size: "small", value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign(Object.assign(Object.assign({}, (textFieldProps.variant !== 'outlined'
-            ? { disableUnderline: editDisplayMode === 'table' }
-            : {})), textFieldProps.InputProps), { sx: (theme) => {
-                var _a;
-                return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
-            } }), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, 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);
-        }, onKeyDown: handleEnterKeyDown, children: (_c = textFieldProps.children) !== null && _c !== void 0 ? _c : (_d = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _d === void 0 ? void 0 : _d.map((option) => {
-            const { label, value } = getValueAndLabel(option);
-            return (jsx(MenuItem, { sx: {
-                    alignItems: 'center',
-                    display: 'flex',
-                    gap: '0.5rem',
-                    m: 0,
-                }, value: value, children: label }, value));
-        }) })));
+    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), ((isCreating && onCreatingRowSave) ||
+                    (isEditing && onEditingRowSave)) && (jsx(Tooltip, { 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, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
 };
 
-const MRT_TableBodyCell = (_a) => {
-    var _b, _c, _d, _e, _f;
-    var { cell, measureElement, numRows, rowRef, staticRowIndex, table, virtualColumnIndex } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowRef", "staticRowIndex", "table", "virtualColumnIndex"]);
-    const theme = useTheme();
-    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, positionExpandColumn, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
-    const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
-    const { column, row } = cell;
+const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
+const getMRTTheme = (table, theme) => {
+    var _a;
+    const themeOverrides = parseFromValuesOrFunc(table.options.mrtTheme, theme);
+    const baseBackgroundColor = (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (theme.palette.mode === 'dark'
+        ? lighten(theme.palette.background.default, 0.05)
+        : theme.palette.background.default);
+    return Object.assign({ baseBackgroundColor, draggingBorderColor: theme.palette.primary.main, matchHighlightColor: theme.palette.mode === 'dark'
+            ? darken(theme.palette.warning.dark, 0.25)
+            : lighten(theme.palette.warning.light, 0.5), menuBackgroundColor: lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2) }, themeOverrides);
+};
+const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { options: { layoutMode }, } = table;
     const { columnDef } = column;
-    const { columnDefType } = columnDef;
-    const args = { cell, column, row, table };
-    const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args)), rest);
-    const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
-        cell,
-        column,
-        row,
-        table,
-    });
-    const { draggingBorderColor } = getMRTTheme(table, theme);
-    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 = numRows && staticRowIndex === numRows - 1;
-        const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
-        const showResizeBorder = isResizingColumn && columnResizeMode === 'onChange';
-        const borderStyle = showResizeBorder
-            ? `2px solid ${draggingBorderColor} !important`
-            : isDraggingColumn || isDraggingRow
-                ? `1px dashed ${theme.palette.grey[500]} !important`
-                : isHoveredColumn || isHoveredRow || isResizingColumn
-                    ? `2px dashed ${draggingBorderColor} !important`
-                    : undefined;
-        if (showResizeBorder) {
-            return columnResizeDirection === 'ltr'
-                ? { borderRight: borderStyle }
-                : { borderLeft: borderStyle };
-        }
-        return borderStyle
-            ? {
-                borderBottom: isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
-                    ? borderStyle
-                    : undefined,
-                borderLeft: isDraggingColumn ||
-                    isHoveredColumn ||
-                    ((isDraggingRow || isHoveredRow) && isFirstColumn)
-                    ? borderStyle
-                    : undefined,
-                borderRight: isDraggingColumn ||
-                    isHoveredColumn ||
-                    ((isDraggingRow || isHoveredRow) && isLastColumn)
-                    ? borderStyle
-                    : undefined,
-                borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
-            }
-            : undefined;
-    }, [
-        columnSizingInfo.isResizingColumn,
-        draggingColumn,
-        draggingRow,
-        hoveredColumn,
-        hoveredRow,
-        staticRowIndex,
-    ]);
-    const isEditable = !cell.getIsPlaceholder() &&
-        parseFromValuesOrFunc(enableEditing, row) &&
-        parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
-    const isEditing = isEditable &&
-        !['custom', 'modal'].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);
-        }
-    };
-    const cellValueProps = {
-        cell,
-        table,
+    const widthStyles = {
+        minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
+        width: `calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_c = header === null || header === void 0 ? void 0 : header.id) !== null && _c !== void 0 ? _c : column.id)}-size) * 1px${header && layoutMode === 'grid-no-grow' ? ` + ${(_e = (_d = header === null || header === void 0 ? void 0 : header.subHeaders) === null || _d === void 0 ? void 0 : _d.length) !== null && _e !== void 0 ? _e : 0}rem` : ''})`,
     };
-    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": virtualColumnIndex, ref: (node) => {
-            if (node) {
-                measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
-            }
-        } }, tableCellProps, { onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
-                outline: (editDisplayMode === 'cell' && isEditable) ||
-                    (editDisplayMode === 'table' && (isCreating || isEditing))
-                    ? `1px solid ${theme.palette.grey[500]}`
-                    : undefined,
-                outlineOffset: '-1px',
-                textOverflow: 'clip',
-            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('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', textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, [theme.direction === 'rtl' || positionExpandColumn === 'last'
-                ? 'pr'
-                : 'pl']: column.id === 'mrt-row-expand'
-                ? `${row.depth +
-                    (density === 'compact'
-                        ? 0.5
-                        : density === 'comfortable'
-                            ? 0.75
-                            : 1.25)}rem`
-                : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0 }, getCommonMRTCellStyles({
-            column,
-            table,
-            tableCellProps,
-            theme,
-        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : columnDefType === 'display' &&
-                    (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(column.id) ||
-                        !row.getIsGrouped()) ? ((_e = columnDef.Cell) === null || _e === void 0 ? void 0 : _e.call(columnDef, {
-                    cell,
-                    column,
-                    renderedCellValue: cell.renderValue(),
-                    row,
-                    rowRef,
-                    staticRowIndex,
-                    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, Object.assign({}, cellValueProps)) })) : (jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
-};
-const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
-
-const MRT_TableDetailPanel = (_a) => {
-    var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
-    const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
-    const { isLoading } = getState();
-    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
-        isDetailPanel: true,
-        row,
-        staticRowIndex,
-        table,
-    });
-    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiDetailPanelProps, {
-        row,
-        table,
-    })), rest);
-    const DetailPanel = !isLoading && (renderDetailPanel === null || renderDetailPanel === void 0 ? void 0 : renderDetailPanel({ row, table }));
-    return (jsx(TableRow, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", "data-index": renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex, ref: (node) => {
-            var _a;
-            if (node) {
-                (_a = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(rowVirtualizer, node);
-            }
-        } }, tableRowProps, { sx: (theme) => {
-            var _a, _b;
-            return (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, 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%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
-        }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
-                    ? getMRTTheme(table, theme).baseBackgroundColor
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !enableRowVirtualization
-                    ? 'all 150ms ease-in-out'
-                    : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsx(Collapse, { in: !!row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
-};
-
-const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow, }) => {
-    var _a, _b, _c, _d;
-    const theme = useTheme();
-    const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
-    const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
-    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
-    const isPinned = enableRowPinning && row.getIsPinned();
-    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 tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
-        row,
-        staticRowIndex,
-        table,
-    });
-    const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
-        if (!enableRowPinning ||
-            !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) ||
-            !pinnedRowIds ||
-            !row.getIsPinned())
-            return [];
-        return [
-            [...pinnedRowIds].reverse().indexOf(row.id),
-            pinnedRowIds.indexOf(row.id),
-        ];
-    }, [pinnedRowIds, rowPinning]);
-    const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
-        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
-        0;
-    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
-    const sx = parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme);
-    const defaultRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
-    const customRowHeight = 
-    // @ts-ignore
-    parseInt((_d = (_c = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : sx === null || sx === void 0 ? void 0 : sx.height, 10) || undefined;
-    const rowHeight = customRowHeight || defaultRowHeight;
-    const handleDragEnter = (_e) => {
-        if (enableRowOrdering && draggingRow) {
-            setHoveredRow(row);
-        }
-    };
-    const rowRef = useRef(null);
-    const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
-    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isPinned || undefined, "data-selected": row.getIsSelected() || row.getIsAllSubRowsSelected() || undefined, onDragEnter: handleDragEnter, ref: (node) => {
-                    var _a;
-                    if (node) {
-                        rowRef.current = node;
-                        (_a = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(rowVirtualizer, node);
-                    }
-                }, selected: row.getIsSelected() }, tableRowProps, { style: Object.assign({ transform: virtualRow
-                        ? `translateY(${virtualRow.start}px)`
-                        : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td': {
-                        backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
-                            ? row.getIsSelected()
-                                ? `${alpha(selectedRowBackgroundColor, 0.3)}`
-                                : theme.palette.mode === 'dark'
-                                    ? `${lighten(baseBackgroundColor, 0.05)}`
-                                    : `${darken(baseBackgroundColor, 0.05)}`
-                            : undefined,
-                    }, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
-                        ? `${bottomPinnedIndex * rowHeight +
-                            (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
-                        : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1, position: virtualRow
-                        ? 'absolute'
-                        : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
-                            ? 'sticky'
-                            : undefined, td: {
-                        backgroundColor: row.getIsSelected()
-                            ? selectedRowBackgroundColor
-                            : isPinned
-                                ? pinnedRowBackgroundColor
-                                : undefined,
-                    }, top: virtualRow
-                        ? 0
-                        : topPinnedIndex !== undefined && isPinned
-                            ? `${topPinnedIndex * rowHeight +
-                                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
-                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
-                        ? 2
-                        : undefined }, sx)), 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: !isDraggingRow && !isHoveredRow
-                                ? columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement
-                                : undefined,
-                            numRows,
-                            rowRef,
-                            staticRowIndex,
-                            table,
-                            virtualColumnIndex: columnVirtualizer
-                                ? cellOrVirtualCell.index
-                                : undefined,
-                        };
-                        return cell ? (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))) : null;
-                    }), virtualPaddingRight ? (jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowVirtualizer: rowVirtualizer, staticRowIndex: staticRowIndex, table: table, virtualRow: virtualRow }))] }));
-};
-const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex);
-
-const useMRT_ColumnVirtualizer = (table) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
-    const { columnPinning, columnVisibility, draggingColumn } = getState();
-    const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
-        table,
-    });
-    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnVirtualization && enableColumnPinning
-        ? [
-            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
-            table
-                .getRightLeafColumns()
-                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1)
-                .sort((a, b) => a - b),
-        ]
-        : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
-    //get first 16 column widths and average them if calc is needed
-    const averageColumnWidth = useMemo(() => {
-        var _a, _b, _c, _d;
-        if (!enableColumnVirtualization || (columnVirtualizerProps === null || columnVirtualizerProps === void 0 ? void 0 : columnVirtualizerProps.estimateSize)) {
-            return 0;
-        }
-        const columnsWidths = (_d = (_c = (_b = (_a = table
-            .getRowModel()
-            .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 draggingColumnIndex = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
-        ? table
-            .getVisibleLeafColumns()
-            .findIndex((c) => c.id === (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id))
-        : undefined;
-    const columnVirtualizer = enableColumnVirtualization
-        ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => {
-                const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
-                return [
-                    ...new Set([
-                        ...leftPinnedIndexes,
-                        ...newIndexes,
-                        ...rightPinnedIndexes,
-                    ]),
-                ];
-            }, [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex]) }, columnVirtualizerProps))
-        : undefined;
-    if (columnVirtualizer) {
-        const virtualColumns = columnVirtualizer.getVirtualItems();
-        columnVirtualizer.virtualColumns = virtualColumns;
-        if (virtualColumns.length) {
-            columnVirtualizer.virtualPaddingLeft =
-                ((_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0) -
-                    ((_d = (_c = virtualColumns[leftPinnedIndexes.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
-            columnVirtualizer.virtualPaddingRight =
-                columnVirtualizer.getTotalSize() -
-                    ((_f = (_e = virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]) === null || _e === void 0 ? void 0 : _e.end) !== null && _f !== void 0 ? _f : 0) -
-                    (rightPinnedIndexes.length
-                        ? columnVirtualizer.getTotalSize() -
-                            ((_h = (_g = virtualColumns[virtualColumns.length - rightPinnedIndexes.length]) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : 0)
-                        : 0);
-        }
-        if (columnVirtualizerInstanceRef) {
-            //@ts-ignore
-            columnVirtualizerInstanceRef.current = columnVirtualizer;
-        }
-    }
-    return columnVirtualizer;
-};
-
-const MRT_GrabHandleButton = (_a) => {
-    var _b, _c;
-    var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
-    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
-    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ "aria-label": (_c = _iconButtonProps.title) !== null && _c !== void 0 ? _c : localization.move, 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);
-            }, onDragEnd: onDragEnd, onDragStart: onDragStart, sx: (theme) => (Object.assign({ '&:active': {
-                    cursor: 'grabbing',
-                }, '&:hover': {
-                    backgroundColor: 'transparent',
-                    opacity: 1,
-                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.3, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(_iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
-};
-
-const MRT_TableBodyRowGrabHandle = (_a) => {
-    var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
-    const { options: { muiRowDragHandleProps }, } = table;
-    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
-        row,
-        table,
-    })), rest);
-    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);
-        try {
-            event.dataTransfer.setDragImage(rowRef.current, 0, 0);
-        }
-        catch (e) {
-            console.error(e);
-        }
-        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, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
-};
-
-const MRT_RowPinButton = (_a) => {
-    var { pinningPosition, row, table } = _a, rest = __rest(_a, ["pinningPosition", "row", "table"]);
-    const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode, }, } = table;
-    const isPinned = row.getIsPinned();
-    const [tooltipOpened, setTooltipOpened] = useState(false);
-    const handleTogglePin = (event) => {
-        setTooltipOpened(false);
-        event.stopPropagation();
-        row.pin(isPinned ? false : pinningPosition);
-    };
-    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, Object.assign({ "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
-                    transform: `rotate(${rowPinningDisplayMode === 'sticky'
-                        ? 135
-                        : pinningPosition === 'top'
-                            ? 180
-                            : 0}deg)`,
-                } })) })) }));
-};
-
-const MRT_TableBodyRowPinButton = (_a) => {
-    var { row, table } = _a, rest = __rest(_a, ["row", "table"]);
-    const { getState, options: { enableRowPinning, rowPinningDisplayMode }, } = table;
-    const { density } = getState();
-    const canPin = parseFromValuesOrFunc(enableRowPinning, row);
-    if (!canPin)
-        return null;
-    const rowPinButtonProps = Object.assign({ row,
-        table }, rest);
-    if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
-        return (jsxs(Box, { sx: {
-                display: 'flex',
-                flexDirection: density === 'compact' ? 'row' : 'column',
-            }, children: [jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "top" }, rowPinButtonProps)), jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "bottom" }, rowPinButtonProps))] }));
-    }
-    return (jsx(MRT_RowPinButton, Object.assign({ pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top' }, rowPinButtonProps)));
-};
-
-const MRT_ExpandAllButton = (_a) => {
-    var _b, _c;
-    var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
-    const { density, isLoading } = getState();
-    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiExpandAllButtonProps, {
-        table,
-    })), rest);
-    const isAllRowsExpanded = getIsAllRowsExpanded();
-    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : (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', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsx(KeyboardDoubleArrowDownIcon, { style: {
-                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })) })) }) }));
-};
-
-const MRT_ExpandButton = ({ row, table, }) => {
-    var _a, _b;
-    const theme = useTheme();
-    const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, positionExpandColumn, renderDetailPanel, }, } = table;
-    const { density } = getState();
-    const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
-        row,
-        table,
-    });
-    const canExpand = row.getCanExpand();
-    const isExpanded = row.getIsExpanded();
-    const handleToggleExpand = (event) => {
-        var _a;
-        event.stopPropagation();
-        row.toggleExpanded();
-        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
-    };
-    const detailPanel = !!(renderDetailPanel === null || renderDetailPanel === void 0 ? void 0 : renderDetailPanel({ row, table }));
-    return (jsx(Tooltip, { disableHoverListener: !canExpand && !detailPanel, 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 && !detailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !detailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
-                        transform: `rotate(${!canExpand && !renderDetailPanel
-                            ? positionExpandColumn === 'last' ||
-                                theme.direction === 'rtl'
-                                ? 90
-                                : -90
-                            : isExpanded
-                                ? -180
-                                : 0}deg)`,
-                        transition: 'transform 150ms',
-                    } })) })) }) }));
-};
-
-const MRT_EditActionButtons = (_a) => {
-    var { row, table, variant = 'icon' } = _a, rest = __rest(_a, ["row", "table", "variant"]);
-    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, 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 = () => {
-        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 handleSubmitRow = () => {
-        var _a;
-        //look for auto-filled input values
-        (_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(row === null || row === void 0 ? void 0 : row._valuesCache, input.name)) {
-                // @ts-ignore
-                row._valuesCache[input.name] = input.value;
-            }
-        });
-        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: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), ((isCreating && onCreatingRowSave) ||
-                    (isEditing && onEditingRowSave)) && (jsx(Tooltip, { 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, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
+    if (layoutMode === 'grid') {
+        widthStyles.flex = `${[0, false].includes(columnDef.grow)
+            ? 0
+            : `var(--${header ? 'header' : 'col'}-${parseCSSVarId((_f = header === null || header === void 0 ? void 0 : header.id) !== null && _f !== void 0 ? _f : column.id)}-size)`} 0 auto`;
+    }
+    else if (layoutMode === 'grid-no-grow') {
+        widthStyles.flex = `${+(columnDef.grow || 0)} 0 auto`;
+    }
+    return Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && columnDef.columnDefType !== 'group'
+            ? alpha(darken(getMRTTheme(table, theme).baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97)
+            : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
+            ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
+            : getIsFirstRightPinnedColumn(column)
+                ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
+                : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, left: column.getIsPinned() === 'left'
+            ? `${column.getStart('left')}px`
+            : undefined, opacity: ((_g = table.getState().draggingColumn) === null || _g === void 0 ? void 0 : _g.id) === column.id ||
+            ((_h = table.getState().hoveredColumn) === null || _h === void 0 ? void 0 : _h.id) === column.id
+            ? 0.5
+            : 1, position: column.getIsPinned() && columnDef.columnDefType !== 'group'
+            ? 'sticky'
+            : undefined, right: column.getIsPinned() === 'right'
+            ? `${getTotalRight(table, column)}px`
+            : undefined, transition: table.options.enableColumnVirtualization
+            ? 'none'
+            : `padding 150ms ease-in-out` }, widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
 };
+const getCommonToolbarStyles = ({ table, theme, }) => ({
+    alignItems: 'flex-start',
+    backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+    display: 'grid',
+    flexWrap: 'wrap-reverse',
+    minHeight: '3.5rem',
+    overflow: 'hidden',
+    position: 'relative',
+    transition: 'all 150ms ease-in-out',
+    zIndex: 1,
+});
+const flipIconStyles = (theme) => theme.direction === 'rtl'
+    ? { style: { transform: 'scaleX(-1)' } }
+    : undefined;
+const getCommonTooltipProps = (placement) => ({
+    disableInteractive: true,
+    enterDelay: 1000,
+    enterNextDelay: 1000,
+    placement,
+});
 
 const mrtFilterOptions = (localization) => [
     {
@@ -1296,8 +725,13 @@ const MRT_FilterOptionMenu = (_a) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
+    const theme = useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
         }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
             ? (_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
                 column: column,
@@ -1446,8 +880,13 @@ const MRT_ColumnActionMenu = (_a) => {
             ]
             : []),
     ].filter(Boolean);
+    const theme = useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
         }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
             closeMenu: () => setAnchorEl(null),
             column,
@@ -1462,15 +901,21 @@ const MRT_ColumnActionMenu = (_a) => {
 };
 
 const MRT_RowActionMenu = (_a) => {
-    var { anchorEl, handleEdit, row, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "table"]);
+    var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
     const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
     const { density } = getState();
+    const theme = useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsxs(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
         }, anchorEl: anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
                 ['modal', 'row'].includes(editDisplayMode) && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
                 closeMenu: () => setAnchorEl(null),
                 row,
+                staticRowIndex,
                 table,
             })] })));
 };
@@ -1486,7 +931,7 @@ const commonIconButtonStyles = {
     width: '2rem',
 };
 const MRT_ToggleRowActionMenuButton = (_a) => {
-    var { cell, row, table } = _a, rest = __rest(_a, ["cell", "row", "table"]);
+    var { cell, row, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "row", "staticRowIndex", "table"]);
     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;
@@ -1504,9 +949,228 @@ const MRT_ToggleRowActionMenuButton = (_a) => {
         setEditingRow(Object.assign({}, row));
         setAnchorEl(null);
     };
-    return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
+    return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, staticRowIndex, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
             parseFromValuesOrFunc(enableEditing, row) &&
-            ['modal', 'row'].includes(editDisplayMode) ? (jsx(Tooltip, { placement: "right", title: localization.edit, children: jsx(IconButton, Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsx(EditIcon, {}) })) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsx(MoreHorizIcon, {}) })) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
+            ['modal', 'row'].includes(editDisplayMode) ? (jsx(Tooltip, { placement: "right", title: localization.edit, children: jsx(IconButton, Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsx(EditIcon, {}) })) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.rowActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsx(MoreHorizIcon, {}) })) })), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, staticRowIndex: staticRowIndex, table: table })] })) : null }));
+};
+
+const getMRT_RowActionsColumnDef = (tableOptions) => {
+    if (!showRowActionsColumn(tableOptions)) {
+        return null;
+    }
+    return Object.assign({ Cell: ({ cell, row, staticRowIndex, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, staticRowIndex: staticRowIndex, table: table })) }, defaultDisplayColumnProps({
+        header: 'actions',
+        id: 'mrt-row-actions',
+        tableOptions,
+    }));
+};
+
+const MRT_GrabHandleButton = (_a) => {
+    var _b, _c;
+    var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
+    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
+    const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
+    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps('top'), { title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ "aria-label": (_c = _iconButtonProps.title) !== null && _c !== void 0 ? _c : localization.move, 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);
+            }, onDragEnd: onDragEnd, onDragStart: onDragStart, sx: (theme) => (Object.assign({ '&:active': {
+                    cursor: 'grabbing',
+                }, '&:hover': {
+                    backgroundColor: 'transparent',
+                    opacity: 1,
+                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.3, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(_iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) })));
+};
+
+const MRT_TableBodyRowGrabHandle = (_a) => {
+    var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
+    const { options: { muiRowDragHandleProps }, } = table;
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
+        row,
+        table,
+    })), rest);
+    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);
+        try {
+            event.dataTransfer.setDragImage(rowRef.current, 0, 0);
+        }
+        catch (e) {
+            console.error(e);
+        }
+        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, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
+};
+
+const getMRT_RowDragColumnDef = (tableOptions) => {
+    if (!showRowDragColumn(tableOptions)) {
+        return null;
+    }
+    return Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), grow: false }, defaultDisplayColumnProps({
+        header: 'move',
+        id: 'mrt-row-drag',
+        tableOptions,
+    }));
+};
+
+const MRT_ExpandAllButton = (_a) => {
+    var _b, _c;
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
+    const { density, isLoading } = getState();
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiExpandAllButtonProps, {
+        table,
+    })), rest);
+    const isAllRowsExpanded = getIsAllRowsExpanded();
+    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : (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', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsx(KeyboardDoubleArrowDownIcon, { style: {
+                        transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) })));
+};
+
+const MRT_ExpandButton = ({ row, staticRowIndex, table, }) => {
+    var _a, _b;
+    const theme = useTheme();
+    const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, positionExpandColumn, renderDetailPanel, }, } = table;
+    const { density } = getState();
+    const iconButtonProps = parseFromValuesOrFunc(muiExpandButtonProps, {
+        row,
+        staticRowIndex,
+        table,
+    });
+    const canExpand = row.getCanExpand();
+    const isExpanded = row.getIsExpanded();
+    const handleToggleExpand = (event) => {
+        var _a;
+        event.stopPropagation();
+        row.toggleExpanded();
+        (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
+    };
+    const detailPanel = !!(renderDetailPanel === null || renderDetailPanel === void 0 ? void 0 : renderDetailPanel({ row, table }));
+    return (jsx(Tooltip, Object.assign({ disableHoverListener: !canExpand && !detailPanel }, getCommonTooltipProps(), { 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 && !detailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !detailPanel ? 0.3 : 1, [theme.direction === 'rtl' || positionExpandColumn === 'last'
+                        ? 'mr'
+                        : 'ml']: `${row.depth * 16}px`, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
+                        transform: `rotate(${!canExpand && !renderDetailPanel
+                            ? positionExpandColumn === 'last' ||
+                                theme.direction === 'rtl'
+                                ? 90
+                                : -90
+                            : isExpanded
+                                ? -180
+                                : 0}deg)`,
+                        transition: 'transform 150ms',
+                    } })) })) }) })));
+};
+
+const getMRT_RowExpandColumnDef = (tableOptions) => {
+    if (!showRowExpandColumn(tableOptions)) {
+        return null;
+    }
+    const { defaultColumn, enableExpandAll, groupedColumnMode, positionExpandColumn, renderDetailPanel, state: { grouping }, } = tableOptions;
+    const alignProps = positionExpandColumn === 'last'
+        ? {
+            align: 'right',
+        }
+        : undefined;
+    return Object.assign({ Cell: ({ cell, column, row, staticRowIndex, table }) => {
+            var _a, _b, _c;
+            const expandButtonProps = { row, staticRowIndex, table };
+            const subRowsLength = (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length;
+            if (groupedColumnMode === 'remove' && row.groupingColumnId) {
+                return (jsxs(Stack, { alignItems: "center", flexDirection: "row", gap: "0.25rem", children: [jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), jsx(Tooltip, Object.assign({}, getCommonTooltipProps('right'), { title: table.getColumn(row.groupingColumnId).columnDef.header, children: jsx("span", { children: row.groupingValue }) })), !!subRowsLength && jsxs("span", { children: ["(", subRowsLength, ")"] })] }));
+            }
+            else {
+                return (jsxs(Fragment, { children: [jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), (_c = (_b = column.columnDef).GroupedCell) === null || _c === void 0 ? void 0 : _c.call(_b, { cell, column, row, table })] }));
+            }
+        }, Header: enableExpandAll
+            ? ({ table }) => {
+                var _a;
+                return (jsxs(Fragment, { children: [jsx(MRT_ExpandAllButton, { table: table }), groupedColumnMode === 'remove' &&
+                            ((_a = grouping === null || grouping === void 0 ? void 0 : grouping.map((groupedColumnId) => table.getColumn(groupedColumnId).columnDef.header)) === null || _a === void 0 ? void 0 : _a.join(', '))] }));
+            }
+            : undefined, muiTableBodyCellProps: alignProps, muiTableHeadCellProps: alignProps }, defaultDisplayColumnProps({
+        header: 'expand',
+        id: 'mrt-row-expand',
+        size: groupedColumnMode === 'remove'
+            ? defaultColumn === null || defaultColumn === void 0 ? void 0 : defaultColumn.size
+            : renderDetailPanel
+                ? 60
+                : 100,
+        tableOptions,
+    }));
+};
+
+const getMRT_RowNumbersColumnDef = (tableOptions) => {
+    if (!showRowNumbersColumn(tableOptions)) {
+        return null;
+    }
+    const { localization, rowNumberDisplayMode } = tableOptions;
+    const { pagination: { pageIndex, pageSize }, } = tableOptions.state;
+    return Object.assign({ Cell: ({ row, staticRowIndex }) => {
+            var _a;
+            return ((_a = (rowNumberDisplayMode === 'static'
+                ? (staticRowIndex || 0) + (pageSize || 0) * (pageIndex || 0)
+                : row.index)) !== null && _a !== void 0 ? _a : 0) + 1;
+        }, Header: () => localization.rowNumber, grow: false }, defaultDisplayColumnProps({
+        header: 'rowNumbers',
+        id: 'mrt-row-numbers',
+        tableOptions,
+    }));
+};
+
+const MRT_RowPinButton = (_a) => {
+    var { pinningPosition, row, table } = _a, rest = __rest(_a, ["pinningPosition", "row", "table"]);
+    const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode, }, } = table;
+    const isPinned = row.getIsPinned();
+    const [tooltipOpened, setTooltipOpened] = useState(false);
+    const handleTogglePin = (event) => {
+        setTooltipOpened(false);
+        event.stopPropagation();
+        row.pin(isPinned ? false : pinningPosition);
+    };
+    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, Object.assign({ "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
+                    transform: `rotate(${rowPinningDisplayMode === 'sticky'
+                        ? 135
+                        : pinningPosition === 'top'
+                            ? 180
+                            : 0}deg)`,
+                } })) })) })));
+};
+
+const MRT_TableBodyRowPinButton = (_a) => {
+    var { row, table } = _a, rest = __rest(_a, ["row", "table"]);
+    const { getState, options: { enableRowPinning, rowPinningDisplayMode }, } = table;
+    const { density } = getState();
+    const canPin = parseFromValuesOrFunc(enableRowPinning, row);
+    if (!canPin)
+        return null;
+    const rowPinButtonProps = Object.assign({ row,
+        table }, rest);
+    if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
+        return (jsxs(Box, { sx: {
+                display: 'flex',
+                flexDirection: density === 'compact' ? 'row' : 'column',
+            }, children: [jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "top" }, rowPinButtonProps)), jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "bottom" }, rowPinButtonProps))] }));
+    }
+    return (jsx(MRT_RowPinButton, Object.assign({ pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top' }, rowPinButtonProps)));
+};
+
+const getMRT_RowPinningColumnDef = (tableOptions) => {
+    if (!showRowPinningColumn(tableOptions)) {
+        return null;
+    }
+    return Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), grow: false }, defaultDisplayColumnProps({
+        header: 'pin',
+        id: 'mrt-row-pin',
+        tableOptions,
+    }));
 };
 
 const MRT_SelectCheckbox = (_a) => {
@@ -1566,156 +1230,291 @@ const MRT_SelectCheckbox = (_a) => {
             e.stopPropagation();
             (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
         }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
-    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : (selectAll
+    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : (selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
                 ? table.getIsSomeRowsSelected() && !allRowsSelected
-                : (row === null || row === void 0 ? void 0 : row.getIsSomeSelected()) && row.getCanSelectSubRows() }, commonProps))) }));
+                : (row === null || row === void 0 ? void 0 : row.getIsSomeSelected()) && row.getCanSelectSubRows() }, commonProps))) })));
+};
+
+const getMRT_RowSelectColumnDef = (tableOptions) => {
+    if (!showRowSelectionColumn(tableOptions)) {
+        return null;
+    }
+    const { enableMultiRowSelection, enableSelectAll } = tableOptions;
+    return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: enableSelectAll && enableMultiRowSelection
+            ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
+            : undefined, grow: false }, defaultDisplayColumnProps({
+        header: 'select',
+        id: 'mrt-row-select',
+        tableOptions,
+    }));
+};
+
+const MRT_Default_Icons = {
+    ArrowDownwardIcon,
+    ArrowRightIcon,
+    CancelIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ClearAllIcon,
+    CloseIcon,
+    DensityLargeIcon,
+    DensityMediumIcon,
+    DensitySmallIcon,
+    DragHandleIcon,
+    DynamicFeedIcon,
+    EditIcon,
+    ExpandMoreIcon,
+    FilterAltIcon,
+    FilterListIcon,
+    FilterListOffIcon,
+    FirstPageIcon,
+    FullscreenExitIcon,
+    FullscreenIcon,
+    KeyboardDoubleArrowDownIcon,
+    LastPageIcon,
+    MoreHorizIcon,
+    MoreVertIcon,
+    PushPinIcon,
+    RestartAltIcon,
+    SaveIcon,
+    SearchIcon,
+    SearchOffIcon,
+    SortIcon,
+    SyncAltIcon,
+    ViewColumnIcon,
+    VisibilityOffIcon,
+};
+
+const MRT_Localization_EN = {
+    actions: 'Actions',
+    and: 'and',
+    cancel: 'Cancel',
+    changeFilterMode: 'Change filter mode',
+    changeSearchMode: 'Change search mode',
+    clearFilter: 'Clear filter',
+    clearSearch: 'Clear search',
+    clearSort: 'Clear sort',
+    clickToCopy: 'Click to copy',
+    collapse: 'Collapse',
+    collapseAll: 'Collapse all',
+    columnActions: 'Column Actions',
+    copiedToClipboard: 'Copied to clipboard',
+    dropToGroupBy: 'Drop to group by {column}',
+    edit: 'Edit',
+    expand: 'Expand',
+    expandAll: 'Expand all',
+    filterArrIncludes: 'Includes',
+    filterArrIncludesAll: 'Includes all',
+    filterArrIncludesSome: 'Includes',
+    filterBetween: 'Between',
+    filterBetweenInclusive: 'Between Inclusive',
+    filterByColumn: 'Filter by {column}',
+    filterContains: 'Contains',
+    filterEmpty: 'Empty',
+    filterEndsWith: 'Ends With',
+    filterEquals: 'Equals',
+    filterEqualsString: 'Equals',
+    filterFuzzy: 'Fuzzy',
+    filterGreaterThan: 'Greater Than',
+    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
+    filterInNumberRange: 'Between',
+    filterIncludesString: 'Contains',
+    filterIncludesStringSensitive: 'Contains',
+    filterLessThan: 'Less Than',
+    filterLessThanOrEqualTo: 'Less Than Or Equal To',
+    filterMode: 'Filter Mode: {filterType}',
+    filterNotEmpty: 'Not Empty',
+    filterNotEquals: 'Not Equals',
+    filterStartsWith: 'Starts With',
+    filterWeakEquals: 'Equals',
+    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+    goToFirstPage: 'Go to first page',
+    goToLastPage: 'Go to last page',
+    goToNextPage: 'Go to next page',
+    goToPreviousPage: 'Go to previous page',
+    grab: 'Grab',
+    groupByColumn: 'Group by {column}',
+    groupedBy: 'Grouped by ',
+    hideAll: 'Hide all',
+    hideColumn: 'Hide {column} column',
+    max: 'Max',
+    min: 'Min',
+    move: 'Move',
+    noRecordsToDisplay: 'No records to display',
+    noResultsFound: 'No results found',
+    of: 'of',
+    or: 'or',
+    pin: 'Pin',
+    pinToLeft: 'Pin to left',
+    pinToRight: 'Pin to right',
+    resetColumnSize: 'Reset column size',
+    resetOrder: 'Reset order',
+    rowActions: 'Row Actions',
+    rowNumber: '#',
+    rowNumbers: 'Row Numbers',
+    rowsPerPage: 'Rows per page',
+    save: 'Save',
+    search: 'Search',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
+    select: 'Select',
+    showAll: 'Show all',
+    showAllColumns: 'Show all columns',
+    showHideColumns: 'Show/Hide columns',
+    showHideFilters: 'Show/Hide filters',
+    showHideSearch: 'Show/Hide search',
+    sortByColumnAsc: 'Sort by {column} ascending',
+    sortByColumnDesc: 'Sort by {column} descending',
+    sortedByColumnAsc: 'Sorted by {column} ascending',
+    sortedByColumnDesc: 'Sorted by {column} descending',
+    thenBy: ', then by ',
+    toggleDensity: 'Toggle density',
+    toggleFullScreen: 'Toggle full screen',
+    toggleSelectAll: 'Toggle select all',
+    toggleSelectRow: 'Toggle select row',
+    toggleVisibility: 'Toggle visibility',
+    ungroupByColumn: 'Ungroup by {column}',
+    unpin: 'Unpin',
+    unpinAll: 'Unpin all',
 };
 
-const useMRT_DisplayColumns = (params) => {
-    var _a, _b, _c, _d;
-    const { columnOrder, creatingRow, grouping, tableOptions } = params;
-    const order = (_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder;
-    return useMemo(() => [
-        makeRowPinColumn,
-        makeRowDragColumn,
-        makeRowActionsColumn,
-        makeRowExpandColumn,
-        makeRowSelectColumn,
-        makeRowNumbersColumn,
-        makeSpacerColumn,
-    ]
-        .map((makeCol) => makeCol(params, order))
-        .filter(Boolean), [
-        columnOrder,
-        creatingRow,
-        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.groupedColumnMode,
-        tableOptions.localization,
-        tableOptions.positionActionsColumn,
-        tableOptions.positionExpandColumn,
-        tableOptions.renderDetailPanel,
-        tableOptions.renderRowActionMenuItems,
-        tableOptions.renderRowActions,
-        (_c = tableOptions.state) === null || _c === void 0 ? void 0 : _c.columnOrder,
-        (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.grouping,
-    ]);
+const MRT_DefaultColumn = {
+    filterVariant: 'text',
+    maxSize: 1000,
+    minSize: 40,
+    size: 180,
 };
-function defaultDisplayColumnProps({ defaultDisplayColumn, displayColumnDefOptions, localization, }, id, header, size = 60) {
-    return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumn), { header: header ? localization[header] : '', size }), displayColumnDefOptions === null || displayColumnDefOptions === void 0 ? void 0 : displayColumnDefOptions[id]), { id });
-}
-function makeRowPinColumn({ tableOptions }, order) {
-    const id = 'mrt-row-pin';
-    if (order.includes(id)) {
-        return Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })) }, defaultDisplayColumnProps(tableOptions, id, 'pin'));
+const MRT_DefaultDisplayColumn = {
+    columnDefType: 'display',
+    enableClickToCopy: false,
+    enableColumnActions: false,
+    enableColumnDragging: false,
+    enableColumnFilter: false,
+    enableColumnOrdering: false,
+    enableEditing: false,
+    enableGlobalFilter: false,
+    enableGrouping: false,
+    enableHiding: false,
+    enableResizing: false,
+    enableSorting: false,
+};
+const useMRT_TableOptions = (_a) => {
+    var _b;
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    const theme = useTheme();
+    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 (!columnResizeDirection) {
+        columnResizeDirection = theme.direction || 'ltr';
     }
-    return null;
-}
-function makeRowDragColumn({ tableOptions }, order) {
-    const id = 'mrt-row-drag';
-    if (order.includes(id)) {
-        return Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })) }, defaultDisplayColumnProps(tableOptions, id, 'move'));
+    layoutMode =
+        layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
+    if (layoutMode === 'semantic' &&
+        (rest.enableRowVirtualization || rest.enableColumnVirtualization)) {
+        layoutMode = 'grid';
     }
-    return null;
-}
-function makeRowActionsColumn({ creatingRow, tableOptions }, order) {
-    const id = 'mrt-row-actions';
-    if (order.includes(id) ||
-        (creatingRow && tableOptions.createDisplayMode === 'row')) {
-        return Object.assign({ Cell: ({ cell, row, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })) }, defaultDisplayColumnProps(tableOptions, id, 'actions'));
+    if (rest.enableRowVirtualization) {
+        enableStickyHeader = true;
     }
-    return null;
-}
-function makeRowExpandColumn({ grouping, tableOptions }, order) {
-    var _a, _b, _c;
-    const id = 'mrt-row-expand';
-    if (order.includes(id) &&
-        showExpandColumn(tableOptions, (_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.grouping) !== null && _b !== void 0 ? _b : grouping)) {
-        const alignProps = tableOptions.positionExpandColumn === 'last'
-            ? {
-                align: 'right',
-            }
-            : undefined;
-        return Object.assign({ Cell: ({ cell, column, row, table }) => {
-                var _a, _b, _c;
-                const expandButtonProps = { row, table };
-                const subRowsLength = (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.length;
-                if (tableOptions.groupedColumnMode === 'remove' &&
-                    row.groupingColumnId) {
-                    return (jsxs(Stack, { alignItems: "center", flexDirection: "row", gap: "0.25rem", children: [jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "right", title: table.getColumn(row.groupingColumnId).columnDef.header, children: jsx("span", { children: row.groupingValue }) }), !!subRowsLength && jsxs("span", { children: ["(", subRowsLength, ")"] })] }));
-                }
-                else {
-                    return (jsxs(Fragment, { children: [jsx(MRT_ExpandButton, Object.assign({}, expandButtonProps)), (_c = (_b = column.columnDef).GroupedCell) === null || _c === void 0 ? void 0 : _c.call(_b, { cell, column, row, table })] }));
-                }
-            }, Header: tableOptions.enableExpandAll
-                ? ({ table }) => {
-                    return (jsxs(Fragment, { children: [jsx(MRT_ExpandAllButton, { table: table }), tableOptions.groupedColumnMode === 'remove' &&
-                                grouping
-                                    .map((groupedColumnId) => table.getColumn(groupedColumnId).columnDef.header)
-                                    .join(', ')] }));
-                }
-                : undefined, muiTableBodyCellProps: alignProps, muiTableHeadCellProps: alignProps }, defaultDisplayColumnProps(tableOptions, id, 'expand', tableOptions.groupedColumnMode === 'remove'
-            ? (_c = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.defaultColumn) === null || _c === void 0 ? void 0 : _c.size
-            : 60));
+    if (enablePagination === false && manualPagination === undefined) {
+        manualPagination = true;
     }
-    return null;
-}
-function makeRowSelectColumn({ tableOptions }, order) {
-    const id = 'mrt-row-select';
-    if (order.includes(id)) {
-        return Object.assign({ Cell: ({ row, staticRowIndex, table }) => (jsx(MRT_SelectCheckbox, { row: row, staticRowIndex: staticRowIndex, table: table })), Header: tableOptions.enableSelectAll && tableOptions.enableMultiRowSelection
-                ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
-                : undefined }, defaultDisplayColumnProps(tableOptions, id, 'select'));
+    if (!((_b = rest.data) === null || _b === void 0 ? void 0 : _b.length)) {
+        manualFiltering = true;
+        manualGrouping = true;
+        manualPagination = true;
+        manualSorting = true;
     }
-    return null;
-}
-function makeRowNumbersColumn({ tableOptions }, order) {
-    const id = 'mrt-row-numbers';
-    if (order.includes(id) || tableOptions.enableRowNumbers)
-        return Object.assign({ Cell: ({ row, staticRowIndex }) => {
-                var _a;
-                return ((_a = (tableOptions.rowNumberDisplayMode === 'static'
-                    ? staticRowIndex
-                    : row.index)) !== null && _a !== void 0 ? _a : 0) + 1;
-            }, Header: () => tableOptions.localization.rowNumber }, defaultDisplayColumnProps(tableOptions, id, 'rowNumbers'));
-    return null;
-}
+    return Object.assign({ aggregationFns: _aggregationFns, autoResetExpanded,
+        columnFilterDisplayMode,
+        columnResizeDirection,
+        columnResizeMode,
+        createDisplayMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editDisplayMode,
+        enableBottomToolbar,
+        enableColumnActions,
+        enableColumnFilters,
+        enableColumnOrdering,
+        enableColumnPinning,
+        enableColumnResizing,
+        enableDensityToggle,
+        enableExpandAll,
+        enableExpanding,
+        enableFilterMatchHighlighting,
+        enableFilters,
+        enableFullScreenToggle,
+        enableGlobalFilter,
+        enableGlobalFilterRankedResults,
+        enableGrouping,
+        enableHiding,
+        enableMultiRowSelection,
+        enableMultiSort,
+        enablePagination,
+        enableRowPinning,
+        enableRowSelection,
+        enableSelectAll,
+        enableSorting,
+        enableStickyHeader,
+        enableTableFooter,
+        enableTableHead,
+        enableToolbarInternalActions,
+        enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode, localization: _localization, manualFiltering,
+        manualGrouping,
+        manualPagination,
+        manualSorting,
+        paginationDisplayMode,
+        positionActionsColumn,
+        positionCreatingRow,
+        positionExpandColumn,
+        positionGlobalFilter,
+        positionPagination,
+        positionToolbarAlertBanner,
+        positionToolbarDropZone,
+        rowNumberDisplayMode,
+        rowPinningDisplayMode,
+        selectAllMode, sortingFns: _sortingFns }, rest);
+};
+
 const blankColProps = {
     children: null,
     sx: {
-        flex: '1 0 auto',
         minWidth: 0,
         p: 0,
         width: 0,
     },
 };
-function makeSpacerColumn({ tableOptions }, order) {
-    const id = 'mrt-row-spacer';
-    if (order.includes(id)) {
-        return Object.assign(Object.assign(Object.assign({}, defaultDisplayColumnProps(tableOptions, id, undefined, 0)), MRT_DefaultDisplayColumn), { muiTableBodyCellProps: blankColProps, muiTableFooterCellProps: blankColProps, muiTableHeadCellProps: blankColProps });
+const getMRT_RowSpacerColumnDef = (tableOptions) => {
+    if (!showRowSpacerColumn(tableOptions)) {
+        return null;
     }
-    return null;
-}
+    return Object.assign(Object.assign(Object.assign(Object.assign({}, defaultDisplayColumnProps({
+        id: 'mrt-row-spacer',
+        size: 0,
+        tableOptions,
+    })), { grow: true }), MRT_DefaultDisplayColumn), { muiTableBodyCellProps: blankColProps, muiTableFooterCellProps: blankColProps, muiTableHeadCellProps: blankColProps });
+};
+
+const getMRT_DisplayColumns = (tableOptions) => {
+    return [
+        getMRT_RowNumbersColumnDef(tableOptions),
+        getMRT_RowSelectColumnDef(tableOptions),
+        getMRT_RowExpandColumnDef(tableOptions),
+        getMRT_RowActionsColumnDef(tableOptions),
+        getMRT_RowDragColumnDef(tableOptions),
+        getMRT_RowPinningColumnDef(tableOptions),
+        getMRT_RowSpacerColumnDef(tableOptions),
+    ].filter(Boolean);
+};
 
 const useMRT_Effects = (table) => {
-    const { getIsSomeRowsPinned, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
+    const { getIsSomeRowsPinned, getPrePaginationRowModel, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
     const { density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const rerender = useReducer(() => ({}), {})[1];
     const isMounted = useRef(false);
     const initialBodyHeight = useRef();
@@ -1749,36 +1548,289 @@ const useMRT_Effects = (table) => {
         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));
+        if (firstVisibleRowIndex >= totalRowCount) {
+            table.setPageIndex(Math.ceil(totalRowCount / pageSize) - 1);
         }
-    }, [rowCount, table.getPrePaginationRowModel().rows.length]);
+    }, [totalRowCount]);
     //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([]);
+    }, [sorting]);
+    useEffect(() => {
+        if (!getCanRankRows(table))
+            return;
+        if (globalFilter) {
+            table.setSorting([]);
+        }
+        else {
+            table.setSorting(() => appliedSort.current || []);
+        }
+    }, [globalFilter]);
+    useEffect(() => {
+        if (enableRowPinning && getIsSomeRowsPinned()) {
+            setTimeout(() => {
+                rerender();
+            }, 150);
+        }
+    }, [density]);
+};
+
+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;
+    const bottomToolbarRef = useRef(null);
+    const editInputRefs = useRef({});
+    const filterInputRefs = useRef({});
+    const searchInputRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const tableHeadCellRefs = useRef({});
+    const tablePaperRef = useRef(null);
+    const topToolbarRef = useRef(null);
+    const tableHeadRef = useRef(null);
+    const tableFooterRef = useRef(null);
+    const initialState = useMemo(() => {
+        var _a, _b, _c;
+        const initState = (_a = _tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
+        initState.columnOrder =
+            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(Object.assign(Object.assign({}, _tableOptions), { state: Object.assign(Object.assign({}, _tableOptions.initialState), _tableOptions.state) }));
+        initState.globalFilterFn = (_c = _tableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
+        return initState;
+    }, []);
+    _tableOptions.initialState = initialState;
+    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, onColumnOrderChange] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
+    const [columnSizingInfo, onColumnSizingInfoChange] = useState((_c = initialState.columnSizingInfo) !== null && _c !== void 0 ? _c : {});
+    const [density, setDensity] = useState((_d = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _d !== void 0 ? _d : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = useState((_e = initialState.draggingColumn) !== null && _e !== void 0 ? _e : null);
+    const [draggingRow, setDraggingRow] = useState((_f = initialState.draggingRow) !== null && _f !== void 0 ? _f : null);
+    const [editingCell, setEditingCell] = useState((_g = initialState.editingCell) !== null && _g !== void 0 ? _g : null);
+    const [editingRow, setEditingRow] = useState((_h = initialState.editingRow) !== null && _h !== void 0 ? _h : null);
+    const [globalFilterFn, setGlobalFilterFn] = useState((_j = initialState.globalFilterFn) !== null && _j !== void 0 ? _j : 'fuzzy');
+    const [grouping, onGroupingChange] = useState((_k = initialState.grouping) !== null && _k !== void 0 ? _k : []);
+    const [hoveredColumn, setHoveredColumn] = useState((_l = initialState.hoveredColumn) !== null && _l !== void 0 ? _l : null);
+    const [hoveredRow, setHoveredRow] = useState((_m = initialState.hoveredRow) !== null && _m !== void 0 ? _m : null);
+    const [isFullScreen, setIsFullScreen] = useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _o !== void 0 ? _o : false);
+    const [pagination, onPaginationChange] = useState((_p = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) !== null && _p !== void 0 ? _p : { pageIndex: 0, pageSize: 10 });
+    const [showAlertBanner, setShowAlertBanner] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showAlertBanner) !== null && _q !== void 0 ? _q : false);
+    const [showColumnFilters, setShowColumnFilters] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _r !== void 0 ? _r : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _s !== void 0 ? _s : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_t = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _t !== void 0 ? _t : false);
+    _tableOptions.state = Object.assign({ columnFilterFns,
+        columnOrder,
+        columnSizingInfo,
+        creatingRow,
+        density,
+        draggingColumn,
+        draggingRow,
+        editingCell,
+        editingRow,
+        globalFilterFn,
+        grouping,
+        hoveredColumn,
+        hoveredRow,
+        isFullScreen,
+        pagination,
+        showAlertBanner,
+        showColumnFilters,
+        showGlobalFilter,
+        showToolbarDropZone }, _tableOptions.state);
+    const tableOptions = _tableOptions;
+    //don't recompute columnDefs while resizing column or dragging column/row
+    const columnDefsRef = useRef([]);
+    tableOptions.columns =
+        tableOptions.state.columnSizingInfo.isResizingColumn ||
+            tableOptions.state.draggingColumn ||
+            tableOptions.state.draggingRow
+            ? columnDefsRef.current
+            : prepareColumns({
+                columnDefs: [
+                    ...getMRT_DisplayColumns(tableOptions),
+                    ...tableOptions.columns,
+                ],
+                tableOptions,
+            });
+    columnDefsRef.current = tableOptions.columns;
+    tableOptions.data = useMemo(() => (tableOptions.state.isLoading || tableOptions.state.showSkeletons) &&
+        !tableOptions.data.length
+        ? [
+            ...Array(Math.min(tableOptions.state.pagination.pageSize, 20)).fill(null),
+        ].map(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => ({
+            [getColumnId(col)]: null,
+        }))))
+        : tableOptions.data, [
+        tableOptions.data,
+        tableOptions.state.isLoading,
+        tableOptions.state.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, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, onColumnOrderChange,
+        onColumnSizingInfoChange,
+        onGroupingChange,
+        onPaginationChange }, tableOptions), { globalFilterFn: (_u = tableOptions.filterFns) === null || _u === void 0 ? void 0 : _u[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'] }));
+    //@ts-ignore
+    table.refs = {
+        //@ts-ignore
+        bottomToolbarRef,
+        editInputRefs,
+        filterInputRefs,
+        //@ts-ignore
+        searchInputRef,
+        //@ts-ignore
+        tableContainerRef,
+        //@ts-ignore
+        tableFooterRef,
+        tableHeadCellRefs,
+        //@ts-ignore
+        tableHeadRef,
+        //@ts-ignore
+        tablePaperRef,
+        //@ts-ignore
+        topToolbarRef,
+    };
+    table.setCreatingRow = (row) => {
+        var _a, _b;
+        let _row = row;
+        if (row === true) {
+            _row = createRow(table);
+        }
+        (_b = (_a = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(tableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
+    };
+    table.setColumnFilterFns =
+        (_v = tableOptions.onColumnFilterFnsChange) !== null && _v !== void 0 ? _v : setColumnFilterFns;
+    table.setDensity = (_w = tableOptions.onDensityChange) !== null && _w !== void 0 ? _w : setDensity;
+    table.setDraggingColumn =
+        (_x = tableOptions.onDraggingColumnChange) !== null && _x !== void 0 ? _x : setDraggingColumn;
+    table.setDraggingRow = (_y = tableOptions.onDraggingRowChange) !== null && _y !== void 0 ? _y : setDraggingRow;
+    table.setEditingCell = (_z = tableOptions.onEditingCellChange) !== null && _z !== void 0 ? _z : setEditingCell;
+    table.setEditingRow = (_0 = tableOptions.onEditingRowChange) !== null && _0 !== void 0 ? _0 : setEditingRow;
+    table.setGlobalFilterFn =
+        (_1 = tableOptions.onGlobalFilterFnChange) !== null && _1 !== void 0 ? _1 : setGlobalFilterFn;
+    table.setHoveredColumn =
+        (_2 = tableOptions.onHoveredColumnChange) !== null && _2 !== void 0 ? _2 : setHoveredColumn;
+    table.setHoveredRow = (_3 = tableOptions.onHoveredRowChange) !== null && _3 !== void 0 ? _3 : setHoveredRow;
+    table.setIsFullScreen = (_4 = tableOptions.onIsFullScreenChange) !== null && _4 !== void 0 ? _4 : setIsFullScreen;
+    table.setShowAlertBanner =
+        (_5 = tableOptions.onShowAlertBannerChange) !== null && _5 !== void 0 ? _5 : setShowAlertBanner;
+    table.setShowColumnFilters =
+        (_6 = tableOptions.onShowColumnFiltersChange) !== null && _6 !== void 0 ? _6 : setShowColumnFilters;
+    table.setShowGlobalFilter =
+        (_7 = tableOptions.onShowGlobalFilterChange) !== null && _7 !== void 0 ? _7 : setShowGlobalFilter;
+    table.setShowToolbarDropZone =
+        (_8 = tableOptions.onShowToolbarDropZoneChange) !== null && _8 !== void 0 ? _8 : setShowToolbarDropZone;
+    useMRT_Effects(table);
+    return table;
+};
+
+const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
+
+const extraIndexRangeExtractor = (range, draggingIndex) => {
+    const newIndexes = defaultRangeExtractor(range);
+    if (draggingIndex === undefined)
+        return newIndexes;
+    if (draggingIndex >= 0 &&
+        draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
+        newIndexes.unshift(draggingIndex);
+    }
+    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
+        newIndexes.push(draggingIndex);
+    }
+    return newIndexes;
+};
+
+const useMRT_ColumnVirtualizer = (table) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, enableColumnPinning, enableColumnVirtualization, }, refs: { tableContainerRef }, } = table;
+    const { columnPinning, columnVisibility, draggingColumn } = getState();
+    const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, {
+        table,
+    });
+    const [leftPinnedIndexes, rightPinnedIndexes] = useMemo(() => enableColumnVirtualization && enableColumnPinning
+        ? [
+            table.getLeftLeafColumns().map((c) => c.getPinnedIndex()),
+            table
+                .getRightLeafColumns()
+                .map((c) => table.getVisibleLeafColumns().length - c.getPinnedIndex() - 1)
+                .sort((a, b) => a - b),
+        ]
+        : [[], []], [columnPinning, enableColumnVirtualization, enableColumnPinning]);
+    //get first 16 column widths and average them if calc is needed
+    const averageColumnWidth = useMemo(() => {
+        var _a, _b, _c, _d;
+        if (!enableColumnVirtualization || (columnVirtualizerProps === null || columnVirtualizerProps === void 0 ? void 0 : columnVirtualizerProps.estimateSize)) {
+            return 0;
         }
-        else {
-            table.setSorting(() => appliedSort.current || []);
+        const columnsWidths = (_d = (_c = (_b = (_a = table
+            .getRowModel()
+            .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 draggingColumnIndex = (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id)
+        ? table
+            .getVisibleLeafColumns()
+            .findIndex((c) => c.id === (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id))
+        : undefined;
+    const columnVirtualizer = enableColumnVirtualization
+        ? useVirtualizer(Object.assign({ count: table.getVisibleLeafColumns().length, estimateSize: () => averageColumnWidth, getScrollElement: () => tableContainerRef.current, horizontal: true, overscan: 3, rangeExtractor: useCallback((range) => {
+                const newIndexes = extraIndexRangeExtractor(range, draggingColumnIndex);
+                return [
+                    ...new Set([
+                        ...leftPinnedIndexes,
+                        ...newIndexes,
+                        ...rightPinnedIndexes,
+                    ]),
+                ];
+            }, [leftPinnedIndexes, rightPinnedIndexes, draggingColumnIndex]) }, columnVirtualizerProps))
+        : undefined;
+    if (columnVirtualizer) {
+        const virtualColumns = columnVirtualizer.getVirtualItems();
+        columnVirtualizer.virtualColumns = virtualColumns;
+        if (virtualColumns.length) {
+            columnVirtualizer.virtualPaddingLeft =
+                ((_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0) -
+                    ((_d = (_c = virtualColumns[leftPinnedIndexes.length - 1]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
+            columnVirtualizer.virtualPaddingRight =
+                columnVirtualizer.getTotalSize() -
+                    ((_f = (_e = virtualColumns[virtualColumns.length - rightPinnedIndexes.length - 1]) === null || _e === void 0 ? void 0 : _e.end) !== null && _f !== void 0 ? _f : 0) -
+                    (rightPinnedIndexes.length
+                        ? columnVirtualizer.getTotalSize() -
+                            ((_h = (_g = virtualColumns[virtualColumns.length - rightPinnedIndexes.length]) === null || _g === void 0 ? void 0 : _g.start) !== null && _h !== void 0 ? _h : 0)
+                        : 0);
         }
-    }, [globalFilter]);
-    useEffect(() => {
-        if (enableRowPinning && getIsSomeRowsPinned()) {
-            setTimeout(() => {
-                rerender();
-            }, 150);
+        if (columnVirtualizerInstanceRef) {
+            //@ts-ignore
+            columnVirtualizerInstanceRef.current = columnVirtualizer;
         }
-    }, [density]);
+    }
+    return columnVirtualizer;
 };
 
 const useMRT_RowVirtualizer = (table, rows) => {
@@ -1814,23 +1866,9 @@ const useMRT_RowVirtualizer = (table, rows) => {
     return rowVirtualizer;
 };
 
-const fuzzy$1 = (rowA, rowB, columnId) => {
-    let dir = 0;
-    if (rowA.columnFiltersMeta[columnId]) {
-        dir = compareItems(rowA.columnFiltersMeta[columnId], rowB.columnFiltersMeta[columnId]);
-    }
-    // Provide a fallback for when the item ranks are equal
-    return dir === 0
-        ? sortingFns.alphanumeric(rowA, rowB, columnId)
-        : dir;
-};
-const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy: fuzzy$1 });
-const rankGlobalFuzzy = (rowA, rowB) => Math.max(...Object.values(rowB.columnFiltersMeta).map((v) => v.rank)) -
-    Math.max(...Object.values(rowA.columnFiltersMeta).map((v) => v.rank));
-
 const useMRT_Rows = (table, pinnedRowIds = []) => {
-    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { enableGlobalFilterRankedResults, enablePagination, enableRowPinning, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, rowPinningDisplayMode, }, } = table;
-    const { expanded, globalFilter, pagination, rowPinning, sorting } = getState();
+    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enableGlobalFilterRankedResults, enablePagination, enableRowPinning, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, positionCreatingRow, rowPinningDisplayMode, }, } = table;
+    const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
     const shouldRankRows = useMemo(() => getCanRankRows(table) &&
         !Object.values(sorting).some(Boolean) &&
         globalFilter, [
@@ -1851,526 +1889,541 @@ const useMRT_Rows = (table, pinnedRowIds = []) => {
                     ? getRowModel().rows
                     : getCenterRows();
         }
-        else {
-            rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
-            if (enablePagination && !manualPagination) {
-                const start = pagination.pageIndex * pagination.pageSize;
-                rows = rows.slice(start, start + pagination.pageSize);
-            }
+        else {
+            rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
+            if (enablePagination && !manualPagination) {
+                const start = pagination.pageIndex * pagination.pageSize;
+                rows = rows.slice(start, start + pagination.pageSize);
+            }
+        }
+        if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
+            rows = [
+                ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+                ...rows,
+                ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
+            ];
+        }
+        if (positionCreatingRow !== undefined &&
+            creatingRow &&
+            createDisplayMode === 'row') {
+            const creatingRowIndex = !isNaN(+positionCreatingRow)
+                ? +positionCreatingRow
+                : positionCreatingRow === 'top'
+                    ? 0
+                    : rows.length;
+            rows = [
+                ...rows.slice(0, creatingRowIndex),
+                creatingRow,
+                ...rows.slice(creatingRowIndex),
+            ];
+        }
+        return rows;
+    }, [
+        creatingRow,
+        pagination.pageIndex,
+        pagination.pageSize,
+        positionCreatingRow,
+        rowPinning,
+        shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
+        shouldRankRows,
+    ]);
+    return rows;
+};
+
+const allowedTypes = ['string', 'number'];
+const MRT_TableBodyCellValue = ({ cell, rowRef, staticRowIndex, 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 &&
+        String(renderedCellValue) &&
+        allowedTypes.includes(typeof renderedCellValue) &&
+        ((filterValue &&
+            allowedTypes.includes(typeof filterValue) &&
+            ['autocomplete', 'text'].includes(columnDef.filterVariant)) ||
+            (globalFilter &&
+                allowedTypes.includes(typeof globalFilter) &&
+                column.getCanGlobalFilter()))) {
+        const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
+            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
+            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
+            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
+        });
+        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) => getMRTTheme(table, theme).matchHighlightColor,
+                            borderRadius: '2px',
+                            color: (theme) => theme.palette.mode === 'dark'
+                                ? theme.palette.common.white
+                                : theme.palette.common.black,
+                            padding: '2px 1px',
+                        }
+                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
+        }
+    }
+    if (columnDef.Cell && !isGroupedValue) {
+        renderedCellValue = columnDef.Cell({
+            cell,
+            column,
+            renderedCellValue,
+            row,
+            rowRef,
+            staticRowIndex,
+            table,
+        });
+    }
+    return renderedCellValue;
+};
+
+const MRT_CopyButton = (_a) => {
+    var _b;
+    var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
+    const { options: { localization, muiCopyButtonProps }, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const [copied, setCopied] = useState(false);
+    const handleCopy = (event, text) => {
+        event.stopPropagation();
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 4000);
+    };
+    const buttonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiCopyButtonProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), rest);
+    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps('top'), { title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) })));
+};
+
+const MRT_EditCellTextField = (_a) => {
+    var _b, _c;
+    var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
+    const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const { creatingRow, editingRow } = getState();
+    const { editSelectOptions } = columnDef;
+    const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
+    const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
+    const isSelectEdit = columnDef.editVariant === 'select';
+    const [value, setValue] = useState(() => cell.getValue());
+    const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), parseFromValuesOrFunc(columnDef.muiEditTextFieldProps, {
+        cell,
+        column,
+        row,
+        table,
+    })), rest);
+    const selectOptions = parseFromValuesOrFunc(editSelectOptions, {
+        cell,
+        column,
+        row,
+        table,
+    });
+    const saveInputValueToRowCache = (newValue) => {
+        //@ts-ignore
+        row._valuesCache[column.id] = newValue;
+        if (isCreating) {
+            setCreatingRow(row);
+        }
+        else if (isEditing) {
+            setEditingRow(row);
         }
-        if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
-            rows = [
-                ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
-                ...rows,
-                ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
-            ];
+    };
+    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);
         }
-        return rows;
-    }, [
-        shouldRankRows,
-        shouldRankRows ? getPrePaginationRowModel().rows : getRowModel().rows,
-        pagination.pageIndex,
-        pagination.pageSize,
-        rowPinning,
-    ]);
-    return rows;
+    };
+    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: (_b = columnDef.Edit) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, row, table }) });
+    }
+    return (jsx(TextField, Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
+            if (inputRef) {
+                editInputRefs.current[column.id] = inputRef;
+                if (textFieldProps.inputRef) {
+                    textFieldProps.inputRef = inputRef;
+                }
+            }
+        }, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
+            ? columnDef.header
+            : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
+            ? columnDef.header
+            : undefined, select: isSelectEdit, size: "small", value: value !== null && value !== void 0 ? value : '', variant: "standard" }, textFieldProps, { InputProps: Object.assign(Object.assign(Object.assign({}, (textFieldProps.variant !== 'outlined'
+            ? { disableUnderline: editDisplayMode === 'table' }
+            : {})), textFieldProps.InputProps), { sx: (theme) => {
+                var _a;
+                return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
+            } }), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, 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);
+        }, onKeyDown: handleEnterKeyDown, children: (_c = textFieldProps.children) !== null && _c !== void 0 ? _c : selectOptions === null || selectOptions === void 0 ? void 0 : selectOptions.map((option) => {
+            const { label, value } = getValueAndLabel(option);
+            return (jsx(MenuItem, { sx: {
+                    alignItems: 'center',
+                    display: 'flex',
+                    gap: '0.5rem',
+                    m: 0,
+                }, value: value, children: label }, value));
+        }) })));
 };
 
-const useMRT_TableInstance = (tableOptions) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
-    const bottomToolbarRef = useRef(null);
-    const editInputRefs = useRef({});
-    const filterInputRefs = useRef({});
-    const searchInputRef = useRef(null);
-    const tableContainerRef = useRef(null);
-    const tableHeadCellRefs = useRef({});
-    const tablePaperRef = useRef(null);
-    const topToolbarRef = useRef(null);
-    const tableHeadRef = useRef(null);
-    const tableFooterRef = useRef(null);
-    const initialState = useMemo(() => {
-        var _a, _b, _c;
-        const initState = (_a = tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
-        initState.columnOrder =
-            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(tableOptions);
-        initState.globalFilterFn = (_c = tableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
-        return initState;
-    }, []);
-    const [creatingRow, _setCreatingRow] = useState((_a = initialState.creatingRow) !== null && _a !== void 0 ? _a : null);
-    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => {
-        var _a, _b, _c, _d;
-        return ({
-            [getColumnId(col)]: col.filterFn instanceof Function
-                ? (_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom'
-                : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
-        });
-    })));
-    const [columnOrder, setColumnOrder] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
-    const [density, setDensity] = useState((_c = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _c !== void 0 ? _c : 'comfortable');
-    const [draggingColumn, setDraggingColumn] = useState((_d = initialState.draggingColumn) !== null && _d !== void 0 ? _d : null);
-    const [draggingRow, setDraggingRow] = useState((_e = initialState.draggingRow) !== null && _e !== void 0 ? _e : null);
-    const [editingCell, setEditingCell] = useState((_f = initialState.editingCell) !== null && _f !== void 0 ? _f : null);
-    const [editingRow, setEditingRow] = useState((_g = initialState.editingRow) !== null && _g !== void 0 ? _g : null);
-    const [globalFilterFn, setGlobalFilterFn] = useState((_h = initialState.globalFilterFn) !== null && _h !== void 0 ? _h : 'fuzzy');
-    const [grouping, setGrouping] = useState((_j = initialState.grouping) !== null && _j !== void 0 ? _j : []);
-    const [hoveredColumn, setHoveredColumn] = useState((_k = initialState.hoveredColumn) !== null && _k !== void 0 ? _k : null);
-    const [hoveredRow, setHoveredRow] = useState((_l = initialState.hoveredRow) !== null && _l !== void 0 ? _l : null);
-    const [isFullScreen, setIsFullScreen] = useState((_m = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _m !== void 0 ? _m : false);
-    const [showAlertBanner, setShowAlertBanner] = useState((_p = (_o = tableOptions.initialState) === null || _o === void 0 ? void 0 : _o.showAlertBanner) !== null && _p !== void 0 ? _p : false);
-    const [showColumnFilters, setShowColumnFilters] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _q !== void 0 ? _q : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _r !== void 0 ? _r : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _s !== void 0 ? _s : false);
-    const displayColumns = useMRT_DisplayColumns({
-        columnOrder,
-        creatingRow,
-        grouping,
-        tableOptions,
+const MRT_TableBodyCell = (_a) => {
+    var _b, _c, _d, _e, _f;
+    var { cell, measureElement, numRows, rowRef, staticRowIndex, table, virtualColumnIndex } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowRef", "staticRowIndex", "table", "virtualColumnIndex"]);
+    const theme = useTheme();
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
+    const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const args = { cell, column, row, table };
+    const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args)), rest);
+    const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
+        cell,
+        column,
+        row,
+        table,
     });
-    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;
+    const { draggingBorderColor } = getMRTTheme(table, theme);
+    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 = numRows && staticRowIndex === numRows - 1;
+        const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
+        const showResizeBorder = isResizingColumn && columnResizeMode === 'onChange';
+        const borderStyle = showResizeBorder
+            ? `2px solid ${draggingBorderColor} !important`
+            : isDraggingColumn || isDraggingRow
+                ? `1px dashed ${theme.palette.grey[500]} !important`
+                : isHoveredColumn || isHoveredRow || isResizingColumn
+                    ? `2px dashed ${draggingBorderColor} !important`
+                    : undefined;
+        if (showResizeBorder) {
+            return columnResizeDirection === 'ltr'
+                ? { borderRight: borderStyle }
+                : { borderLeft: borderStyle };
+        }
+        return borderStyle
+            ? {
+                borderBottom: isDraggingRow || isHoveredRow || (isLastRow && !isResizingColumn)
+                    ? borderStyle
+                    : undefined,
+                borderLeft: isDraggingColumn ||
+                    isHoveredColumn ||
+                    ((isDraggingRow || isHoveredRow) && isFirstColumn)
+                    ? borderStyle
+                    : undefined,
+                borderRight: isDraggingColumn ||
+                    isHoveredColumn ||
+                    ((isDraggingRow || isHoveredRow) && isLastColumn)
+                    ? borderStyle
+                    : undefined,
+                borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
+            }
+            : undefined;
     }, [
-        tableOptions.data,
-        (_u = tableOptions.state) === null || _u === void 0 ? void 0 : _u.isLoading,
-        (_v = tableOptions.state) === null || _v === void 0 ? void 0 : _v.showSkeletons,
+        columnSizingInfo.isResizingColumn,
+        draggingColumn,
+        draggingRow,
+        hoveredColumn,
+        hoveredRow,
+        staticRowIndex,
     ]);
-    //@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, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping }, 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({ columnFilterFns,
-            columnOrder,
-            creatingRow,
-            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,
-        // @ts-ignore
-        tableFooterRef,
-        tableHeadCellRefs,
-        // @ts-ignore
-        tableHeadRef,
-        // @ts-ignore
-        tablePaperRef,
-        // @ts-ignore
-        topToolbarRef,
+    const isEditable = !cell.getIsPlaceholder() &&
+        parseFromValuesOrFunc(enableEditing, row) &&
+        parseFromValuesOrFunc(columnDef.enableEditing, row) !== false;
+    const isEditing = isEditable &&
+        !['custom', 'modal'].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 setCreatingRow = (row) => {
-        var _a, _b;
-        let _row = row;
-        if (row === true) {
-            _row = createRow(table);
+    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);
         }
-        (_b = (_a = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(tableOptions, _row)) !== null && _b !== void 0 ? _b : _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 MRT_AggregationFns = Object.assign({}, aggregationFns);
-
-const fuzzy = (row, columnId, filterValue, addMeta) => {
-    const itemRank = rankItem(row.getValue(columnId), filterValue, {
-        threshold: rankings.MATCHES,
-    });
-    addMeta(itemRank);
-    return itemRank.passed;
-};
-fuzzy.autoRemove = (val) => !val;
-const contains = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .includes(filterValue.toString().toLowerCase().trim());
-contains.autoRemove = (val) => !val;
-const startsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .startsWith(filterValue.toString().toLowerCase().trim());
-startsWith.autoRemove = (val) => !val;
-const endsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .endsWith(filterValue.toString().toLowerCase().trim());
-endsWith.autoRemove = (val) => !val;
-const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
-    (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
-equals.autoRemove = (val) => !val;
-const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
-    filterValue.toString().toLowerCase().trim();
-notEquals.autoRemove = (val) => !val;
-const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) > +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() >
-        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
-greaterThan.autoRemove = (val) => !val;
-const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
-greaterThanOrEqualTo.autoRemove = (val) => !val;
-const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) < +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() <
-        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
-lessThan.autoRemove = (val) => !val;
-const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
-lessThanOrEqualTo.autoRemove = (val) => !val;
-const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
-    greaterThan(row, id, filterValues[0])) &&
-    ((!isNaN(+filterValues[0]) &&
-        !isNaN(+filterValues[1]) &&
-        +filterValues[0] > +filterValues[1]) ||
-        ['', undefined].includes(filterValues[1]) ||
-        lessThan(row, id, filterValues[1]));
-between.autoRemove = (val) => !val;
-const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
-    greaterThanOrEqualTo(row, id, filterValues[0])) &&
-    ((!isNaN(+filterValues[0]) &&
-        !isNaN(+filterValues[1]) &&
-        +filterValues[0] > +filterValues[1]) ||
-        ['', undefined].includes(filterValues[1]) ||
-        lessThanOrEqualTo(row, id, filterValues[1]));
-betweenInclusive.autoRemove = (val) => !val;
-const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
-empty.autoRemove = (val) => !val;
-const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
-notEmpty.autoRemove = (val) => !val;
-const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
-    betweenInclusive,
-    contains,
-    empty,
-    endsWith,
-    equals,
-    fuzzy,
-    greaterThan,
-    greaterThanOrEqualTo,
-    lessThan,
-    lessThanOrEqualTo,
-    notEmpty,
-    notEquals,
-    startsWith });
-
-const MRT_Default_Icons = {
-    ArrowDownwardIcon,
-    ArrowRightIcon,
-    CancelIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    ClearAllIcon,
-    CloseIcon,
-    DensityLargeIcon,
-    DensityMediumIcon,
-    DensitySmallIcon,
-    DragHandleIcon,
-    DynamicFeedIcon,
-    EditIcon,
-    ExpandMoreIcon,
-    FilterAltIcon,
-    FilterListIcon,
-    FilterListOffIcon,
-    FirstPageIcon,
-    FullscreenExitIcon,
-    FullscreenIcon,
-    KeyboardDoubleArrowDownIcon,
-    LastPageIcon,
-    MoreHorizIcon,
-    MoreVertIcon,
-    PushPinIcon,
-    RestartAltIcon,
-    SaveIcon,
-    SearchIcon,
-    SearchOffIcon,
-    SortIcon,
-    SyncAltIcon,
-    ViewColumnIcon,
-    VisibilityOffIcon,
-};
-
-const MRT_Localization_EN = {
-    actions: 'Actions',
-    and: 'and',
-    cancel: 'Cancel',
-    changeFilterMode: 'Change filter mode',
-    changeSearchMode: 'Change search mode',
-    clearFilter: 'Clear filter',
-    clearSearch: 'Clear search',
-    clearSort: 'Clear sort',
-    clickToCopy: 'Click to copy',
-    collapse: 'Collapse',
-    collapseAll: 'Collapse all',
-    columnActions: 'Column Actions',
-    copiedToClipboard: 'Copied to clipboard',
-    dropToGroupBy: 'Drop to group by {column}',
-    edit: 'Edit',
-    expand: 'Expand',
-    expandAll: 'Expand all',
-    filterArrIncludes: 'Includes',
-    filterArrIncludesAll: 'Includes all',
-    filterArrIncludesSome: 'Includes',
-    filterBetween: 'Between',
-    filterBetweenInclusive: 'Between Inclusive',
-    filterByColumn: 'Filter by {column}',
-    filterContains: 'Contains',
-    filterEmpty: 'Empty',
-    filterEndsWith: 'Ends With',
-    filterEquals: 'Equals',
-    filterEqualsString: 'Equals',
-    filterFuzzy: 'Fuzzy',
-    filterGreaterThan: 'Greater Than',
-    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
-    filterInNumberRange: 'Between',
-    filterIncludesString: 'Contains',
-    filterIncludesStringSensitive: 'Contains',
-    filterLessThan: 'Less Than',
-    filterLessThanOrEqualTo: 'Less Than Or Equal To',
-    filterMode: 'Filter Mode: {filterType}',
-    filterNotEmpty: 'Not Empty',
-    filterNotEquals: 'Not Equals',
-    filterStartsWith: 'Starts With',
-    filterWeakEquals: 'Equals',
-    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
-    goToFirstPage: 'Go to first page',
-    goToLastPage: 'Go to last page',
-    goToNextPage: 'Go to next page',
-    goToPreviousPage: 'Go to previous page',
-    grab: 'Grab',
-    groupByColumn: 'Group by {column}',
-    groupedBy: 'Grouped by ',
-    hideAll: 'Hide all',
-    hideColumn: 'Hide {column} column',
-    max: 'Max',
-    min: 'Min',
-    move: 'Move',
-    noRecordsToDisplay: 'No records to display',
-    noResultsFound: 'No results found',
-    of: 'of',
-    or: 'or',
-    pin: 'Pin',
-    pinToLeft: 'Pin to left',
-    pinToRight: 'Pin to right',
-    resetColumnSize: 'Reset column size',
-    resetOrder: 'Reset order',
-    rowActions: 'Row Actions',
-    rowNumber: '#',
-    rowNumbers: 'Row Numbers',
-    rowsPerPage: 'Rows per page',
-    save: 'Save',
-    search: 'Search',
-    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
-    select: 'Select',
-    showAll: 'Show all',
-    showAllColumns: 'Show all columns',
-    showHideColumns: 'Show/Hide columns',
-    showHideFilters: 'Show/Hide filters',
-    showHideSearch: 'Show/Hide search',
-    sortByColumnAsc: 'Sort by {column} ascending',
-    sortByColumnDesc: 'Sort by {column} descending',
-    sortedByColumnAsc: 'Sorted by {column} ascending',
-    sortedByColumnDesc: 'Sorted by {column} descending',
-    thenBy: ', then by ',
-    toggleDensity: 'Toggle density',
-    toggleFullScreen: 'Toggle full screen',
-    toggleSelectAll: 'Toggle select all',
-    toggleSelectRow: 'Toggle select row',
-    toggleVisibility: 'Toggle visibility',
-    ungroupByColumn: 'Ungroup by {column}',
-    unpin: 'Unpin',
-    unpinAll: 'Unpin all',
+    const cellValueProps = {
+        cell,
+        table,
+    };
+    return (jsx(TableCell, Object.assign({ align: theme.direction === 'rtl' ? 'right' : 'left', "data-index": virtualColumnIndex, ref: (node) => {
+            if (node) {
+                measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
+            }
+        } }, tableCellProps, { onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
+                outline: (editDisplayMode === 'cell' && isEditable) ||
+                    (editDisplayMode === 'table' && (isCreating || isEditing))
+                    ? `1px solid ${theme.palette.grey[500]}`
+                    : undefined,
+                outlineOffset: '-1px',
+                textOverflow: 'clip',
+            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('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', textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0 }, getCommonMRTCellStyles({
+            column,
+            table,
+            tableCellProps,
+            theme,
+        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : columnDefType === 'display' &&
+                    (['mrt-row-expand', 'mrt-row-numbers', 'mrt-row-select'].includes(column.id) ||
+                        !row.getIsGrouped()) ? ((_e = columnDef.Cell) === null || _e === void 0 ? void 0 : _e.call(columnDef, {
+                    cell,
+                    column,
+                    renderedCellValue: cell.renderValue(),
+                    row,
+                    rowRef,
+                    staticRowIndex,
+                    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, Object.assign({}, cellValueProps)) })) : (jsx(MRT_TableBodyCellValue, Object.assign({}, cellValueProps))), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
 };
+const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
-const MRT_DefaultColumn = {
-    filterVariant: 'text',
-    maxSize: 1000,
-    minSize: 40,
-    size: 180,
-};
-const MRT_DefaultDisplayColumn = {
-    columnDefType: 'display',
-    enableClickToCopy: false,
-    enableColumnActions: false,
-    enableColumnDragging: false,
-    enableColumnFilter: false,
-    enableColumnOrdering: false,
-    enableEditing: false,
-    enableGlobalFilter: false,
-    enableGrouping: false,
-    enableHiding: false,
-    enableResizing: false,
-    enableSorting: false,
+const MRT_TableDetailPanel = (_a) => {
+    var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
+    const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
+    const { isLoading } = getState();
+    const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+        isDetailPanel: true,
+        row,
+        staticRowIndex,
+        table,
+    });
+    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiDetailPanelProps, {
+        row,
+        table,
+    })), rest);
+    const DetailPanel = !isLoading && (renderDetailPanel === null || renderDetailPanel === void 0 ? void 0 : renderDetailPanel({ row, table }));
+    return (jsx(TableRow, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", "data-index": renderDetailPanel ? staticRowIndex * 2 + 1 : staticRowIndex, ref: (node) => {
+            var _a;
+            if (node) {
+                (_a = rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement) === null || _a === void 0 ? void 0 : _a.call(rowVirtualizer, node);
+            }
+        } }, tableRowProps, { sx: (theme) => {
+            var _a, _b;
+            return (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, 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%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
+        }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
+                    ? getMRTTheme(table, theme).baseBackgroundColor
+                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !enableRowVirtualization
+                    ? 'all 150ms ease-in-out'
+                    : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
 };
-const useMRT_TableOptions = (_a) => {
-    var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+
+const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow, }) => {
+    var _a, _b, _c, _d;
     const theme = useTheme();
-    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 (!columnResizeDirection) {
-        columnResizeDirection = theme.direction || 'ltr';
-    }
-    layoutMode =
-        layoutMode || (enableColumnResizing ? 'grid-no-grow' : 'semantic');
-    if (layoutMode === 'semantic' &&
-        (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,
-        columnResizeDirection,
-        columnResizeMode,
-        createDisplayMode, defaultColumn: _defaultColumn, defaultDisplayColumn: _defaultDisplayColumn, editDisplayMode,
-        enableBottomToolbar,
-        enableColumnActions,
-        enableColumnFilters,
-        enableColumnOrdering,
-        enableColumnPinning,
-        enableColumnResizing,
-        enableDensityToggle,
-        enableExpandAll,
-        enableExpanding,
-        enableFilterMatchHighlighting,
-        enableFilters,
-        enableFullScreenToggle,
-        enableGlobalFilter,
-        enableGlobalFilterRankedResults,
-        enableGrouping,
-        enableHiding,
-        enableMultiRowSelection,
-        enableMultiSort,
-        enablePagination,
-        enableRowPinning,
-        enableRowSelection,
-        enableSelectAll,
-        enableSorting,
-        enableStickyHeader,
-        enableTableFooter,
-        enableTableHead,
-        enableToolbarInternalActions,
-        enableTopToolbar, filterFns: _filterFns, icons: _icons, layoutMode, localization: _localization, manualFiltering,
-        manualGrouping,
-        manualPagination,
-        manualSorting,
-        paginationDisplayMode,
-        positionActionsColumn,
-        positionExpandColumn,
-        positionGlobalFilter,
-        positionPagination,
-        positionToolbarAlertBanner,
-        positionToolbarDropZone,
-        rowNumberDisplayMode,
-        rowPinningDisplayMode,
-        selectAllMode, sortingFns: _sortingFns }, rest);
+    const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
+    const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
+    const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
+    const isPinned = enableRowPinning && row.getIsPinned();
+    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 tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
+        row,
+        staticRowIndex,
+        table,
+    });
+    const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
+        if (!enableRowPinning ||
+            !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) ||
+            !pinnedRowIds ||
+            !row.getIsPinned())
+            return [];
+        return [
+            [...pinnedRowIds].reverse().indexOf(row.id),
+            pinnedRowIds.indexOf(row.id),
+        ];
+    }, [pinnedRowIds, rowPinning]);
+    const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
+        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
+        0;
+    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
+    const sx = parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme);
+    const defaultRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
+    const customRowHeight = 
+    // @ts-ignore
+    parseInt((_d = (_c = tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : sx === null || sx === void 0 ? void 0 : sx.height, 10) || undefined;
+    const rowHeight = customRowHeight || defaultRowHeight;
+    const handleDragEnter = (_e) => {
+        if (enableRowOrdering && draggingRow) {
+            setHoveredRow(row);
+        }
+    };
+    const rowRef = useRef(null);
+    const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
+    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": renderDetailPanel ? staticRowIndex * 2 : staticRowIndex, "data-pinned": !!isPinned || undefined, "data-selected": (row === null || row === void 0 ? void 0 : row.getIsSelected()) ||
+                    ((row === null || row === void 0 ? void 0 : row.getIsAllSubRowsSelected()) && row.getCanSelectSubRows()) ||
+                    undefined, onDragEnter: handleDragEnter, ref: (node) => {
+                    if (node) {
+                        rowRef.current = node;
+                        rowVirtualizer === null || rowVirtualizer === void 0 ? void 0 : rowVirtualizer.measureElement(node);
+                    }
+                }, selected: row.getIsSelected() }, tableRowProps, { style: Object.assign({ transform: virtualRow
+                        ? `translateY(${virtualRow.start}px)`
+                        : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td': {
+                        backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
+                            ? row.getIsSelected()
+                                ? `${alpha(selectedRowBackgroundColor, 0.3)}`
+                                : theme.palette.mode === 'dark'
+                                    ? `${lighten(baseBackgroundColor, 0.05)}`
+                                    : `${darken(baseBackgroundColor, 0.05)}`
+                            : undefined,
+                    }, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
+                        ? `${bottomPinnedIndex * rowHeight +
+                            (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
+                        : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1, position: virtualRow
+                        ? 'absolute'
+                        : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
+                            ? 'sticky'
+                            : undefined, td: {
+                        backgroundColor: row.getIsSelected()
+                            ? selectedRowBackgroundColor
+                            : isPinned
+                                ? pinnedRowBackgroundColor
+                                : undefined,
+                    }, top: virtualRow
+                        ? 0
+                        : topPinnedIndex !== undefined && isPinned
+                            ? `${topPinnedIndex * rowHeight +
+                                (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
+                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isPinned
+                        ? 2
+                        : undefined }, sx)), 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: !isDraggingRow && !isHoveredRow
+                                ? columnVirtualizer === null || columnVirtualizer === void 0 ? void 0 : columnVirtualizer.measureElement
+                                : undefined,
+                            numRows,
+                            rowRef,
+                            staticRowIndex,
+                            table,
+                            virtualColumnIndex: columnVirtualizer
+                                ? cellOrVirtualCell.index
+                                : undefined,
+                        };
+                        return cell ? (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))) : null;
+                    }), virtualPaddingRight ? (jsx("td", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })), renderDetailPanel && !row.getIsGrouped() && (jsx(MRT_TableDetailPanel, { parentRowRef: rowRef, row: row, rowVirtualizer: rowVirtualizer, staticRowIndex: staticRowIndex, table: table, virtualRow: virtualRow }))] }));
 };
+const Memo_MRT_TableBodyRow = memo(MRT_TableBodyRow, (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex);
 
 const MRT_TableBody = (_a) => {
     var _b, _c, _d, _e, _f, _g;
     var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
-    const { getBottomRows, getIsSomeRowsPinned, getRowModel, getState, getTopRows, options: { createDisplayMode, enableStickyFooter, enableStickyHeader, layoutMode, localization, memoMode, muiTableBodyProps, renderDetailPanel, renderEmptyRowsFallback, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
-    const { columnFilters, creatingRow, globalFilter, isFullScreen, rowPinning } = getState();
+    const { getBottomRows, getIsSomeRowsPinned, getRowModel, getState, getTopRows, options: { enableStickyFooter, enableStickyHeader, layoutMode, localization, memoMode, muiTableBodyProps, renderDetailPanel, renderEmptyRowsFallback, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
+    const { columnFilters, globalFilter, isFullScreen, rowPinning } = getState();
     const tableBodyProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyProps, { table })), rest);
     const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
         ((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
@@ -2392,53 +2445,52 @@ const MRT_TableBody = (_a) => {
         numRows: rows.length,
         table,
     };
-    const CreatingRow = creatingRow && createDisplayMode === 'row' && (jsx(MRT_TableBodyRow, Object.assign({}, commonRowProps, { row: creatingRow, staticRowIndex: -1 })));
     return (jsxs(Fragment, { children: [!(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
                 getIsSomeRowsPinned('top') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', top: tableHeadHeight - 1, zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getTopRows().map((row, staticRowIndex) => {
                     const props = Object.assign(Object.assign({}, commonRowProps), { row,
                         staticRowIndex });
                     return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
-                }) }))), rowVirtualizer && CreatingRow && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: CreatingRow }))), jsxs(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
+                }) }))), jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
                         ? `${rowVirtualizer.getTotalSize()}px`
-                        : undefined, minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [!rowVirtualizer && CreatingRow, (_d = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _d !== void 0 ? _d : (!rows.length && !CreatingRow ? (jsx("tr", { style: {
+                        : undefined, minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: (_d = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _d !== void 0 ? _d : (!rows.length ? (jsx("tr", { style: {
+                        display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+                    }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
                             display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
-                        }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
-                            }, children: (_e = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _e !== void 0 ? _e : (jsx(Typography, { sx: {
-                                    color: 'text.secondary',
-                                    fontStyle: 'italic',
-                                    maxWidth: `min(100vw, ${(_g = (_f = tablePaperRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) !== null && _g !== void 0 ? _g : 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, staticRowIndex) => {
-                            if (rowVirtualizer) {
-                                if (renderDetailPanel) {
-                                    if (rowOrVirtualRow.index % 2 === 1) {
-                                        return null;
-                                    }
-                                    else {
-                                        staticRowIndex = rowOrVirtualRow.index / 2;
-                                    }
+                        }, children: (_e = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _e !== void 0 ? _e : (jsx(Typography, { sx: {
+                                color: 'text.secondary',
+                                fontStyle: 'italic',
+                                maxWidth: `min(100vw, ${(_g = (_f = tablePaperRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) !== null && _g !== void 0 ? _g : 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, staticRowIndex) => {
+                        if (rowVirtualizer) {
+                            if (renderDetailPanel) {
+                                if (rowOrVirtualRow.index % 2 === 1) {
+                                    return null;
                                 }
                                 else {
-                                    staticRowIndex = rowOrVirtualRow.index;
+                                    staticRowIndex = rowOrVirtualRow.index / 2;
                                 }
                             }
-                            const row = rowVirtualizer
-                                ? rows[staticRowIndex]
-                                : rowOrVirtualRow;
-                            const props = Object.assign(Object.assign({}, commonRowProps), { pinnedRowIds,
-                                row,
-                                rowVirtualizer,
-                                staticRowIndex, virtualRow: rowVirtualizer
-                                    ? rowOrVirtualRow
-                                    : undefined });
-                            const key = `${row.id}-${row.index}`;
-                            return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), key)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), key));
-                        }) })))] })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
+                            else {
+                                staticRowIndex = rowOrVirtualRow.index;
+                            }
+                        }
+                        const row = rowVirtualizer
+                            ? rows[staticRowIndex]
+                            : rowOrVirtualRow;
+                        const props = Object.assign(Object.assign({}, commonRowProps), { pinnedRowIds,
+                            row,
+                            rowVirtualizer,
+                            staticRowIndex, virtualRow: rowVirtualizer
+                                ? rowOrVirtualRow
+                                : undefined });
+                        const key = `${row.id}-${row.index}`;
+                        return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), key)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), key));
+                    }) }))) })), !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) &&
                 getIsSomeRowsPinned('bottom') && (jsx(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ bottom: tableFooterHeight - 1, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'sticky', zIndex: 1 }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: getBottomRows().map((row, staticRowIndex) => {
                     const props = Object.assign(Object.assign({}, commonRowProps), { row,
                         staticRowIndex });
@@ -2542,9 +2594,9 @@ const MRT_TableHeadCellColumnActionsButton = (_a) => {
         column,
         table,
     })), rest);
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
+    return (jsxs(Fragment, { children: [jsx(Tooltip, Object.assign({}, getCommonTooltipProps('top'), { title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
                             opacity: 1,
-                        }, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } })) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
+                        }, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } })) })) })), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_FilterCheckbox = (_a) => {
@@ -2561,7 +2613,7 @@ const MRT_FilterCheckbox = (_a) => {
         table,
     })), rest);
     const filterLabel = (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', columnDef.header);
-    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: (_c = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, children: jsx(FormControlLabel, { control: jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', color: column.getFilterValue() === undefined ? 'default' : 'primary', indeterminate: column.getFilterValue() === undefined, size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onChange: (e, checked) => {
+    return (jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: (_c = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, children: jsx(FormControlLabel, { control: jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', color: column.getFilterValue() === undefined ? 'default' : 'primary', indeterminate: column.getFilterValue() === undefined, size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onChange: (e, checked) => {
                     var _a;
                     column.setFilterValue(column.getFilterValue() === undefined
                         ? 'true'
@@ -2573,7 +2625,7 @@ const MRT_FilterCheckbox = (_a) => {
                     var _a;
                     e.stopPropagation();
                     (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
-                }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))) })), disableTypography: true, label: (_d = checkboxProps.title) !== null && _d !== void 0 ? _d : filterLabel, sx: { color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }, title: undefined }) }));
+                }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))) })), disableTypography: true, label: (_d = checkboxProps.title) !== null && _d !== void 0 ? _d : filterLabel, sx: { color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }, title: undefined }) })));
 };
 
 const MRT_FilterTextField = (_a) => {
@@ -3229,116 +3281,6 @@ const MRT_TableHeadRow = (_a) => {
             }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
-const MRT_LinearProgressBar = (_a) => {
-    var { isTopToolbar, table } = _a, rest = __rest(_a, ["isTopToolbar", "table"]);
-    const { getState, options: { muiLinearProgressProps }, } = table;
-    const { isSaving, showProgressBars } = getState();
-    const linearProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiLinearProgressProps, {
-        isTopToolbar,
-        table,
-    })), rest);
-    return (jsx(Collapse, { in: showProgressBars !== false && (showProgressBars || isSaving), mountOnEnter: true, sx: {
-            bottom: isTopToolbar ? 0 : undefined,
-            position: 'absolute',
-            top: !isTopToolbar ? 0 : undefined,
-            width: '100%',
-        }, unmountOnExit: true, children: jsx(LinearProgress, Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
-};
-
-const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
-const MRT_TablePagination = (_a) => {
-    var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
-    const theme = useTheme();
-    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
-    const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
-    const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
-        table,
-    })), rest);
-    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
-    const numberOfPages = Math.ceil(totalRowCount / pageSize);
-    const showFirstLastPageButtons = numberOfPages > 2;
-    const firstRowIndex = pageIndex * pageSize;
-    const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
-    const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { SelectProps, disabled = false, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["SelectProps", "disabled", "rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
-    const disableBack = pageIndex <= 0 || disabled;
-    const disableNext = lastRowIndex >= totalRowCount || disabled;
-    return (jsxs(Box, { className: "MuiTablePagination-root", sx: {
-            alignItems: 'center',
-            display: 'flex',
-            flexWrap: 'wrap',
-            gap: '8px',
-            justifyContent: { md: 'space-between', sm: 'center' },
-            justifySelf: 'flex-end',
-            mt: position === 'top' &&
-                enableToolbarInternalActions &&
-                !showGlobalFilter
-                ? '3rem'
-                : undefined,
-            position: 'relative',
-            px: '8px',
-            py: '12px',
-            zIndex: 2,
-        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ disableUnderline: true, disabled: disabled, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
-                            var _a;
-                            const value = typeof option !== 'number' ? option.value : option;
-                            const label = typeof option !== 'number' ? option.label : `${option}`;
-                            return ((_a = SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.children) !== null && _a !== void 0 ? _a : ((SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) ? (jsx("option", { value: value, children: label }, value)) : (jsx(MenuItem, { sx: { m: 0 }, value: value, children: label }, value))));
-                        }) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
-                        first: FirstPageIcon,
-                        last: LastPageIcon,
-                        next: ChevronRightIcon,
-                        previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, { enterDelay: 1000, title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, { enterDelay: 1000, title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) }), jsx(Tooltip, { enterDelay: 1000, title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) }), showLastButton && (jsx(Tooltip, { enterDelay: 1000, title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))] })] })) : null] }));
-};
-
-const MRT_GlobalFilterTextField = (_a) => {
-    var _b;
-    var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, setGlobalFilter, } = table;
-    const { globalFilter, showGlobalFilter } = getState();
-    const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiSearchTextFieldProps, {
-        table,
-    })), rest);
-    const isMounted = useRef(false);
-    const [anchorEl, setAnchorEl] = useState(null);
-    const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
-    const handleChangeDebounced = useCallback(debounce((event) => {
-        var _a;
-        setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
-    }, manualFiltering ? 500 : 250), []);
-    const handleChange = (event) => {
-        setSearchValue(event.target.value);
-        handleChangeDebounced(event);
-    };
-    const handleGlobalFilterMenuOpen = (event) => {
-        setAnchorEl(event.currentTarget);
-    };
-    const handleClear = () => {
-        setSearchValue('');
-        setGlobalFilter(undefined);
-    };
-    useEffect(() => {
-        if (isMounted.current) {
-            if (globalFilter === undefined) {
-                handleClear();
-            }
-            else {
-                setSearchValue(globalFilter);
-            }
-        }
-        isMounted.current = true;
-    }, [globalFilter]);
-    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { InputProps: Object.assign(Object.assign({ endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
-                        var _a;
-                        return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
-                    } }), inputRef: (inputRef) => {
-                    searchInputRef.current = inputRef;
-                    if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
-                        textFieldProps.inputRef = inputRef;
-                    }
-                } })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, onSelect: handleClear, setAnchorEl: setAnchorEl, table: table })] }));
-};
-
 const MRT_ToolbarAlertBanner = (_a) => {
     var _b, _c, _d;
     var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
@@ -3382,6 +3324,212 @@ const MRT_ToolbarAlertBanner = (_a) => {
                                         positionToolbarAlertBanner === 'head-overlay' && (jsx(MRT_SelectCheckbox, { selectAll: true, table: table })), ' ', selectedAlert] }), selectedAlert && groupedAlert && jsx("br", {}), groupedAlert] })] })) })) }));
 };
 
+const MRT_TableHead = (_a) => {
+    var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
+    const { getHeaderGroups, getSelectedRowModel, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
+    const { isFullScreen, showAlertBanner } = getState();
+    const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
+    const stickyHeader = enableStickyHeader || isFullScreen;
+    return (jsx(TableHead, Object.assign({}, tableHeadProps, { ref: (ref) => {
+            tableHeadRef.current = ref;
+            if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
+                // @ts-ignore
+                tableHeadProps.ref.current = ref;
+            }
+        }, sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: positionToolbarAlertBanner === 'head-overlay' &&
+            (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (jsx("tr", { style: {
+                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+            }, children: jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
+                    display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+                    padding: 0,
+                }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
+};
+
+const MRT_Table = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getFlatHeaders, getState, options: { columns, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, } = table;
+    const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } = getState();
+    const tableProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableProps, { table })), rest);
+    const columnSizeVars = useMemo(() => {
+        const headers = getFlatHeaders();
+        const colSizes = {};
+        for (let i = 0; i < headers.length; i++) {
+            const header = headers[i];
+            const colSize = header.getSize();
+            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
+            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
+        }
+        return colSizes;
+    }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
+    const columnVirtualizer = useMRT_ColumnVirtualizer(table);
+    const commonTableGroupProps = {
+        columnVirtualizer,
+        table,
+    };
+    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
+};
+
+const MRT_TableLoadingOverlay = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { options: { localization, muiCircularProgressProps }, } = table;
+    const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
+    return (jsx(Box, { sx: (theme) => ({
+            alignItems: 'center',
+            backgroundColor: alpha(getMRTTheme(table, theme).baseBackgroundColor, 0.5),
+            bottom: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            left: 0,
+            maxHeight: '100vh',
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: '100%',
+            zIndex: 2,
+        }), children: jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) }));
+};
+
+const MRT_EditRowModal = (_a) => {
+    var _b;
+    var { open, table } = _a, rest = __rest(_a, ["open", "table"]);
+    const { getState, options: { localization, muiCreateRowModalProps, muiEditRowDialogProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowDialogContent, renderEditRowDialogContent, }, setCreatingRow, setEditingRow, } = table;
+    const { creatingRow, editingRow } = getState();
+    const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
+    const dialogProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowDialogProps, { row, table })), (creatingRow &&
+        parseFromValuesOrFunc(muiCreateRowModalProps, { row, table }))), rest);
+    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: (_b = ((creatingRow &&
+            (renderCreateRowDialogContent === null || renderCreateRowDialogContent === void 0 ? void 0 : renderCreateRowDialogContent({
+                internalEditComponents,
+                row,
+                table,
+            }))) ||
+            (renderEditRowDialogContent === null || renderEditRowDialogContent === void 0 ? void 0 : renderEditRowDialogContent({
+                internalEditComponents,
+                row,
+                table,
+            })))) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
+                                gap: '32px',
+                                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 = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
+    const { creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
+    const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
+    const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
+    const tableContainerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableContainerProps, {
+        table,
+    })), rest);
+    useIsomorphicLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        const topToolbarHeight = typeof document !== 'undefined'
+            ? (_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
+            : 0;
+        const bottomToolbarHeight = typeof document !== 'undefined'
+            ? (_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
+            : 0;
+        setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+    });
+    const createModalOpen = createDisplayMode === 'modal' && creatingRow;
+    const editModalOpen = editDisplayMode === 'modal' && editingRow;
+    return (jsxs(TableContainer, Object.assign({ "aria-busy": loading, "aria-describedby": loading ? 'mrt-progress' : undefined }, tableContainerProps, { ref: (node) => {
+            if (node) {
+                tableContainerRef.current = node;
+                if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
+                    //@ts-ignore
+                    tableContainerProps.ref.current = node;
+                }
+            }
+        }, style: Object.assign({ maxHeight: isFullScreen
+                ? `calc(100vh - ${totalToolbarHeight}px)`
+                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), sx: (theme) => (Object.assign({ maxHeight: enableStickyHeader
+                ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
+                : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
+};
+
+const MRT_LinearProgressBar = (_a) => {
+    var { isTopToolbar, table } = _a, rest = __rest(_a, ["isTopToolbar", "table"]);
+    const { getState, options: { muiLinearProgressProps }, } = table;
+    const { isSaving, showProgressBars } = getState();
+    const linearProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiLinearProgressProps, {
+        isTopToolbar,
+        table,
+    })), rest);
+    return (jsx(Collapse, { in: showProgressBars !== false && (showProgressBars || isSaving), mountOnEnter: true, sx: {
+            bottom: isTopToolbar ? 0 : undefined,
+            position: 'absolute',
+            top: !isTopToolbar ? 0 : undefined,
+            width: '100%',
+        }, unmountOnExit: true, children: jsx(LinearProgress, Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
+};
+
+const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
+const MRT_TablePagination = (_a) => {
+    var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
+    const theme = useTheme();
+    const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
+    const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
+    const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
+        table,
+    })), rest);
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
+    const numberOfPages = Math.ceil(totalRowCount / pageSize);
+    const showFirstLastPageButtons = numberOfPages > 2;
+    const firstRowIndex = pageIndex * pageSize;
+    const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
+    const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { SelectProps, disabled = false, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["SelectProps", "disabled", "rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
+    const disableBack = pageIndex <= 0 || disabled;
+    const disableNext = lastRowIndex >= totalRowCount || disabled;
+    const tooltipProps = getCommonTooltipProps();
+    return (jsxs(Box, { className: "MuiTablePagination-root", sx: {
+            alignItems: 'center',
+            display: 'flex',
+            flexWrap: 'wrap',
+            gap: '8px',
+            justifyContent: { md: 'space-between', sm: 'center' },
+            justifySelf: 'flex-end',
+            mt: position === 'top' &&
+                enableToolbarInternalActions &&
+                !showGlobalFilter
+                ? '3rem'
+                : undefined,
+            position: 'relative',
+            px: '8px',
+            py: '12px',
+            zIndex: 2,
+        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ disableUnderline: true, disabled: disabled, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
+                            var _a;
+                            const value = typeof option !== 'number' ? option.value : option;
+                            const label = typeof option !== 'number' ? option.label : `${option}`;
+                            return ((_a = SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.children) !== null && _a !== void 0 ? _a : ((SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) ? (jsx("option", { value: value, children: label }, value)) : (jsx(MenuItem, { sx: { m: 0 }, value: value, children: label }, value))));
+                        }) }))] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, disabled: disabled, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
+                        first: FirstPageIcon,
+                        last: LastPageIcon,
+                        next: ChevronRightIcon,
+                        previous: ChevronLeftIcon,
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
+};
+
 const MRT_ToolbarDropZone = (_a) => {
     var _b, _c;
     var { table } = _a, rest = __rest(_a, ["table"]);
@@ -3513,7 +3661,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
                                         opacity: columnDefType !== 'display' ? 1 : 0.5,
                                     },
                                 },
-                            }, control: jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility, children: jsx(Switch, {}) }), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
+                            }, control: jsx(Tooltip, Object.assign({}, getCommonTooltipProps(), { title: localization.toggleVisibility, children: jsx(Switch, {}) })), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
 };
 
 const MRT_ShowHideColumnsMenu = (_a) => {
@@ -3545,8 +3693,13 @@ const MRT_ShowHideColumnsMenu = (_a) => {
         getRightLeafColumns(),
     ]);
     const [hoveredColumn, setHoveredColumn] = useState(null);
+    const theme = useTheme();
+    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsxs(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
+            sx: {
+                backgroundColor: menuBackgroundColor,
+            },
         }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [jsxs(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
@@ -3631,6 +3784,54 @@ const MRT_ToolbarInternalButtons = (_a) => {
                     columnFilterDisplayMode !== 'popover' && (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_GlobalFilterTextField = (_a) => {
+    var _b;
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, setGlobalFilter, } = table;
+    const { globalFilter, showGlobalFilter } = getState();
+    const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiSearchTextFieldProps, {
+        table,
+    })), rest);
+    const isMounted = useRef(false);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
+    const handleChangeDebounced = useCallback(debounce((event) => {
+        var _a;
+        setGlobalFilter((_a = event.target.value) !== null && _a !== void 0 ? _a : undefined);
+    }, manualFiltering ? 500 : 250), []);
+    const handleChange = (event) => {
+        setSearchValue(event.target.value);
+        handleChangeDebounced(event);
+    };
+    const handleGlobalFilterMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClear = () => {
+        setSearchValue('');
+        setGlobalFilter(undefined);
+    };
+    useEffect(() => {
+        if (isMounted.current) {
+            if (globalFilter === undefined) {
+                handleClear();
+            }
+            else {
+                setSearchValue(globalFilter);
+            }
+        }
+        isMounted.current = true;
+    }, [globalFilter]);
+    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { InputProps: Object.assign(Object.assign({ endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
+                        var _a;
+                        return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
+                    } }), inputRef: (inputRef) => {
+                    searchInputRef.current = inputRef;
+                    if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
+                        textFieldProps.inputRef = inputRef;
+                    }
+                } })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, onSelect: handleClear, setAnchorEl: setAnchorEl, table: table })] }));
+};
+
 const MRT_TopToolbar = ({ table, }) => {
     var _a;
     const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
@@ -3677,149 +3878,6 @@ const MRT_TopToolbar = ({ table, }) => {
                 ['both', 'top'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { position: "top", table: table })), jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
 };
 
-const MRT_TableHead = (_a) => {
-    var { columnVirtualizer, table } = _a, rest = __rest(_a, ["columnVirtualizer", "table"]);
-    const { getHeaderGroups, getSelectedRowModel, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
-    const { isFullScreen, showAlertBanner } = getState();
-    const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
-    const stickyHeader = enableStickyHeader || isFullScreen;
-    return (jsx(TableHead, Object.assign({}, tableHeadProps, { ref: (ref) => {
-            tableHeadRef.current = ref;
-            if (tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.ref) {
-                // @ts-ignore
-                tableHeadProps.ref.current = ref;
-            }
-        }, sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, opacity: 0.97, position: stickyHeader ? 'sticky' : 'relative', top: stickyHeader && (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 0 : undefined, zIndex: stickyHeader ? 2 : undefined }, parseFromValuesOrFunc(tableHeadProps === null || tableHeadProps === void 0 ? void 0 : tableHeadProps.sx, theme))), children: positionToolbarAlertBanner === 'head-overlay' &&
-            (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (jsx("tr", { style: {
-                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
-            }, children: jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
-                    display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
-                    padding: 0,
-                }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { columnVirtualizer: columnVirtualizer, headerGroup: headerGroup, table: table }, headerGroup.id)))) })));
-};
-
-const MRT_Table = (_a) => {
-    var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getFlatHeaders, getState, options: { columns, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, } = table;
-    const { columnSizing, columnSizingInfo, columnVisibility, isFullScreen } = getState();
-    const tableProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableProps, { table })), rest);
-    const columnSizeVars = useMemo(() => {
-        const headers = getFlatHeaders();
-        const colSizes = {};
-        for (let i = 0; i < headers.length; i++) {
-            const header = headers[i];
-            const colSize = header.getSize();
-            colSizes[`--header-${parseCSSVarId(header.id)}-size`] = colSize;
-            colSizes[`--col-${parseCSSVarId(header.column.id)}-size`] = colSize;
-        }
-        return colSizes;
-    }, [columns, columnSizing, columnSizingInfo, columnVisibility]);
-    const columnVirtualizer = useMRT_ColumnVirtualizer(table);
-    const commonTableGroupProps = {
-        columnVirtualizer,
-        table,
-    };
-    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
-};
-
-const MRT_TableLoadingOverlay = (_a) => {
-    var { table } = _a, rest = __rest(_a, ["table"]);
-    const { options: { localization, muiCircularProgressProps }, } = table;
-    const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
-    return (jsx(Box, { sx: (theme) => ({
-            alignItems: 'center',
-            backgroundColor: alpha(getMRTTheme(table, theme).baseBackgroundColor, 0.5),
-            bottom: 0,
-            display: 'flex',
-            justifyContent: 'center',
-            left: 0,
-            maxHeight: '100vh',
-            position: 'absolute',
-            right: 0,
-            top: 0,
-            width: '100%',
-            zIndex: 2,
-        }), children: jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) }));
-};
-
-const MRT_EditRowModal = (_a) => {
-    var _b;
-    var { open, table } = _a, rest = __rest(_a, ["open", "table"]);
-    const { getState, options: { localization, muiCreateRowModalProps, muiEditRowDialogProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowDialogContent, renderEditRowDialogContent, }, setCreatingRow, setEditingRow, } = table;
-    const { creatingRow, editingRow } = getState();
-    const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
-    const dialogProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowDialogProps, { row, table })), (creatingRow &&
-        parseFromValuesOrFunc(muiCreateRowModalProps, { row, table }))), rest);
-    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: (_b = ((creatingRow &&
-            (renderCreateRowDialogContent === null || renderCreateRowDialogContent === void 0 ? void 0 : renderCreateRowDialogContent({
-                internalEditComponents,
-                row,
-                table,
-            }))) ||
-            (renderEditRowDialogContent === null || renderEditRowDialogContent === void 0 ? void 0 : renderEditRowDialogContent({
-                internalEditComponents,
-                row,
-                table,
-            })))) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
-                                gap: '32px',
-                                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 = (_a) => {
-    var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
-    const { creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
-    const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
-    const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
-    const tableContainerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableContainerProps, {
-        table,
-    })), rest);
-    useIsomorphicLayoutEffect(() => {
-        var _a, _b, _c, _d;
-        const topToolbarHeight = typeof document !== 'undefined'
-            ? (_b = (_a = topToolbarRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
-            : 0;
-        const bottomToolbarHeight = typeof document !== 'undefined'
-            ? (_d = (_c = bottomToolbarRef === null || bottomToolbarRef === void 0 ? void 0 : bottomToolbarRef.current) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
-            : 0;
-        setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
-    });
-    const createModalOpen = createDisplayMode === 'modal' && creatingRow;
-    const editModalOpen = editDisplayMode === 'modal' && editingRow;
-    return (jsxs(TableContainer, Object.assign({ "aria-busy": loading, "aria-describedby": loading ? 'mrt-progress' : undefined }, tableContainerProps, { ref: (node) => {
-            if (node) {
-                tableContainerRef.current = node;
-                if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
-                    //@ts-ignore
-                    tableContainerProps.ref.current = node;
-                }
-            }
-        }, style: Object.assign({ maxHeight: isFullScreen
-                ? `calc(100vh - ${totalToolbarHeight}px)`
-                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), sx: (theme) => (Object.assign({ maxHeight: enableStickyHeader
-                ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-                : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
-};
-
 const MRT_TablePaper = (_a) => {
     var _b, _c;
     var { table } = _a, rest = __rest(_a, ["table"]);
@@ -3852,8 +3910,6 @@ const MRT_TablePaper = (_a) => {
                 ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsx(MRT_BottomToolbar, { table: table })))] })));
 };
 
-const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
-
 const isTableInstanceProp = (props) => props.table !== undefined;
 const MaterialReactTable = (props) => {
     let table;
@@ -3866,5 +3922,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, 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, createMRTColumnHelper, createRow, extraIndexRangeExtractor, flexRender, flipIconStyles, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonMRTCellStyles, getCommonToolbarStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getMRTTheme, getTotalRight, getTrailingDisplayColumnIds, getValueAndLabel, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMRT_ColumnVirtualizer, useMRT_DisplayColumns, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, 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, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
 //# sourceMappingURL=index.esm.js.map