material-react-table 2.0.0-beta.6 → 2.0.0-beta.7

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

@@ -11,7 +11,7 @@ import { lighten, darken, alpha, useTheme } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import TableCell from '@mui/material/TableCell';
 import Box from '@mui/material/Box';
-import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, aggregationFns, filterFns } from '@tanstack/react-table';
+import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, aggregationFns, filterFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel } from '@tanstack/react-table';
 import highlightWords from 'highlight-words';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
@@ -291,15 +291,15 @@ const createRow = (table, originalRow) => createRow$1(table, 'mrt-row-create', o
     [getColumnId(col)]: '',
 }))), -1, 0);
 const extraIndexRangeExtractor = (range, draggingIndex) => {
-    const newIndexs = defaultRangeExtractor(range);
+    const newIndexes = defaultRangeExtractor(range);
     if (draggingIndex >= 0 &&
         draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
-        newIndexs.unshift(draggingIndex);
+        newIndexes.unshift(draggingIndex);
     }
     if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
-        newIndexs.push(draggingIndex);
+        newIndexes.push(draggingIndex);
     }
-    return newIndexs;
+    return newIndexes;
 };
 function createMRTColumnHelper() {
     return {
@@ -318,7 +318,7 @@ const getMRTTheme = (table, theme) => (Object.assign({ baseBackgroundColor: them
         ? lighten(theme.palette.background.default, 0.05)
         : theme.palette.background.default, draggingBorderColor: theme.palette.primary.main, matchHighlightColor: theme.palette.mode === 'dark'
         ? darken(theme.palette.warning.dark, 0.25)
-        : lighten(theme.palette.warning.light, 0.5), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2) }, table.options.mrtTheme));
+        : lighten(theme.palette.warning.light, 0.5), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2) }, parseFromValuesOrFunc(table.options.mrtTheme, theme)));
 const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { options: { layoutMode }, } = table;
@@ -824,7 +824,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
     };
     const rowRef = useRef(null);
     const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
-    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, ref: (node) => {
+    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, "data-pinned": !!isPinned || undefined, "data-selected": row.getIsSelected() || undefined, onDragEnter: handleDragEnter, ref: (node) => {
                     if (node) {
                         rowRef.current = node;
                         measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
@@ -1932,7 +1932,7 @@ const MRT_TableHeadCellResizeHandle = (_a) => {
                     : '-28px',
             position: 'absolute',
             px: '4px',
-            right: '0',
+            right: column.columnDef.columnDefType === 'display' ? '4px' : '0',
         }), children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: (theme) => (Object.assign({ borderRadius: '2px', borderWidth: '2px', height: '24px', touchAction: 'none', transition: column.getIsResizing()
                     ? undefined
                     : 'all 150ms ease-in-out', userSelect: 'none', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) }) }));
@@ -2421,6 +2421,8 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
             setHoveredColumn(column);
         }
     };
+    if (!columnDef.header)
+        return null;
     return (jsxs(Fragment, { children: [jsx(MenuItem, Object.assign({ disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', justifyContent: 'flex-start', my: 0, opacity: isDragging ? 0.5 : 1, outline: isDragging
                         ? `2px dashed ${theme.palette.grey[500]}`
                         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
@@ -2860,7 +2862,7 @@ const MRT_TablePaper = (_a) => {
                 width: '100vw',
                 zIndex: 999,
             }
-            : {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), children: [enableTopToolbar &&
+            : {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.sx, theme))), children: [enableTopToolbar &&
                 ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
                 ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsx(MRT_BottomToolbar, { table: table })))] })));
 };
@@ -2986,533 +2988,225 @@ const MRT_ToggleRowActionMenuButton = (_a) => {
             ['modal', 'row'].includes(editDisplayMode) ? (jsx(Tooltip, { arrow: true, placement: "right", title: localization.edit, children: jsx(IconButton, Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsx(EditIcon, {}) })) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsx(MoreHorizIcon, {}) })) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
