material-react-table 0.33.4 → 0.34.0

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

@@ -0,0 +1,2806 @@
+import React, { useMemo, useRef, useState, useCallback, Fragment, useEffect, useLayoutEffect } from 'react';
+import { aggregationFns, filterFns, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedRowModel, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
+import { ArrowRight, Cancel, CheckBox, ClearAll, Close, DensityLarge, DensityMedium, DensitySmall, DragHandle, DynamicFeed, Edit, ExpandLess, ExpandMore, FilterAlt, FilterAltOff, FilterList, FilterListOff, FullscreenExit, Fullscreen, KeyboardDoubleArrowDown, MoreHoriz, MoreVert, PushPin, RestartAlt, Save, Search, SearchOff, Sort, ViewColumn, VisibilityOff } from '@mui/icons-material';
+import { rankItem, rankings, compareItems } from '@tanstack/match-sorter-utils';
+import { Tooltip, IconButton, Menu, MenuItem, Box, FormControlLabel, Switch, Typography, Button, Divider, ListItemIcon, Checkbox, debounce, Collapse, TextField, InputAdornment, LinearProgress, TablePagination, Chip, Alert, AlertTitle, Fade, alpha, useMediaQuery, Toolbar, lighten, ListItemText, Grow, TableSortLabel, useTheme, TableCell, TableRow, TableHead, darken, Skeleton, TableBody, TableFooter, Table, TableContainer, Paper, Dialog } from '@mui/material';
+
+/******************************************************************************
+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;
+}
+
+const MRT_AggregationFns = Object.assign({}, aggregationFns);
+
+const MRT_Default_Icons = {
+    ArrowRightIcon: ArrowRight,
+    CancelIcon: Cancel,
+    CheckBoxIcon: CheckBox,
+    ClearAllIcon: ClearAll,
+    CloseIcon: Close,
+    DensityLargeIcon: DensityLarge,
+    DensityMediumIcon: DensityMedium,
+    DensitySmallIcon: DensitySmall,
+    DragHandleIcon: DragHandle,
+    DynamicFeedIcon: DynamicFeed,
+    EditIcon: Edit,
+    ExpandLessIcon: ExpandLess,
+    ExpandMoreIcon: ExpandMore,
+    FilterAltIcon: FilterAlt,
+    FilterAltOffIcon: FilterAltOff,
+    FilterListIcon: FilterList,
+    FilterListOffIcon: FilterListOff,
+    FullscreenExitIcon: FullscreenExit,
+    FullscreenIcon: Fullscreen,
+    KeyboardDoubleArrowDownIcon: KeyboardDoubleArrowDown,
+    MoreHorizIcon: MoreHoriz,
+    MoreVertIcon: MoreVert,
+    PushPinIcon: PushPin,
+    RestartAltIcon: RestartAlt,
+    SaveIcon: Save,
+    SearchIcon: Search,
+    SearchOffIcon: SearchOff,
+    SortIcon: Sort,
+    ViewColumnIcon: ViewColumn,
+    VisibilityOffIcon: VisibilityOff,
+};
+
+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.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.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.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 MRT_DefaultLocalization_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',
+    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}',
+    grab: 'Grab',
+    groupByColumn: 'Group by {column}',
+    groupedBy: 'Grouped by ',
+    hideAll: 'Hide all',
+    hideColumn: 'Hide {column} column',
+    max: 'Max',
+    min: 'Min',
+    move: 'Move',
+    or: 'or',
+    pinToLeft: 'Pin to left',
+    pinToRight: 'Pin to right',
+    resetColumnSize: 'Reset column size',
+    resetOrder: 'Reset order',
+    rowActions: 'Row Actions',
+    rowNumber: '#',
+    rowNumbers: 'Row Numbers',
+    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',
+    unsorted: 'Unsorted',
+};
+
+const fuzzy = (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 });
+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_ExpandAllButton = ({ table }) => {
+    const { getIsAllRowsExpanded, getIsSomeRowsExpanded, getCanSomeRowsExpand, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
+    const { density } = getState();
+    const iconButtonProps = muiExpandAllButtonProps instanceof Function
+        ? muiExpandAllButtonProps({ table })
+        : muiExpandAllButtonProps;
+    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expandAll },
+        React.createElement("span", null,
+            React.createElement(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: !getCanSomeRowsExpand() && !renderDetailPanel, onClick: () => toggleAllRowsExpanded(!getIsAllRowsExpanded()) }, iconButtonProps, { sx: Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined }, iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) }),
+                React.createElement(KeyboardDoubleArrowDownIcon, { style: {
+                        transform: `rotate(${getIsAllRowsExpanded()
+                            ? -180
+                            : getIsSomeRowsExpanded()
+                                ? -90
+                                : 0}deg)`,
+                        transition: 'transform 0.2s',
+                    } })))));
+};
+
+const MRT_ExpandButton = ({ row, table }) => {
+    const { getState, options: { icons: { ExpandMoreIcon }, localization, muiExpandButtonProps, renderDetailPanel, }, } = table;
+    const { density } = getState();
+    const iconButtonProps = muiExpandButtonProps instanceof Function
+        ? muiExpandButtonProps({ table, row })
+        : muiExpandButtonProps;
+    const handleToggleExpand = () => {
+        row.toggleExpanded();
+    };
+    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.expand },
+        React.createElement("span", null,
+            React.createElement(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !row.getCanExpand() && !renderDetailPanel, onClick: handleToggleExpand }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', width: density === 'compact' ? '1.75rem' : '2.25rem' }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+                    ? iconButtonProps.sx(theme)
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
+                React.createElement(ExpandMoreIcon, { style: {
+                        transform: `rotate(${!row.getCanExpand() && !renderDetailPanel
+                            ? -90
+                            : row.getIsExpanded()
+                                ? -180
+                                : 0}deg)`,
+                        transition: 'transform 0.2s',
+                    } })))));
+};
+
+const internalFilterOptions = (localization) => [
+    {
+        option: 'fuzzy',
+        symbol: '≈',
+        label: localization.filterFuzzy,
+        divider: false,
+    },
+    {
+        option: 'contains',
+        symbol: '*',
+        label: localization.filterContains,
+        divider: false,
+    },
+    {
+        option: 'startsWith',
+        symbol: 'a',
+        label: localization.filterStartsWith,
+        divider: false,
+    },
+    {
+        option: 'endsWith',
+        symbol: 'z',
+        label: localization.filterEndsWith,
+        divider: true,
+    },
+    {
+        option: 'equals',
+        symbol: '=',
+        label: localization.filterEquals,
+        divider: false,
+    },
+    {
+        option: 'notEquals',
+        symbol: '≠',
+        label: localization.filterNotEquals,
+        divider: true,
+    },
+    {
+        option: 'between',
+        symbol: '⇿',
+        label: localization.filterBetween,
+        divider: false,
+    },
+    {
+        option: 'betweenInclusive',
+        symbol: '⬌',
+        label: localization.filterBetweenInclusive,
+        divider: true,
+    },
+    {
+        option: 'greaterThan',
+        symbol: '>',
+        label: localization.filterGreaterThan,
+        divider: false,
+    },
+    {
+        option: 'greaterThanOrEqualTo',
+        symbol: '≥',
+        label: localization.filterGreaterThanOrEqualTo,
+        divider: false,
+    },
+    {
+        option: 'lessThan',
+        symbol: '<',
+        label: localization.filterLessThan,
+        divider: false,
+    },
+    {
+        option: 'lessThanOrEqualTo',
+        symbol: '≤',
+        label: localization.filterLessThanOrEqualTo,
+        divider: true,
+    },
+    {
+        option: 'empty',
+        symbol: '∅',
+        label: localization.filterEmpty,
+        divider: false,
+    },
+    {
+        option: 'notEmpty',
+        symbol: '!∅',
+        label: localization.filterNotEmpty,
+        divider: false,
+    },
+];
+const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, table, }) => {
+    var _a;
+    const { getState, options: { enabledGlobalFilterOptions, columnFilterModeOptions, localization, }, setColumnFilterFns, setGlobalFilterFn, } = table;
+    const { columnFilterFns, globalFilterFn, density } = getState();
+    const { column } = header !== null && header !== void 0 ? header : {};
+    const { columnDef } = column !== null && column !== void 0 ? column : {};
+    const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
+    const filterOptions = useMemo(() => internalFilterOptions(localization).filter((filterOption) => columnDef
+        ? allowedColumnFilterOptions === undefined ||
+            (allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.includes(filterOption.option))
+        : (!enabledGlobalFilterOptions ||
+            enabledGlobalFilterOptions.includes(filterOption.option)) &&
+            ['fuzzy', 'contains'].includes(filterOption.option)), []);
+    const handleSelectFilterType = (option) => {
+        if (header && column) {
+            setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: option })));
+            if (['empty', 'notEmpty'].includes(option)) {
+                column.setFilterValue(' ');
+            }
+            else if (option === 'between') {
+                column.setFilterValue(['', '']);
+            }
+            else {
+                column.setFilterValue('');
+            }
+        }
+        else {
+            setGlobalFilterFn(option);
+        }
+        setAnchorEl(null);
+        onSelect === null || onSelect === void 0 ? void 0 : onSelect();
+    };
+    const filterOption = !!header ? columnFilterFns[header.id] : globalFilterFn;
+    return (React.createElement(Menu, { anchorEl: anchorEl, anchorOrigin: { vertical: 'center', horizontal: 'right' }, onClose: () => setAnchorEl(null), open: !!anchorEl, MenuListProps: {
+            dense: density === 'compact',
+        } }, filterOptions.map(({ option, label, divider, symbol }, index) => (React.createElement(MenuItem, { divider: divider, key: index, onClick: () => handleSelectFilterType(option), selected: option === filterOption, sx: {
+            py: '6px',
+            my: 0,
+            alignItems: 'center',
+            display: 'flex',
+            gap: '2ch',
+        }, value: option },
+        React.createElement(Box, { sx: { fontSize: '1.25rem', width: '2ch' } }, symbol),
+        label)))));
+};
+
+const MRT_ColumnPinningButtons = ({ column, table, }) => {
+    const { options: { icons: { PushPinIcon }, localization, }, } = table;
+    const handlePinColumn = (pinDirection) => {
+        column.pin(pinDirection);
+    };
+    return (React.createElement(Box, { sx: { minWidth: '70px', textAlign: 'center' } }, column.getIsPinned() ? (React.createElement(Tooltip, { arrow: true, title: localization.unpin },
+        React.createElement(IconButton, { onClick: () => handlePinColumn(false), size: "small" },
+            React.createElement(PushPinIcon, null)))) : (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { arrow: true, title: localization.pinToLeft },
+            React.createElement(IconButton, { onClick: () => handlePinColumn('left'), size: "small" },
+                React.createElement(PushPinIcon, { style: {
+                        transform: 'rotate(90deg)',
+                    } }))),
+        React.createElement(Tooltip, { arrow: true, title: localization.pinToRight },
+            React.createElement(IconButton, { onClick: () => handlePinColumn('right'), size: "small" },
+                React.createElement(PushPinIcon, { style: {
+                        transform: 'rotate(-90deg)',
+                    } })))))));
+};
+
+const MRT_GrabHandleButton = ({ iconButtonProps, onDragEnd, onDragStart, table, }) => {
+    const { options: { icons: { DragHandleIcon }, localization, }, } = table;
+    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.move },
+        React.createElement(IconButton, Object.assign({ disableRipple: true, draggable: "true", onDragStart: onDragStart, onDragEnd: onDragEnd, size: "small" }, iconButtonProps, { sx: Object.assign({ cursor: 'grab', m: 0, opacity: 0.5, p: '2px', transition: 'all 0.2s ease-in-out', '&:hover': {
+                    backgroundColor: 'transparent',
+                    opacity: 1,
+                }, '&:active': {
+                    cursor: 'grabbing',
+                } }, iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) }),
+            React.createElement(DragHandleIcon, null))));
+};
+
+const defaultDisplayColumnDefOptions = {
+    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 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) => {
+    let lowestLevelColumns = columns;
+    let currentCols = columns;
+    while (!!(currentCols === null || currentCols === void 0 ? void 0 : currentCols.length) && currentCols.some((col) => col.columns)) {
+        const nextCols = currentCols
+            .filter((col) => !!col.columns)
+            .map((col) => col.columns)
+            .flat();
+        if (nextCols.every((col) => !(col === null || col === void 0 ? void 0 : col.columns))) {
+            lowestLevelColumns = [...lowestLevelColumns, ...nextCols];
+        }
+        currentCols = nextCols;
+    }
+    return lowestLevelColumns.filter((col) => !col.columns);
+};
+const prepareColumns = (columnDefs, columnFilterFns, filterFns, sortingFns) => columnDefs.map((columnDef) => {
+    var _a, _b;
+    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');
+    }
+    if (!columnDef.columnDefType)
+        columnDef.columnDefType = 'data';
+    if (!!((_a = columnDef.columns) === null || _a === void 0 ? void 0 : _a.length)) {
+        columnDef.columnDefType = 'group';
+        columnDef.columns = prepareColumns(columnDef.columns, columnFilterFns, filterFns, sortingFns);
+    }
+    else if (columnDef.columnDefType === 'data') {
+        if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
+            columnDef.filterFn =
+                // @ts-ignore
+                (_b = filterFns[columnFilterFns[columnDef.id]]) !== null && _b !== void 0 ? _b : filterFns.fuzzy;
+            //@ts-ignore
+            columnDef._filterFn = columnFilterFns[columnDef.id];
+        }
+        if (Object.keys(sortingFns).includes(columnDef.sortingFn)) {
+            // @ts-ignore
+            columnDef.sortingFn = sortingFns[columnDef.sortingFn];
+        }
+    }
+    else if (columnDef.columnDefType === 'display') {
+        columnDef = Object.assign(Object.assign({}, defaultDisplayColumnDefOptions), columnDef);
+    }
+    return columnDef;
+});
+const reorderColumn = (draggedColumn, targetColumn, columnOrder) => {
+    if (draggedColumn.getCanPin()) {
+        draggedColumn.pin(targetColumn.getIsPinned());
+    }
+    columnOrder.splice(columnOrder.indexOf(targetColumn.id), 0, columnOrder.splice(columnOrder.indexOf(draggedColumn.id), 1)[0]);
+    return [...columnOrder];
+};
+const getLeadingDisplayColumnIds = (props) => [
+    (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
+    ((props.positionActionsColumn === 'first' && props.enableRowActions) ||
+        (props.enableEditing && props.editingMode === 'row')) &&
+        'mrt-row-actions',
+    props.positionExpandColumn === 'first' &&
+        (props.enableExpanding ||
+            props.enableGrouping ||
+            props.renderDetailPanel) &&
+        'mrt-row-expand',
+    props.enableRowSelection && 'mrt-row-select',
+    props.enableRowNumbers && 'mrt-row-numbers',
+].filter(Boolean);
+const getTrailingDisplayColumnIds = (props) => [
+    ((props.positionActionsColumn === 'last' && props.enableRowActions) ||
+        (props.enableEditing && props.editingMode === 'row')) &&
+        'mrt-row-actions',
+    props.positionExpandColumn === 'last' &&
+        (props.enableExpanding ||
+            props.enableGrouping ||
+            props.renderDetailPanel) &&
+        'mrt-row-expand',
+];
+const getDefaultColumnOrderIds = (props) => [
+    ...getLeadingDisplayColumnIds(props),
+    ...getAllLeafColumnDefs(props.columns).map((columnDef) => getColumnId(columnDef)),
+    ...getTrailingDisplayColumnIds(props),
+].filter(Boolean);
+const getDefaultColumnFilterFn = (columnDef) => {
+    if (columnDef.filterVariant === 'multi-select')
+        return 'arrIncludesSome';
+    if (columnDef.filterVariant === 'select')
+        return 'equals';
+    if (columnDef.filterVariant === 'range')
+        return 'betweenInclusive';
+    return 'fuzzy';
+};
+
+const MRT_ShowHideColumnsMenuItems = ({ allColumns, currentHoveredColumn, setCurrentHoveredColumn, column, isSubMenu, table, }) => {
+    var _a;
+    const { getState, options: { enableColumnOrdering, enableHiding, enablePinning, localization, }, setColumnOrder, } = table;
+    const { columnOrder } = getState();
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const switchChecked = (columnDefType !== 'group' && column.getIsVisible()) ||
+        (columnDefType === 'group' &&
+            column.getLeafColumns().some((col) => col.getIsVisible()));
+    const handleToggleColumnHidden = (column) => {
+        var _a, _b;
+        if (columnDefType === 'group') {
+            (_b = (_a = column === null || column === void 0 ? void 0 : column.columns) === null || _a === void 0 ? void 0 : _a.forEach) === null || _b === void 0 ? void 0 : _b.call(_a, (childColumn) => {
+                childColumn.toggleVisibility(!switchChecked);
+            });
+        }
+        else {
+            column.toggleVisibility();
+        }
+    };
+    const menuItemRef = useRef(null);
+    const [isDragging, setIsDragging] = useState(false);
+    const handleDragStart = (e) => {
+        setIsDragging(true);
+        e.dataTransfer.setDragImage(menuItemRef.current, 0, 0);
+    };
+    const handleDragEnd = (_e) => {
+        setIsDragging(false);
+        setCurrentHoveredColumn(null);
+        if (currentHoveredColumn) {
+            setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+        }
+    };
+    const handleDragEnter = (_e) => {
+        if (!isDragging) {
+            setCurrentHoveredColumn(column);
+        }
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(MenuItem, { disableRipple: true, ref: menuItemRef, onDragEnter: handleDragEnter, sx: (theme) => ({
+                alignItems: 'center',
+                justifyContent: 'flex-start',
+                my: 0,
+                opacity: isDragging ? 0.5 : 1,
+                outline: isDragging
+                    ? `1px dashed ${theme.palette.divider}`
+                    : (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+                        ? `2px dashed ${theme.palette.primary.main}`
+                        : 'none',
+                pl: `${(column.depth + 0.5) * 2}rem`,
+                py: '6px',
+            }) },
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    flexWrap: 'nowrap',
+                    gap: '8px',
+                } },
+                !isSubMenu &&
+                    columnDefType !== 'group' &&
+                    enableColumnOrdering &&
+                    !allColumns.some((col) => col.columnDef.columnDefType === 'group') &&
+                    (columnDef.enableColumnOrdering !== false ? (React.createElement(MRT_GrabHandleButton, { onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table })) : (React.createElement(Box, { sx: { width: '28px' } }))),
+                !isSubMenu &&
+                    enablePinning &&
+                    (column.getCanPin() ? (React.createElement(MRT_ColumnPinningButtons, { column: column, table: table })) : (React.createElement(Box, { sx: { width: '70px' } }))),
+                enableHiding ? (React.createElement(FormControlLabel, { componentsProps: {
+                        typography: {
+                            sx: {
+                                mb: 0,
+                                opacity: columnDefType !== 'display' ? 1 : 0.5,
+                            },
+                        },
+                    }, checked: switchChecked, control: React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility },
+                        React.createElement(Switch, null)), disabled: (isSubMenu && switchChecked) ||
+                        !column.getCanHide() ||
+                        column.getIsGrouped(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (React.createElement(Typography, { sx: { alignSelf: 'center' } }, columnDef.header)))), (_a = column.columns) === null || _a === void 0 ? void 0 :
+        _a.map((c, i) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, currentHoveredColumn: currentHoveredColumn, isSubMenu: isSubMenu, key: `${i}-${c.id}`, setCurrentHoveredColumn: setCurrentHoveredColumn, table: table })))));
+};
+
+const MRT_ShowHideColumnsMenu = ({ anchorEl, isSubMenu, setAnchorEl, table, }) => {
+    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, toggleAllColumnsVisible, options: { localization, enablePinning, enableColumnOrdering }, } = table;
+    const { density, columnOrder, columnPinning } = getState();
+    const hideAllColumns = () => {
+        getAllLeafColumns()
+            .filter((col) => col.columnDef.enableHiding !== false)
+            .forEach((col) => col.toggleVisibility(false));
+    };
+    const allColumns = useMemo(() => {
+        const columns = getAllColumns();
+        if (columnOrder.length > 0 &&
+            !columns.some((col) => col.columnDef.columnDefType === 'group')) {
+            return [
+                ...getLeftLeafColumns(),
+                ...Array.from(new Set(columnOrder)).map((colId) => getCenterLeafColumns().find((col) => (col === null || col === void 0 ? void 0 : col.id) === colId)),
+                ...getRightLeafColumns(),
+            ].filter(Boolean);
+        }
+        return columns;
+    }, [
+        columnOrder,
+        columnPinning,
+        getAllColumns(),
+        getCenterLeafColumns(),
+        getLeftLeafColumns(),
+        getRightLeafColumns(),
+    ]);
+    const [currentHoveredColumn, setCurrentHoveredColumn] = useState(null);
+    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+            dense: density === 'compact',
+        } },
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                justifyContent: isSubMenu ? 'center' : 'space-between',
+                p: '0.5rem',
+                pt: 0,
+            } },
+            !isSubMenu && (React.createElement(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns }, localization.hideAll)),
+            !isSubMenu && enableColumnOrdering && (React.createElement(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)) }, localization.resetOrder)),
+            !isSubMenu && enablePinning && (React.createElement(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true) }, localization.unpinAll)),
+            React.createElement(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true) }, localization.showAll)),
+        React.createElement(Divider, null),
+        allColumns.map((column, index) => (React.createElement(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, currentHoveredColumn: currentHoveredColumn, isSubMenu: isSubMenu, key: `${index}-${column.id}`, setCurrentHoveredColumn: setCurrentHoveredColumn, table: table })))));
+};
+
+const commonMenuItemStyles = {
+    py: '6px',
+    my: 0,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+};
+const commonListItemStyles = {
+    display: 'flex',
+    alignItems: 'center',
+};
+const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const { getState, toggleAllColumnsVisible, setColumnOrder, options: { enableColumnFilterChangeMode, enableColumnFilters, enableColumnResizing, enableGrouping, enableHiding, enablePinning, enableSorting, columnFilterModeOptions, icons: { ArrowRightIcon, ClearAllIcon, ViewColumnIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, SortIcon, RestartAltIcon, VisibilityOffIcon, }, tableId, localization, }, setShowFilters, } = table;
+    const { column } = header;
+    const { columnDef } = column;
+    const { columnSizing, columnVisibility, density } = getState();
+    const [filterMenuAnchorEl, setFilterMenuAnchorEl] = useState(null);
+    const [showHideColumnsMenuAnchorEl, setShowHideColumnsMenuAnchorEl] = useState(null);
+    const handleClearSort = () => {
+        column.clearSorting();
+        setAnchorEl(null);
+    };
+    const handleSortAsc = () => {
+        column.toggleSorting(false);
+        setAnchorEl(null);
+    };
+    const handleSortDesc = () => {
+        column.toggleSorting(true);
+        setAnchorEl(null);
+    };
+    const handleResetColumnSize = () => {
+        column.resetSize();
+        setAnchorEl(null);
+    };
+    const handleHideColumn = () => {
+        column.toggleVisibility(false);
+        setAnchorEl(null);
+    };
+    const handlePinColumn = (pinDirection) => {
+        column.pin(pinDirection);
+        setAnchorEl(null);
+    };
+    const handleGroupByColumn = () => {
+        column.toggleGrouping();
+        setColumnOrder((old) => ['mrt-row-expand', ...old]);
+        setAnchorEl(null);
+    };
+    const handleClearFilter = () => {
+        column.setFilterValue('');
+        setAnchorEl(null);
+    };
+    const handleFilterByColumn = () => {
+        setShowFilters(true);
+        setTimeout(() => {
+            var _a, _b, _c;
+            return (_c = document
+                .getElementById(
+            // @ts-ignore
+            (_b = (_a = header.muiTableHeadCellFilterTextFieldProps) === null || _a === void 0 ? void 0 : _a.id) !== null && _b !== void 0 ? _b : `mrt-${tableId}-${header.id}-filter-text-field`)) === null || _c === void 0 ? void 0 : _c.focus();
+        }, 200);
+        setAnchorEl(null);
+    };
+    const handleShowAllColumns = () => {
+        toggleAllColumnsVisible(true);
+        setAnchorEl(null);
+    };
+    const handleOpenFilterModeMenu = (event) => {
+        event.stopPropagation();
+        setFilterMenuAnchorEl(event.currentTarget);
+    };
+    const handleOpenShowHideColumnsMenu = (event) => {
+        event.stopPropagation();
+        setShowHideColumnsMenuAnchorEl(event.currentTarget);
+    };
+    const isSelectFilter = !!columnDef.filterSelectOptions;
+    const allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
+    const showFilterModeSubMenu = enableColumnFilterChangeMode &&
+        columnDef.enableColumnFilterChangeMode !== false &&
+        !isSelectFilter &&
+        (allowedColumnFilterOptions === undefined ||
+            !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
+    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+            dense: density === 'compact',
+        } },
+        enableSorting &&
+            column.getCanSort() && [
+            React.createElement(MenuItem, { disabled: !column.getIsSorted(), key: 0, onClick: handleClearSort, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(ClearAllIcon, null)),
+                    localization.clearSort)),
+            React.createElement(MenuItem, { disabled: column.getIsSorted() === 'asc', key: 1, onClick: handleSortAsc, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } })), (_b = localization.sortByColumnAsc) === null || _b === void 0 ? void 0 :
+                    _b.replace('{column}', String(columnDef.header)))),
+            React.createElement(MenuItem, { divider: enableColumnFilters || enableGrouping || enableHiding, key: 2, disabled: column.getIsSorted() === 'desc', onClick: handleSortDesc, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(SortIcon, null)), (_c = localization.sortByColumnDesc) === null || _c === void 0 ? void 0 :
+                    _c.replace('{column}', String(columnDef.header)))),
+        ],
+        enableColumnFilters &&
+            column.getCanFilter() &&
+            [
+                React.createElement(MenuItem, { disabled: !column.getFilterValue(), key: 0, onClick: handleClearFilter, sx: commonMenuItemStyles },
+                    React.createElement(Box, { sx: commonListItemStyles },
+                        React.createElement(ListItemIcon, null,
+                            React.createElement(FilterListOffIcon, null)),
+                        localization.clearFilter)),
+                React.createElement(MenuItem, { divider: enableGrouping || enableHiding, key: 1, onClick: handleFilterByColumn, sx: commonMenuItemStyles },
+                    React.createElement(Box, { sx: commonListItemStyles },
+                        React.createElement(ListItemIcon, null,
+                            React.createElement(FilterListIcon, null)), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 :
+                        _d.replace('{column}', String(columnDef.header))),
+                    showFilterModeSubMenu && (React.createElement(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 } },
+                        React.createElement(ArrowRightIcon, null)))),
+                showFilterModeSubMenu && (React.createElement(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, key: 2, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table })),
+            ].filter(Boolean),
+        enableGrouping &&
+            column.getCanGroup() && [
+            React.createElement(MenuItem, { divider: enablePinning, key: 0, onClick: handleGroupByColumn, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(DynamicFeedIcon, null)), (_e = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _e === void 0 ? void 0 :
+                    _e.replace('{column}', String(columnDef.header)))),
+        ],
+        enablePinning &&
+            column.getCanPin() && [
+            React.createElement(MenuItem, { disabled: column.getIsPinned() === 'left' || !column.getCanPin(), key: 0, onClick: () => handlePinColumn('left'), sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(PushPinIcon, { style: { transform: 'rotate(90deg)' } })),
+                    localization.pinToLeft)),
+            React.createElement(MenuItem, { disabled: column.getIsPinned() === 'right' || !column.getCanPin(), key: 1, onClick: () => handlePinColumn('right'), sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(PushPinIcon, { style: { transform: 'rotate(-90deg)' } })),
+                    localization.pinToRight)),
+            React.createElement(MenuItem, { disabled: !column.getIsPinned(), divider: enableHiding, key: 2, onClick: () => handlePinColumn(false), sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(PushPinIcon, null)),
+                    localization.unpin)),
+        ],
+        enableColumnResizing &&
+            column.getCanResize() && [
+            React.createElement(MenuItem, { disabled: !columnSizing[column.id], key: 0, onClick: handleResetColumnSize, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(RestartAltIcon, null)),
+                    localization.resetColumnSize)),
+        ],
+        enableHiding && [
+            React.createElement(MenuItem, { disabled: columnDef.enableHiding === false, key: 0, onClick: handleHideColumn, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(VisibilityOffIcon, null)), (_f = localization.hideColumn) === null || _f === void 0 ? void 0 :
+                    _f.replace('{column}', String(columnDef.header)))),
+            React.createElement(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
+                    .length, key: 1, onClick: handleShowAllColumns, sx: commonMenuItemStyles },
+                React.createElement(Box, { sx: commonListItemStyles },
+                    React.createElement(ListItemIcon, null,
+                        React.createElement(ViewColumnIcon, null)), (_g = localization.showAllColumns) === null || _g === void 0 ? void 0 :
+                    _g.replace('{column}', String(columnDef.header))),
+                React.createElement(IconButton, { onClick: handleOpenShowHideColumnsMenu, onMouseEnter: handleOpenShowHideColumnsMenu, size: "small", sx: { p: 0 } },
+                    React.createElement(ArrowRightIcon, null))),
+            React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: showHideColumnsMenuAnchorEl, isSubMenu: true, key: 2, setAnchorEl: setShowHideColumnsMenuAnchorEl, table: table }),
+        ]));
+};
+
+const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
+    const { getState, options: { icons: { EditIcon }, enableEditing, localization, renderRowActionMenuItems, }, } = table;
+    const { density } = getState();
+    return (React.createElement(Menu, { anchorEl: anchorEl, open: !!anchorEl, onClose: () => setAnchorEl(null), MenuListProps: {
+            dense: density === 'compact',
+        } },
+        enableEditing && (React.createElement(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles },
+            React.createElement(Box, { sx: commonListItemStyles },
+                React.createElement(ListItemIcon, null,
+                    React.createElement(EditIcon, null)),
+                localization.edit))), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 :
+        renderRowActionMenuItems({
+            row,
+            table,
+            closeMenu: () => setAnchorEl(null),
+        })));
+};
+
+const MRT_EditActionButtons = ({ row, table }) => {
+    const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onEditRowSubmit, }, setCurrentEditingRow, } = table;
+    const { currentEditingRow } = getState();
+    const handleCancel = () => {
+        var _a;
+        row._valuesCache = (_a = row.original) !== null && _a !== void 0 ? _a : {};
+        setCurrentEditingRow(null);
+    };
+    const handleSave = () => {
+        onEditRowSubmit === null || onEditRowSubmit === void 0 ? void 0 : onEditRowSubmit({ row: currentEditingRow !== null && currentEditingRow !== void 0 ? currentEditingRow : row, table });
+        setCurrentEditingRow(null);
+    };
+    return (React.createElement(Box, { sx: { display: 'flex', gap: '0.75rem' } },
+        React.createElement(Tooltip, { arrow: true, title: localization.cancel },
+            React.createElement(IconButton, { "aria-label": localization.cancel, onClick: handleCancel },
+                React.createElement(CancelIcon, null))),
+        React.createElement(Tooltip, { arrow: true, title: localization.save },
+            React.createElement(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSave },
+                React.createElement(SaveIcon, null)))));
+};
+
+const commonIconButtonStyles = {
+    height: '2rem',
+    ml: '10px',
+    opacity: 0.5,
+    transition: 'opacity 0.2s',
+    width: '2rem',
+    '&:hover': {
+        opacity: 1,
+    },
+};
+const MRT_ToggleRowActionMenuButton = ({ row, table }) => {
+    const { getState, options: { enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setCurrentEditingRow, } = table;
+    const { currentEditingRow } = getState();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleOpenRowActionMenu = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
+    };
+    const handleStartEditMode = () => {
+        setCurrentEditingRow(Object.assign({}, row));
+        setAnchorEl(null);
+    };
+    return (React.createElement(React.Fragment, null, renderRowActions ? (React.createElement(React.Fragment, null, renderRowActions({ row, table }))) : row.id === (currentEditingRow === null || currentEditingRow === void 0 ? void 0 : currentEditingRow.id) ? (React.createElement(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems && enableEditing ? (React.createElement(Tooltip, { placement: "right", arrow: true, title: localization.edit },
+        React.createElement(IconButton, { sx: commonIconButtonStyles, onClick: handleStartEditMode },
+            React.createElement(EditIcon, null)))) : renderRowActionMenuItems ? (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions },
+            React.createElement(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles },
+                React.createElement(MoreHorizIcon, null))),
+        React.createElement(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table }))) : null));
+};
+
+const MRT_SelectCheckbox = ({ row, selectAll, table }) => {
+    const { getState, options: { localization, muiSelectCheckboxProps, muiSelectAllCheckboxProps, selectAllMode, }, } = table;
+    const { density } = getState();
+    const checkboxProps = !row
+        ? muiSelectAllCheckboxProps instanceof Function
+            ? muiSelectAllCheckboxProps({ table })
+            : muiSelectAllCheckboxProps
+        : muiSelectCheckboxProps instanceof Function
+            ? muiSelectCheckboxProps({ row, table })
+            : muiSelectCheckboxProps;
+    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: selectAll ? localization.toggleSelectAll : localization.toggleSelectRow },
+        React.createElement(Checkbox, Object.assign({ checked: selectAll ? table.getIsAllRowsSelected() : row === null || row === void 0 ? void 0 : row.getIsSelected(), indeterminate: selectAll ? table.getIsSomeRowsSelected() : row === null || row === void 0 ? void 0 : row.getIsSomeSelected(), inputProps: {
+                'aria-label': selectAll
+                    ? localization.toggleSelectAll
+                    : localization.toggleSelectRow,
+            }, onChange: !row
+                ? selectAllMode === 'all'
+                    ? table.getToggleAllRowsSelectedHandler()
+                    : table.getToggleAllPageRowsSelectedHandler()
+                : row.getToggleSelectedHandler(), size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', width: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined }, ((checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx) instanceof Function
+                ? checkboxProps.sx(theme)
+                : checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx))) }))));
+};
+
+const MRT_GlobalFilterTextField = ({ table, }) => {
+    var _a;
+    const { getState, setGlobalFilter, options: { enableGlobalFilterChangeMode, icons: { SearchIcon, CloseIcon }, localization, muiSearchTextFieldProps, tableId, }, } = table;
+    const { globalFilter, showGlobalFilter } = getState();
+    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);
+    }, 250), []);
+    const handleChange = (event) => {
+        setSearchValue(event.target.value);
+        handleChangeDebounced(event);
+    };
+    const handleGlobalFilterMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClear = () => {
+        setSearchValue('');
+        setGlobalFilter(undefined);
+    };
+    const textFieldProps = muiSearchTextFieldProps instanceof Function
+        ? muiSearchTextFieldProps({ table })
+        : muiSearchTextFieldProps;
+    return (React.createElement(Collapse, { in: showGlobalFilter, orientation: "horizontal" },
+        React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-search-text-field`, placeholder: localization.search, onChange: handleChange, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard", InputProps: {
+                startAdornment: enableGlobalFilterChangeMode ? (React.createElement(InputAdornment, { position: "start" },
+                    React.createElement(Tooltip, { arrow: true, title: localization.changeSearchMode },
+                        React.createElement(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
+                            React.createElement(SearchIcon, null))))) : (React.createElement(SearchIcon, { style: { marginRight: '4px' } })),
+                endAdornment: (React.createElement(InputAdornment, { position: "end" },
+                    React.createElement(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '' },
+                        React.createElement("span", null,
+                            React.createElement(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small" },
+                                React.createElement(CloseIcon, null)))))),
+            } }, textFieldProps)),
+        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
+};
+
+const MRT_LinearProgressBar = ({ isTopToolbar, table }) => {
+    const { options: { muiLinearProgressProps }, getState, } = table;
+    const { isLoading, showProgressBars } = getState();
+    const linearProgressProps = muiLinearProgressProps instanceof Function
+        ? muiLinearProgressProps({ isTopToolbar, table })
+        : muiLinearProgressProps;
+    return (React.createElement(Collapse, { in: isLoading || showProgressBars, mountOnEnter: true, unmountOnExit: true, sx: {
+            bottom: isTopToolbar ? 0 : undefined,
+            position: 'absolute',
+            top: !isTopToolbar ? 0 : undefined,
+            width: '100%',
+        } },
+        React.createElement(LinearProgress, Object.assign({ "aria-label": "Loading", "aria-busy": "true", sx: { position: 'relative' } }, linearProgressProps))));
+};
+
+const MRT_TablePagination = ({ table, position }) => {
+    const { getPrePaginationRowModel, getState, setPageIndex, setPageSize, options: { muiTablePaginationProps, enableToolbarInternalActions, rowCount, }, } = table;
+    const { pagination: { pageSize = 10, pageIndex = 0 }, showGlobalFilter, } = getState();
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
+    const showFirstLastPageButtons = totalRowCount / pageSize > 2;
+    const tablePaginationProps = muiTablePaginationProps instanceof Function
+        ? muiTablePaginationProps({ table })
+        : muiTablePaginationProps;
+    const handleChangeRowsPerPage = (event) => {
+        setPageSize(+event.target.value);
+    };
+    return (React.createElement(TablePagination, Object.assign({ SelectProps: {
+            sx: { m: '0 1rem 0 1ch' },
+            MenuProps: { MenuListProps: { disablePadding: true } },
+        }, component: "div", count: totalRowCount, onPageChange: (_, newPage) => setPageIndex(newPage), onRowsPerPageChange: handleChangeRowsPerPage, page: pageIndex, rowsPerPage: pageSize, rowsPerPageOptions: [5, 10, 15, 20, 25, 30, 50, 100], showFirstButton: showFirstLastPageButtons, showLastButton: showFirstLastPageButtons }, tablePaginationProps, { sx: (theme) => (Object.assign({ m: '0 0.5rem', mt: position === 'top' &&
+                enableToolbarInternalActions &&
+                !showGlobalFilter
+                ? '3.5rem'
+                : undefined, position: 'relative', zIndex: 2 }, ((tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx) instanceof Function
+            ? tablePaginationProps.sx(theme)
+            : tablePaginationProps === null || tablePaginationProps === void 0 ? void 0 : tablePaginationProps.sx))) })));
+};
+
+const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
+    var _a, _b;
+    const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { localization, muiTableToolbarAlertBannerProps }, } = table;
+    const { grouping, showAlertBanner } = getState();
+    const alertProps = muiTableToolbarAlertBannerProps instanceof Function
+        ? muiTableToolbarAlertBannerProps({ table })
+        : muiTableToolbarAlertBannerProps;
+    const selectMessage = getSelectedRowModel().rows.length > 0
+        ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', getPrePaginationRowModel().rows.length.toString())
+        : null;
+    const groupedByMessage = grouping.length > 0 ? (React.createElement("span", null,
+        localization.groupedBy,
+        ' ',
+        grouping.map((columnId, index) => (React.createElement(Fragment, { key: `${index}-${columnId}` },
+            index > 0 ? localization.thenBy : '',
+            React.createElement(Chip, { color: "secondary", label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() })))))) : null;
+    return (React.createElement(Collapse, { in: showAlertBanner || !!selectMessage || !!groupedByMessage, timeout: stackAlertBanner ? 200 : 0 },
+        React.createElement(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => (Object.assign({ borderRadius: 0, fontSize: '1rem', left: 0, p: 0, position: 'relative', right: 0, top: 0, width: '100%', zIndex: 2 }, ((alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx) instanceof Function
+                ? alertProps.sx(theme)
+                : alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx))) }),
+            (alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && React.createElement(AlertTitle, null, alertProps.title),
+            React.createElement(Box, { sx: { p: '0.5rem 1rem' } }, alertProps === null || alertProps === void 0 ? void 0 :
+                alertProps.children,
+                (alertProps === null || alertProps === void 0 ? void 0 : alertProps.children) && (selectMessage || groupedByMessage) && (React.createElement("br", null)),
+                selectMessage,
+                selectMessage && groupedByMessage && React.createElement("br", null),
+                groupedByMessage))));
+};
+
+const MRT_FullScreenToggleButton = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { icons: { FullscreenExitIcon, FullscreenIcon }, localization, }, setIsFullScreen, } = table;
+    const { isFullScreen } = getState();
+    const handleToggleFullScreen = () => {
+        setIsFullScreen(!isFullScreen);
+    };
+    return (React.createElement(Tooltip, { arrow: true, title: localization.toggleFullScreen },
+        React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleFullScreen }, rest), isFullScreen ? React.createElement(FullscreenExitIcon, null) : React.createElement(FullscreenIcon, null))));
+};
+
+const MRT_ShowHideColumnsButton = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { options: { icons: { ViewColumnIcon }, localization, }, } = table;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleClick = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { arrow: true, title: localization.showHideColumns },
+            React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest),
+                React.createElement(ViewColumnIcon, null))),
+        React.createElement(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table })));
+};
+
+const MRT_ToggleDensePaddingButton = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { icons: { DensityLargeIcon, DensityMediumIcon, DensitySmallIcon }, localization, }, setDensity, } = table;
+    const { density } = getState();
+    const handleToggleDensePadding = () => {
+        const nextDensity = density === 'comfortable'
+            ? 'compact'
+            : density === 'compact'
+                ? 'spacious'
+                : 'comfortable';
+        setDensity(nextDensity);
+    };
+    return (React.createElement(Tooltip, { arrow: true, title: localization.toggleDensity },
+        React.createElement(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest), density === 'compact' ? (React.createElement(DensitySmallIcon, null)) : density === 'comfortable' ? (React.createElement(DensityMediumIcon, null)) : (React.createElement(DensityLargeIcon, null)))));
+};
+
+const MRT_ToggleFiltersButton = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { icons: { FilterListIcon, FilterListOffIcon }, localization, }, setShowFilters, } = table;
+    const { showColumnFilters } = getState();
+    const handleToggleShowFilters = () => {
+        setShowFilters(!showColumnFilters);
+    };
+    return (React.createElement(Tooltip, { arrow: true, title: localization.showHideFilters },
+        React.createElement(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest), showColumnFilters ? React.createElement(FilterListOffIcon, null) : React.createElement(FilterListIcon, null))));
+};
+
+const MRT_ToggleGlobalFilterButton = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { icons: { SearchIcon, SearchOffIcon }, tableId, localization, muiSearchTextFieldProps, }, setShowGlobalFilter, } = table;
+    const { showGlobalFilter } = getState();
+    const textFieldProps = muiSearchTextFieldProps instanceof Function
+        ? muiSearchTextFieldProps({ table })
+        : muiSearchTextFieldProps;
+    const handleToggleSearch = () => {
+        setShowGlobalFilter(!showGlobalFilter);
+        setTimeout(() => {
+            var _a, _b;
+            return (_b = document
+                .getElementById((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.id) !== null && _a !== void 0 ? _a : `mrt-${tableId}-search-text-field`)) === null || _b === void 0 ? void 0 : _b.focus();
+        }, 200);
+    };
+    return (React.createElement(Tooltip, { arrow: true, title: localization.showHideSearch },
+        React.createElement(IconButton, Object.assign({ onClick: handleToggleSearch }, rest), showGlobalFilter ? React.createElement(SearchOffIcon, null) : React.createElement(SearchIcon, null))));
+};
+
+const MRT_ToolbarInternalButtons = ({ table }) => {
+    var _a;
+    const { options: { enableColumnFilters, enableColumnOrdering, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, enablePinning, positionGlobalFilter, renderToolbarInternalActions, }, } = table;
+    return (React.createElement(Box, { sx: {
+            alignItems: 'center',
+            display: 'flex',
+            zIndex: 3,
+        } }, (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
+        table,
+    })) !== null && _a !== void 0 ? _a : (React.createElement(React.Fragment, null,
+        enableGlobalFilter && positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })),
+        enableFilters && enableGlobalFilter && (React.createElement(MRT_ToggleGlobalFilterButton, { table: table })),
+        enableFilters && enableColumnFilters && (React.createElement(MRT_ToggleFiltersButton, { table: table })),
+        (enableHiding || enableColumnOrdering || enablePinning) && (React.createElement(MRT_ShowHideColumnsButton, { table: table })),
+        enableDensityToggle && (React.createElement(MRT_ToggleDensePaddingButton, { table: table })),
+        enableFullScreenToggle && (React.createElement(MRT_FullScreenToggleButton, { table: table }))))));
+};
+
+const MRT_ToolbarDropZone = ({ table }) => {
+    var _a, _b;
+    const { getState, options: { enableGrouping, localization }, setCurrentHoveredColumn, } = table;
+    const { currentDraggingColumn, currentHoveredColumn } = getState();
+    const handleDragEnter = (_event) => {
+        setCurrentHoveredColumn({ id: 'drop-zone' });
+    };
+    return (React.createElement(Fade, { unmountOnExit: true, mountOnEnter: true, in: !!enableGrouping && !!currentDraggingColumn },
+        React.createElement(Box, { sx: (theme) => ({
+                alignItems: 'center',
+                backgroundColor: alpha(theme.palette.info.main, (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
+                border: `dashed ${theme.palette.info.main} 2px`,
+                display: 'flex',
+                justifyContent: 'center',
+                height: 'calc(100% - 4px)',
+                position: 'absolute',
+                width: 'calc(100% - 4px)',
+                zIndex: 2,
+            }), onDragEnter: handleDragEnter },
+            React.createElement(Typography, null, localization.dropToGroupBy.replace('{column}', (_b = (_a = currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '')))));
+};
+
+const commonToolbarStyles = ({ theme }) => ({
+    alignItems: 'flex-start',
+    backgroundColor: lighten(theme.palette.background.default, 0.04),
+    backgroundImage: 'none',
+    display: 'grid',
+    minHeight: '3.5rem',
+    overflow: 'hidden',
+    p: '0 !important',
+    transition: 'all 0.2s ease-in-out',
+    zIndex: 1,
+});
+const MRT_TopToolbar = ({ table }) => {
+    var _a;
+    const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTableTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, tableId, }, } = table;
+    const { isFullScreen, showGlobalFilter } = getState();
+    const isMobile = useMediaQuery('(max-width:720px)');
+    const toolbarProps = muiTableTopToolbarProps instanceof Function
+        ? muiTableTopToolbarProps({ table })
+        : muiTableTopToolbarProps;
+    const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
+    return (React.createElement(Toolbar, Object.assign({ id: `mrt-${tableId}-toolbar-top`, variant: "dense" }, toolbarProps, { sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
+            ? toolbarProps.sx(theme)
+            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
+        positionToolbarAlertBanner === 'top' && (React.createElement(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })),
+        ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
+        React.createElement(Box, { sx: {
+                alignItems: 'flex-start',
+                boxSizing: 'border-box',
+                display: 'flex',
+                justifyContent: 'space-between',
+                p: '0.5rem',
+                position: stackAlertBanner ? 'relative' : 'absolute',
+                right: 0,
+                top: 0,
+                width: '100%',
+            } },
+            enableGlobalFilter && positionGlobalFilter === 'left' && (React.createElement(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : React.createElement("span", null),
+            enableToolbarInternalActions ? (React.createElement(MRT_ToolbarInternalButtons, { table: table })) : (enableGlobalFilter &&
+                positionGlobalFilter === 'right' && (React.createElement(MRT_GlobalFilterTextField, { table: table })))),
+        enablePagination &&
+            ['top', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React.createElement(MRT_TablePagination, { table: table, position: "top" })),
+        React.createElement(MRT_LinearProgressBar, { isTopToolbar: true, table: table })));
+};
+
+const MRT_BottomToolbar = ({ table }) => {
+    const { getState, options: { enablePagination, muiTableBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, tableId, }, } = table;
+    const { isFullScreen } = getState();
+    const isMobile = useMediaQuery('(max-width:720px)');
+    const toolbarProps = muiTableBottomToolbarProps instanceof Function
+        ? muiTableBottomToolbarProps({ table })
+        : muiTableBottomToolbarProps;
+    const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
+    return (React.createElement(Toolbar, Object.assign({ id: `mrt-${tableId}-toolbar-bottom`, variant: "dense" }, toolbarProps, { sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `-3px 0 6px ${alpha(theme.palette.common.black, 0.1)}`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), ((toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx) instanceof Function
+            ? toolbarProps.sx(theme)
+            : toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx))) }),
+        React.createElement(MRT_LinearProgressBar, { isTopToolbar: false, table: table }),
+        positionToolbarAlertBanner === 'bottom' && (React.createElement(MRT_ToolbarAlertBanner, { table: table })),
+        ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (React.createElement(MRT_ToolbarDropZone, { table: table })),
+        React.createElement(Box, { sx: {
+                display: 'flex',
+                justifyContent: 'space-between',
+                width: '100%',
+            } },
+            renderBottomToolbarCustomActions ? (React.createElement(Box, { sx: { p: '0.5rem' } }, renderBottomToolbarCustomActions({ table }))) : (React.createElement("span", null)),
+            React.createElement(Box, { sx: {
+                    display: 'flex',
+                    justifyContent: 'flex-end',
+                    position: stackAlertBanner ? 'relative' : 'absolute',
+                    right: 0,
+                    top: 0,
+                } }, enablePagination &&
+                ['bottom', 'both'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (React.createElement(MRT_TablePagination, { table: table, position: "bottom" }))))));
+};
+
+const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
+    const { options: { icons: { MoreVertIcon }, localization, muiTableHeadCellColumnActionsButtonProps, }, } = table;
+    const { column } = header;
+    const { columnDef } = column;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const handleClick = (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        setAnchorEl(event.currentTarget);
+    };
+    const mTableHeadCellColumnActionsButtonProps = muiTableHeadCellColumnActionsButtonProps instanceof Function
+        ? muiTableHeadCellColumnActionsButtonProps({ column, table })
+        : muiTableHeadCellColumnActionsButtonProps;
+    const mcTableHeadCellColumnActionsButtonProps = columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
+        ? columnDef.muiTableHeadCellColumnActionsButtonProps({
+            column,
+            table,
+        })
+        : columnDef.muiTableHeadCellColumnActionsButtonProps;
+    const iconButtonProps = Object.assign(Object.assign({}, mTableHeadCellColumnActionsButtonProps), mcTableHeadCellColumnActionsButtonProps);
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: localization.columnActions },
+            React.createElement(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ height: '2rem', mt: '-0.2rem', opacity: 0.5, transition: 'opacity 0.2s', width: '2rem', '&:hover': {
+                        opacity: 1,
+                    } }, ((iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx) instanceof Function
+                    ? iconButtonProps.sx(theme)
+                    : iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx))) }),
+                React.createElement(MoreVertIcon, null))),
+        React.createElement(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
+};
+
+const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const { getState, options: { enableColumnFilterChangeMode, columnFilterModeOptions, icons: { FilterListIcon, CloseIcon }, localization, muiTableHeadCellFilterTextFieldProps, tableId, }, setColumnFilterFns, } = table;
+    const { column } = header;
+    const { columnDef } = column;
+    const { columnFilterFns } = getState();
+    const mTableHeadCellFilterTextFieldProps = muiTableHeadCellFilterTextFieldProps instanceof Function
+        ? muiTableHeadCellFilterTextFieldProps({
+            column,
+            table,
+            rangeFilterIndex,
+        })
+        : muiTableHeadCellFilterTextFieldProps;
+    const mcTableHeadCellFilterTextFieldProps = columnDef.muiTableHeadCellFilterTextFieldProps instanceof Function
+        ? columnDef.muiTableHeadCellFilterTextFieldProps({
+            column,
+            table,
+            rangeFilterIndex,
+        })
+        : columnDef.muiTableHeadCellFilterTextFieldProps;
+    const textFieldProps = Object.assign(Object.assign({}, mTableHeadCellFilterTextFieldProps), mcTableHeadCellFilterTextFieldProps);
+    const isRangeFilter = columnDef.filterVariant === 'range' || rangeFilterIndex !== undefined;
+    const isSelectFilter = columnDef.filterVariant === 'select';
+    const isMultiSelectFilter = columnDef.filterVariant === 'multi-select';
+    const isTextboxFilter = columnDef.filterVariant === 'text' ||
+        (!isSelectFilter && !isMultiSelectFilter);
+    const currentFilterOption = columnFilterFns === null || columnFilterFns === void 0 ? void 0 : columnFilterFns[header.id];
+    const filterId = `mrt-${tableId}-${header.id}-filter-text-field${rangeFilterIndex !== null && rangeFilterIndex !== void 0 ? rangeFilterIndex : ''}`;
+    const filterChipLabel = ['empty', 'notEmpty'].includes(currentFilterOption)
+        ? //@ts-ignore
+            localization[`filter${((_b = (_a = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _a === void 0 ? void 0 : _a.call(currentFilterOption, 0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
+                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
+        : '';
+    const filterPlaceholder = !isRangeFilter
+        ? (_c = localization.filterByColumn) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))
+        : rangeFilterIndex === 0
+            ? localization.min
+            : rangeFilterIndex === 1
+                ? localization.max
+                : '';
+    const allowedColumnFilterOptions = (_d = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _d !== void 0 ? _d : columnFilterModeOptions;
+    const showChangeModeButton = enableColumnFilterChangeMode &&
+        columnDef.enableColumnFilterChangeMode !== false &&
+        !rangeFilterIndex &&
+        (allowedColumnFilterOptions === undefined ||
+            !!(allowedColumnFilterOptions === null || allowedColumnFilterOptions === void 0 ? void 0 : allowedColumnFilterOptions.length));
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [filterValue, setFilterValue] = useState(() => {
+        var _a, _b;
+        return isMultiSelectFilter
+            ? column.getFilterValue() || []
+            : isRangeFilter
+                ? ((_a = column.getFilterValue()) === null || _a === void 0 ? void 0 : _a[rangeFilterIndex]) || []
+                : (_b = column.getFilterValue()) !== null && _b !== void 0 ? _b : '';
+    });
+    const handleChangeDebounced = useCallback(debounce((event) => {
+        let value = textFieldProps.type === 'date'
+            ? new Date(event.target.value)
+            : event.target.value;
+        if (isRangeFilter) {
+            column.setFilterValue((old) => {
+                const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
+                newFilterValues[rangeFilterIndex] = value;
+                return newFilterValues;
+            });
+        }
+        else {
+            column.setFilterValue(value !== null && value !== void 0 ? value : undefined);
+        }
+    }, isTextboxFilter ? 200 : 1), []);
+    const handleChange = (event) => {
+        setFilterValue(event.target.value);
+        handleChangeDebounced(event);
+    };
+    const handleClear = () => {
+        if (isMultiSelectFilter) {
+            setFilterValue([]);
+            column.setFilterValue([]);
+        }
+        else if (isRangeFilter) {
+            setFilterValue('');
+            column.setFilterValue((old) => {
+                const newFilterValues = old !== null && old !== void 0 ? old : ['', ''];
+                newFilterValues[rangeFilterIndex] = undefined;
+                return newFilterValues;
+            });
+        }
+        else {
+            setFilterValue('');
+            column.setFilterValue(undefined);
+        }
+    };
+    const handleClearEmptyFilterChip = () => {
+        setFilterValue('');
+        column.setFilterValue(undefined);
+        setColumnFilterFns((prev) => (Object.assign(Object.assign({}, prev), { [header.id]: 'fuzzy' })));
+    };
+    const handleFilterMenuOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    if (columnDef.Filter) {
+        return React.createElement(React.Fragment, null, (_e = columnDef.Filter) === null || _e === void 0 ? void 0 : _e.call(columnDef, { column, header, table }));
+    }
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TextField, Object.assign({ fullWidth: true, id: filterId, inputProps: {
+                disabled: !!filterChipLabel,
+                sx: {
+                    textOverflow: 'ellipsis',
+                    width: filterChipLabel ? 0 : undefined,
+                },
+                title: filterPlaceholder,
+            }, helperText: showChangeModeButton ? (React.createElement("label", { htmlFor: filterId }, localization.filterMode.replace('{filterType}', 
+            // @ts-ignore
+            localization[`filter${((_f = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _f === void 0 ? void 0 : _f.toUpperCase()) +
+                (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]))) : null, FormHelperTextProps: {
+                sx: {
+                    fontSize: '0.6rem',
+                    lineHeight: '0.8rem',
+                    whiteSpace: 'nowrap',
+                },
+            }, margin: "none", placeholder: filterChipLabel || isSelectFilter || isMultiSelectFilter
+                ? undefined
+                : filterPlaceholder, onChange: handleChange, onClick: (e) => e.stopPropagation(), select: isSelectFilter || isMultiSelectFilter, value: filterValue, variant: "standard", InputProps: {
+                startAdornment: showChangeModeButton ? (React.createElement(InputAdornment, { position: "start" },
+                    React.createElement(Tooltip, { arrow: true, title: localization.changeFilterMode },
+                        React.createElement("span", null,
+                            React.createElement(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' } },
+                                React.createElement(FilterListIcon, null)))),
+                    filterChipLabel && (React.createElement(Chip, { onDelete: handleClearEmptyFilterChip, label: filterChipLabel })))) : (React.createElement(FilterListIcon, { style: { marginRight: '4px' } })),
+                endAdornment: !filterChipLabel && (React.createElement(InputAdornment, { position: "end" },
+                    React.createElement(Tooltip, { arrow: true, placement: "right", title: (_g = localization.clearFilter) !== null && _g !== void 0 ? _g : '' },
+                        React.createElement("span", null,
+                            React.createElement(IconButton, { "aria-label": localization.clearFilter, disabled: !(filterValue === null || filterValue === void 0 ? void 0 : filterValue.length), onClick: handleClear, size: "small", sx: {
+                                    height: '1.75rem',
+                                    width: '1.75rem',
+                                } },
+                                React.createElement(CloseIcon, null)))))),
+            }, SelectProps: {
+                displayEmpty: true,
+                multiple: isMultiSelectFilter,
+                renderValue: isMultiSelectFilter
+                    ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder)) : (React.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' } }, selected === null || selected === void 0 ? void 0 : selected.map((value) => (React.createElement(Chip, { key: value, label: value })))))
+                    : undefined,
+            } }, textFieldProps, { sx: (theme) => (Object.assign({ p: 0, minWidth: !filterChipLabel ? '6rem' : 'auto', width: '100%', '&	.MuiSelect-icon': {
+                    mr: '1.5rem',
+                } }, ((textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx) instanceof Function
+                ? textFieldProps.sx(theme)
+                : textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx))) }),
+            (isSelectFilter || isMultiSelectFilter) && (React.createElement(MenuItem, { divider: true, disabled: true, hidden: true, value: "" },
+                React.createElement(Box, { sx: { opacity: 0.5 } }, filterPlaceholder))), (_h = columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterSelectOptions) === null || _h === void 0 ? void 0 :
+            _h.map((option) => {
+                var _a;
+                let value;
+                let text;
+                if (typeof option !== 'object') {
+                    value = option;
+                    text = option;
+                }
+                else {
+                    value = option.value;
+                    text = option.text;
+                }
+                return (React.createElement(MenuItem, { key: value, value: value },
+                    isMultiSelectFilter && (React.createElement(Checkbox, { checked: ((_a = column.getFilterValue()) !== null && _a !== void 0 ? _a : []).includes(value), sx: { mr: '0.5rem' } })),
+                    React.createElement(ListItemText, null, text)));
+            })),
+        React.createElement(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table })));
+};
+
+const MRT_FilterRangeFields = ({ header, table }) => {
+    return (React.createElement(Box, { sx: { display: 'grid', gridTemplateColumns: '6fr 6fr', gap: '1rem' } },
+        React.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }),
+        React.createElement(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })));
+};
+
+const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
+    const { getState } = table;
+    const { columnFilterFns, showColumnFilters } = getState();
+    const { column } = header;
+    return (React.createElement(Collapse, { in: showColumnFilters, mountOnEnter: true, unmountOnExit: true }, ['between', 'betweenInclusive', 'inNumberRange'].includes(columnFilterFns[column.id]) ? (React.createElement(MRT_FilterRangeFields, { header: header, table: table })) : (React.createElement(MRT_FilterTextField, { header: header, table: table }))));
+};
+
+const MRT_TableHeadCellFilterLabel = ({ header, table }) => {
+    var _a, _b, _c;
+    const { getState, options: { icons: { FilterAltIcon }, localization, }, } = table;
+    const { columnFilterFns } = getState();
+    const { column } = header;
+    const { columnDef } = column;
+    const isRangeFilter = [
+        'between',
+        'betweenInclusive',
+        'inNumberRange',
+    ].includes(columnDef._filterFn);
+    const currentFilterOption = columnFilterFns === null || columnFilterFns === void 0 ? void 0 : columnFilterFns[header.id];
+    const filterTooltip = localization.filteringByColumn
+        .replace('{column}', String(columnDef.header))
+        .replace('{filterType}', 
+    // @ts-ignore
+    localization[`filter${((_a = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _a === void 0 ? void 0 : _a.toUpperCase()) +
+        (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`])
+        .replace('{filterValue}', `"${Array.isArray(column.getFilterValue())
+        ? column.getFilterValue().join(`" ${isRangeFilter ? localization.and : localization.or} "`)
+        : column.getFilterValue()}"`)
+        .replace('" "', '');
+    return (React.createElement(Grow, { unmountOnExit: true, in: (!!column.getFilterValue() && isRangeFilter) ||
+            (!isRangeFilter && // @ts-ignore
+                (!!((_b = column.getFilterValue()) === null || _b === void 0 ? void 0 : _b[0]) || !!((_c = column.getFilterValue()) === null || _c === void 0 ? void 0 : _c[1]))) },
+        React.createElement("span", null,
+            React.createElement(Tooltip, { arrow: true, placement: "top", title: filterTooltip },
+                React.createElement(IconButton, { disableRipple: true, onClick: (event) => {
+                        event.stopPropagation();
+                    }, size: "small", sx: {
+                        m: 0,
+                        opacity: 0.8,
+                        p: '2px',
+                        transform: 'scale(0.66)',
+                        width: '1.5ch',
+                    } },
+                    React.createElement(FilterAltIcon, null))))));
+};
+
+const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
+    const { getState, options: { enableColumnOrdering, muiTableHeadCellDragHandleProps, onColumnDrop, }, setColumnOrder, setCurrentDraggingColumn, setCurrentHoveredColumn, } = table;
+    const { columnDef } = column;
+    const { currentHoveredColumn, currentDraggingColumn, columnOrder } = getState();
+    const mIconButtonProps = muiTableHeadCellDragHandleProps instanceof Function
+        ? muiTableHeadCellDragHandleProps({ column, table })
+        : muiTableHeadCellDragHandleProps;
+    const mcIconButtonProps = columnDef.muiTableHeadCellDragHandleProps instanceof Function
+        ? columnDef.muiTableHeadCellDragHandleProps({ column, table })
+        : columnDef.muiTableHeadCellDragHandleProps;
+    const iconButtonProps = Object.assign(Object.assign({}, mIconButtonProps), mcIconButtonProps);
+    const handleDragStart = (e) => {
+        setCurrentDraggingColumn(column);
+        e.dataTransfer.setDragImage(tableHeadCellRef.current, 0, 0);
+    };
+    const handleDragEnd = (event) => {
+        onColumnDrop === null || onColumnDrop === void 0 ? void 0 : onColumnDrop({
+            event,
+            draggedColumn: column,
+            targetColumn: currentHoveredColumn,
+        });
+        if ((currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+            column.toggleGrouping();
+        }
+        else if (enableColumnOrdering &&
+            currentHoveredColumn &&
+            (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) !== (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id)) {
+            setColumnOrder(reorderColumn(column, currentHoveredColumn, columnOrder));
+        }
+        setCurrentDraggingColumn(null);
+        setCurrentHoveredColumn(null);
+    };
+    return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+};
+
+const MRT_TableHeadCellResizeHandle = ({ header, table }) => {
+    var _a;
+    const { getState, options: { columnResizeMode }, } = table;
+    const { density, showColumnFilters } = getState();
+    const { column } = header;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    return (React.createElement(Divider, { flexItem: true, orientation: "vertical", onDoubleClick: () => column.resetSize(), sx: (theme) => ({
+            borderRadius: '2px',
+            borderRightWidth: '2px',
+            cursor: 'col-resize',
+            height: showColumnFilters && columnDefType === 'data' ? '4rem' : '2rem',
+            mr: density === 'compact' ? '-0.5rem' : '-1rem',
+            opacity: 0.8,
+            position: 'absolute',
+            right: '1px',
+            touchAction: 'none',
+            transition: column.getIsResizing() ? undefined : 'all 0.2s ease-in-out',
+            userSelect: 'none',
+            zIndex: 4,
+            '&:active': {
+                backgroundColor: theme.palette.info.main,
+                opacity: 1,
+            },
+        }), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+            transform: column.getIsResizing()
+                ? `translateX(${((_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0) /
+                    (columnResizeMode === 'onChange' ? 16 : 1)}px)`
+                : 'none',
+        } }));
+};
+
+const MRT_TableHeadCellSortLabel = ({ header, table }) => {
+    const { options: { localization }, } = table;
+    const { column } = header;
+    const { columnDef } = column;
+    const sortTooltip = !!column.getIsSorted()
+        ? column.getIsSorted() === 'desc'
+            ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+            : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+        : localization.unsorted;
+    return (React.createElement(Tooltip, { arrow: true, placement: "top", title: sortTooltip },
+        React.createElement(TableSortLabel, { "aria-label": sortTooltip, active: !!column.getIsSorted(), direction: column.getIsSorted()
+                ? column.getIsSorted()
+                : undefined, sx: {
+                width: '2ch',
+                transform: 'translateX(-0.5ch)',
+            } })));
+};
+
+const MRT_TableHeadCell = ({ header, table }) => {
+    var _a, _b, _c, _d;
+    const theme = useTheme();
+    const { getState, options: { enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnResizing, enableGrouping, enableMultiSort, muiTableHeadCellProps, }, setCurrentHoveredColumn, } = table;
+    const { density, currentDraggingColumn, currentHoveredColumn, showColumnFilters, } = getState();
+    const { column } = header;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const mTableHeadCellProps = muiTableHeadCellProps instanceof Function
+        ? muiTableHeadCellProps({ column, table })
+        : muiTableHeadCellProps;
+    const mcTableHeadCellProps = columnDef.muiTableHeadCellProps instanceof Function
+        ? columnDef.muiTableHeadCellProps({ column, table })
+        : columnDef.muiTableHeadCellProps;
+    const tableCellProps = Object.assign(Object.assign({}, mTableHeadCellProps), mcTableHeadCellProps);
+    const getIsLastLeftPinnedColumn = () => {
+        return (column.getIsPinned() === 'left' &&
+            table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
+    };
+    const getIsFirstRightPinnedColumn = () => {
+        return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+    };
+    const getTotalRight = () => {
+        return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
+    };
+    const handleDragEnter = (_e) => {
+        if (enableGrouping && (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+            setCurrentHoveredColumn(null);
+        }
+        if (enableColumnOrdering && currentDraggingColumn) {
+            setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+        }
+    };
+    const draggingBorder = (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+            ? `2px dashed ${theme.palette.primary.main}`
+            : undefined;
+    const draggingBorders = draggingBorder
+        ? {
+            borderLeft: draggingBorder,
+            borderRight: draggingBorder,
+            borderTop: draggingBorder,
+        }
+        : undefined;
+    const headerElement = ((_b = ((columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) instanceof Function
+        ? (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
+            column,
+            header,
+            table,
+        })
+        : columnDef === null || columnDef === void 0 ? void 0 : columnDef.Header)) !== null && _b !== void 0 ? _b : columnDef.header);
+    const tableHeadCellRef = React.useRef(null);
+    return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: tableHeadCellRef }, tableCellProps, { sx: (theme) => {
+            var _a;
+            return (Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && columnDefType !== 'group'
+                    ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
+                    : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn()
+                    ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+                    : getIsFirstRightPinnedColumn()
+                        ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+                        : undefined, fontWeight: 'bold', left: column.getIsPinned() === 'left'
+                    ? `${column.getStart('left')}px`
+                    : undefined, overflow: 'visible', opacity: (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id ||
+                    (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+                    ? 0.5
+                    : 1, p: density === 'compact'
+                    ? '0.5rem'
+                    : density === 'comfortable'
+                        ? columnDefType === 'display'
+                            ? '0.75rem'
+                            : '1rem'
+                        : columnDefType === 'display'
+                            ? '1rem 1.25rem'
+                            : '1.5rem', pb: columnDefType === 'display'
+                    ? 0
+                    : showColumnFilters || density === 'compact'
+                        ? '0.4rem'
+                        : '0.6rem', position: column.getIsPinned() && columnDefType !== 'group'
+                    ? 'sticky'
+                    : undefined, pt: columnDefType === 'group'
+                    ? 0
+                    : density === 'compact'
+                        ? '0.25'
+                        : density === 'comfortable'
+                            ? '.75rem'
+                            : '1.25rem', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`, userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+                    ? 3
+                    : column.getIsPinned() && columnDefType !== 'group'
+                        ? 2
+                        : 1 }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+                ? tableCellProps.sx(theme)
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), draggingBorders), { maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_a = columnDef.minSize) !== null && _a !== void 0 ? _a : 30}px)`, width: header.getSize() }));
+        } }),
+        header.isPlaceholder ? null : (React.createElement(Box, { sx: {
+                alignItems: 'flex-start',
+                display: 'flex',
+                justifyContent: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right'
+                    ? 'flex-end'
+                    : columnDefType === 'group' ||
+                        (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                        ? 'center'
+                        : 'space-between',
+                position: 'relative',
+                width: '100%',
+            } },
+            React.createElement(Box, { onClick: column.getToggleSortingHandler(), sx: {
+                    alignItems: 'center',
+                    cursor: column.getCanSort() && columnDefType !== 'group'
+                        ? 'pointer'
+                        : undefined,
+                    display: 'flex',
+                    flexWrap: 'nowrap',
+                    m: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center' ? 'auto' : undefined,
+                    pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center' && column.getCanSort()
+                        ? '1rem'
+                        : undefined,
+                    whiteSpace: ((_d = (_c = columnDef.header) === null || _c === void 0 ? void 0 : _c.length) !== null && _d !== void 0 ? _d : 0) < 24 ? 'nowrap' : 'normal',
+                } },
+                headerElement,
+                column.getCanSort() && (React.createElement(MRT_TableHeadCellSortLabel, { header: header, table: table })),
+                column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterLabel, { header: header, table: table }))),
+            columnDefType !== 'group' && (React.createElement(Box, { sx: { whiteSpace: 'nowrap' } },
+                ((enableColumnDragging &&
+                    columnDef.enableColumnDragging !== false) ||
+                    (enableColumnOrdering &&
+                        columnDef.enableColumnOrdering !== false) ||
+                    (enableGrouping && columnDef.enableGrouping !== false)) && (React.createElement(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: tableHeadCellRef })),
+                (enableColumnActions || columnDef.enableColumnActions) &&
+                    columnDef.enableColumnActions !== false && (React.createElement(MRT_TableHeadCellColumnActionsButton, { header: header, table: table })))),
+            column.getCanResize() && (React.createElement(MRT_TableHeadCellResizeHandle, { header: header, table: table })))),
+        column.getCanFilter() && (React.createElement(MRT_TableHeadCellFilterContainer, { header: header, table: table }))));
+};
+
+const MRT_TableHeadRow = ({ headerGroup, table }) => {
+    const { options: { muiTableHeadRowProps }, } = table;
+    const tableRowProps = muiTableHeadRowProps instanceof Function
+        ? muiTableHeadRowProps({ headerGroup, table })
+        : muiTableHeadRowProps;
+    return (React.createElement(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, backgroundColor: lighten(theme.palette.background.default, 0.04) }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)) }), headerGroup.headers.map((header, index) => (React.createElement(MRT_TableHeadCell, { header: header, key: header.id || index, table: table })))));
+};
+
+const MRT_TableHead = ({ table }) => {
+    const { getHeaderGroups, options: { muiTableHeadProps }, } = table;
+    const tableHeadProps = muiTableHeadProps instanceof Function
+        ? muiTableHeadProps({ table })
+        : muiTableHeadProps;
+    return (React.createElement(TableHead, Object.assign({}, tableHeadProps), getHeaderGroups().map((headerGroup) => (React.createElement(MRT_TableHeadRow, { headerGroup: headerGroup, key: headerGroup.id, table: table })))));
+};
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+var props = ['bottom', 'height', 'left', 'right', 'top', 'width'];
+
+var rectChanged = function rectChanged(a, b) {
+  if (a === void 0) {
+    a = {};
+  }
+
+  if (b === void 0) {
+    b = {};
+  }
+
+  return props.some(function (prop) {
+    return a[prop] !== b[prop];
+  });
+};
+
+var observedNodes = /*#__PURE__*/new Map();
+var rafId;
+
+var run = function run() {
+  var changedStates = [];
+  observedNodes.forEach(function (state, node) {
+    var newRect = node.getBoundingClientRect();
+
+    if (rectChanged(newRect, state.rect)) {
+      state.rect = newRect;
+      changedStates.push(state);
+    }
+  });
+  changedStates.forEach(function (state) {
+    state.callbacks.forEach(function (cb) {
+      return cb(state.rect);
+    });
+  });
+  rafId = window.requestAnimationFrame(run);
+};
+
+function observeRect(node, cb) {
+  return {
+    observe: function observe() {
+      var wasEmpty = observedNodes.size === 0;
+
+      if (observedNodes.has(node)) {
+        observedNodes.get(node).callbacks.push(cb);
+      } else {
+        observedNodes.set(node, {
+          rect: undefined,
+          hasRectChanged: false,
+          callbacks: [cb]
+        });
+      }
+
+      if (wasEmpty) run();
+    },
+    unobserve: function unobserve() {
+      var state = observedNodes.get(node);
+
+      if (state) {
+        // Remove the callback
+        var index = state.callbacks.indexOf(cb);
+        if (index >= 0) state.callbacks.splice(index, 1); // Remove the node reference
+
+        if (!state.callbacks.length) observedNodes["delete"](node); // Stop the loop
+
+        if (!observedNodes.size) cancelAnimationFrame(rafId);
+      }
+    }
+  };
+}
+
+var useIsomorphicLayoutEffect$1 = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+
+function useRect(nodeRef, initialRect) {
+  if (initialRect === void 0) {
+    initialRect = {
+      width: 0,
+      height: 0
+    };
+  }
+
+  var _React$useState = React.useState(nodeRef.current),
+      element = _React$useState[0],
+      setElement = _React$useState[1];
+
+  var _React$useReducer = React.useReducer(rectReducer, initialRect),
+      rect = _React$useReducer[0],
+      dispatch = _React$useReducer[1];
+
+  var initialRectSet = React.useRef(false);
+  useIsomorphicLayoutEffect$1(function () {
+    if (nodeRef.current !== element) {
+      setElement(nodeRef.current);
+    }
+  });
+  useIsomorphicLayoutEffect$1(function () {
+    if (element && !initialRectSet.current) {
+      initialRectSet.current = true;
+
+      var _rect = element.getBoundingClientRect();
+
+      dispatch({
+        rect: _rect
+      });
+    }
+  }, [element]);
+  React.useEffect(function () {
+    if (!element) {
+      return;
+    }
+
+    var observer = observeRect(element, function (rect) {
+      dispatch({
+        rect: rect
+      });
+    });
+    observer.observe();
+    return function () {
+      observer.unobserve();
+    };
+  }, [element]);
+  return rect;
+}
+
+function rectReducer(state, action) {
+  var rect = action.rect;
+
+  if (state.height !== rect.height || state.width !== rect.width) {
+    return rect;
+  }
+
+  return state;
+}
+
+var defaultEstimateSize = function defaultEstimateSize() {
+  return 50;
+};
+
+var defaultKeyExtractor = function defaultKeyExtractor(index) {
+  return index;
+};
+
+var defaultMeasureSize = function defaultMeasureSize(el, horizontal) {
+  var key = horizontal ? 'offsetWidth' : 'offsetHeight';
+  return el[key];
+};
+
+var defaultRangeExtractor = function defaultRangeExtractor(range) {
+  var start = Math.max(range.start - range.overscan, 0);
+  var end = Math.min(range.end + range.overscan, range.size - 1);
+  var arr = [];
+
+  for (var i = start; i <= end; i++) {
+    arr.push(i);
+  }
+
+  return arr;
+};
+function useVirtual(_ref) {
+  var _measurements;
+
+  var _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 0 : _ref$size,
+      _ref$estimateSize = _ref.estimateSize,
+      estimateSize = _ref$estimateSize === void 0 ? defaultEstimateSize : _ref$estimateSize,
+      _ref$overscan = _ref.overscan,
+      overscan = _ref$overscan === void 0 ? 1 : _ref$overscan,
+      _ref$paddingStart = _ref.paddingStart,
+      paddingStart = _ref$paddingStart === void 0 ? 0 : _ref$paddingStart,
+      _ref$paddingEnd = _ref.paddingEnd,
+      paddingEnd = _ref$paddingEnd === void 0 ? 0 : _ref$paddingEnd,
+      parentRef = _ref.parentRef,
+      horizontal = _ref.horizontal,
+      scrollToFn = _ref.scrollToFn,
+      useObserver = _ref.useObserver,
+      initialRect = _ref.initialRect,
+      onScrollElement = _ref.onScrollElement,
+      scrollOffsetFn = _ref.scrollOffsetFn,
+      _ref$keyExtractor = _ref.keyExtractor,
+      keyExtractor = _ref$keyExtractor === void 0 ? defaultKeyExtractor : _ref$keyExtractor,
+      _ref$measureSize = _ref.measureSize,
+      measureSize = _ref$measureSize === void 0 ? defaultMeasureSize : _ref$measureSize,
+      _ref$rangeExtractor = _ref.rangeExtractor,
+      rangeExtractor = _ref$rangeExtractor === void 0 ? defaultRangeExtractor : _ref$rangeExtractor;
+  var sizeKey = horizontal ? 'width' : 'height';
+  var scrollKey = horizontal ? 'scrollLeft' : 'scrollTop';
+  var latestRef = React.useRef({
+    scrollOffset: 0,
+    measurements: []
+  });
+
+  var _React$useState = React.useState(0),
+      scrollOffset = _React$useState[0],
+      setScrollOffset = _React$useState[1];
+
+  latestRef.current.scrollOffset = scrollOffset;
+  var useMeasureParent = useObserver || useRect;
+
+  var _useMeasureParent = useMeasureParent(parentRef, initialRect),
+      outerSize = _useMeasureParent[sizeKey];
+
+  latestRef.current.outerSize = outerSize;
+  var defaultScrollToFn = React.useCallback(function (offset) {
+    if (parentRef.current) {
+      parentRef.current[scrollKey] = offset;
+    }
+  }, [parentRef, scrollKey]);
+  var resolvedScrollToFn = scrollToFn || defaultScrollToFn;
+  scrollToFn = React.useCallback(function (offset) {
+    resolvedScrollToFn(offset, defaultScrollToFn);
+  }, [defaultScrollToFn, resolvedScrollToFn]);
+
+  var _React$useState2 = React.useState({}),
+      measuredCache = _React$useState2[0],
+      setMeasuredCache = _React$useState2[1];
+
+  var measure = React.useCallback(function () {
+    return setMeasuredCache({});
+  }, []);
+  var pendingMeasuredCacheIndexesRef = React.useRef([]);
+  var measurements = React.useMemo(function () {
+    var min = pendingMeasuredCacheIndexesRef.current.length > 0 ? Math.min.apply(Math, pendingMeasuredCacheIndexesRef.current) : 0;
+    pendingMeasuredCacheIndexesRef.current = [];
+    var measurements = latestRef.current.measurements.slice(0, min);
+
+    for (var i = min; i < size; i++) {
+      var key = keyExtractor(i);
+      var measuredSize = measuredCache[key];
+
+      var _start = measurements[i - 1] ? measurements[i - 1].end : paddingStart;
+
+      var _size = typeof measuredSize === 'number' ? measuredSize : estimateSize(i);
+
+      var _end = _start + _size;
+
+      measurements[i] = {
+        index: i,
+        start: _start,
+        size: _size,
+        end: _end,
+        key: key
+      };
+    }
+
+    return measurements;
+  }, [estimateSize, measuredCache, paddingStart, size, keyExtractor]);
+  var totalSize = (((_measurements = measurements[size - 1]) == null ? void 0 : _measurements.end) || paddingStart) + paddingEnd;
+  latestRef.current.measurements = measurements;
+  latestRef.current.totalSize = totalSize;
+  var element = onScrollElement ? onScrollElement.current : parentRef.current;
+  var scrollOffsetFnRef = React.useRef(scrollOffsetFn);
+  scrollOffsetFnRef.current = scrollOffsetFn;
+  useIsomorphicLayoutEffect$1(function () {
+    if (!element) {
+      setScrollOffset(0);
+      return;
+    }
+
+    var onScroll = function onScroll(event) {
+      var offset = scrollOffsetFnRef.current ? scrollOffsetFnRef.current(event) : element[scrollKey];
+      setScrollOffset(offset);
+    };
+
+    onScroll();
+    element.addEventListener('scroll', onScroll, {
+      capture: false,
+      passive: true
+    });
+    return function () {
+      element.removeEventListener('scroll', onScroll);
+    };
+  }, [element, scrollKey]);
+
+  var _calculateRange = calculateRange(latestRef.current),
+      start = _calculateRange.start,
+      end = _calculateRange.end;
+
+  var indexes = React.useMemo(function () {
+    return rangeExtractor({
+      start: start,
+      end: end,
+      overscan: overscan,
+      size: measurements.length
+    });
+  }, [start, end, overscan, measurements.length, rangeExtractor]);
+  var measureSizeRef = React.useRef(measureSize);
+  measureSizeRef.current = measureSize;
+  var virtualItems = React.useMemo(function () {
+    var virtualItems = [];
+
+    var _loop = function _loop(k, len) {
+      var i = indexes[k];
+      var measurement = measurements[i];
+
+      var item = _extends(_extends({}, measurement), {}, {
+        measureRef: function measureRef(el) {
+          if (el) {
+            var measuredSize = measureSizeRef.current(el, horizontal);
+
+            if (measuredSize !== item.size) {
+              var _scrollOffset = latestRef.current.scrollOffset;
+
+              if (item.start < _scrollOffset) {
+                defaultScrollToFn(_scrollOffset + (measuredSize - item.size));
+              }
+
+              pendingMeasuredCacheIndexesRef.current.push(i);
+              setMeasuredCache(function (old) {
+                var _extends2;
+
+                return _extends(_extends({}, old), {}, (_extends2 = {}, _extends2[item.key] = measuredSize, _extends2));
+              });
+            }
+          }
+        }
+      });
+
+      virtualItems.push(item);
+    };
+
+    for (var k = 0, len = indexes.length; k < len; k++) {
+      _loop(k);
+    }
+
+    return virtualItems;
+  }, [indexes, defaultScrollToFn, horizontal, measurements]);
+  var mountedRef = React.useRef(false);
+  useIsomorphicLayoutEffect$1(function () {
+    if (mountedRef.current) {
+      setMeasuredCache({});
+    }
+
+    mountedRef.current = true;
+  }, [estimateSize]);
+  var scrollToOffset = React.useCallback(function (toOffset, _temp) {
+    var _ref2 = _temp === void 0 ? {} : _temp,
+        _ref2$align = _ref2.align,
+        align = _ref2$align === void 0 ? 'start' : _ref2$align;
+
+    var _latestRef$current = latestRef.current,
+        scrollOffset = _latestRef$current.scrollOffset,
+        outerSize = _latestRef$current.outerSize;
+
+    if (align === 'auto') {
+      if (toOffset <= scrollOffset) {
+        align = 'start';
+      } else if (toOffset >= scrollOffset + outerSize) {
+        align = 'end';
+      } else {
+        align = 'start';
+      }
+    }
+
+    if (align === 'start') {
+      scrollToFn(toOffset);
+    } else if (align === 'end') {
+      scrollToFn(toOffset - outerSize);
+    } else if (align === 'center') {
+      scrollToFn(toOffset - outerSize / 2);
+    }
+  }, [scrollToFn]);
+  var tryScrollToIndex = React.useCallback(function (index, _temp2) {
+    var _ref3 = _temp2 === void 0 ? {} : _temp2,
+        _ref3$align = _ref3.align,
+        align = _ref3$align === void 0 ? 'auto' : _ref3$align,
+        rest = _objectWithoutPropertiesLoose(_ref3, ["align"]);
+
+    var _latestRef$current2 = latestRef.current,
+        measurements = _latestRef$current2.measurements,
+        scrollOffset = _latestRef$current2.scrollOffset,
+        outerSize = _latestRef$current2.outerSize;
+    var measurement = measurements[Math.max(0, Math.min(index, size - 1))];
+
+    if (!measurement) {
+      return;
+    }
+
+    if (align === 'auto') {
+      if (measurement.end >= scrollOffset + outerSize) {
+        align = 'end';
+      } else if (measurement.start <= scrollOffset) {
+        align = 'start';
+      } else {
+        return;
+      }
+    }
+
+    var toOffset = align === 'center' ? measurement.start + measurement.size / 2 : align === 'end' ? measurement.end : measurement.start;
+    scrollToOffset(toOffset, _extends({
+      align: align
+    }, rest));
+  }, [scrollToOffset, size]);
+  var scrollToIndex = React.useCallback(function () {
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    // We do a double request here because of
+    // dynamic sizes which can cause offset shift
+    // and end up in the wrong spot. Unfortunately,
+    // we can't know about those dynamic sizes until
+    // we try and render them. So double down!
+    tryScrollToIndex.apply(void 0, args);
+    requestAnimationFrame(function () {
+      tryScrollToIndex.apply(void 0, args);
+    });
+  }, [tryScrollToIndex]);
+  return {
+    virtualItems: virtualItems,
+    totalSize: totalSize,
+    scrollToOffset: scrollToOffset,
+    scrollToIndex: scrollToIndex,
+    measure: measure
+  };
+}
+
+var findNearestBinarySearch = function findNearestBinarySearch(low, high, getCurrentValue, value) {
+  while (low <= high) {
+    var middle = (low + high) / 2 | 0;
+    var currentValue = getCurrentValue(middle);
+
+    if (currentValue < value) {
+      low = middle + 1;
+    } else if (currentValue > value) {
+      high = middle - 1;
+    } else {
+      return middle;
+    }
+  }
+
+  if (low > 0) {
+    return low - 1;
+  } else {
+    return 0;
+  }
+};
+
+function calculateRange(_ref4) {
+  var measurements = _ref4.measurements,
+      outerSize = _ref4.outerSize,
+      scrollOffset = _ref4.scrollOffset;
+  var size = measurements.length - 1;
+
+  var getOffset = function getOffset(index) {
+    return measurements[index].start;
+  };
+
+  var start = findNearestBinarySearch(0, size, getOffset, scrollOffset);
+  var end = start;
+
+  while (end < size && measurements[end].end < scrollOffset + outerSize) {
+    end++;
+  }
+
+  return {
+    start: start,
+    end: end
+  };
+}
+
+const MRT_EditCellTextField = ({ cell, table }) => {
+    var _a;
+    const { getState, options: { tableId, enableEditing, muiTableBodyCellEditTextFieldProps, onCellEditBlur, onCellEditChange, }, setCurrentEditingCell, setCurrentEditingRow, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const [value, setValue] = useState(cell.getValue());
+    const handleChange = (event) => {
+        var _a;
+        setValue(event.target.value);
+        (_a = columnDef.onCellEditChange) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table });
+        onCellEditChange === null || onCellEditChange === void 0 ? void 0 : onCellEditChange({ event, cell, table });
+    };
+    const handleBlur = (event) => {
+        var _a;
+        if (getState().currentEditingRow) {
+            if (!row._valuesCache)
+                row._valuesCache = {};
+            row._valuesCache[column.id] = value;
+            setCurrentEditingRow(Object.assign({}, getState().currentEditingRow));
+        }
+        setCurrentEditingCell(null);
+        (_a = columnDef.onCellEditBlur) === null || _a === void 0 ? void 0 : _a.call(columnDef, { event, cell, table });
+        onCellEditBlur === null || onCellEditBlur === void 0 ? void 0 : onCellEditBlur({ event, cell, table });
+    };
+    const mTableBodyCellEditTextFieldProps = muiTableBodyCellEditTextFieldProps instanceof Function
+        ? muiTableBodyCellEditTextFieldProps({ cell, table })
+        : muiTableBodyCellEditTextFieldProps;
+    const mcTableBodyCellEditTextFieldProps = columnDef.muiTableBodyCellEditTextFieldProps instanceof Function
+        ? columnDef.muiTableBodyCellEditTextFieldProps({
+            cell,
+            table,
+        })
+        : columnDef.muiTableBodyCellEditTextFieldProps;
+    const textFieldProps = Object.assign(Object.assign({}, mTableBodyCellEditTextFieldProps), mcTableBodyCellEditTextFieldProps);
+    if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
+        return React.createElement(React.Fragment, null, (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table }));
+    }
+    return (React.createElement(TextField, Object.assign({ id: `mrt-${tableId}-edit-cell-text-field-${cell.id}`, margin: "dense", onBlur: handleBlur, onChange: handleChange, onClick: (e) => e.stopPropagation(), placeholder: columnDef.header, value: value, variant: "standard" }, textFieldProps)));
+};
+
+const MRT_CopyButton = ({ cell, children, table }) => {
+    const { options: { localization, muiTableBodyCellCopyButtonProps }, } = table;
+    const { column } = cell;
+    const { columnDef } = column;
+    const [copied, setCopied] = useState(false);
+    const handleCopy = (text) => {
+        navigator.clipboard.writeText(text);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 4000);
+    };
+    const mTableBodyCellCopyButtonProps = muiTableBodyCellCopyButtonProps instanceof Function
+        ? muiTableBodyCellCopyButtonProps({ cell, table })
+        : muiTableBodyCellCopyButtonProps;
+    const mcTableBodyCellCopyButtonProps = columnDef.muiTableBodyCellCopyButtonProps instanceof Function
+        ? columnDef.muiTableBodyCellCopyButtonProps({
+            cell,
+            table,
+        })
+        : columnDef.muiTableBodyCellCopyButtonProps;
+    const buttonProps = Object.assign(Object.assign({}, mTableBodyCellCopyButtonProps), mcTableBodyCellCopyButtonProps);
+    return (React.createElement(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: copied ? localization.copiedToClipboard : localization.clickToCopy },
+        React.createElement(Button, Object.assign({ onClick: () => handleCopy(cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, ((buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx) instanceof Function
+                ? buttonProps.sx(theme)
+                : buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx))) }), children)));
+};
+
+const MRT_TableBodyRowGrabHandle = ({ cell, rowRef, table, }) => {
+    const { options: { muiTableBodyRowDragHandleProps, onRowDrop }, } = table;
+    const iconButtonProps = muiTableBodyRowDragHandleProps instanceof Function
+        ? muiTableBodyRowDragHandleProps({ row: cell.row, table })
+        : muiTableBodyRowDragHandleProps;
+    const handleDragStart = (e) => {
+        e.dataTransfer.setDragImage(rowRef.current, 0, 0);
+        table.setCurrentDraggingRow(cell.row);
+    };
+    const handleDragEnd = (event) => {
+        onRowDrop === null || onRowDrop === void 0 ? void 0 : onRowDrop({
+            event,
+            draggedRow: table.getState().currentDraggingRow,
+            targetRow: table.getState().currentHoveredRow,
+        });
+        table.setCurrentDraggingRow(null);
+        table.setCurrentHoveredRow(null);
+    };
+    return (React.createElement(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragStart: handleDragStart, onDragEnd: handleDragEnd, table: table }));
+};
+
+const MRT_TableBodyCell = ({ cell, enableHover, rowIndex, rowRef, table, }) => {
+    var _a, _b, _c, _d, _f, _g, _h, _j;
+    const theme = useTheme();
+    const { getState, options: { editingMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enablePagination, enableRowNumbers, muiTableBodyCellProps, muiTableBodyCellSkeletonProps, rowNumberMode, tableId, }, setCurrentEditingCell, setCurrentHoveredColumn, } = table;
+    const { currentDraggingColumn, currentEditingCell, currentEditingRow, currentHoveredColumn, density, isLoading, showSkeletons, } = getState();
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const mTableCellBodyProps = muiTableBodyCellProps instanceof Function
+        ? muiTableBodyCellProps({ cell, table })
+        : muiTableBodyCellProps;
+    const mcTableCellBodyProps = columnDef.muiTableBodyCellProps instanceof Function
+        ? columnDef.muiTableBodyCellProps({ cell, table })
+        : columnDef.muiTableBodyCellProps;
+    const tableCellProps = Object.assign(Object.assign({}, mTableCellBodyProps), mcTableCellBodyProps);
+    const isEditable = (enableEditing || columnDef.enableEditing) &&
+        columnDef.enableEditing !== false;
+    const isEditing = isEditable &&
+        (editingMode === 'table' ||
+            (currentEditingRow === null || currentEditingRow === void 0 ? void 0 : currentEditingRow.id) === row.id ||
+            (currentEditingCell === null || currentEditingCell === void 0 ? void 0 : currentEditingCell.id) === cell.id);
+    const [skeletonWidth, setSkeletonWidth] = useState(0);
+    useEffect(() => setSkeletonWidth(isLoading || showSkeletons
+        ? columnDefType === 'display'
+            ? column.getSize() / 2
+            : Math.round(Math.random() * (column.getSize() - column.getSize() / 3) +
+                column.getSize() / 3)
+        : 100), [isLoading, showSkeletons]);
+    const handleDoubleClick = (_event) => {
+        if ((enableEditing || columnDef.enableEditing) &&
+            columnDef.enableEditing !== false &&
+            editingMode === 'cell') {
+            setCurrentEditingCell(cell);
+            setTimeout(() => {
+                const textField = document.getElementById(`mrt-${tableId}-edit-cell-text-field-${cell.id}`);
+                if (textField) {
+                    textField.focus();
+                    textField.select();
+                }
+            }, 200);
+        }
+    };
+    const getIsLastLeftPinnedColumn = () => {
+        return (column.getIsPinned() === 'left' &&
+            table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
+    };
+    const getIsFirstRightPinnedColumn = () => {
+        return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+    };
+    const getTotalRight = () => {
+        return ((table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150);
+    };
+    const handleDragEnter = (_e) => {
+        if (enableGrouping && (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === 'drop-zone') {
+            setCurrentHoveredColumn(null);
+        }
+        if (enableColumnOrdering && currentDraggingColumn) {
+            setCurrentHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
+        }
+    };
+    const draggingBorder = (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+            ? `2px dashed ${theme.palette.primary.main}`
+            : undefined;
+    const draggingBorders = draggingBorder
+        ? {
+            borderLeft: draggingBorder,
+            borderRight: draggingBorder,
+            borderBottom: row.index ===
+                (enablePagination
+                    ? table.getRowModel()
+                    : table.getPrePaginationRowModel()).rows.length -
+                    1
+                ? draggingBorder
+                : undefined,
+        }
+        : undefined;
+    return (React.createElement(TableCell, Object.assign({ onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter }, tableCellProps, { sx: (theme) => {
+            var _a;
+            return (Object.assign(Object.assign(Object.assign({ backgroundColor: column.getIsPinned()
+                    ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
+                    : undefined, boxShadow: getIsLastLeftPinnedColumn()
+                    ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+                    : getIsFirstRightPinnedColumn()
+                        ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
+                        : undefined, cursor: isEditable && editingMode === 'cell' ? 'pointer' : 'text', left: column.getIsPinned() === 'left'
+                    ? `${column.getStart('left')}px`
+                    : undefined, opacity: (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id ||
+                    (currentHoveredColumn === null || currentHoveredColumn === void 0 ? void 0 : currentHoveredColumn.id) === column.id
+                    ? 0.5
+                    : 1, overflow: 'hidden', p: density === 'compact'
+                    ? columnDefType === 'display'
+                        ? '0 0.5rem'
+                        : '0.5rem'
+                    : density === 'comfortable'
+                        ? columnDefType === 'display'
+                            ? '0.5rem 0.75rem'
+                            : '1rem'
+                        : columnDefType === 'display'
+                            ? '1rem 1.25rem'
+                            : '1.5rem', pl: column.id === 'mrt-row-expand'
+                    ? `${row.depth +
+                        (density === 'compact'
+                            ? 0.5
+                            : density === 'comfortable'
+                                ? 0.75
+                                : 1.25)}rem`
+                    : undefined, position: column.getIsPinned() ? 'sticky' : 'relative', right: column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, transition: 'all 0.2s ease-in-out', whiteSpace: density === 'compact' ? 'nowrap' : 'normal', zIndex: (currentDraggingColumn === null || currentDraggingColumn === void 0 ? void 0 : currentDraggingColumn.id) === column.id
+                    ? 2
+                    : column.getIsPinned()
+                        ? 1
+                        : undefined, '&:hover': {
+                    backgroundColor: enableHover && enableEditing && editingMode !== 'row'
+                        ? theme.palette.mode === 'dark'
+                            ? `${lighten(theme.palette.background.default, 0.13)} !important`
+                            : `${darken(theme.palette.background.default, 0.07)} !important`
+                        : undefined,
+                } }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+                ? tableCellProps.sx(theme)
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx)), draggingBorders), { maxWidth: `min(${column.getSize()}px, fit-content)`, minWidth: `max(${column.getSize()}px, ${(_a = columnDef.minSize) !== null && _a !== void 0 ? _a : 30}px)`, width: column.getSize() }));
+        } }),
+        React.createElement(React.Fragment, null, cell.getIsPlaceholder() ? null : isLoading || showSkeletons ? (React.createElement(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, muiTableBodyCellSkeletonProps))) : enableRowNumbers &&
+            rowNumberMode === 'static' &&
+            column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (React.createElement(MRT_TableBodyRowGrabHandle, { cell: cell, rowRef: rowRef, table: table })) : columnDefType === 'display' ? ((_a = columnDef.Cell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, table })) : isEditing ? (React.createElement(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+            columnDef.enableClickToCopy !== false ? (React.createElement(React.Fragment, null,
+            React.createElement(MRT_CopyButton, { cell: cell, table: table },
+                React.createElement(React.Fragment, null, (_c = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, table })) !== null && _c !== void 0 ? _c : cell.renderValue())),
+            cell.getIsGrouped() && React.createElement(React.Fragment, null,
+                " (", (_d = row.subRows) === null || _d === void 0 ? void 0 :
+                _d.length,
+                ")"))) : (React.createElement(React.Fragment, null, (_g = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.Cell) === null || _f === void 0 ? void 0 : _f.call(columnDef, { cell, column, table })) !== null && _g !== void 0 ? _g : cell.renderValue(),
+            cell.getIsGrouped() && React.createElement(React.Fragment, null,
+                " (", (_j = (_h = row.subRows) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : '',
+                ")"))))));
+};
+
+const MRT_TableDetailPanel = ({ row, table }) => {
+    const { getVisibleLeafColumns, options: { muiTableBodyRowProps, muiTableDetailPanelProps, renderDetailPanel, }, } = table;
+    const tableRowProps = muiTableBodyRowProps instanceof Function
+        ? muiTableBodyRowProps({ row, table })
+        : muiTableBodyRowProps;
+    const tableCellProps = muiTableDetailPanelProps instanceof Function
+        ? muiTableDetailPanelProps({ row, table })
+        : muiTableDetailPanelProps;
+    return (React.createElement(TableRow, Object.assign({}, tableRowProps),
+        React.createElement(TableCell, Object.assign({ colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ borderBottom: !row.getIsExpanded() ? 'none' : undefined, pb: row.getIsExpanded() ? '1rem' : 0, pt: row.getIsExpanded() ? '1rem' : 0, transition: 'all 0.2s ease-in-out', width: `${table.getTotalSize()}px` }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+                ? tableCellProps.sx(theme)
+                : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }), renderDetailPanel && (React.createElement(Collapse, { in: row.getIsExpanded() }, renderDetailPanel({ row, table }))))));
+};
+
+const MRT_TableBodyRow = ({ row, rowIndex, table }) => {
+    var _a, _b;
+    const theme = useTheme();
+    const { getIsSomeColumnsPinned, getState, options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel }, setCurrentHoveredRow, } = table;
+    const { currentDraggingRow, currentHoveredRow } = getState();
+    const tableRowProps = muiTableBodyRowProps instanceof Function
+        ? muiTableBodyRowProps({ row, table })
+        : muiTableBodyRowProps;
+    const handleDragEnter = (_e) => {
+        if (enableRowOrdering && currentDraggingRow) {
+            setCurrentHoveredRow(row);
+        }
+    };
+    const rowRef = useRef(null);
+    const draggingBorder = (currentDraggingRow === null || currentDraggingRow === void 0 ? void 0 : currentDraggingRow.id) === row.id
+        ? `1px dashed ${theme.palette.text.secondary}`
+        : (currentHoveredRow === null || currentHoveredRow === void 0 ? void 0 : currentHoveredRow.id) === row.id
+            ? `2px dashed ${theme.palette.primary.main}`
+            : undefined;
+    const draggingBorders = draggingBorder
+        ? {
+            border: draggingBorder,
+        }
+        : undefined;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(TableRow, Object.assign({ onDragEnter: handleDragEnter, hover: true, selected: row.getIsSelected(), ref: rowRef }, tableRowProps, { sx: (theme) => (Object.assign(Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.06), opacity: (currentDraggingRow === null || currentDraggingRow === void 0 ? void 0 : currentDraggingRow.id) === row.id ||
+                    (currentHoveredRow === null || currentHoveredRow === void 0 ? void 0 : currentHoveredRow.id) === row.id
+                    ? 0.5
+                    : 1, transition: 'all 0.2s ease-in-out', '&:hover td': {
+                    backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false && getIsSomeColumnsPinned()
+                        ? theme.palette.mode === 'dark'
+                            ? `${lighten(theme.palette.background.default, 0.12)}`
+                            : `${darken(theme.palette.background.default, 0.05)}`
+                        : undefined,
+                } }, ((tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx) instanceof Function
+                ? tableRowProps.sx(theme)
+                : tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx)), draggingBorders)) }), (_b = (_a = row === null || row === void 0 ? void 0 : row.getVisibleCells()) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, (cell) => (React.createElement(MRT_TableBodyCell, { cell: cell, key: cell.id, enableHover: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false, rowIndex: rowIndex, rowRef: rowRef, table: table })))),
+        renderDetailPanel && !row.getIsGrouped() && (React.createElement(MRT_TableDetailPanel, { row: row, table: table }))));
+};
+
+const MRT_TableBody = ({ table, tableContainerRef }) => {
+    const { getRowModel, getPrePaginationRowModel, getState, options: { enableGlobalFilterRankedResults, enablePagination, enableRowVirtualization, muiTableBodyProps, virtualizerProps, }, } = table;
+    const { globalFilter, pagination, sorting } = getState();
+    const tableBodyProps = muiTableBodyProps instanceof Function
+        ? muiTableBodyProps({ table })
+        : muiTableBodyProps;
+    const vProps = virtualizerProps instanceof Function
+        ? virtualizerProps({ table })
+        : virtualizerProps;
+    const rows = useMemo(() => {
+        if (enableGlobalFilterRankedResults &&
+            globalFilter &&
+            !Object.values(sorting).some(Boolean)) {
+            const rankedRows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
+            if (enablePagination) {
+                return rankedRows.slice(pagination.pageIndex, pagination.pageSize);
+            }
+            return rankedRows;
+        }
+        return enablePagination
+            ? getRowModel().rows
+            : getPrePaginationRowModel().rows;
+    }, [
+        enableGlobalFilterRankedResults,
+        (enableGlobalFilterRankedResults && globalFilter) || !enablePagination
+            ? getPrePaginationRowModel().rows
+            : getRowModel().rows,
+        globalFilter,
+    ]);
+    const rowVirtualizer = enableRowVirtualization
+        ? useVirtual(Object.assign({ size: rows.length, parentRef: tableContainerRef, overscan: 15 }, vProps))
+        : {};
+    // const rowVirtualizer: Virtualizer = enableRowVirtualization
+    //   ? useVirtualizer({
+    //       count: rows.length,
+    //       estimateSize: () => (density === 'compact' ? 25 : 50),
+    //       getScrollElement: () => tableContainerRef.current as HTMLDivElement,
+    //       overscan: 15,
+    //       ...vProps,
+    //     })
+    //   : ({} as any);
+    const virtualRows = enableRowVirtualization
+        ? rowVirtualizer.virtualItems
+        : [];
+    // const virtualRows = enableRowVirtualization
+    //   ? rowVirtualizer.getVirtualItems()
+    //   : [];
+    let paddingTop = 0;
+    let paddingBottom = 0;
+    if (enableRowVirtualization) {
+        paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
+        paddingBottom = !!virtualRows.length
+            ? rowVirtualizer.totalSize - virtualRows[virtualRows.length - 1].end
+            : 0;
+    }
+    // if (enableRowVirtualization) {
+    //   paddingTop = !!virtualRows.length ? virtualRows[0].start : 0;
+    //   paddingBottom = !!virtualRows.length
+    //     ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end
+    //     : 0;
+    // }
+    return (React.createElement(TableBody, Object.assign({}, tableBodyProps),
+        enableRowVirtualization && paddingTop > 0 && (React.createElement("tr", null,
+            React.createElement("td", { style: { height: `${paddingTop}px` } }))),
+        (enableRowVirtualization ? virtualRows : rows).map((rowOrVirtualRow, rowIndex) => {
+            const row = enableRowVirtualization
+                ? rows[rowOrVirtualRow.index]
+                : rowOrVirtualRow;
+            return (React.createElement(MRT_TableBodyRow, { key: row.id, row: row, rowIndex: enableRowVirtualization ? rowOrVirtualRow.index : rowIndex, table: table }));
+        }),
+        enableRowVirtualization && paddingBottom > 0 && (React.createElement("tr", null,
+            React.createElement("td", { style: { height: `${paddingBottom}px` } })))));
+};
+
+const MRT_TableFooterCell = ({ footer, table }) => {
+    var _a, _b, _c;
+    const { getState, options: { muiTableFooterCellProps, enableColumnResizing }, } = table;
+    const { density } = getState();
+    const { column } = footer;
+    const { columnDef } = column;
+    const { columnDefType } = columnDef;
+    const mTableFooterCellProps = muiTableFooterCellProps instanceof Function
+        ? muiTableFooterCellProps({ column, table })
+        : muiTableFooterCellProps;
+    const mcTableFooterCellProps = columnDef.muiTableFooterCellProps instanceof Function
+        ? columnDef.muiTableFooterCellProps({ column, table })
+        : columnDef.muiTableFooterCellProps;
+    const tableCellProps = Object.assign(Object.assign({}, mTableFooterCellProps), mcTableFooterCellProps);
+    return (React.createElement(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: theme.palette.background.default, backgroundImage: `linear-gradient(${alpha(theme.palette.common.white, 0.05)},${alpha(theme.palette.common.white, 0.05)})`, fontWeight: 'bold', maxWidth: `${column.getSize()}px`, minWidth: `${column.getSize()}px`, p: density === 'compact'
+                ? '0.5rem'
+                : density === 'comfortable'
+                    ? '1rem'
+                    : '1.5rem', transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`, width: column.getSize(), verticalAlign: 'text-top' }, ((tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx) instanceof Function
+            ? tableCellProps.sx(theme)
+            : tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx))) }),
+        React.createElement(React.Fragment, null, footer.isPlaceholder
+            ? null
+            : (_c = (_b = (columnDef.Footer instanceof Function
+                ? (_a = columnDef.Footer) === null || _a === void 0 ? void 0 : _a.call(columnDef, {
+                    column,
+                    footer,
+                    table,
+                })
+                : columnDef.Footer)) !== null && _b !== void 0 ? _b : columnDef.footer) !== null && _c !== void 0 ? _c : null)));
+};
+
+const MRT_TableFooterRow = ({ footerGroup, table }) => {
+    var _a;
+    const { options: { muiTableFooterRowProps }, } = table;
+    // if no content in row, skip row
+    if (!((_a = footerGroup.headers) === null || _a === void 0 ? void 0 : _a.some((header) => (typeof header.column.columnDef.footer === 'string' &&
+        !!header.column.columnDef.footer) ||
+        header.column.columnDef.Footer)))
+        return null;
+    const tableRowProps = muiTableFooterRowProps instanceof Function
+        ? muiTableFooterRowProps({ footerGroup, table })
+        : muiTableFooterRowProps;
+    return (React.createElement(TableRow, Object.assign({}, tableRowProps), footerGroup.headers.map((footer) => (React.createElement(MRT_TableFooterCell, { footer: footer, key: footer.id, table: table })))));
+};
+
+const MRT_TableFooter = ({ table }) => {
+    const { getFooterGroups, options: { muiTableFooterProps }, } = table;
+    const tableFooterProps = muiTableFooterProps instanceof Function
+        ? muiTableFooterProps({ table })
+        : muiTableFooterProps;
+    return (React.createElement(TableFooter, Object.assign({}, tableFooterProps), getFooterGroups().map((footerGroup) => (React.createElement(MRT_TableFooterRow, { footerGroup: footerGroup, key: footerGroup.id, table: table })))));
+};
+
+const MRT_Table = ({ tableContainerRef, table }) => {
+    const { getState, options: { enableColumnResizing, enableRowVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, muiTableProps, }, } = table;
+    const { isFullScreen } = getState();
+    const tableProps = muiTableProps instanceof Function
+        ? muiTableProps({ table })
+        : muiTableProps;
+    return (React.createElement(Table, Object.assign({ stickyHeader: enableStickyHeader || enableRowVirtualization || isFullScreen }, tableProps, { sx: (theme) => (Object.assign({ tableLayout: enableColumnResizing || enableRowVirtualization ? 'fixed' : 'auto' }, ((tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx) instanceof Function
+            ? tableProps.sx(theme)
+            : tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx))) }),
+        enableTableHead && React.createElement(MRT_TableHead, { table: table }),
+        React.createElement(MRT_TableBody, { tableContainerRef: tableContainerRef, table: table }),
+        enableTableFooter && React.createElement(MRT_TableFooter, { table: table })));
+};
+
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
+const MRT_TableContainer = ({ table }) => {
+    var _a;
+    const { getState, options: { enableStickyHeader, enableRowVirtualization, muiTableContainerProps, tableId, }, } = table;
+    const { isFullScreen } = getState();
+    const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
+    const tableContainerProps = muiTableContainerProps instanceof Function
+        ? muiTableContainerProps({ table })
+        : muiTableContainerProps;
+    const tableContainerRef = (_a = tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) !== null && _a !== void 0 ? _a : useRef(null);
+    useIsomorphicLayoutEffect(() => {
+        var _a, _b, _c, _d;
+        const topToolbarHeight = typeof document !== 'undefined'
+            ? (_b = (_a = document === null || document === void 0 ? void 0 : document.getElementById(`mrt-${tableId}-toolbar-top`)) === null || _a === void 0 ? void 0 : _a.offsetHeight) !== null && _b !== void 0 ? _b : 0
+            : 0;
+        const bottomToolbarHeight = typeof document !== 'undefined'
+            ? (_d = (_c = document === null || document === void 0 ? void 0 : document.getElementById(`mrt-${tableId}-toolbar-bottom`)) === null || _c === void 0 ? void 0 : _c.offsetHeight) !== null && _d !== void 0 ? _d : 0
+            : 0;
+        setTotalToolbarHeight(topToolbarHeight + bottomToolbarHeight);
+    });
+    return (React.createElement(TableContainer, Object.assign({ ref: tableContainerRef }, tableContainerProps, { sx: (theme) => (Object.assign({ maxWidth: '100%', maxHeight: enableStickyHeader || enableRowVirtualization
+                ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
+                : undefined, overflow: 'auto' }, ((tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx) instanceof Function
+            ? tableContainerProps.sx(theme)
+            : tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx))), style: Object.assign({ maxHeight: isFullScreen
+                ? `calc(100vh - ${totalToolbarHeight}px)`
+                : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style) }),
+        React.createElement(MRT_Table, { tableContainerRef: tableContainerRef, table: table })));
+};
+
+const MRT_TablePaper = ({ table }) => {
+    const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps }, } = table;
+    const { isFullScreen } = getState();
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            if (isFullScreen) {
+                document.body.style.height = '100vh';
+            }
+            else {
+                document.body.style.height = 'auto';
+            }
+        }
+    }, [isFullScreen]);
+    const tablePaperProps = muiTablePaperProps instanceof Function
+        ? muiTablePaperProps({ table })
+        : muiTablePaperProps;
+    return (React.createElement(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { sx: Object.assign({ transition: 'all 0.2s ease-in-out' }, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx), style: Object.assign(Object.assign({}, tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), { height: isFullScreen ? '100vh' : undefined, margin: isFullScreen ? '0' : undefined, maxHeight: isFullScreen ? '100vh' : undefined, maxWidth: isFullScreen ? '100vw' : undefined, padding: isFullScreen ? '0' : undefined, width: isFullScreen ? '100vw' : undefined }) }),
+        enableTopToolbar && React.createElement(MRT_TopToolbar, { table: table }),
+        React.createElement(MRT_TableContainer, { table: table }),
+        enableBottomToolbar && React.createElement(MRT_BottomToolbar, { table: table })));
+};
+
+const MRT_TableRoot = (props) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4;
+    const [tableId, setIdPrefix] = useState(props.tableId);
+    useEffect(() => { var _a; return setIdPrefix((_a = props.tableId) !== null && _a !== void 0 ? _a : Math.random().toString(36).substring(2, 9)); }, [props.tableId]);
+    const initialState = useMemo(() => {
+        var _a, _b;
+        const initState = (_a = props.initialState) !== null && _a !== void 0 ? _a : {};
+        initState.columnOrder =
+            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(props);
+        return initState;
+    }, []);
+    const [columnOrder, setColumnOrder] = useState((_a = initialState.columnOrder) !== null && _a !== void 0 ? _a : []);
+    const [currentDraggingColumn, setCurrentDraggingColumn] = useState((_b = initialState.currentDraggingColumn) !== null && _b !== void 0 ? _b : null);
+    const [currentDraggingRow, setCurrentDraggingRow] = useState((_c = initialState.currentDraggingRow) !== null && _c !== void 0 ? _c : null);
+    const [currentEditingCell, setCurrentEditingCell] = useState((_d = initialState.currentEditingCell) !== null && _d !== void 0 ? _d : null);
+    const [currentEditingRow, setCurrentEditingRow] = useState((_e = initialState.currentEditingRow) !== null && _e !== void 0 ? _e : null);
+    const [currentHoveredColumn, setCurrentHoveredColumn] = useState((_f = initialState.currentHoveredColumn) !== null && _f !== void 0 ? _f : null);
+    const [currentHoveredRow, setCurrentHoveredRow] = useState((_g = initialState.currentHoveredRow) !== null && _g !== void 0 ? _g : null);
+    const [density, setDensity] = useState((_h = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _h !== void 0 ? _h : 'comfortable');
+    const [isFullScreen, setIsFullScreen] = useState((_j = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _j !== void 0 ? _j : false);
+    const [showAlertBanner, setShowAlertBanner] = useState((_l = (_k = props.initialState) === null || _k === void 0 ? void 0 : _k.showAlertBanner) !== null && _l !== void 0 ? _l : false);
+    const [showColumnFilters, setShowFilters] = useState((_m = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _m !== void 0 ? _m : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_o = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _o !== void 0 ? _o : false);
+    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+        return ({
+            [(_d = (_b = (_a = col.id) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : (_c = col.accessorKey) === null || _c === void 0 ? void 0 : _c.toString()) !== null && _d !== void 0 ? _d : '']: col.filterFn instanceof Function
+                ? (_e = col.filterFn.name) !== null && _e !== void 0 ? _e : 'custom'
+                : (_m = (_f = col.filterFn) !== null && _f !== void 0 ? _f : (_g = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _g === void 0 ? void 0 : _g[(_l = (_j = (_h = col.id) === null || _h === void 0 ? void 0 : _h.toString()) !== null && _j !== void 0 ? _j : (_k = col.accessorKey) === null || _k === void 0 ? void 0 : _k.toString()) !== null && _l !== void 0 ? _l : '']) !== null && _m !== void 0 ? _m : getDefaultColumnFilterFn(col),
+        });
+    })));
+    const [globalFilterFn, setGlobalFilterFn] = useState(props.globalFilterFn instanceof String
+        ? props.globalFilterFn
+        : 'fuzzy');
+    const displayColumns = useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        return [
+            columnOrder.includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ header: (_a = props.localization) === null || _a === void 0 ? void 0 : _a.move, size: 60 }, defaultDisplayColumnDefOptions), (_b = props.displayColumnDefOptions) === null || _b === void 0 ? void 0 : _b['mrt-row-drag']), { id: 'mrt-row-drag' }),
+            columnOrder.includes('mrt-row-actions') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell }) => (React.createElement(MRT_ToggleRowActionMenuButton, { row: cell.row, table: table })), header: (_c = props.localization) === null || _c === void 0 ? void 0 : _c.actions, size: 70 }, defaultDisplayColumnDefOptions), (_d = props.displayColumnDefOptions) === null || _d === void 0 ? void 0 : _d['mrt-row-actions']), { id: 'mrt-row-actions' }),
+            columnOrder.includes('mrt-row-expand') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell }) => (React.createElement(MRT_ExpandButton, { row: cell.row, table: table })), Header: () => props.enableExpandAll ? (React.createElement(MRT_ExpandAllButton, { table: table })) : null, header: (_e = props.localization) === null || _e === void 0 ? void 0 : _e.expand, size: 60 }, defaultDisplayColumnDefOptions), (_f = props.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-expand']), { id: 'mrt-row-expand' }),
+            columnOrder.includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell }) => (React.createElement(MRT_SelectCheckbox, { row: cell.row, table: table })), Header: () => props.enableSelectAll ? (React.createElement(MRT_SelectCheckbox, { selectAll: true, table: table })) : null, header: (_g = props.localization) === null || _g === void 0 ? void 0 : _g.select, size: 60 }, defaultDisplayColumnDefOptions), (_h = props.displayColumnDefOptions) === null || _h === void 0 ? void 0 : _h['mrt-row-select']), { id: 'mrt-row-select' }),
+            columnOrder.includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ cell }) => cell.row.index + 1, Header: () => { var _a; return (_a = props.localization) === null || _a === void 0 ? void 0 : _a.rowNumber; }, header: (_j = props.localization) === null || _j === void 0 ? void 0 : _j.rowNumbers, size: 60 }, defaultDisplayColumnDefOptions), (_k = props.displayColumnDefOptions) === null || _k === void 0 ? void 0 : _k['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
+        ].filter(Boolean);
+    }, [
+        columnOrder,
+        props.displayColumnDefOptions,
+        props.editingMode,
+        props.enableColumnDragging,
+        props.enableColumnOrdering,
+        props.enableEditing,
+        props.enableExpandAll,
+        props.enableExpanding,
+        props.enableGrouping,
+        props.enableRowActions,
+        props.enableRowDragging,
+        props.enableRowNumbers,
+        props.enableRowOrdering,
+        props.enableRowSelection,
+        props.enableSelectAll,
+        props.localization,
+        props.muiTableBodyCellProps,
+        props.muiTableHeadCellProps,
+        props.positionActionsColumn,
+    ]);
+    const columnDefs = useMemo(() => prepareColumns([...displayColumns, ...props.columns], columnFilterFns, props.filterFns, props.sortingFns), [columnFilterFns, displayColumns, props.columns]);
+    const data = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        return (((_a = props.state) === null || _a === void 0 ? void 0 : _a.isLoading) || ((_b = props.state) === null || _b === void 0 ? void 0 : _b.showSkeletons)) &&
+            !props.data.length
+            ? [
+                ...Array(((_d = (_c = props.state) === null || _c === void 0 ? void 0 : _c.pagination) === null || _d === void 0 ? void 0 : _d.pageSize) ||
+                    ((_e = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) === null || _e === void 0 ? void 0 : _e.pageSize) ||
+                    10).fill(null),
+            ].map(() => Object.assign({}, ...getAllLeafColumnDefs(props.columns).map((col) => {
+                var _a, _b;
+                return ({
+                    [(_b = (_a = col.id) !== null && _a !== void 0 ? _a : col.accessorKey) !== null && _b !== void 0 ? _b : '']: null,
+                });
+            })))
+            : props.data;
+    }, [props.data, (_p = props.state) === null || _p === void 0 ? void 0 : _p.isLoading, (_q = props.state) === null || _q === void 0 ? void 0 : _q.showSkeletons]);
+    //@ts-ignore
+    const table = Object.assign(Object.assign({}, useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: getExpandedRowModel(), getFacetedRowModel: getFacetedRowModel(), getFilteredRowModel: getFilteredRowModel(), getGroupedRowModel: getGroupedRowModel(), getPaginationRowModel: getPaginationRowModel(), getSortedRowModel: getSortedRowModel(), onColumnOrderChange: setColumnOrder, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows }, props), { 
+        //@ts-ignore
+        columns: columnDefs, data, globalFilterFn: 
+        //@ts-ignore
+        (_r = props.filterFns[globalFilterFn]) !== null && _r !== void 0 ? _r : props.filterFns.fuzzy, initialState, state: Object.assign({ columnOrder,
+            currentDraggingColumn,
+            currentDraggingRow,
+            currentEditingCell,
+            currentEditingRow,
+            columnFilterFns,
+            globalFilterFn,
+            currentHoveredColumn,
+            currentHoveredRow,
+            density,
+            isFullScreen,
+            showAlertBanner,
+            showColumnFilters,
+            showGlobalFilter }, props.state), tableId }))), { setCurrentDraggingColumn: (_s = props.onCurrentDraggingColumnChange) !== null && _s !== void 0 ? _s : setCurrentDraggingColumn, setCurrentDraggingRow: (_t = props.onCurrentDraggingRowChange) !== null && _t !== void 0 ? _t : setCurrentDraggingRow, setCurrentEditingCell: (_u = props.onCurrentEditingCellChange) !== null && _u !== void 0 ? _u : setCurrentEditingCell, setCurrentEditingRow: (_v = props.onCurrentEditingRowChange) !== null && _v !== void 0 ? _v : setCurrentEditingRow, setColumnFilterFns: (_w = props.onCurrentFilterFnsChange) !== null && _w !== void 0 ? _w : setColumnFilterFns, setGlobalFilterFn: (_x = props.onCurrentGlobalFilterFnChange) !== null && _x !== void 0 ? _x : setGlobalFilterFn, setCurrentHoveredColumn: (_y = props.onCurrentHoveredColumnChange) !== null && _y !== void 0 ? _y : setCurrentHoveredColumn, setCurrentHoveredRow: (_z = props.onCurrentHoveredRowChange) !== null && _z !== void 0 ? _z : setCurrentHoveredRow, setDensity: (_0 = props.onDensityChange) !== null && _0 !== void 0 ? _0 : setDensity, setIsFullScreen: (_1 = props.onIsFullScreenChange) !== null && _1 !== void 0 ? _1 : setIsFullScreen, setShowAlertBanner: (_2 = props.onShowAlertBannerChange) !== null && _2 !== void 0 ? _2 : setShowAlertBanner, setShowFilters: (_3 = props.onShowFiltersChange) !== null && _3 !== void 0 ? _3 : setShowFilters, setShowGlobalFilter: (_4 = props.onShowGlobalFilterChange) !== null && _4 !== void 0 ? _4 : setShowGlobalFilter });
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Dialog, { PaperComponent: Box, TransitionComponent: Grow, disablePortal: true, fullScreen: true, keepMounted: false, onClose: () => setIsFullScreen(false), open: isFullScreen, transitionDuration: 400 },
+            React.createElement(MRT_TablePaper, { table: table })),
+        !isFullScreen && React.createElement(MRT_TablePaper, { table: table })));
+};
+
+var MaterialReactTable = (_a) => {
+    var { aggregationFns, autoResetExpanded = false, columnResizeMode = 'onEnd', defaultColumn = { minSize: 40, maxSize: 1000, size: 180 }, editingMode = 'row', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilterChangeMode = false, enableColumnFilters = true, enableColumnOrdering = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterChangeMode = false, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enablePinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, localization, positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'original', selectAllMode = 'all', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnResizeMode", "defaultColumn", "editingMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilterChangeMode", "enableColumnFilters", "enableColumnOrdering", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterChangeMode", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enablePinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "localization", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "selectAllMode", "sortingFns"]);
+    return (React.createElement(MRT_TableRoot, Object.assign({ aggregationFns: Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns), autoResetExpanded: autoResetExpanded, columnResizeMode: columnResizeMode, defaultColumn: defaultColumn, editingMode: editingMode, enableBottomToolbar: enableBottomToolbar, enableColumnActions: enableColumnActions, enableColumnFilterChangeMode: enableColumnFilterChangeMode, enableColumnFilters: enableColumnFilters, enableColumnOrdering: enableColumnOrdering, enableColumnResizing: enableColumnResizing, enableDensityToggle: enableDensityToggle, enableExpandAll: enableExpandAll, enableFilters: enableFilters, enableFullScreenToggle: enableFullScreenToggle, enableGlobalFilter: enableGlobalFilter, enableGlobalFilterChangeMode: enableGlobalFilterChangeMode, enableGlobalFilterRankedResults: enableGlobalFilterRankedResults, enableGrouping: enableGrouping, enableHiding: enableHiding, enableMultiRowSelection: enableMultiRowSelection, enableMultiSort: enableMultiSort, enablePagination: enablePagination, enablePinning: enablePinning, enableRowSelection: enableRowSelection, enableSelectAll: enableSelectAll, enableSorting: enableSorting, enableStickyHeader: enableStickyHeader, enableTableFooter: enableTableFooter, enableTableHead: enableTableHead, enableToolbarInternalActions: enableToolbarInternalActions, enableTopToolbar: enableTopToolbar, filterFns: Object.assign(Object.assign({}, MRT_FilterFns), filterFns), icons: Object.assign(Object.assign({}, MRT_Default_Icons), icons), localization: Object.assign(Object.assign({}, MRT_DefaultLocalization_EN), localization), positionActionsColumn: positionActionsColumn, positionExpandColumn: positionExpandColumn, positionGlobalFilter: positionGlobalFilter, positionPagination: positionPagination, positionToolbarAlertBanner: positionToolbarAlertBanner, positionToolbarDropZone: positionToolbarDropZone, rowNumberMode: rowNumberMode, selectAllMode: selectAllMode, sortingFns: Object.assign(Object.assign({}, MRT_SortingFns), sortingFns) }, rest)));
+};
+
+export { MRT_FullScreenToggleButton, MRT_GlobalFilterTextField, MRT_ShowHideColumnsButton, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleGlobalFilterButton, MaterialReactTable as default };
+//# sourceMappingURL=material-react-table.esm.js.map