-const blankColProps = {
-    children: null,
-    sx: {
-        flex: '1 0 auto',
-        minWidth: 0,
-        p: 0,
-        width: 0,
-    },
-};
-const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOptions, }) => {
-    var _a, _b;
-    return useMemo(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x;
-        return [
-            ((_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-pin') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), header: tableOptions.localization.pin, size: 60 }, tableOptions.defaultDisplayColumn), (_c = tableOptions.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-pin']), { id: 'mrt-row-pin' }),
-            ((_e = (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), header: tableOptions.localization.move, size: 60 }, tableOptions.defaultDisplayColumn), (_f = tableOptions.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-drag']), { id: 'mrt-row-drag' }),
-            (((_h = (_g = tableOptions.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-actions') ||
-                (creatingRow && tableOptions.createDisplayMode === 'row')) && Object.assign(Object.assign(Object.assign({ Cell: ({ cell, row, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: tableOptions.localization.actions, size: 70 }, tableOptions.defaultDisplayColumn), (_j = tableOptions.displayColumnDefOptions) === null || _j === void 0 ? void 0 : _j['mrt-row-actions']), { id: 'mrt-row-actions' }),
-            ((_l = (_k = tableOptions.state) === null || _k === void 0 ? void 0 : _k.columnOrder) !== null && _l !== void 0 ? _l : columnOrder).includes('mrt-row-expand') &&
-                showExpandColumn(tableOptions, (_o = (_m = tableOptions.state) === null || _m === void 0 ? void 0 : _m.grouping) !== null && _o !== void 0 ? _o : grouping) && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: tableOptions.enableExpandAll
-                    ? ({ table }) => jsx(MRT_ExpandAllButton, { table: table })
-                    : null, header: tableOptions.localization.expand, size: 60 }, tableOptions.defaultDisplayColumn), (_p = tableOptions.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-expand']), { id: 'mrt-row-expand' }),
-            ((_r = (_q = tableOptions.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: tableOptions.enableSelectAll &&
-                    tableOptions.enableMultiRowSelection
-                    ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
-                    : null, header: tableOptions.localization.select, size: 60 }, tableOptions.defaultDisplayColumn), (_s = tableOptions.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-select']), { id: 'mrt-row-select' }),
-            ((_u = (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnOrder) !== null && _u !== void 0 ? _u : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber, header: tableOptions.localization.rowNumbers, size: 60 }, tableOptions.defaultDisplayColumn), (_v = tableOptions.displayColumnDefOptions) === null || _v === void 0 ? void 0 : _v['mrt-row-numbers']), { id: 'mrt-row-numbers' }),
-            ((_x = (_w = tableOptions.state) === null || _w === void 0 ? void 0 : _w.columnOrder) !== null && _x !== void 0 ? _x : columnOrder).includes('mrt-row-spacer') && {
-                columnDefType: 'display',
-                header: '',
-                id: 'mrt-row-spacer',
-                muiTableBodyCellProps: blankColProps,
-                muiTableFooterCellProps: blankColProps,
-                muiTableHeadCellProps: blankColProps,
-            },
-        ].filter(Boolean);
-    }, [
-        columnOrder,
-        grouping,
-        tableOptions.displayColumnDefOptions,
-        tableOptions.editDisplayMode,
-        tableOptions.enableColumnDragging,
-        tableOptions.enableColumnFilterModes,
-        tableOptions.enableColumnOrdering,
-        tableOptions.enableEditing,
-        tableOptions.enableExpandAll,
-        tableOptions.enableExpanding,
-        tableOptions.enableGrouping,
-        tableOptions.enableRowActions,
-        tableOptions.enableRowDragging,
-        tableOptions.enableRowNumbers,
-        tableOptions.enableRowOrdering,
-        tableOptions.enableRowSelection,
-        tableOptions.enableSelectAll,
-        tableOptions.localization,
-        tableOptions.positionActionsColumn,
-        tableOptions.renderDetailPanel,
-        tableOptions.renderRowActionMenuItems,
-        tableOptions.renderRowActions,
-        (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder,
-        (_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.grouping,
-    ]);
+const MRT_AggregationFns = Object.assign({}, aggregationFns);
+
+const fuzzy = (row, columnId, filterValue, addMeta) => {
+    const itemRank = rankItem(row.getValue(columnId), filterValue, {
+        threshold: rankings.MATCHES,
+    });
+    addMeta(itemRank);
+    return itemRank.passed;
 };
+fuzzy.autoRemove = (val) => !val;
+const contains = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .includes(filterValue.toString().toLowerCase().trim());
+contains.autoRemove = (val) => !val;
+const startsWith = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .startsWith(filterValue.toString().toLowerCase().trim());
+startsWith.autoRemove = (val) => !val;
+const endsWith = (row, id, filterValue) => row
+    .getValue(id)
+    .toString()
+    .toLowerCase()
+    .trim()
+    .endsWith(filterValue.toString().toLowerCase().trim());
+endsWith.autoRemove = (val) => !val;
+const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
+    (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
+equals.autoRemove = (val) => !val;
+const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
+    filterValue.toString().toLowerCase().trim();
+notEquals.autoRemove = (val) => !val;
+const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) > +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() >
+        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
+greaterThan.autoRemove = (val) => !val;
+const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
+greaterThanOrEqualTo.autoRemove = (val) => !val;
+const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
+    ? +row.getValue(id) < +filterValue
+    : row.getValue(id).toString().toLowerCase().trim() <
+        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
+lessThan.autoRemove = (val) => !val;
+const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
+lessThanOrEqualTo.autoRemove = (val) => !val;
+const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
+    greaterThan(row, id, filterValues[0])) &&
+    ((!isNaN(+filterValues[0]) &&
+        !isNaN(+filterValues[1]) &&
+        +filterValues[0] > +filterValues[1]) ||
+        ['', undefined].includes(filterValues[1]) ||
+        lessThan(row, id, filterValues[1]));
+between.autoRemove = (val) => !val;
+const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
+    greaterThanOrEqualTo(row, id, filterValues[0])) &&
+    ((!isNaN(+filterValues[0]) &&
+        !isNaN(+filterValues[1]) &&
+        +filterValues[0] > +filterValues[1]) ||
+        ['', undefined].includes(filterValues[1]) ||
+        lessThanOrEqualTo(row, id, filterValues[1]));
+betweenInclusive.autoRemove = (val) => !val;
+const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
+empty.autoRemove = (val) => !val;
+const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
+notEmpty.autoRemove = (val) => !val;
+const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
+    betweenInclusive,
+    contains,
+    empty,
+    endsWith,
+    equals,
+    fuzzy,
+    greaterThan,
+    greaterThanOrEqualTo,
+    lessThan,
+    lessThanOrEqualTo,
+    notEmpty,
+    notEquals,
+    startsWith });
 
-const useMRT_Effects = (table) => {
-    const { getIsSomeRowsPinned, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
-    const { density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
-    const rerender = useReducer(() => ({}), {})[1];
-    const isMounted = useRef(false);
-    const initialBodyHeight = useRef();
-    const previousTop = useRef();
-    useEffect(() => {
-        if (typeof window !== 'undefined') {
-            initialBodyHeight.current = document.body.style.height;
-        }
-    }, []);
-    useEffect(() => {
-        if (isMounted && typeof window !== 'undefined') {
-            if (isFullScreen) {
-                previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
-                document.body.style.height = '100vh'; //hide page scrollbars when table is in full screen mode
-            }
-            else {
-                document.body.style.height = initialBodyHeight.current;
-                if (!previousTop.current)
-                    return;
-                //restore scroll position
-                window.scrollTo({
-                    behavior: 'instant',
-                    top: -1 * previousTop.current,
-                });
-            }
-        }
-        isMounted.current = true;
-    }, [isFullScreen]);
-    //if page index is out of bounds, set it to the last page
-    useEffect(() => {
-        if (!enablePagination || isLoading || showSkeletons)
-            return;
-        const { pageIndex, pageSize } = pagination;
-        const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : table.getPrePaginationRowModel().rows.length;
-        const firstVisibleRowIndex = pageIndex * pageSize;
-        if (firstVisibleRowIndex > totalRowCount) {
-            table.setPageIndex(Math.floor(totalRowCount / pageSize));
-        }
-    }, [rowCount, table.getPrePaginationRowModel().rows.length]);
-    //turn off sort when global filter is looking for ranked results
-    const appliedSort = useRef(sorting);
-    useEffect(() => {
-        if (sorting.length) {
-            appliedSort.current = sorting;
-        }
-    }, [sorting]);
-    useEffect(() => {
-        if (!getCanRankRows(table))
-            return;
-        if (globalFilter) {
-            table.setSorting([]);
-        }
-        else {
-            table.setSorting(() => appliedSort.current || []);
-        }
-    }, [globalFilter]);
-    useEffect(() => {
-        if (enableRowPinning && getIsSomeRowsPinned()) {
-            setTimeout(() => {
-                rerender();
-            }, 150);
-        }
-    }, [density]);
+const MRT_Default_Icons = {
+    ArrowDownwardIcon,
+    ArrowRightIcon,
+    CancelIcon,
+    ChevronLeftIcon,
+    ChevronRightIcon,
+    ClearAllIcon,
+    CloseIcon,
+    DensityLargeIcon,
+    DensityMediumIcon,
+    DensitySmallIcon,
+    DragHandleIcon,
+    DynamicFeedIcon,
+    EditIcon,
+    ExpandMoreIcon,
+    FilterAltIcon,
+    FilterListIcon,
+    FilterListOffIcon,
+    FirstPageIcon,
+    FullscreenExitIcon,
+    FullscreenIcon,
+    KeyboardDoubleArrowDownIcon,
+    LastPageIcon,
+    MoreHorizIcon,
+    MoreVertIcon,
+    PushPinIcon,
+    RestartAltIcon,
+    SaveIcon,
+    SearchIcon,
+    SearchOffIcon,
+    SortIcon,
+    SyncAltIcon,
+    ViewColumnIcon,
+    VisibilityOffIcon,
 };
 
-const useMRT_TableInstance = (tableOptions) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
-    const bottomToolbarRef = useRef(null);
-    const editInputRefs = useRef({});
-    const filterInputRefs = useRef({});
-    const searchInputRef = useRef(null);
-    const tableContainerRef = useRef(null);
-    const tableHeadCellRefs = useRef({});
-    const tablePaperRef = useRef(null);
-    const topToolbarRef = useRef(null);
-    const tableHeadRef = useRef(null);
-    const tableFooterRef = useRef(null);
-    const initialState = useMemo(() => {
-        var _a, _b, _c;
-        const initState = (_a = tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
-        initState.columnOrder =
-            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(tableOptions);
-        initState.globalFilterFn = (_c = tableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
-        return initState;
-    }, []);
-    const [creatingRow, _setCreatingRow] = useState((_a = initialState.creatingRow) !== null && _a !== void 0 ? _a : null);
-    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => {
-        var _a, _b, _c, _d;
-        return ({
-            [getColumnId(col)]: col.filterFn instanceof Function
-                ? (_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom'
-                : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
-        });
-    })));
-    const [columnOrder, setColumnOrder] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
-    const [density, setDensity] = useState((_c = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _c !== void 0 ? _c : 'comfortable');
-    const [draggingColumn, setDraggingColumn] = useState((_d = initialState.draggingColumn) !== null && _d !== void 0 ? _d : null);
-    const [draggingRow, setDraggingRow] = useState((_e = initialState.draggingRow) !== null && _e !== void 0 ? _e : null);
-    const [editingCell, setEditingCell] = useState((_f = initialState.editingCell) !== null && _f !== void 0 ? _f : null);
-    const [editingRow, setEditingRow] = useState((_g = initialState.editingRow) !== null && _g !== void 0 ? _g : null);
-    const [globalFilterFn, setGlobalFilterFn] = useState((_h = initialState.globalFilterFn) !== null && _h !== void 0 ? _h : 'fuzzy');
-    const [grouping, setGrouping] = useState((_j = initialState.grouping) !== null && _j !== void 0 ? _j : []);
-    const [hoveredColumn, setHoveredColumn] = useState((_k = initialState.hoveredColumn) !== null && _k !== void 0 ? _k : null);
-    const [hoveredRow, setHoveredRow] = useState((_l = initialState.hoveredRow) !== null && _l !== void 0 ? _l : null);
-    const [isFullScreen, setIsFullScreen] = useState((_m = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _m !== void 0 ? _m : false);
-    const [showAlertBanner, setShowAlertBanner] = useState((_p = (_o = tableOptions.initialState) === null || _o === void 0 ? void 0 : _o.showAlertBanner) !== null && _p !== void 0 ? _p : false);
-    const [showColumnFilters, setShowColumnFilters] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _q !== void 0 ? _q : false);
-    const [showGlobalFilter, setShowGlobalFilter] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _r !== void 0 ? _r : false);
-    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _s !== void 0 ? _s : false);
-    const displayColumns = useMRT_DisplayColumns({
-        columnOrder,
-        creatingRow,
-        grouping,
-        tableOptions,
-    });
-    const columnDefs = useMemo(() => {
-        var _a, _b, _c;
-        return prepareColumns({
-            aggregationFns: tableOptions.aggregationFns,
-            columnDefs: [...displayColumns, ...tableOptions.columns],
-            columnFilterFns: (_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
-            defaultDisplayColumn: (_c = tableOptions.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
-            filterFns: tableOptions.filterFns,
-            sortingFns: tableOptions.sortingFns,
-        });
-    }, [
-        columnFilterFns,
-        displayColumns,
-        tableOptions.columns,
-        (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnFilterFns,
-    ]);
-    const data = useMemo(() => {
-        var _a, _b, _c, _d, _e;
-        return (((_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.isLoading) || ((_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.showSkeletons)) &&
-            !tableOptions.data.length
-            ? [
-                ...Array(((_d = (_c = tableOptions.state) === null || _c === void 0 ? void 0 : _c.pagination) === null || _d === void 0 ? void 0 : _d.pageSize) ||
-                    ((_e = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) === null || _e === void 0 ? void 0 : _e.pageSize) ||
-                    10).fill(null),
-            ].map(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => ({
-                [getColumnId(col)]: null,
-            }))))
-            : tableOptions.data;
-    }, [
-        tableOptions.data,
-        (_u = tableOptions.state) === null || _u === void 0 ? void 0 : _u.isLoading,
-        (_v = tableOptions.state) === null || _v === void 0 ? void 0 : _v.showSkeletons,
-    ]);
-    //@ts-ignore
-    const table = useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: tableOptions.enableExpanding || tableOptions.enableGrouping
-            ? getExpandedRowModel()
-            : undefined, getFacetedMinMaxValues: tableOptions.enableFacetedValues
-            ? getFacetedMinMaxValues()
-            : undefined, getFacetedRowModel: tableOptions.enableFacetedValues
-            ? getFacetedRowModel()
-            : undefined, getFacetedUniqueValues: tableOptions.enableFacetedValues
-            ? getFacetedUniqueValues()
-            : undefined, getFilteredRowModel: tableOptions.enableColumnFilters ||
-            tableOptions.enableGlobalFilter ||
-            tableOptions.enableFilters
-            ? getFilteredRowModel()
-            : undefined, getGroupedRowModel: tableOptions.enableGrouping
-            ? getGroupedRowModel()
-            : undefined, getPaginationRowModel: tableOptions.enablePagination
-            ? getPaginationRowModel()
-            : undefined, getSortedRowModel: tableOptions.enableSorting
-            ? getSortedRowModel()
-            : undefined, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping }, tableOptions), { 
-        //@ts-ignore
-        columns: columnDefs, data, globalFilterFn: (_w = tableOptions.filterFns) === null || _w === void 0 ? void 0 : _w[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'], initialState, state: Object.assign({ columnFilterFns,
-            columnOrder,
-            creatingRow,
-            density,
-            draggingColumn,
-            draggingRow,
-            editingCell,
-            editingRow,
-            globalFilterFn,
-            grouping,
-            hoveredColumn,
-            hoveredRow,
-            isFullScreen,
-            showAlertBanner,
-            showColumnFilters,
-            showGlobalFilter,
-            showToolbarDropZone }, tableOptions.state) }));
-    // @ts-ignore
-    table.refs = {
-        // @ts-ignore
-        bottomToolbarRef,
-        editInputRefs,
-        filterInputRefs,
-        // @ts-ignore
-        searchInputRef,
-        // @ts-ignore
-        tableContainerRef,
-        // @ts-ignore
-        tableFooterRef,
-        tableHeadCellRefs,
-        // @ts-ignore
-        tableHeadRef,
-        // @ts-ignore
-        tablePaperRef,
-        // @ts-ignore
-        topToolbarRef,
-    };
-    const setCreatingRow = (row) => {
-        var _a, _b;
-        let _row = row;
-        if (row === true) {
-            _row = createRow(table);
-        }
-        (_b = (_a = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(tableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
-    };
-    table.setCreatingRow = setCreatingRow;
-    table.setColumnFilterFns =
-        (_x = tableOptions.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns;
-    table.setDensity = (_y = tableOptions.onDensityChange) !== null && _y !== void 0 ? _y : setDensity;
-    table.setDraggingColumn =
-        (_z = tableOptions.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn;
-    table.setDraggingRow = (_0 = tableOptions.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow;
-    table.setEditingCell = (_1 = tableOptions.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell;
-    table.setEditingRow = (_2 = tableOptions.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow;
-    table.setGlobalFilterFn =
-        (_3 = tableOptions.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn;
-    table.setHoveredColumn =
-        (_4 = tableOptions.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn;
-    table.setHoveredRow = (_5 = tableOptions.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow;
-    table.setIsFullScreen = (_6 = tableOptions.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen;
-    table.setShowAlertBanner =
-        (_7 = tableOptions.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner;
-    table.setShowColumnFilters =
-        (_8 = tableOptions.onShowColumnFiltersChange) !== null && _8 !== void 0 ? _8 : setShowColumnFilters;
-    table.setShowGlobalFilter =
-        (_9 = tableOptions.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter;
-    table.setShowToolbarDropZone =
-        (_10 = tableOptions.onShowToolbarDropZoneChange) !== null && _10 !== void 0 ? _10 : setShowToolbarDropZone;
-    useMRT_Effects(table);
-    return table;
+const MRT_Localization_EN = {
+    actions: 'Actions',
+    and: 'and',
+    cancel: 'Cancel',
+    changeFilterMode: 'Change filter mode',
+    changeSearchMode: 'Change search mode',
+    clearFilter: 'Clear filter',
+    clearSearch: 'Clear search',
+    clearSort: 'Clear sort',
+    clickToCopy: 'Click to copy',
+    collapse: 'Collapse',
+    collapseAll: 'Collapse all',
+    columnActions: 'Column Actions',
+    copiedToClipboard: 'Copied to clipboard',
+    dropToGroupBy: 'Drop to group by {column}',
+    edit: 'Edit',
+    expand: 'Expand',
+    expandAll: 'Expand all',
+    filterArrIncludes: 'Includes',
+    filterArrIncludesAll: 'Includes all',
+    filterArrIncludesSome: 'Includes',
+    filterBetween: 'Between',
+    filterBetweenInclusive: 'Between Inclusive',
+    filterByColumn: 'Filter by {column}',
+    filterContains: 'Contains',
+    filterEmpty: 'Empty',
+    filterEndsWith: 'Ends With',
+    filterEquals: 'Equals',
+    filterEqualsString: 'Equals',
+    filterFuzzy: 'Fuzzy',
+    filterGreaterThan: 'Greater Than',
+    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
+    filterInNumberRange: 'Between',
+    filterIncludesString: 'Contains',
+    filterIncludesStringSensitive: 'Contains',
+    filterLessThan: 'Less Than',
+    filterLessThanOrEqualTo: 'Less Than Or Equal To',
+    filterMode: 'Filter Mode: {filterType}',
+    filterNotEmpty: 'Not Empty',
+    filterNotEquals: 'Not Equals',
+    filterStartsWith: 'Starts With',
+    filterWeakEquals: 'Equals',
+    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
+    goToFirstPage: 'Go to first page',
+    goToLastPage: 'Go to last page',
+    goToNextPage: 'Go to next page',
+    goToPreviousPage: 'Go to previous page',
+    grab: 'Grab',
+    groupByColumn: 'Group by {column}',
+    groupedBy: 'Grouped by ',
+    hideAll: 'Hide all',
+    hideColumn: 'Hide {column} column',
+    max: 'Max',
+    min: 'Min',
+    move: 'Move',
+    noRecordsToDisplay: 'No records to display',
+    noResultsFound: 'No results found',
+    of: 'of',
+    or: 'or',
+    pin: 'Pin',
+    pinToLeft: 'Pin to left',
+    pinToRight: 'Pin to right',
+    resetColumnSize: 'Reset column size',
+    resetOrder: 'Reset order',
+    rowActions: 'Row Actions',
+    rowNumber: '#',
+    rowNumbers: 'Row Numbers',
+    rowsPerPage: 'Rows per page',
+    save: 'Save',
+    search: 'Search',
+    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
+    select: 'Select',
+    showAll: 'Show all',
+    showAllColumns: 'Show all columns',
+    showHideColumns: 'Show/Hide columns',
+    showHideFilters: 'Show/Hide filters',
+    showHideSearch: 'Show/Hide search',
+    sortByColumnAsc: 'Sort by {column} ascending',
+    sortByColumnDesc: 'Sort by {column} descending',
+    sortedByColumnAsc: 'Sorted by {column} ascending',
+    sortedByColumnDesc: 'Sorted by {column} descending',
+    thenBy: ', then by ',
+    toggleDensity: 'Toggle density',
+    toggleFullScreen: 'Toggle full screen',
+    toggleSelectAll: 'Toggle select all',
+    toggleSelectRow: 'Toggle select row',
+    toggleVisibility: 'Toggle visibility',
+    ungroupByColumn: 'Ungroup by {column}',
+    unpin: 'Unpin',
+    unpinAll: 'Unpin all',
 };
 
-const MRT_AggregationFns = Object.assign({}, aggregationFns);
-
-const fuzzy = (row, columnId, filterValue, addMeta) => {
-    const itemRank = rankItem(row.getValue(columnId), filterValue, {
-        threshold: rankings.MATCHES,
-    });
-    addMeta(itemRank);
-    return itemRank.passed;
-};
-fuzzy.autoRemove = (val) => !val;
-const contains = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .includes(filterValue.toString().toLowerCase().trim());
-contains.autoRemove = (val) => !val;
-const startsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .startsWith(filterValue.toString().toLowerCase().trim());
-startsWith.autoRemove = (val) => !val;
-const endsWith = (row, id, filterValue) => row
-    .getValue(id)
-    .toString()
-    .toLowerCase()
-    .trim()
-    .endsWith(filterValue.toString().toLowerCase().trim());
-endsWith.autoRemove = (val) => !val;
-const equals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() ===
-    (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
-equals.autoRemove = (val) => !val;
-const notEquals = (row, id, filterValue) => row.getValue(id).toString().toLowerCase().trim() !==
-    filterValue.toString().toLowerCase().trim();
-notEquals.autoRemove = (val) => !val;
-const greaterThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) > +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() >
-        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
-greaterThan.autoRemove = (val) => !val;
-const greaterThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
-greaterThanOrEqualTo.autoRemove = (val) => !val;
-const lessThan = (row, id, filterValue) => !isNaN(+filterValue) && !isNaN(+row.getValue(id))
-    ? +row.getValue(id) < +filterValue
-    : row.getValue(id).toString().toLowerCase().trim() <
-        (filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString().toLowerCase().trim());
-lessThan.autoRemove = (val) => !val;
-const lessThanOrEqualTo = (row, id, filterValue) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
-lessThanOrEqualTo.autoRemove = (val) => !val;
-const between = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
-    greaterThan(row, id, filterValues[0])) &&
-    ((!isNaN(+filterValues[0]) &&
-        !isNaN(+filterValues[1]) &&
-        +filterValues[0] > +filterValues[1]) ||
-        ['', undefined].includes(filterValues[1]) ||
-        lessThan(row, id, filterValues[1]));
-between.autoRemove = (val) => !val;
-const betweenInclusive = (row, id, filterValues) => (['', undefined].includes(filterValues[0]) ||
-    greaterThanOrEqualTo(row, id, filterValues[0])) &&
-    ((!isNaN(+filterValues[0]) &&
-        !isNaN(+filterValues[1]) &&
-        +filterValues[0] > +filterValues[1]) ||
-        ['', undefined].includes(filterValues[1]) ||
-        lessThanOrEqualTo(row, id, filterValues[1]));
-betweenInclusive.autoRemove = (val) => !val;
-const empty = (row, id, _filterValue) => !row.getValue(id).toString().trim();
-empty.autoRemove = (val) => !val;
-const notEmpty = (row, id, _filterValue) => !!row.getValue(id).toString().trim();
-notEmpty.autoRemove = (val) => !val;
-const MRT_FilterFns = Object.assign(Object.assign({}, filterFns), { between,
-    betweenInclusive,
-    contains,
-    empty,
-    endsWith,
-    equals,
-    fuzzy,
-    greaterThan,
-    greaterThanOrEqualTo,
-    lessThan,
-    lessThanOrEqualTo,
-    notEmpty,
-    notEquals,
-    startsWith });
-
-const MRT_Default_Icons = {
-    ArrowDownwardIcon,
-    ArrowRightIcon,
-    CancelIcon,
-    ChevronLeftIcon,
-    ChevronRightIcon,
-    ClearAllIcon,
-    CloseIcon,
-    DensityLargeIcon,
-    DensityMediumIcon,
-    DensitySmallIcon,
-    DragHandleIcon,
-    DynamicFeedIcon,
-    EditIcon,
-    ExpandMoreIcon,
-    FilterAltIcon,
-    FilterListIcon,
-    FilterListOffIcon,
-    FirstPageIcon,
-    FullscreenExitIcon,
-    FullscreenIcon,
-    KeyboardDoubleArrowDownIcon,
-    LastPageIcon,
-    MoreHorizIcon,
-    MoreVertIcon,
-    PushPinIcon,
-    RestartAltIcon,
-    SaveIcon,
-    SearchIcon,
-    SearchOffIcon,
-    SortIcon,
-    SyncAltIcon,
-    ViewColumnIcon,
-    VisibilityOffIcon,
-};
-
-const MRT_Localization_EN = {
-    actions: 'Actions',
-    and: 'and',
-    cancel: 'Cancel',
-    changeFilterMode: 'Change filter mode',
-    changeSearchMode: 'Change search mode',
-    clearFilter: 'Clear filter',
-    clearSearch: 'Clear search',
-    clearSort: 'Clear sort',
-    clickToCopy: 'Click to copy',
-    collapse: 'Collapse',
-    collapseAll: 'Collapse all',
-    columnActions: 'Column Actions',
-    copiedToClipboard: 'Copied to clipboard',
-    dropToGroupBy: 'Drop to group by {column}',
-    edit: 'Edit',
-    expand: 'Expand',
-    expandAll: 'Expand all',
-    filterArrIncludes: 'Includes',
-    filterArrIncludesAll: 'Includes all',
-    filterArrIncludesSome: 'Includes',
-    filterBetween: 'Between',
-    filterBetweenInclusive: 'Between Inclusive',
-    filterByColumn: 'Filter by {column}',
-    filterContains: 'Contains',
-    filterEmpty: 'Empty',
-    filterEndsWith: 'Ends With',
-    filterEquals: 'Equals',
-    filterEqualsString: 'Equals',
-    filterFuzzy: 'Fuzzy',
-    filterGreaterThan: 'Greater Than',
-    filterGreaterThanOrEqualTo: 'Greater Than Or Equal To',
-    filterInNumberRange: 'Between',
-    filterIncludesString: 'Contains',
-    filterIncludesStringSensitive: 'Contains',
-    filterLessThan: 'Less Than',
-    filterLessThanOrEqualTo: 'Less Than Or Equal To',
-    filterMode: 'Filter Mode: {filterType}',
-    filterNotEmpty: 'Not Empty',
-    filterNotEquals: 'Not Equals',
-    filterStartsWith: 'Starts With',
-    filterWeakEquals: 'Equals',
-    filteringByColumn: 'Filtering by {column} - {filterType} {filterValue}',
-    goToFirstPage: 'Go to first page',
-    goToLastPage: 'Go to last page',
-    goToNextPage: 'Go to next page',
-    goToPreviousPage: 'Go to previous page',
-    grab: 'Grab',
-    groupByColumn: 'Group by {column}',
-    groupedBy: 'Grouped by ',
-    hideAll: 'Hide all',
-    hideColumn: 'Hide {column} column',
-    max: 'Max',
-    min: 'Min',
-    move: 'Move',
-    noRecordsToDisplay: 'No records to display',
-    noResultsFound: 'No results found',
-    of: 'of',
-    or: 'or',
-    pin: 'Pin',
-    pinToLeft: 'Pin to left',
-    pinToRight: 'Pin to right',
-    resetColumnSize: 'Reset column size',
-    resetOrder: 'Reset order',
-    rowActions: 'Row Actions',
-    rowNumber: '#',
-    rowNumbers: 'Row Numbers',
-    rowsPerPage: 'Rows per page',
-    save: 'Save',
-    search: 'Search',
-    selectedCountOfRowCountRowsSelected: '{selectedCount} of {rowCount} row(s) selected',
-    select: 'Select',
-    showAll: 'Show all',
-    showAllColumns: 'Show all columns',
-    showHideColumns: 'Show/Hide columns',
-    showHideFilters: 'Show/Hide filters',
-    showHideSearch: 'Show/Hide search',
-    sortByColumnAsc: 'Sort by {column} ascending',
-    sortByColumnDesc: 'Sort by {column} descending',
-    sortedByColumnAsc: 'Sorted by {column} ascending',
-    sortedByColumnDesc: 'Sorted by {column} descending',
-    thenBy: ', then by ',
-    toggleDensity: 'Toggle density',
-    toggleFullScreen: 'Toggle full screen',
-    toggleSelectAll: 'Toggle select all',
-    toggleSelectRow: 'Toggle select row',
-    toggleVisibility: 'Toggle visibility',
-    ungroupByColumn: 'Ungroup by {column}',
-    unpin: 'Unpin',
-    unpinAll: 'Unpin all',
-};
-
-const MRT_DefaultColumn = {
-    filterVariant: 'text',
-    maxSize: 1000,
-    minSize: 40,
-    size: 180,
+const MRT_DefaultColumn = {
+    filterVariant: 'text',
+    maxSize: 1000,
+    minSize: 40,
+    size: 180,
 };
 const MRT_DefaultDisplayColumn = {
     columnDefType: 'display',
@@ -3605,6 +3299,307 @@ const useMRT_TableOptions = (_a) => {
         selectAllMode, sortingFns: _sortingFns }, rest);
 };
 
+const blankColProps = {
+    children: null,
+    sx: {
+        flex: '1 0 auto',
+        minWidth: 0,
+        p: 0,
+        width: 0,
+    },
+};
+const useMRT_DisplayColumns = ({ columnOrder, creatingRow, grouping, tableOptions, }) => {
+    var _a, _b;
+    return useMemo(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y;
+        return [
+            ((_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder) !== null && _b !== void 0 ? _b : columnOrder).includes('mrt-row-pin') && Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_TableBodyRowPinButton, { row: row, table: table })), header: tableOptions.localization.pin, size: 60 }, (_c = tableOptions.displayColumnDefOptions) === null || _c === void 0 ? void 0 : _c['mrt-row-pin']), { columnDefType: 'display', id: 'mrt-row-pin' }),
+            ((_e = (_d = tableOptions.state) === null || _d === void 0 ? void 0 : _d.columnOrder) !== null && _e !== void 0 ? _e : columnOrder).includes('mrt-row-drag') && Object.assign(Object.assign({ Cell: ({ row, rowRef, table }) => (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })), header: tableOptions.localization.move, size: 60 }, (_f = tableOptions.displayColumnDefOptions) === null || _f === void 0 ? void 0 : _f['mrt-row-drag']), { columnDefType: 'display', id: 'mrt-row-drag' }),
+            (((_h = (_g = tableOptions.state) === null || _g === void 0 ? void 0 : _g.columnOrder) !== null && _h !== void 0 ? _h : columnOrder).includes('mrt-row-actions') ||
+                (creatingRow && tableOptions.createDisplayMode === 'row')) && Object.assign(Object.assign({ Cell: ({ cell, row, table }) => (jsx(MRT_ToggleRowActionMenuButton, { cell: cell, row: row, table: table })), header: tableOptions.localization.actions, size: 70 }, (_j = tableOptions.displayColumnDefOptions) === null || _j === void 0 ? void 0 : _j['mrt-row-actions']), { columnDefType: 'display', id: 'mrt-row-actions' }),
+            ((_l = (_k = tableOptions.state) === null || _k === void 0 ? void 0 : _k.columnOrder) !== null && _l !== void 0 ? _l : columnOrder).includes('mrt-row-expand') &&
+                showExpandColumn(tableOptions, (_o = (_m = tableOptions.state) === null || _m === void 0 ? void 0 : _m.grouping) !== null && _o !== void 0 ? _o : grouping) && Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_ExpandButton, { row: row, table: table })), Header: tableOptions.enableExpandAll
+                    ? ({ table }) => jsx(MRT_ExpandAllButton, { table: table })
+                    : null, header: tableOptions.localization.expand, size: 60 }, (_p = tableOptions.displayColumnDefOptions) === null || _p === void 0 ? void 0 : _p['mrt-row-expand']), { columnDefType: 'display', id: 'mrt-row-expand' }),
+            ((_r = (_q = tableOptions.state) === null || _q === void 0 ? void 0 : _q.columnOrder) !== null && _r !== void 0 ? _r : columnOrder).includes('mrt-row-select') && Object.assign(Object.assign({ Cell: ({ row, table }) => (jsx(MRT_SelectCheckbox, { row: row, table: table })), Header: tableOptions.enableSelectAll &&
+                    tableOptions.enableMultiRowSelection
+                    ? ({ table }) => jsx(MRT_SelectCheckbox, { selectAll: true, table: table })
+                    : null, header: tableOptions.localization.select, size: 60 }, (_s = tableOptions.displayColumnDefOptions) === null || _s === void 0 ? void 0 : _s['mrt-row-select']), { columnDefType: 'display', id: 'mrt-row-select' }),
+            ((_u = (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnOrder) !== null && _u !== void 0 ? _u : columnOrder).includes('mrt-row-numbers') && Object.assign(Object.assign({ Cell: ({ row }) => row.index + 1, Header: () => tableOptions.localization.rowNumber, header: tableOptions.localization.rowNumbers, size: 60 }, (_v = tableOptions.displayColumnDefOptions) === null || _v === void 0 ? void 0 : _v['mrt-row-numbers']), { columnDefType: 'display', id: 'mrt-row-numbers' }),
+            ((_x = (_w = tableOptions.state) === null || _w === void 0 ? void 0 : _w.columnOrder) !== null && _x !== void 0 ? _x : columnOrder).includes('mrt-row-spacer') && Object.assign(Object.assign(Object.assign({}, (_y = tableOptions.displayColumnDefOptions) === null || _y === void 0 ? void 0 : _y['mrt-row-spacer']), MRT_DefaultDisplayColumn), { columnDefType: 'display', header: '', id: 'mrt-row-spacer', muiTableBodyCellProps: blankColProps, muiTableFooterCellProps: blankColProps, muiTableHeadCellProps: blankColProps }),
+        ].filter(Boolean);
+    }, [
+        columnOrder,
+        grouping,
+        tableOptions.displayColumnDefOptions,
+        tableOptions.editDisplayMode,
+        tableOptions.enableColumnDragging,
+        tableOptions.enableColumnFilterModes,
+        tableOptions.enableColumnOrdering,
+        tableOptions.enableEditing,
+        tableOptions.enableExpandAll,
+        tableOptions.enableExpanding,
+        tableOptions.enableGrouping,
+        tableOptions.enableRowActions,
+        tableOptions.enableRowDragging,
+        tableOptions.enableRowNumbers,
+        tableOptions.enableRowOrdering,
+        tableOptions.enableRowSelection,
+        tableOptions.enableSelectAll,
+        tableOptions.localization,
+        tableOptions.positionActionsColumn,
+        tableOptions.renderDetailPanel,
+        tableOptions.renderRowActionMenuItems,
+        tableOptions.renderRowActions,
+        (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnOrder,
+        (_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.grouping,
+    ]);
+};
+
+const useMRT_Effects = (table) => {
+    const { getIsSomeRowsPinned, getState, options: { enablePagination, enableRowPinning, rowCount }, } = table;
+    const { density, globalFilter, isFullScreen, isLoading, pagination, showSkeletons, sorting, } = getState();
+    const rerender = useReducer(() => ({}), {})[1];
+    const isMounted = useRef(false);
+    const initialBodyHeight = useRef();
+    const previousTop = useRef();
+    useEffect(() => {
+        if (typeof window !== 'undefined') {
+            initialBodyHeight.current = document.body.style.height;
+        }
+    }, []);
+    useEffect(() => {
+        if (isMounted && typeof window !== 'undefined') {
+            if (isFullScreen) {
+                previousTop.current = document.body.getBoundingClientRect().top; //save scroll position
+                document.body.style.height = '100vh'; //hide page scrollbars when table is in full screen mode
+            }
+            else {
+                document.body.style.height = initialBodyHeight.current;
+                if (!previousTop.current)
+                    return;
+                //restore scroll position
+                window.scrollTo({
+                    behavior: 'instant',
+                    top: -1 * previousTop.current,
+                });
+            }
+        }
+        isMounted.current = true;
+    }, [isFullScreen]);
+    //if page index is out of bounds, set it to the last page
+    useEffect(() => {
+        if (!enablePagination || isLoading || showSkeletons)
+            return;
+        const { pageIndex, pageSize } = pagination;
+        const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : table.getPrePaginationRowModel().rows.length;
+        const firstVisibleRowIndex = pageIndex * pageSize;
+        if (firstVisibleRowIndex > totalRowCount) {
+            table.setPageIndex(Math.floor(totalRowCount / pageSize));
+        }
+    }, [rowCount, table.getPrePaginationRowModel().rows.length]);
+    //turn off sort when global filter is looking for ranked results
+    const appliedSort = useRef(sorting);
+    useEffect(() => {
+        if (sorting.length) {
+            appliedSort.current = sorting;
+        }
+    }, [sorting]);
+    useEffect(() => {
+        if (!getCanRankRows(table))
+            return;
+        if (globalFilter) {
+            table.setSorting([]);
+        }
+        else {
+            table.setSorting(() => appliedSort.current || []);
+        }
+    }, [globalFilter]);
+    useEffect(() => {
+        if (enableRowPinning && getIsSomeRowsPinned()) {
+            setTimeout(() => {
+                rerender();
+            }, 150);
+        }
+    }, [density]);
+};
+
+const useMRT_TableInstance = (tableOptions) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7, _8, _9, _10;
+    const bottomToolbarRef = useRef(null);
+    const editInputRefs = useRef({});
+    const filterInputRefs = useRef({});
+    const searchInputRef = useRef(null);
+    const tableContainerRef = useRef(null);
+    const tableHeadCellRefs = useRef({});
+    const tablePaperRef = useRef(null);
+    const topToolbarRef = useRef(null);
+    const tableHeadRef = useRef(null);
+    const tableFooterRef = useRef(null);
+    const initialState = useMemo(() => {
+        var _a, _b, _c;
+        const initState = (_a = tableOptions.initialState) !== null && _a !== void 0 ? _a : {};
+        initState.columnOrder =
+            (_b = initState.columnOrder) !== null && _b !== void 0 ? _b : getDefaultColumnOrderIds(tableOptions);
+        initState.globalFilterFn = (_c = tableOptions.globalFilterFn) !== null && _c !== void 0 ? _c : 'fuzzy';
+        return initState;
+    }, []);
+    const [creatingRow, _setCreatingRow] = useState((_a = initialState.creatingRow) !== null && _a !== void 0 ? _a : null);
+    const [columnFilterFns, setColumnFilterFns] = useState(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => {
+        var _a, _b, _c, _d;
+        return ({
+            [getColumnId(col)]: col.filterFn instanceof Function
+                ? (_a = col.filterFn.name) !== null && _a !== void 0 ? _a : 'custom'
+                : (_d = (_b = col.filterFn) !== null && _b !== void 0 ? _b : (_c = initialState === null || initialState === void 0 ? void 0 : initialState.columnFilterFns) === null || _c === void 0 ? void 0 : _c[getColumnId(col)]) !== null && _d !== void 0 ? _d : getDefaultColumnFilterFn(col),
+        });
+    })));
+    const [columnOrder, setColumnOrder] = useState((_b = initialState.columnOrder) !== null && _b !== void 0 ? _b : []);
+    const [density, setDensity] = useState((_c = initialState === null || initialState === void 0 ? void 0 : initialState.density) !== null && _c !== void 0 ? _c : 'comfortable');
+    const [draggingColumn, setDraggingColumn] = useState((_d = initialState.draggingColumn) !== null && _d !== void 0 ? _d : null);
+    const [draggingRow, setDraggingRow] = useState((_e = initialState.draggingRow) !== null && _e !== void 0 ? _e : null);
+    const [editingCell, setEditingCell] = useState((_f = initialState.editingCell) !== null && _f !== void 0 ? _f : null);
+    const [editingRow, setEditingRow] = useState((_g = initialState.editingRow) !== null && _g !== void 0 ? _g : null);
+    const [globalFilterFn, setGlobalFilterFn] = useState((_h = initialState.globalFilterFn) !== null && _h !== void 0 ? _h : 'fuzzy');
+    const [grouping, setGrouping] = useState((_j = initialState.grouping) !== null && _j !== void 0 ? _j : []);
+    const [hoveredColumn, setHoveredColumn] = useState((_k = initialState.hoveredColumn) !== null && _k !== void 0 ? _k : null);
+    const [hoveredRow, setHoveredRow] = useState((_l = initialState.hoveredRow) !== null && _l !== void 0 ? _l : null);
+    const [isFullScreen, setIsFullScreen] = useState((_m = initialState === null || initialState === void 0 ? void 0 : initialState.isFullScreen) !== null && _m !== void 0 ? _m : false);
+    const [showAlertBanner, setShowAlertBanner] = useState((_p = (_o = tableOptions.initialState) === null || _o === void 0 ? void 0 : _o.showAlertBanner) !== null && _p !== void 0 ? _p : false);
+    const [showColumnFilters, setShowColumnFilters] = useState((_q = initialState === null || initialState === void 0 ? void 0 : initialState.showColumnFilters) !== null && _q !== void 0 ? _q : false);
+    const [showGlobalFilter, setShowGlobalFilter] = useState((_r = initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) !== null && _r !== void 0 ? _r : false);
+    const [showToolbarDropZone, setShowToolbarDropZone] = useState((_s = initialState === null || initialState === void 0 ? void 0 : initialState.showToolbarDropZone) !== null && _s !== void 0 ? _s : false);
+    const displayColumns = useMRT_DisplayColumns({
+        columnOrder,
+        creatingRow,
+        grouping,
+        tableOptions,
+    });
+    const columnDefs = useMemo(() => {
+        var _a, _b, _c;
+        return prepareColumns({
+            aggregationFns: tableOptions.aggregationFns,
+            columnDefs: [...displayColumns, ...tableOptions.columns],
+            columnFilterFns: (_b = (_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.columnFilterFns) !== null && _b !== void 0 ? _b : columnFilterFns,
+            defaultDisplayColumn: (_c = tableOptions.defaultDisplayColumn) !== null && _c !== void 0 ? _c : {},
+            filterFns: tableOptions.filterFns,
+            sortingFns: tableOptions.sortingFns,
+        });
+    }, [
+        columnFilterFns,
+        displayColumns,
+        tableOptions.columns,
+        (_t = tableOptions.state) === null || _t === void 0 ? void 0 : _t.columnFilterFns,
+    ]);
+    const data = useMemo(() => {
+        var _a, _b, _c, _d, _e;
+        return (((_a = tableOptions.state) === null || _a === void 0 ? void 0 : _a.isLoading) || ((_b = tableOptions.state) === null || _b === void 0 ? void 0 : _b.showSkeletons)) &&
+            !tableOptions.data.length
+            ? [
+                ...Array(((_d = (_c = tableOptions.state) === null || _c === void 0 ? void 0 : _c.pagination) === null || _d === void 0 ? void 0 : _d.pageSize) ||
+                    ((_e = initialState === null || initialState === void 0 ? void 0 : initialState.pagination) === null || _e === void 0 ? void 0 : _e.pageSize) ||
+                    10).fill(null),
+            ].map(() => Object.assign({}, ...getAllLeafColumnDefs(tableOptions.columns).map((col) => ({
+                [getColumnId(col)]: null,
+            }))))
+            : tableOptions.data;
+    }, [
+        tableOptions.data,
+        (_u = tableOptions.state) === null || _u === void 0 ? void 0 : _u.isLoading,
+        (_v = tableOptions.state) === null || _v === void 0 ? void 0 : _v.showSkeletons,
+    ]);
+    //@ts-ignore
+    const table = useReactTable(Object.assign(Object.assign({ getCoreRowModel: getCoreRowModel(), getExpandedRowModel: tableOptions.enableExpanding || tableOptions.enableGrouping
+            ? getExpandedRowModel()
+            : undefined, getFacetedMinMaxValues: tableOptions.enableFacetedValues
+            ? getFacetedMinMaxValues()
+            : undefined, getFacetedRowModel: tableOptions.enableFacetedValues
+            ? getFacetedRowModel()
+            : undefined, getFacetedUniqueValues: tableOptions.enableFacetedValues
+            ? getFacetedUniqueValues()
+            : undefined, getFilteredRowModel: tableOptions.enableColumnFilters ||
+            tableOptions.enableGlobalFilter ||
+            tableOptions.enableFilters
+            ? getFilteredRowModel()
+            : undefined, getGroupedRowModel: tableOptions.enableGrouping
+            ? getGroupedRowModel()
+            : undefined, getPaginationRowModel: tableOptions.enablePagination
+            ? getPaginationRowModel()
+            : undefined, getSortedRowModel: tableOptions.enableSorting
+            ? getSortedRowModel()
+            : undefined, getSubRows: (row) => row === null || row === void 0 ? void 0 : row.subRows, onColumnOrderChange: setColumnOrder, onGroupingChange: setGrouping }, tableOptions), { 
+        //@ts-ignore
+        columns: columnDefs, data, globalFilterFn: (_w = tableOptions.filterFns) === null || _w === void 0 ? void 0 : _w[globalFilterFn !== null && globalFilterFn !== void 0 ? globalFilterFn : 'fuzzy'], initialState, state: Object.assign({ columnFilterFns,
+            columnOrder,
+            creatingRow,
+            density,
+            draggingColumn,
+            draggingRow,
+            editingCell,
+            editingRow,
+            globalFilterFn,
+            grouping,
+            hoveredColumn,
+            hoveredRow,
+            isFullScreen,
+            showAlertBanner,
+            showColumnFilters,
+            showGlobalFilter,
+            showToolbarDropZone }, tableOptions.state) }));
+    // @ts-ignore
+    table.refs = {
+        // @ts-ignore
+        bottomToolbarRef,
+        editInputRefs,
+        filterInputRefs,
+        // @ts-ignore
+        searchInputRef,
+        // @ts-ignore
+        tableContainerRef,
+        // @ts-ignore
+        tableFooterRef,
+        tableHeadCellRefs,
+        // @ts-ignore
+        tableHeadRef,
+        // @ts-ignore
+        tablePaperRef,
+        // @ts-ignore
+        topToolbarRef,
+    };
+    const setCreatingRow = (row) => {
+        var _a, _b;
+        let _row = row;
+        if (row === true) {
+            _row = createRow(table);
+        }
+        (_b = (_a = tableOptions === null || tableOptions === void 0 ? void 0 : tableOptions.onCreatingRowChange) === null || _a === void 0 ? void 0 : _a.call(tableOptions, _row)) !== null && _b !== void 0 ? _b : _setCreatingRow(_row);
+    };
+    table.setCreatingRow = setCreatingRow;
+    table.setColumnFilterFns =
+        (_x = tableOptions.onColumnFilterFnsChange) !== null && _x !== void 0 ? _x : setColumnFilterFns;
+    table.setDensity = (_y = tableOptions.onDensityChange) !== null && _y !== void 0 ? _y : setDensity;
+    table.setDraggingColumn =
+        (_z = tableOptions.onDraggingColumnChange) !== null && _z !== void 0 ? _z : setDraggingColumn;
+    table.setDraggingRow = (_0 = tableOptions.onDraggingRowChange) !== null && _0 !== void 0 ? _0 : setDraggingRow;
+    table.setEditingCell = (_1 = tableOptions.onEditingCellChange) !== null && _1 !== void 0 ? _1 : setEditingCell;
+    table.setEditingRow = (_2 = tableOptions.onEditingRowChange) !== null && _2 !== void 0 ? _2 : setEditingRow;
+    table.setGlobalFilterFn =
+        (_3 = tableOptions.onGlobalFilterFnChange) !== null && _3 !== void 0 ? _3 : setGlobalFilterFn;
+    table.setHoveredColumn =
+        (_4 = tableOptions.onHoveredColumnChange) !== null && _4 !== void 0 ? _4 : setHoveredColumn;
+    table.setHoveredRow = (_5 = tableOptions.onHoveredRowChange) !== null && _5 !== void 0 ? _5 : setHoveredRow;
+    table.setIsFullScreen = (_6 = tableOptions.onIsFullScreenChange) !== null && _6 !== void 0 ? _6 : setIsFullScreen;
+    table.setShowAlertBanner =
+        (_7 = tableOptions.onShowAlertBannerChange) !== null && _7 !== void 0 ? _7 : setShowAlertBanner;
+    table.setShowColumnFilters =
+        (_8 = tableOptions.onShowColumnFiltersChange) !== null && _8 !== void 0 ? _8 : setShowColumnFilters;
+    table.setShowGlobalFilter =
+        (_9 = tableOptions.onShowGlobalFilterChange) !== null && _9 !== void 0 ? _9 : setShowGlobalFilter;
+    table.setShowToolbarDropZone =
+        (_10 = tableOptions.onShowToolbarDropZoneChange) !== null && _10 !== void 0 ? _10 : setShowToolbarDropZone;
+    useMRT_Effects(table);
+    return table;
+};
+
 const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
 
 const isTableInstanceProp = (props) => props.table !== undefined;