material-react-table 2.0.0-beta.1 → 2.0.0-beta.11

package/dist/{esm/material-react-table.esm.js → index.esm.js}

@@ -1,21 +1,20 @@
 import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import Paper from '@mui/material/Paper';
 import { useState, memo, useEffect, useMemo, useRef, useCallback, Fragment as Fragment$1, useLayoutEffect, useReducer } from 'react';
-import Box from '@mui/material/Box';
-import CircularProgress from '@mui/material/CircularProgress';
 import TableContainer from '@mui/material/TableContainer';
-import { darken, lighten, alpha, useTheme } from '@mui/material/styles';
 import { defaultRangeExtractor, useVirtualizer } from '@tanstack/react-virtual';
 import Table from '@mui/material/Table';
 import TableBody from '@mui/material/TableBody';
 import Typography from '@mui/material/Typography';
 import TableRow from '@mui/material/TableRow';
+import { lighten, darken, alpha, useTheme } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import TableCell from '@mui/material/TableCell';
+import Box from '@mui/material/Box';
+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';
-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 Button from '@mui/material/Button';
 import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
@@ -23,6 +22,7 @@ import Collapse from '@mui/material/Collapse';
 import { compareItems, rankItem, rankings } from '@tanstack/match-sorter-utils';
 import TableFooter from '@mui/material/TableFooter';
 import TableHead from '@mui/material/TableHead';
+import { alpha as alpha$1 } from '@mui/material';
 import ListItemIcon from '@mui/material/ListItemIcon';
 import Menu from '@mui/material/Menu';
 import Checkbox from '@mui/material/Checkbox';
@@ -40,7 +40,6 @@ import Popover from '@mui/material/Popover';
 import Divider from '@mui/material/Divider';
 import Badge from '@mui/material/Badge';
 import TableSortLabel from '@mui/material/TableSortLabel';
-import Toolbar from '@mui/material/Toolbar';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import LinearProgress from '@mui/material/LinearProgress';
 import InputLabel from '@mui/material/InputLabel';
@@ -52,6 +51,7 @@ import AlertTitle from '@mui/material/AlertTitle';
 import Radio from '@mui/material/Radio';
 import Fade from '@mui/material/Fade';
 import Switch from '@mui/material/Switch';
+import CircularProgress from '@mui/material/CircularProgress';
 import Dialog from '@mui/material/Dialog';
 import DialogActions from '@mui/material/DialogActions';
 import DialogContent from '@mui/material/DialogContent';
@@ -90,73 +90,31 @@ import SyncAltIcon from '@mui/icons-material/SyncAlt';
 import ViewColumnIcon from '@mui/icons-material/ViewColumn';
 import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
 
-const allowedTypes = ['string', 'number'];
-const MRT_TableBodyCellValue = ({ cell, table, }) => {
-    var _a, _b, _c;
-    const { getState, options: { enableFilterMatchHighlighting }, } = table;
-    const { column, row } = cell;
-    const { columnDef } = column;
-    const { globalFilter, globalFilterFn } = getState();
-    const filterValue = column.getFilterValue();
-    let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
-        ? columnDef.AggregatedCell({
-            cell,
-            column,
-            row,
-            table,
-        })
-        : row.getIsGrouped() && !cell.getIsGrouped()
-            ? null
-            : cell.getIsGrouped() && columnDef.GroupedCell
-                ? columnDef.GroupedCell({
-                    cell,
-                    column,
-                    row,
-                    table,
-                })
-                : undefined;
-    const isGroupedValue = renderedCellValue !== undefined;
-    if (!isGroupedValue) {
-        renderedCellValue = cell.renderValue();
-    }
-    if (enableFilterMatchHighlighting &&
-        columnDef.enableFilterMatchHighlighting !== false &&
-        renderedCellValue &&
-        allowedTypes.includes(typeof renderedCellValue) &&
-        ((filterValue &&
-            allowedTypes.includes(typeof filterValue) &&
-            columnDef.filterVariant === 'text') ||
-            (globalFilter &&
-                allowedTypes.includes(typeof globalFilter) &&
-                column.getCanGlobalFilter()))) {
-        const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
-            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
-            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
-            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
-        });
-        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
-            renderedCellValue = (jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsx(Box, { "aria-hidden": "true", component: "span", sx: match
-                        ? {
-                            backgroundColor: (theme) => theme.palette.mode === 'dark'
-                                ? darken(theme.palette.warning.dark, 0.25)
-                                : lighten(theme.palette.warning.light, 0.5),
-                            borderRadius: '2px',
-                            color: (theme) => theme.palette.mode === 'dark' ? 'white' : 'black',
-                            padding: '2px 1px',
-                        }
-                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
-        }
-    }
-    if (columnDef.Cell && !isGroupedValue) {
-        renderedCellValue = columnDef.Cell({
-            cell,
-            column,
-            renderedCellValue,
-            row,
-            table,
-        });
-    }
-    return jsx(Fragment, { children: renderedCellValue });
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+function __rest(s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
 const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
@@ -250,7 +208,6 @@ const getLeadingDisplayColumnIds = (props) => {
             'mrt-row-expand',
         props.enableRowSelection && 'mrt-row-select',
         props.enableRowNumbers && 'mrt-row-numbers',
-        props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
     ].filter(Boolean);
 };
 const getTrailingDisplayColumnIds = (props) => {
@@ -264,6 +221,7 @@ const getTrailingDisplayColumnIds = (props) => {
         props.positionExpandColumn === 'last' &&
             showExpandColumn(props) &&
             'mrt-row-expand',
+        props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
     ].filter(Boolean);
 };
 const getDefaultColumnOrderIds = (props) => {
@@ -325,7 +283,41 @@ const getCanRankRows = (table) => {
         expanded !== true &&
         !Object.values(expanded).some(Boolean));
 };
-const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
+const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
+const flexRender = flexRender$1;
+const createRow = (table, originalRow) => createRow$1(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
+    [getColumnId(col)]: '',
+}))), -1, 0);
+const extraIndexRangeExtractor = (range, draggingIndex) => {
+    const newIndexes = defaultRangeExtractor(range);
+    if (draggingIndex >= 0 &&
+        draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
+        newIndexes.unshift(draggingIndex);
+    }
+    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
+        newIndexes.push(draggingIndex);
+    }
+    return newIndexes;
+};
+function createMRTColumnHelper() {
+    return {
+        accessor: (accessor, column) => {
+            return typeof accessor === 'function'
+                ? Object.assign(Object.assign({}, column), { accessorFn: accessor })
+                : Object.assign(Object.assign({}, column), { accessorKey: accessor });
+        },
+        display: (column) => column,
+        group: (column) => column,
+    };
+}
+
+const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
+const getMRTTheme = (table, theme) => (Object.assign({ baseBackgroundColor: theme.palette.mode === 'dark'
+        ? lighten(theme.palette.background.default, 0.05)
+        : theme.palette.background.default, draggingBorderColor: theme.palette.primary.main, matchHighlightColor: theme.palette.mode === 'dark'
+        ? darken(theme.palette.warning.dark, 0.25)
+        : lighten(theme.palette.warning.light, 0.5), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2) }, parseFromValuesOrFunc(table.options.mrtTheme, theme)));
+const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { options: { layoutMode }, } = table;
     const widthStyles = {
@@ -339,11 +331,11 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
         widthStyles.flex = '0 0 auto';
     }
     return Object.assign(Object.assign({ backgroundColor: column.getIsPinned() && column.columnDef.columnDefType !== 'group'
-            ? alpha(lighten(theme.palette.background.default, 0.04), 0.97)
+            ? alpha(darken(getMRTTheme(table, theme).baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97)
             : 'inherit', backgroundImage: 'inherit', boxShadow: getIsLastLeftPinnedColumn(table, column)
-            ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+            ? `-4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
             : getIsFirstRightPinnedColumn(column)
-                ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+                ? `4px 0 8px -6px ${alpha(theme.palette.grey[700], 0.5)} inset`
                 : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, left: column.getIsPinned() === 'left'
             ? `${column.getStart('left')}px`
             : undefined, ml: table.options.enableColumnVirtualization &&
@@ -368,65 +360,111 @@ const getCommonCellStyles = ({ column, header, table, tableCellProps, theme, })
             ? 'none'
             : `padding 150ms ease-in-out` }, widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
 };
-const MRT_DefaultColumn = {
-    filterVariant: 'text',
-    maxSize: 1000,
-    minSize: 40,
-    size: 180,
-};
-const MRT_DefaultDisplayColumn = {
-    columnDefType: 'display',
-    enableClickToCopy: false,
-    enableColumnActions: false,
-    enableColumnDragging: false,
-    enableColumnFilter: false,
-    enableColumnOrdering: false,
-    enableEditing: false,
-    enableGlobalFilter: false,
-    enableGrouping: false,
-    enableHiding: false,
-    enableResizing: false,
-    enableSorting: false,
-};
-const parseFromValuesOrFunc = (fn, arg) => (fn instanceof Function ? fn(arg) : fn);
-const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
-const flexRender = flexRender$1;
-const createRow = (table, originalRow) => createRow$1(table, 'mrt-row-create', originalRow !== null && originalRow !== void 0 ? originalRow : Object.assign({}, ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
-    [getColumnId(col)]: '',
-}))), -1, 0);
-const extraIndexRangeExtractor = (range, draggingIndex) => {
-    const newIndexs = defaultRangeExtractor(range);
-    if (draggingIndex >= 0 &&
-        draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
-        newIndexs.unshift(draggingIndex);
+const getCommonToolbarStyles = ({ table, theme, }) => ({
+    alignItems: 'flex-start',
+    backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+    display: 'grid',
+    flexWrap: 'wrap-reverse',
+    minHeight: '3.5rem',
+    overflow: 'hidden',
+    position: 'relative',
+    transition: 'all 150ms ease-in-out',
+    zIndex: 1,
+});
+
+const allowedTypes = ['string', 'number'];
+const MRT_TableBodyCellValue = ({ cell, table, }) => {
+    var _a, _b, _c;
+    const { getState, options: { enableFilterMatchHighlighting }, } = table;
+    const { column, row } = cell;
+    const { columnDef } = column;
+    const { globalFilter, globalFilterFn } = getState();
+    const filterValue = column.getFilterValue();
+    let renderedCellValue = cell.getIsAggregated() && columnDef.AggregatedCell
+        ? columnDef.AggregatedCell({
+            cell,
+            column,
+            row,
+            table,
+        })
+        : row.getIsGrouped() && !cell.getIsGrouped()
+            ? null
+            : cell.getIsGrouped() && columnDef.GroupedCell
+                ? columnDef.GroupedCell({
+                    cell,
+                    column,
+                    row,
+                    table,
+                })
+                : undefined;
+    const isGroupedValue = renderedCellValue !== undefined;
+    if (!isGroupedValue) {
+        renderedCellValue = cell.renderValue();
     }
-    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
-        newIndexs.push(draggingIndex);
+    if (enableFilterMatchHighlighting &&
+        columnDef.enableFilterMatchHighlighting !== false &&
+        renderedCellValue &&
+        allowedTypes.includes(typeof renderedCellValue) &&
+        ((filterValue &&
+            allowedTypes.includes(typeof filterValue) &&
+            columnDef.filterVariant === 'text') ||
+            (globalFilter &&
+                allowedTypes.includes(typeof globalFilter) &&
+                column.getCanGlobalFilter()))) {
+        const chunks = highlightWords === null || highlightWords === void 0 ? void 0 : highlightWords({
+            matchExactly: (filterValue ? columnDef._filterFn : globalFilterFn) !== 'fuzzy',
+            query: ((_a = filterValue !== null && filterValue !== void 0 ? filterValue : globalFilter) !== null && _a !== void 0 ? _a : '').toString(),
+            text: renderedCellValue === null || renderedCellValue === void 0 ? void 0 : renderedCellValue.toString(),
+        });
+        if ((chunks === null || chunks === void 0 ? void 0 : chunks.length) > 1 || ((_b = chunks === null || chunks === void 0 ? void 0 : chunks[0]) === null || _b === void 0 ? void 0 : _b.match)) {
+            renderedCellValue = (jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsx(Box, { "aria-hidden": "true", component: "span", sx: match
+                        ? {
+                            backgroundColor: (theme) => getMRTTheme(table, theme).matchHighlightColor,
+                            borderRadius: '2px',
+                            color: (theme) => theme.palette.mode === 'dark'
+                                ? theme.palette.common.white
+                                : theme.palette.common.black,
+                            padding: '2px 1px',
+                        }
+                        : undefined, children: text }, key)))) !== null && _c !== void 0 ? _c : renderedCellValue }));
+        }
+    }
+    if (columnDef.Cell && !isGroupedValue) {
+        renderedCellValue = columnDef.Cell({
+            cell,
+            column,
+            renderedCellValue,
+            row,
+            table,
+        });
     }
-    return newIndexs;
+    return renderedCellValue;
 };
 
-const MRT_GrabHandleButton = ({ iconButtonProps, location, onDragEnd, onDragStart, table, }) => {
-    var _a;
+const MRT_GrabHandleButton = (_a) => {
+    var _b;
+    var { iconButtonProps, location, onDragEnd, onDragStart, table } = _a, rest = __rest(_a, ["iconButtonProps", "location", "onDragEnd", "onDragStart", "table"]);
     const { options: { icons: { DragHandleIcon }, localization, }, } = table;
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.move, children: jsx(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, iconButtonProps, { onClick: (e) => {
+    const _iconButtonProps = Object.assign(Object.assign({}, iconButtonProps), rest);
+    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.move, children: jsx(IconButton, Object.assign({ disableRipple: true, draggable: "true", size: "small" }, _iconButtonProps, { onClick: (e) => {
                 var _a;
                 e.stopPropagation();
-                (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, e);
+                (_a = _iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(_iconButtonProps, e);
             }, onDragEnd: onDragEnd, onDragStart: onDragStart, sx: (theme) => (Object.assign({ '&:active': {
                     cursor: 'grabbing',
                 }, '&:hover': {
                     backgroundColor: 'transparent',
                     opacity: 1,
-                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.3, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
+                }, cursor: 'grab', m: '0 -0.1rem', opacity: location === 'row' ? 1 : 0.3, p: '2px', transition: 'all 150ms ease-in-out' }, parseFromValuesOrFunc(_iconButtonProps === null || _iconButtonProps === void 0 ? void 0 : _iconButtonProps.sx, theme))), title: undefined, children: jsx(DragHandleIcon, {}) })) }));
 };
 
-const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, }) => {
+const MRT_TableBodyRowGrabHandle = (_a) => {
+    var { row, rowRef, table } = _a, rest = __rest(_a, ["row", "rowRef", "table"]);
     const { options: { muiRowDragHandleProps }, } = table;
-    const iconButtonProps = parseFromValuesOrFunc(muiRowDragHandleProps, {
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiRowDragHandleProps, {
         row,
         table,
-    });
+    })), rest);
     const handleDragStart = (event) => {
         var _a;
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
@@ -442,8 +480,9 @@ const MRT_TableBodyRowGrabHandle = ({ row, rowRef, table, }) => {
     return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, location: "row", onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
 };
 
-const MRT_CopyButton = ({ cell, children, table, }) => {
-    var _a;
+const MRT_CopyButton = (_a) => {
+    var _b;
+    var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
     const { options: { localization, muiCopyButtonProps }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
@@ -454,7 +493,7 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
         setCopied(true);
         setTimeout(() => setCopied(false), 4000);
     };
-    const buttonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
+    const buttonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCopyButtonProps, {
         cell,
         column,
         row,
@@ -464,12 +503,13 @@ const MRT_CopyButton = ({ cell, children, table, }) => {
         column,
         row,
         table,
-    }));
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _a !== void 0 ? _a : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined, children: children })) }));
+    })), rest);
+    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.title) !== null && _b !== void 0 ? _b : (copied ? localization.copiedToClipboard : localization.clickToCopy), children: jsx(Button, Object.assign({ onClick: (e) => handleCopy(e, cell.getValue()), size: "small", type: "button", variant: "text" }, buttonProps, { sx: (theme) => (Object.assign({ backgroundColor: 'transparent', border: 'none', color: 'inherit', cursor: 'copy', fontFamily: 'inherit', fontSize: 'inherit', letterSpacing: 'inherit', m: '-0.25rem', minWidth: 'unset', textAlign: 'inherit', textTransform: 'inherit' }, parseFromValuesOrFunc(buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.sx, theme))), title: undefined })) }));
 };
 
-const MRT_EditCellTextField = ({ cell, table, }) => {
-    var _a, _b, _c;
+const MRT_EditCellTextField = (_a) => {
+    var _b, _c, _d;
+    var { cell, table } = _a, rest = __rest(_a, ["cell", "table"]);
     const { getState, options: { createDisplayMode, editDisplayMode, muiEditTextFieldProps }, refs: { editInputRefs }, setCreatingRow, setEditingCell, setEditingRow, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
@@ -478,7 +518,7 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
     const isEditing = (editingRow === null || editingRow === void 0 ? void 0 : editingRow.id) === row.id;
     const isSelectEdit = columnDef.editVariant === 'select';
     const [value, setValue] = useState(() => cell.getValue());
-    const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
+    const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditTextFieldProps, {
         cell,
         column,
         row,
@@ -488,7 +528,7 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
         column,
         row,
         table,
-    }));
+    })), rest);
     const saveInputValueToRowCache = (newValue) => {
         //@ts-ignore
         row._valuesCache[column.id] = newValue;
@@ -521,7 +561,7 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
         }
     };
     if (columnDef.Edit) {
-        return jsx(Fragment, { children: (_a = columnDef.Edit) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table }) });
+        return jsx(Fragment, { children: (_b = columnDef.Edit) === null || _b === void 0 ? void 0 : _b.call(columnDef, { cell, column, row, table }) });
     }
     return (jsx(TextField, Object.assign({ disabled: parseFromValuesOrFunc(columnDef.enableEditing, row) === false, fullWidth: true, inputRef: (inputRef) => {
             if (inputRef) {
@@ -530,15 +570,18 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
                     textFieldProps.inputRef = inputRef;
                 }
             }
-        }, label: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
+        }, label: ['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? columnDef.header
             : undefined, margin: "none", name: column.id, placeholder: !['custom', 'modal'].includes((isCreating ? createDisplayMode : editDisplayMode))
             ? columnDef.header
-            : undefined, select: isSelectEdit, value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign({ disableUnderline: editDisplayMode === 'table' }, textFieldProps.InputProps), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
+            : undefined, select: isSelectEdit, size: "small", value: value, variant: "standard" }, textFieldProps, { InputProps: Object.assign(Object.assign({ disableUnderline: editDisplayMode === 'table' }, textFieldProps.InputProps), { sx: (theme) => {
+                var _a;
+                return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
+            } }), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
-        }, onKeyDown: handleEnterKeyDown, children: (_b = textFieldProps.children) !== null && _b !== void 0 ? _b : (_c = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _c === void 0 ? void 0 : _c.map((option) => {
+        }, onKeyDown: handleEnterKeyDown, children: (_c = textFieldProps.children) !== null && _c !== void 0 ? _c : (_d = columnDef === null || columnDef === void 0 ? void 0 : columnDef.editSelectOptions) === null || _d === void 0 ? void 0 : _d.map((option) => {
             let value;
             let text;
             if (typeof option !== 'object') {
@@ -558,31 +601,24 @@ const MRT_EditCellTextField = ({ cell, table, }) => {
         }) })));
 };
 
-const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, table, virtualCell, }) => {
-    var _a, _b, _c, _d;
+const MRT_TableBodyCell = (_a) => {
+    var _b, _c, _d, _e, _f;
+    var { cell, measureElement, numRows, rowIndex, rowRef, table, virtualIndex } = _a, rest = __rest(_a, ["cell", "measureElement", "numRows", "rowIndex", "rowRef", "table", "virtualIndex"]);
     const theme = useTheme();
     const { getState, options: { createDisplayMode, editDisplayMode, enableClickToCopy, enableColumnOrdering, enableEditing, enableGrouping, enableRowNumbers, layoutMode, muiSkeletonProps, muiTableBodyCellProps, rowNumberMode, }, refs: { editInputRefs }, setEditingCell, setHoveredColumn, } = table;
     const { columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyCellProps, {
-        cell,
-        column,
-        row,
-        table,
-    })), parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, {
-        cell,
-        column,
-        row,
-        table,
-    }));
+    const args = { cell, column, row, table };
+    const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args)), rest);
     const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
         cell,
         column,
         row,
         table,
     });
+    const { draggingBorderColor } = getMRTTheme(table, theme);
     const [skeletonWidth, setSkeletonWidth] = useState(100);
     useEffect(() => {
         if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
@@ -600,13 +636,15 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
         const isFirstColumn = getIsFirstColumn(column, table);
         const isLastColumn = getIsLastColumn(column, table);
         const isLastRow = numRows && rowIndex === numRows - 1;
-        const borderStyle = isDraggingColumn || isDraggingRow
-            ? `1px dashed ${theme.palette.text.secondary} !important`
-            : isHoveredColumn ||
-                isHoveredRow ||
-                columnSizingInfo.isResizingColumn === column.id
-                ? `2px dashed ${theme.palette.primary.main} !important`
-                : undefined;
+        const borderStyle = columnSizingInfo.isResizingColumn === column.id
+            ? `2px solid ${draggingBorderColor} !important`
+            : isDraggingColumn || isDraggingRow
+                ? `1px dashed ${theme.palette.grey[500]} !important`
+                : isHoveredColumn ||
+                    isHoveredRow ||
+                    columnSizingInfo.isResizingColumn === column.id
+                    ? `2px dashed ${draggingBorderColor} !important`
+                    : undefined;
         if (columnSizingInfo.isResizingColumn === column.id) {
             return { borderRight: borderStyle };
         }
@@ -670,13 +708,13 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    return (jsx(TableCell, Object.assign({ "data-index": virtualCell === null || virtualCell === void 0 ? void 0 : virtualCell.index, ref: (node) => {
+    return (jsx(TableCell, Object.assign({ "data-index": virtualIndex, ref: (node) => {
             if (node) {
                 measureElement === null || measureElement === void 0 ? void 0 : measureElement(node);
             }
         } }, tableCellProps, { onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
-                outline: ['cell', 'table'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '')
-                    ? `1px solid ${theme.palette.text.secondary}`
+                outline: ['cell', 'table'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '') && isEditable
+                    ? `1px solid ${theme.palette.grey[500]}`
                     : undefined,
                 outlineOffset: '-1px',
                 textOverflow: 'clip',
@@ -692,35 +730,36 @@ const MRT_TableBodyCell = ({ cell, measureElement, numRows, rowIndex, rowRef, ta
                         : '1rem'
                     : columnDefType === 'display'
                         ? '1rem 1.25rem'
-                        : '1.5rem', pl: column.id === 'mrt-row-expand'
+                        : '1.5rem', textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, [theme.direction === 'rtl' ? 'pr' : 'pl']: column.id === 'mrt-row-expand'
                 ? `${row.depth +
                     (density === 'compact'
                         ? 0.5
                         : density === 'comfortable'
                             ? 0.75
                             : 1.25)}rem`
-                : undefined, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0 }, getCommonCellStyles({
+                : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0 }, getCommonMRTCellStyles({
             column,
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_b = (_a = columnDef.PlaceholderCell) === null || _a === void 0 ? void 0 : _a.call(columnDef, { cell, column, row, table })) !== null && _b !== void 0 ? _b : null) : isLoading || showSkeletons ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
+        })), draggingBorders)), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [cell.getIsPlaceholder() ? ((_d = (_c = columnDef.PlaceholderCell) === null || _c === void 0 ? void 0 : _c.call(columnDef, { cell, column, row, table })) !== null && _d !== void 0 ? _d : null) : showSkeletons !== false && (isLoading || showSkeletons) ? (jsx(Skeleton, Object.assign({ animation: "wave", height: 20, width: skeletonWidth }, skeletonProps))) : enableRowNumbers &&
                     rowNumberMode === 'static' &&
                     column.id === 'mrt-row-numbers' ? (rowIndex + 1) : column.id === 'mrt-row-drag' ? (jsx(MRT_TableBodyRowGrabHandle, { row: row, rowRef: rowRef, table: table })) : columnDefType === 'display' &&
                     (column.id === 'mrt-row-select' ||
                         column.id === 'mrt-row-expand' ||
-                        !row.getIsGrouped()) ? ((_c = columnDef.Cell) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
+                        !row.getIsGrouped()) ? ((_e = columnDef.Cell) === null || _e === void 0 ? void 0 : _e.call(columnDef, {
                     cell,
                     column,
                     renderedCellValue: cell.renderValue(),
                     row,
                     table,
                 })) : isCreating || isEditing ? (jsx(MRT_EditCellTextField, { cell: cell, table: table })) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-                    columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) })) : (jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_d = row.subRows) === null || _d === void 0 ? void 0 : _d.length, ")"] }))] }) })));
+                    columnDef.enableClickToCopy !== false ? (jsx(MRT_CopyButton, { cell: cell, table: table, children: jsx(MRT_TableBodyCellValue, { cell: cell, table: table }) })) : (jsx(MRT_TableBodyCellValue, { cell: cell, table: table })), cell.getIsGrouped() && !columnDef.GroupedCell && (jsxs(Fragment, { children: [" (", (_f = row.subRows) === null || _f === void 0 ? void 0 : _f.length, ")"] }))] })) })));
 };
 const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell === prev.cell);
 
-const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow, }) => {
+const MRT_TableDetailPanel = (_a) => {
+    var { parentRowRef, row, rowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowIndex", "table", "virtualRow"]);
     const { getState, getVisibleLeafColumns, options: { layoutMode, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
@@ -729,10 +768,10 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
         staticRowIndex: rowIndex,
         table,
     });
-    const tableCellProps = parseFromValuesOrFunc(muiDetailPanelProps, {
+    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiDetailPanelProps, {
         row,
         table,
-    });
+    })), rest);
     return (jsx(TableRow, Object.assign({ className: "Mui-TableBodyCell-DetailPanel" }, tableRowProps, { sx: (theme) => {
             var _a, _b;
             return (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: virtualRow ? 'absolute' : undefined, top: virtualRow
@@ -741,8 +780,8 @@ const MRT_TableDetailPanel = ({ parentRowRef, row, rowIndex, table, virtualRow,
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                     : undefined, width: '100%', zIndex: virtualRow ? 2 : undefined }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
         }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
-                    ? lighten(theme.palette.background.default, 0.05)
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : 'table-cell', py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
+                    ? getMRTTheme(table, theme).baseBackgroundColor
+                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: row.getIsExpanded() ? '1rem' : 0, transition: 'all 150ms ease-in-out', width: `${table.getTotalSize()}px` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: renderDetailPanel && (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: !isLoading && renderDetailPanel({ row, table }) })) })) })));
 };
 
 const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRowIds, row, rowIndex, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, virtualRow, }) => {
@@ -782,7 +821,8 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
         }
     };
     const rowRef = useRef(null);
-    return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, ref: (node) => {
+    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, "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);
@@ -792,16 +832,16 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                         : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td': {
                         backgroundColor: (tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.hover) !== false
                             ? row.getIsSelected()
-                                ? `${alpha(theme.palette.primary.main, 0.2)}`
+                                ? `${alpha(selectedRowBackgroundColor, 0.3)}`
                                 : theme.palette.mode === 'dark'
-                                    ? `${lighten(theme.palette.background.default, 0.12)}`
-                                    : `${darken(theme.palette.background.default, 0.05)}`
+                                    ? `${lighten(baseBackgroundColor, 0.05)}`
+                                    : `${darken(baseBackgroundColor, 0.05)}`
                             : undefined,
-                    }, backgroundColor: `${lighten(theme.palette.background.default, 0.05)} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
+                    }, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isPinned
                         ? `${bottomPinnedIndex * rowHeight +
                             (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
                         : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isPinned
-                        ? 0.98
+                        ? 0.97
                         : (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id || (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id
                             ? 0.5
                             : 1, position: virtualRow
@@ -810,9 +850,9 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                             ? 'sticky'
                             : undefined, td: {
                         backgroundColor: row.getIsSelected()
-                            ? alpha(theme.palette.primary.main, 0.2)
+                            ? selectedRowBackgroundColor
                             : isPinned
-                                ? alpha(theme.palette.primary.main, 0.1)
+                                ? pinnedRowBackgroundColor
                                 : undefined,
                     }, top: virtualRow
                         ? 0
@@ -832,8 +872,8 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
                             rowIndex,
                             rowRef,
                             table,
-                            virtualCell: columnVirtualizer
-                                ? cellOrVirtualCell
+                            virtualIndex: columnVirtualizer
+                                ? cellOrVirtualCell.index
                                 : undefined,
                         };
                         return cell ? (memoMode === 'cells' &&
@@ -860,18 +900,19 @@ const MRT_SortingFns = Object.assign(Object.assign({}, sortingFns), { fuzzy: fuz
 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_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    var _a, _b, _c, _d, _e, _f;
+const MRT_TableBody = (_a) => {
+    var _b, _c, _d, _e, _f, _g;
+    var { columnVirtualizer, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["columnVirtualizer", "table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
     const { getBottomRows, getCenterRows, getIsSomeRowsPinned, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enableGlobalFilterRankedResults, enablePagination, enableRowPinning, enableRowVirtualization, enableStickyFooter, enableStickyHeader, layoutMode, localization, manualExpanding, manualFiltering, manualGrouping, manualPagination, manualSorting, memoMode, muiTableBodyProps, renderEmptyRowsFallback, rowPinningDisplayMode, rowVirtualizerInstanceRef, rowVirtualizerOptions, }, refs: { tableContainerRef, tableFooterRef, tableHeadRef, tablePaperRef }, } = table;
     const { columnFilters, creatingRow, density, draggingRow, expanded, globalFilter, isFullScreen, pagination, rowPinning, sorting, } = getState();
-    const tableBodyProps = parseFromValuesOrFunc(muiTableBodyProps, { table });
+    const tableBodyProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableBodyProps, { table })), rest);
     const rowVirtualizerProps = parseFromValuesOrFunc(rowVirtualizerOptions, {
         table,
     });
     const tableHeadHeight = ((enableStickyHeader || isFullScreen) &&
-        ((_a = tableHeadRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight)) ||
+        ((_b = tableHeadRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) ||
         0;
-    const tableFooterHeight = (enableStickyFooter && ((_b = tableFooterRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight)) || 0;
+    const tableFooterHeight = (enableStickyFooter && ((_c = tableFooterRef.current) === null || _c === void 0 ? void 0 : _c.clientHeight)) || 0;
     const shouldRankRows = useMemo(() => getCanRankRows(table) &&
         !Object.values(sorting).some(Boolean) &&
         globalFilter, [
@@ -948,16 +989,14 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
                     return memoMode === 'rows' ? (jsx(Memo_MRT_TableBodyRow, Object.assign({}, props), row.id)) : (jsx(MRT_TableBodyRow, Object.assign({}, props), row.id));
                 }) }))), jsxs(TableBody, Object.assign({}, tableBodyProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, height: rowVirtualizer
                         ? `${rowVirtualizer.getTotalSize()}px`
-                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [creatingRow && createDisplayMode === 'row' && (jsx(MRT_TableBodyRow, { row: creatingRow, rowIndex: -1, table: table })), (_c = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _c !== void 0 ? _c : (!rows.length ? (jsx("tr", { style: {
+                        : 'inherit', minHeight: !rows.length ? '100px' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.sx, theme))), children: [creatingRow && createDisplayMode === 'row' && (jsx(MRT_TableBodyRow, { row: creatingRow, rowIndex: -1, table: table })), (_d = tableBodyProps === null || tableBodyProps === void 0 ? void 0 : tableBodyProps.children) !== null && _d !== void 0 ? _d : (!rows.length ? (jsx("tr", { style: {
                             display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
                         }, children: jsx("td", { colSpan: table.getVisibleLeafColumns().length, style: {
-                                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
-                                    ? 'grid'
-                                    : 'table-cell',
-                            }, children: (_d = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _d !== void 0 ? _d : (jsx(Typography, { sx: {
+                                display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
+                            }, children: (_e = renderEmptyRowsFallback === null || renderEmptyRowsFallback === void 0 ? void 0 : renderEmptyRowsFallback({ table })) !== null && _e !== void 0 ? _e : (jsx(Typography, { sx: {
                                     color: 'text.secondary',
                                     fontStyle: 'italic',
-                                    maxWidth: `min(100vw, ${(_f = (_e = tablePaperRef.current) === null || _e === void 0 ? void 0 : _e.clientWidth) !== null && _f !== void 0 ? _f : 360}px)`,
+                                    maxWidth: `min(100vw, ${(_g = (_f = tablePaperRef.current) === null || _f === void 0 ? void 0 : _f.clientWidth) !== null && _g !== void 0 ? _g : 360}px)`,
                                     py: '2rem',
                                     textAlign: 'center',
                                     width: '100%',
@@ -1001,48 +1040,48 @@ const MRT_TableBody = ({ columnVirtualizer, table, virtualColumns, virtualPaddin
 };
 const Memo_MRT_TableBody = memo(MRT_TableBody, (prev, next) => prev.table.options.data === next.table.options.data);
 
-const MRT_TableFooterCell = ({ footer, table, }) => {
-    var _a, _b;
+const MRT_TableFooterCell = (_a) => {
+    var _b, _c, _d;
+    var { footer, table } = _a, rest = __rest(_a, ["footer", "table"]);
     const { getState, options: { layoutMode, muiTableFooterCellProps }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
-        column,
-        table,
-    }));
-    return (jsx(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : 'table-cell', fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
+    const args = { column, table };
+    const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterCellProps, args)), parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, args)), rest);
+    return (jsx(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: footer.colSpan, variant: "head" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
-                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonCellStyles({
+                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonMRTCellStyles({
             column,
             table,
             tableCellProps,
             theme,
-        }))), children: jsx(Fragment, { children: footer.isPlaceholder
-                ? null
-                : (_b = (_a = parseFromValuesOrFunc(columnDef.Footer, {
-                    column,
-                    footer,
-                    table,
-                })) !== null && _a !== void 0 ? _a : columnDef.footer) !== null && _b !== void 0 ? _b : null }) })));
+        })), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: (_b = tableCellProps.children) !== null && _b !== void 0 ? _b : (footer.isPlaceholder
+            ? null
+            : (_d = (_c = parseFromValuesOrFunc(columnDef.Footer, {
+                column,
+                footer,
+                table,
+            })) !== null && _c !== void 0 ? _c : columnDef.footer) !== null && _d !== void 0 ? _d : null) })));
 };
 
-const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
-    var _a;
+const MRT_TableFooterRow = (_a) => {
+    var _b;
+    var { footerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["footerGroup", "table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
     const { options: { layoutMode, 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' &&
+    if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
         !!header.column.columnDef.footer) ||
         header.column.columnDef.Footer)))
         return null;
-    const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
+    const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterRowProps, {
         footerGroup,
         table,
-    });
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.05), display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
+    })), rest);
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter) => {
                 const footer = virtualColumns
                     ? footerGroup.headers[footerOrVirtualFooter.index]
                     : footerOrVirtualFooter;
@@ -1050,12 +1089,13 @@ const MRT_TableFooterRow = ({ footerGroup, table, virtualColumns, virtualPadding
             }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
-const MRT_TableFooter = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+const MRT_TableFooter = (_a) => {
+    var { table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
     const { getFooterGroups, getState, options: { enableStickyFooter, layoutMode, muiTableFooterProps }, refs: { tableFooterRef }, } = table;
     const { isFullScreen } = getState();
-    const tableFooterProps = parseFromValuesOrFunc(muiTableFooterProps, {
+    const tableFooterProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableFooterProps, {
         table,
-    });
+    })), rest);
     const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
     return (jsx(TableFooter, Object.assign({}, tableFooterProps, { ref: (ref) => {
             tableFooterRef.current = ref;
@@ -1160,14 +1200,15 @@ const rangeModes = ['between', 'betweenInclusive', 'inNumberRange'];
 const emptyModes = ['empty', 'notEmpty'];
 const arrModes = ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'];
 const rangeVariants = ['range-slider', 'date-range', 'range'];
-const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilterValue, table, }) => {
-    var _a, _b, _c, _d;
+const MRT_FilterOptionMenu = (_a) => {
+    var _b, _c, _d, _e;
+    var { anchorEl, header, onSelect, setAnchorEl, setFilterValue, table } = _a, rest = __rest(_a, ["anchorEl", "header", "onSelect", "setAnchorEl", "setFilterValue", "table"]);
     const { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, renderColumnFilterModeMenuItems, renderGlobalFilterModeMenuItems, }, setColumnFilterFns, setGlobalFilterFn, } = table;
     const { density, globalFilterFn } = getState();
     const { column } = header !== null && header !== void 0 ? header : {};
     const { columnDef } = column !== null && column !== void 0 ? column : {};
     const currentFilterValue = column === null || column === void 0 ? void 0 : column.getFilterValue();
-    let allowedColumnFilterOptions = (_a = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _a !== void 0 ? _a : columnFilterModeOptions;
+    let allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
     if (rangeVariants.includes(columnDef === null || columnDef === void 0 ? void 0 : columnDef.filterVariant)) {
         allowedColumnFilterOptions = [
             ...rangeModes,
@@ -1241,15 +1282,15 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    return (jsx(Menu, { MenuListProps: {
+    return (jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
-        }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, onClose: () => setAnchorEl(null), open: !!anchorEl, children: (_d = (header && column && columnDef
-            ? (_c = (_b = columnDef.renderColumnFilterModeMenuItems) === null || _b === void 0 ? void 0 : _b.call(columnDef, {
+        }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
+            ? (_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
                 column: column,
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
                 table,
-            })) !== null && _c !== void 0 ? _c : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
+            })) !== null && _d !== void 0 ? _d : renderColumnFilterModeMenuItems === null || renderColumnFilterModeMenuItems === void 0 ? void 0 : renderColumnFilterModeMenuItems({
                 column: column,
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
@@ -1259,13 +1300,13 @@ const MRT_FilterOptionMenu = ({ anchorEl, header, onSelect, setAnchorEl, setFilt
                 internalFilterOptions,
                 onSelectFilterMode: handleSelectFilterMode,
                 table,
-            }))) !== null && _d !== void 0 ? _d : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxs(MenuItem, { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
+            }))) !== null && _e !== void 0 ? _e : internalFilterOptions.map(({ divider, label, option, symbol }, index) => (jsxs(MenuItem, { divider: divider, onClick: () => handleSelectFilterMode(option), selected: option === filterOption, sx: {
                 alignItems: 'center',
                 display: 'flex',
                 gap: '2ch',
                 my: 0,
                 py: '6px',
-            }, value: option, children: [jsx(Box, { sx: { fontSize: '1.25rem', width: '2ch' }, children: symbol }), label] }, index))) }));
+            }, value: option, children: [jsx(Box, { sx: { fontSize: '1.25rem', width: '2ch' }, children: symbol }), label] }, index))) })));
 };
 
 const commonMenuItemStyles = {
@@ -1278,8 +1319,9 @@ const commonListItemStyles = {
     alignItems: 'center',
     display: 'flex',
 };
-const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+const MRT_ColumnActionMenu = (_a) => {
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    var { anchorEl, header, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "header", "setAnchorEl", "table"]);
     const { getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ArrowRightIcon, ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, toggleAllColumnsVisible, } = table;
     const { column } = header;
     const { columnDef } = column;
@@ -1334,7 +1376,7 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         setFilterMenuAnchorEl(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 allowedColumnFilterOptions = (_b = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _b !== void 0 ? _b : columnFilterModeOptions;
     const showFilterModeSubMenu = enableColumnFilterModes &&
         columnDef.enableColumnFilterModes !== false &&
         !isSelectFilter &&
@@ -1344,8 +1386,8 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
         ...(enableSorting && column.getCanSort()
             ? [
                 enableSortingRemoval !== false && (jsx(MenuItem, { disabled: !column.getIsSorted(), onClick: handleClearSort, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ClearAllIcon, {}) }), localization.clearSort] }) }, 0)),
-                jsx(MenuItem, { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_b = localization.sortByColumnAsc) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))] }) }, 1),
-                jsx(MenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, {}) }), (_c = localization.sortByColumnDesc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 2),
+                jsx(MenuItem, { disabled: column.getIsSorted() === 'asc', onClick: handleSortAsc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, { style: { transform: 'rotate(180deg) scaleX(-1)' } }) }), (_c = localization.sortByColumnAsc) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))] }) }, 1),
+                jsx(MenuItem, { disabled: column.getIsSorted() === 'desc', divider: enableColumnFilters || enableGrouping || enableHiding, onClick: handleSortDesc, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(SortIcon, {}) }), (_d = localization.sortByColumnDesc) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }) }, 2),
             ]
             : []),
         ...(enableColumnFilters && column.getCanFilter()
@@ -1355,13 +1397,13 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
                             !columnFilterValue.filter((value) => value).length), onClick: handleClearFilter, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListOffIcon, {}) }), localization.clearFilter] }) }, 3),
                 columnFilterDisplayMode === 'subheader' && (jsxs(MenuItem, { disabled: showColumnFilters && !enableColumnFilterModes, divider: enableGrouping || enableHiding, onClick: showColumnFilters
                         ? handleOpenFilterModeMenu
-                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 4)),
+                        : handleFilterByColumn, sx: commonMenuItemStyles, children: [jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(FilterListIcon, {}) }), (_e = localization.filterByColumn) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }), showFilterModeSubMenu && (jsx(IconButton, { onClick: handleOpenFilterModeMenu, onMouseEnter: handleOpenFilterModeMenu, size: "small", sx: { p: 0 }, children: jsx(ArrowRightIcon, {}) }))] }, 4)),
                 showFilterModeSubMenu && (jsx(MRT_FilterOptionMenu, { anchorEl: filterMenuAnchorEl, header: header, onSelect: handleFilterByColumn, setAnchorEl: setFilterMenuAnchorEl, table: table }, 5)),
             ].filter(Boolean)
             : []),
         ...(enableGrouping && column.getCanGroup()
             ? [
-                jsx(MenuItem, { divider: enableColumnPinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(DynamicFeedIcon, {}) }), (_e = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _e === void 0 ? void 0 : _e.replace('{column}', String(columnDef.header))] }) }, 6),
+                jsx(MenuItem, { divider: enableColumnPinning, onClick: handleGroupByColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(DynamicFeedIcon, {}) }), (_f = localization[column.getIsGrouped() ? 'ungroupByColumn' : 'groupByColumn']) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 6),
             ]
             : []),
         ...(enableColumnPinning && column.getCanPin()
@@ -1378,30 +1420,31 @@ const MRT_ColumnActionMenu = ({ anchorEl, header, setAnchorEl, table, }) => {
             : []),
         ...(enableHiding
             ? [
-                jsx(MenuItem, { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(VisibilityOffIcon, {}) }), (_f = localization.hideColumn) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))] }) }, 11),
+                jsx(MenuItem, { disabled: !column.getCanHide(), onClick: handleHideColumn, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(VisibilityOffIcon, {}) }), (_g = localization.hideColumn) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }) }, 11),
                 jsx(MenuItem, { disabled: !Object.values(columnVisibility).filter((visible) => !visible)
-                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ViewColumnIcon, {}) }), (_g = localization.showAllColumns) === null || _g === void 0 ? void 0 : _g.replace('{column}', String(columnDef.header))] }) }, 12),
+                        .length, onClick: handleShowAllColumns, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(ViewColumnIcon, {}) }), (_h = localization.showAllColumns) === null || _h === void 0 ? void 0 : _h.replace('{column}', String(columnDef.header))] }) }, 12),
             ]
             : []),
     ].filter(Boolean);
-    return (jsx(Menu, { MenuListProps: {
+    return (jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
-        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl, children: (_k = (_j = (_h = columnDef.renderColumnActionsMenuItems) === null || _h === void 0 ? void 0 : _h.call(columnDef, {
+        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
             closeMenu: () => setAnchorEl(null),
             column,
             internalColumnMenuItems,
             table,
-        })) !== null && _j !== void 0 ? _j : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
+        })) !== null && _k !== void 0 ? _k : renderColumnActionsMenuItems === null || renderColumnActionsMenuItems === void 0 ? void 0 : renderColumnActionsMenuItems({
             closeMenu: () => setAnchorEl(null),
             column,
             internalColumnMenuItems,
             table,
-        })) !== null && _k !== void 0 ? _k : internalColumnMenuItems }));
+        })) !== null && _l !== void 0 ? _l : internalColumnMenuItems })));
 };
 
-const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
-    var _a;
-    const { options: { columnFilterDisplayMode, icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
+const MRT_TableHeadCellColumnActionsButton = (_a) => {
+    var _b;
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
+    const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const [anchorEl, setAnchorEl] = useState(null);
@@ -1410,32 +1453,33 @@ const MRT_TableHeadCellColumnActionsButton = ({ header, table, }) => {
         event.preventDefault();
         setAnchorEl(event.currentTarget);
     };
-    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnActionsButtonProps, {
+    const iconButtonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnActionsButtonProps, {
         column,
         table,
     })), parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
         column,
         table,
-    }));
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
+    })), rest);
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, placement: "top", title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : localization.columnActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.columnActions, onClick: handleClick, size: "small" }, iconButtonProps, { sx: (theme) => (Object.assign({ '&:hover': {
                             opacity: 1,
-                        }, height: '2rem', m: '-4px', opacity: 0.3, transform: `scale(0.85) ${columnFilterDisplayMode !== 'popover' ? 'translateX(-4px)' : ''}`, transition: 'opacity 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(MoreVertIcon, {}) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
+                        }, height: '2rem', m: '-8px -4px', opacity: 0.3, transition: 'all 150ms', width: '2rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: jsx(MoreVertIcon, { style: { transform: 'scale(0.9)' } }) })) }), anchorEl && (jsx(MRT_ColumnActionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
-const MRT_FilterCheckbox = ({ column, table, }) => {
-    var _a, _b, _c;
+const MRT_FilterCheckbox = (_a) => {
+    var _b, _c, _d;
+    var { column, table } = _a, rest = __rest(_a, ["column", "table"]);
     const { getState, options: { localization, muiFilterCheckboxProps }, } = table;
     const { density } = getState();
     const { columnDef } = column;
-    const checkboxProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterCheckboxProps, {
+    const checkboxProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterCheckboxProps, {
         column,
         table,
     })), parseFromValuesOrFunc(columnDef.muiFilterCheckboxProps, {
         column,
         table,
-    }));
-    const filterLabel = (_a = localization.filterByColumn) === null || _a === void 0 ? void 0 : _a.replace('{column}', columnDef.header);
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : filterLabel, children: jsx(FormControlLabel, { control: jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', color: column.getFilterValue() === undefined ? 'default' : 'primary', indeterminate: column.getFilterValue() === undefined, size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onChange: (e, checked) => {
+    })), rest);
+    const filterLabel = (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', columnDef.header);
+    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: (_c = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, children: jsx(FormControlLabel, { control: jsx(Checkbox, Object.assign({ checked: column.getFilterValue() === 'true', color: column.getFilterValue() === undefined ? 'default' : 'primary', indeterminate: column.getFilterValue() === undefined, size: density === 'compact' ? 'small' : 'medium' }, checkboxProps, { onChange: (e, checked) => {
                     var _a;
                     column.setFilterValue(column.getFilterValue() === undefined
                         ? 'true'
@@ -1447,19 +1491,20 @@ const MRT_FilterCheckbox = ({ column, table, }) => {
                     var _a;
                     e.stopPropagation();
                     (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
-                }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))) })), disableTypography: true, label: (_c = checkboxProps.title) !== null && _c !== void 0 ? _c : filterLabel, sx: { color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }, title: undefined }) }));
+                }, sx: (theme) => (Object.assign({ height: '2.5rem', width: '2.5rem' }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))) })), disableTypography: true, label: (_d = checkboxProps.title) !== null && _d !== void 0 ? _d : filterLabel, sx: { color: 'text.secondary', fontWeight: 'normal', mt: '-4px' }, title: undefined }) }));
 };
 
-const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
-    var _a, _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o;
+const MRT_FilterTextField = (_a) => {
+    var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+    var { header, rangeFilterIndex, table } = _a, rest = __rest(_a, ["header", "rangeFilterIndex", "table"]);
     const { options: { columnFilterModeOptions, enableColumnFilterModes, icons: { CloseIcon, FilterListIcon }, localization, manualFiltering, muiFilterAutocompleteProps, muiFilterDatePickerProps, muiFilterTextFieldProps, }, refs: { filterInputRefs }, setColumnFilterFns, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { filterVariant } = columnDef;
-    const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
+    const textFieldProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterTextFieldProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterTextFieldProps, {
         column,
         table,
-    }));
+    })), rest);
     const autocompleteProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterAutocompleteProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterAutocompleteProps, {
         column,
         table,
@@ -1478,17 +1523,17 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
     const currentFilterOption = columnDef._filterFn;
     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()) +
+            localization[`filter${((_c = (_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt) === null || _b === void 0 ? void 0 : _b.call(currentFilterOption, 0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
         : '';
     const filterPlaceholder = !isRangeFilter
-        ? (_c = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _c !== void 0 ? _c : (_d = localization.filterByColumn) === null || _d === void 0 ? void 0 : _d.replace('{column}', String(columnDef.header))
+        ? (_d = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.placeholder) !== null && _d !== void 0 ? _d : (_f = localization.filterByColumn) === null || _f === void 0 ? void 0 : _f.replace('{column}', String(columnDef.header))
         : rangeFilterIndex === 0
             ? localization.min
             : rangeFilterIndex === 1
                 ? localization.max
                 : '';
-    const allowedColumnFilterOptions = (_f = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _f !== void 0 ? _f : columnFilterModeOptions;
+    const allowedColumnFilterOptions = (_g = columnDef === null || columnDef === void 0 ? void 0 : columnDef.columnFilterModeOptions) !== null && _g !== void 0 ? _g : columnFilterModeOptions;
     const showChangeModeButton = enableColumnFilterModes &&
         columnDef.enableColumnFilterModes !== false &&
         !rangeFilterIndex &&
@@ -1576,7 +1621,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         isMounted.current = true;
     }, [column.getFilterValue()]);
     if (columnDef.Filter) {
-        return (jsx(Fragment, { children: (_g = columnDef.Filter) === null || _g === void 0 ? void 0 : _g.call(columnDef, { column, header, rangeFilterIndex, table }) }));
+        return (jsx(Fragment, { children: (_h = columnDef.Filter) === null || _h === void 0 ? void 0 : _h.call(columnDef, { column, header, rangeFilterIndex, table }) }));
     }
     const dropdownOptions = useMemo(() => {
         var _a;
@@ -1592,12 +1637,12 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
         isMultiSelectFilter,
         isSelectFilter,
     ]);
-    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsx(Tooltip, { arrow: true, placement: "right", title: (_h = localization.clearFilter) !== null && _h !== void 0 ? _h : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_j = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _j === void 0 ? void 0 : _j.length), onClick: handleClear, size: "small", sx: {
+    const endAdornment = !isAutocompleteFilter && !isDateFilter && !filterChipLabel ? (jsx(InputAdornment, { position: "end", sx: { mr: isSelectFilter || isMultiSelectFilter ? '20px' : undefined }, children: jsx(Tooltip, { placement: "right", title: (_j = localization.clearFilter) !== null && _j !== void 0 ? _j : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearFilter, disabled: !((_k = filterValue === null || filterValue === void 0 ? void 0 : filterValue.toString()) === null || _k === void 0 ? void 0 : _k.length), onClick: handleClear, size: "small", sx: {
                         height: '2rem',
                         transform: 'scale(0.9)',
                         width: '2rem',
                     }, children: jsx(CloseIcon, {}) }) }) }) })) : null;
-    const startAdornment = showChangeModeButton ? (jsxs(InputAdornment, { position: "start", children: [jsx(Tooltip, { arrow: true, title: localization.changeFilterMode, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsx(Chip, { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
+    const startAdornment = showChangeModeButton ? (jsxs(InputAdornment, { position: "start", children: [jsx(Tooltip, { title: localization.changeFilterMode, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.changeFilterMode, onClick: handleFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(FilterListIcon, {}) }) }) }), filterChipLabel && (jsx(Chip, { label: filterChipLabel, onDelete: handleClearEmptyFilterChip }))] })) : null;
     const commonTextFieldProps = Object.assign(Object.assign({ FormHelperTextProps: {
             sx: {
                 fontSize: '0.75rem',
@@ -1608,7 +1653,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
             ? { endAdornment, startAdornment }
             : { startAdornment }, fullWidth: true, helperText: showChangeModeButton ? (jsx("label", { children: localization.filterMode.replace('{filterType}', 
             // @ts-ignore
-            localization[`filter${((_k = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _k === void 0 ? void 0 : _k.toUpperCase()) +
+            localization[`filter${((_l = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _l === void 0 ? void 0 : _l.toUpperCase()) +
                 (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null, inputProps: {
             autoComplete: 'new-password',
             disabled: !!filterChipLabel,
@@ -1627,16 +1672,18 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
             ? undefined
             : filterPlaceholder, variant: 'standard' }, textFieldProps), { sx: (theme) => (Object.assign({ minWidth: isDateFilter
                 ? '160px'
-                : isRangeFilter
-                    ? '100px'
-                    : !filterChipLabel
-                        ? '120px'
-                        : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
+                : enableColumnFilterModes && rangeFilterIndex === 0
+                    ? '110px'
+                    : isRangeFilter
+                        ? '100px'
+                        : !filterChipLabel
+                            ? '120px'
+                            : 'auto', mx: '-2px', p: 0, width: 'calc(100% + 4px)' }, parseFromValuesOrFunc(textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.sx, theme))) });
     return (jsxs(Fragment, { children: [isDateFilter ? (jsx(DatePicker, Object.assign({ onChange: (newDate) => {
                     handleChange(newDate);
                 }, value: filterValue || null }, datePickerProps, { slotProps: {
-                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_l = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _l === void 0 ? void 0 : _l.field),
-                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_m = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.textField),
+                    field: Object.assign({ clearable: true, onClear: () => handleClear() }, (_m = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _m === void 0 ? void 0 : _m.field),
+                    textField: Object.assign(Object.assign({}, commonTextFieldProps), (_o = datePickerProps === null || datePickerProps === void 0 ? void 0 : datePickerProps.slotProps) === null || _o === void 0 ? void 0 : _o.textField),
                 } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => option, onChange: (_e, newValue) => handleChange(newValue), options: dropdownOptions !== null && dropdownOptions !== void 0 ? dropdownOptions : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange })));
@@ -1656,7 +1703,7 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 }, onChange: handleTextFieldChange, select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { value: filterValue !== null && filterValue !== void 0 ? filterValue : '', children: (isSelectFilter || isMultiSelectFilter) && [
                     jsx(MenuItem, { disabled: true, divider: true, hidden: true, value: "", children: jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder }) }, "p"),
                     ...[
-                        (_o = textFieldProps.children) !== null && _o !== void 0 ? _o : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
+                        (_p = textFieldProps.children) !== null && _p !== void 0 ? _p : dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option, index) => {
                             var _a;
                             if (!option)
                                 return '';
@@ -1682,21 +1729,23 @@ const MRT_FilterTextField = ({ header, rangeFilterIndex, table, }) => {
                 ] }))), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, header: header, setAnchorEl: setAnchorEl, setFilterValue: setFilterValue, table: table })] }));
 };
 
-const MRT_FilterRangeFields = ({ header, table, }) => {
-    return (jsxs(Box, { sx: { display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] }));
+const MRT_FilterRangeFields = (_a) => {
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
+    return (jsxs(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ display: 'grid', gap: '1rem', gridTemplateColumns: '1fr 1fr' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: [jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 0, table: table }), jsx(MRT_FilterTextField, { header: header, rangeFilterIndex: 1, table: table })] })));
 };
 
-const MRT_FilterRangeSlider = ({ header, table, }) => {
-    var _a, _b;
+const MRT_FilterRangeSlider = (_a) => {
+    var _b, _c;
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { options: { enableColumnFilterModes, localization, muiFilterSliderProps }, refs: { filterInputRefs }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const currentFilterOption = columnDef._filterFn;
     const showChangeModeButton = enableColumnFilterModes && columnDef.enableColumnFilterModes !== false;
-    const sliderProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterSliderProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table }));
+    const sliderProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiFilterSliderProps, { column, table })), parseFromValuesOrFunc(columnDef.muiFilterSliderProps, { column, table })), rest);
     let [min, max] = sliderProps.min !== undefined && sliderProps.max !== undefined
         ? [sliderProps.min, sliderProps.max]
-        : (_a = column.getFacetedMinMaxValues()) !== null && _a !== void 0 ? _a : [0, 1];
+        : (_b = column.getFacetedMinMaxValues()) !== null && _b !== void 0 ? _b : [0, 1];
     //fix potential TanStack Table bugs where min or max is an array
     if (Array.isArray(min))
         min = min[0];
@@ -1753,22 +1802,24 @@ const MRT_FilterRangeSlider = ({ header, table, }) => {
                     whiteSpace: 'nowrap',
                 }, children: localization.filterMode.replace('{filterType}', 
                 // @ts-ignore
-                localization[`filter${((_b = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _b === void 0 ? void 0 : _b.toUpperCase()) +
+                localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
                     (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]) })) : null] }));
 };
 
-const MRT_TableHeadCellFilterContainer = ({ header, table, }) => {
-    var _a;
+const MRT_TableHeadCellFilterContainer = (_a) => {
+    var _b;
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { getState, options: { columnFilterDisplayMode }, } = table;
     const { showColumnFilters } = getState();
     const { column } = header;
     const { columnDef } = column;
-    return (jsx(Collapse, { in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true, children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range')) ||
-            ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) }));
+    return (jsx(Collapse, Object.assign({ in: showColumnFilters || columnFilterDisplayMode === 'popover', mountOnEnter: true, unmountOnExit: true }, rest, { children: columnDef.filterVariant === 'checkbox' ? (jsx(MRT_FilterCheckbox, { column: column, table: table })) : columnDef.filterVariant === 'range-slider' ? (jsx(MRT_FilterRangeSlider, { header: header, table: table })) : ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
+            ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn) ? (jsx(MRT_FilterRangeFields, { header: header, table: table })) : (jsx(MRT_FilterTextField, { header: header, table: table })) })));
 };
 
-const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
-    var _a, _b, _c;
+const MRT_TableHeadCellFilterLabel = (_a) => {
+    var _b, _c, _d;
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { options: { columnFilterDisplayMode, icons: { FilterAltIcon }, localization, }, refs: { filterInputRefs }, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
@@ -1776,16 +1827,16 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
     const [anchorEl, setAnchorEl] = useState(null);
     const isFilterActive = (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
         (!!filterValue && !Array.isArray(filterValue));
-    const isRangeFilter = ((_a = columnDef.filterVariant) === null || _a === void 0 ? void 0 : _a.includes('range')) ||
+    const isRangeFilter = ((_b = columnDef.filterVariant) === null || _b === void 0 ? void 0 : _b.includes('range')) ||
         ['between', 'betweenInclusive', 'inNumberRange'].includes(columnDef._filterFn);
     const currentFilterOption = columnDef._filterFn;
     const filterTooltip = columnFilterDisplayMode === 'popover' && !isFilterActive
-        ? (_b = localization.filterByColumn) === null || _b === void 0 ? void 0 : _b.replace('{column}', String(columnDef.header))
+        ? (_c = localization.filterByColumn) === null || _c === void 0 ? void 0 : _c.replace('{column}', String(columnDef.header))
         : localization.filteringByColumn
             .replace('{column}', String(columnDef.header))
             .replace('{filterType}', currentFilterOption
             ? // @ts-ignore
-                localization[`filter${((_c = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _c === void 0 ? void 0 : _c.toUpperCase()) +
+                localization[`filter${((_d = currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.charAt(0)) === null || _d === void 0 ? void 0 : _d.toUpperCase()) +
                     (currentFilterOption === null || currentFilterOption === void 0 ? void 0 : currentFilterOption.slice(1))}`]
             : '')
             .replace('{filterValue}', `"${Array.isArray(filterValue)
@@ -1795,7 +1846,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
     return (jsxs(Fragment, { children: [jsx(Grow, { in: columnFilterDisplayMode === 'popover' ||
                     (!!filterValue && !isRangeFilter) ||
                     (isRangeFilter && // @ts-ignore
-                        (!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { arrow: true, placement: "top", title: filterTooltip, children: jsx(IconButton, { disableRipple: true, onClick: (event) => {
+                        (!!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[0]) || !!(filterValue === null || filterValue === void 0 ? void 0 : filterValue[1]))), unmountOnExit: true, children: jsx(Box, { component: "span", sx: { flex: '0 0' }, children: jsx(Tooltip, { placement: "top", title: filterTooltip, children: jsx(IconButton, Object.assign({ disableRipple: true, onClick: (event) => {
                                 if (columnFilterDisplayMode === 'popover') {
                                     setAnchorEl(event.currentTarget);
                                 }
@@ -1808,15 +1859,7 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
                                     (_b = filterInputRefs.current[`${column.id}-0`]) === null || _b === void 0 ? void 0 : _b.select();
                                 });
                                 event.stopPropagation();
-                            }, size: "small", sx: {
-                                height: '16px',
-                                ml: '4px',
-                                opacity: isFilterActive ? 1 : 0.3,
-                                p: '8px',
-                                transform: 'scale(0.75)',
-                                transition: 'all 150ms ease-in-out',
-                                width: '16px',
-                            }, children: jsx(FilterAltIcon, {}) }) }) }) }), jsx(Popover, { anchorEl: anchorEl, anchorOrigin: {
+                            }, size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '16px', ml: '4px', opacity: isFilterActive ? 1 : 0.3, p: '8px', transform: 'scale(0.75)', transition: 'all 150ms ease-in-out', width: '16px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(FilterAltIcon, {}) })) }) }) }), jsx(Popover, { anchorEl: anchorEl, anchorOrigin: {
                     horizontal: 'center',
                     vertical: 'top',
                 }, onClick: (event) => event.stopPropagation(), onClose: (event) => {
@@ -1829,14 +1872,15 @@ const MRT_TableHeadCellFilterLabel = ({ header, table, }) => {
                 }, children: jsx(Box, { sx: { p: '1rem' }, children: jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }) }) })] }));
 };
 
-const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
+const MRT_TableHeadCellGrabHandle = (_a) => {
+    var { column, table, tableHeadCellRef } = _a, rest = __rest(_a, ["column", "table", "tableHeadCellRef"]);
     const { getState, options: { enableColumnOrdering, muiColumnDragHandleProps }, setColumnOrder, setDraggingColumn, setHoveredColumn, } = table;
     const { columnDef } = column;
     const { columnOrder, draggingColumn, hoveredColumn } = getState();
-    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table })), parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
+    const iconButtonProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table })), parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
         column,
         table,
-    }));
+    })), rest);
     const handleDragStart = (event) => {
         var _a;
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onDragStart) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
@@ -1860,8 +1904,9 @@ const MRT_TableHeadCellGrabHandle = ({ column, table, tableHeadCellRef, }) => {
     return (jsx(MRT_GrabHandleButton, { iconButtonProps: iconButtonProps, onDragEnd: handleDragEnd, onDragStart: handleDragStart, table: table }));
 };
 
-const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
-    var _a;
+const MRT_TableHeadCellResizeHandle = (_a) => {
+    var _b;
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { getState, options: { columnResizeMode }, setColumnSizingInfo, } = table;
     const { density } = getState();
     const { column } = header;
@@ -1870,7 +1915,7 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
             column.resetSize();
         }, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
             transform: column.getIsResizing() && columnResizeMode === 'onEnd'
-                ? `translateX(${(_a = getState().columnSizingInfo.deltaOffset) !== null && _a !== void 0 ? _a : 0}px)`
+                ? `translateX(${(_b = getState().columnSizingInfo.deltaOffset) !== null && _b !== void 0 ? _b : 0}px)`
                 : undefined,
         }, sx: (theme) => ({
             '&:active > hr': {
@@ -1885,59 +1930,57 @@ const MRT_TableHeadCellResizeHandle = ({ header, table, }) => {
                     : '-28px',
             position: 'absolute',
             px: '4px',
-            right: '0',
-        }), children: jsx(Divider, { className: "Mui-TableHeadCell-ResizeHandle-Divider", flexItem: true, orientation: "vertical", sx: {
-                borderRadius: '2px',
-                borderWidth: '2px',
-                height: '24px',
-                touchAction: 'none',
-                transition: column.getIsResizing()
+            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,
-            } }) }));
+                    : 'all 150ms ease-in-out', userSelect: 'none', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) }) }));
 };
 
-const MRT_TableHeadCellSortLabel = ({ header, table, }) => {
+const MRT_TableHeadCellSortLabel = (_a) => {
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const { getState, options: { icons: { ArrowDownwardIcon, SyncAltIcon }, localization, }, } = table;
     const { column } = header;
     const { columnDef } = column;
-    const { sorting } = getState();
+    const { isLoading, showSkeletons, sorting } = getState();
     const isSorted = !!column.getIsSorted();
-    const sortTooltip = column.getIsSorted()
-        ? column.getIsSorted() === 'desc'
-            ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
-            : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-        : column.getNextSortingOrder() === 'desc'
-            ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
-            : localization.sortByColumnAsc.replace('{column}', columnDef.header);
-    return (jsx(Tooltip, { arrow: true, placement: "top", title: sortTooltip, children: jsx(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsx(TableSortLabel, { IconComponent: !isSorted
-                    ? (props) => (jsx(SyncAltIcon, Object.assign({}, props, { style: { transform: 'rotate(-90deg) scaleX(0.8)' } })))
+    const sortTooltip = isLoading || showSkeletons
+        ? ''
+        : column.getIsSorted()
+            ? column.getIsSorted() === 'desc'
+                ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+                : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+            : column.getNextSortingOrder() === 'desc'
+                ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+                : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+    return (jsx(Tooltip, { placement: "top", title: sortTooltip, children: jsx(Badge, { badgeContent: sorting.length > 1 ? column.getSortIndex() + 1 : 0, overlap: "circular", children: jsx(TableSortLabel, Object.assign({ IconComponent: !isSorted
+                    ? (props) => (jsx(SyncAltIcon, Object.assign({}, props, { style: {
+                            transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
+                        } })))
                     : ArrowDownwardIcon, active: true, "aria-label": sortTooltip, direction: isSorted ? column.getIsSorted() : undefined, onClick: (e) => {
                     var _a;
                     e.stopPropagation();
                     (_a = header.column.getToggleSortingHandler()) === null || _a === void 0 ? void 0 : _a(e);
-                }, sx: {
-                    flex: '0 0',
-                    opacity: isSorted ? 1 : 0.3,
-                    transition: 'all 150ms ease-in-out',
-                    width: '3ch',
-                } }) }) }));
+                } }, rest, { sx: (theme) => (Object.assign({ '.MuiTableSortLabel-icon': {
+                        color: `${theme.palette.mode === 'dark'
+                            ? theme.palette.text.primary
+                            : theme.palette.text.secondary} !important`,
+                    }, flex: '0 0', opacity: isSorted ? 1 : 0.3, transition: 'all 150ms ease-in-out', width: '3ch' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))) })) }) }));
 };
 
-const MRT_TableHeadCell = ({ header, table, }) => {
-    var _a, _b, _c, _d, _f;
+const MRT_TableHeadCell = (_a) => {
+    var _b, _c, _d, _f, _g, _h;
+    var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
     const theme = useTheme();
     const { getState, options: { columnFilterDisplayMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
     const { columnDefType } = columnDef;
-    const tableCellProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
+    const tableCellProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadCellProps, { column, table })), parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, {
         column,
         table,
-    }));
+    })), rest);
+    const { draggingBorderColor } = getMRTTheme(table, theme);
     const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
         columnDef.enableColumnActions !== false;
     const showDragHandle = enableColumnDragging !== false &&
@@ -1960,11 +2003,11 @@ const MRT_TableHeadCell = ({ header, table, }) => {
     const draggingBorders = useMemo(() => {
         const borderStyle = columnSizingInfo.isResizingColumn === column.id &&
             !header.subHeaders.length
-            ? `2px solid ${theme.palette.primary.main} !important`
+            ? `2px solid ${draggingBorderColor} !important`
             : (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-                ? `1px dashed ${theme.palette.text.secondary}`
+                ? `1px dashed ${theme.palette.grey[500]}`
                 : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-                    ? `2px dashed ${theme.palette.primary.main}`
+                    ? `2px dashed ${draggingBorderColor}`
                     : undefined;
         if (columnSizingInfo.isResizingColumn === column.id) {
             return { borderRight: borderStyle };
@@ -1986,11 +2029,11 @@ const MRT_TableHeadCell = ({ header, table, }) => {
             setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
         }
     };
-    const headerElement = (_a = parseFromValuesOrFunc(columnDef.Header, {
+    const headerElement = (_b = parseFromValuesOrFunc(columnDef.Header, {
         column,
         header,
         table,
-    })) !== null && _a !== void 0 ? _a : columnDef.header;
+    })) !== null && _b !== void 0 ? _b : columnDef.header;
     return (jsxs(TableCell, Object.assign({ align: columnDefType === 'group' ? 'center' : 'left', colSpan: header.colSpan, onDragEnter: handleDragEnter, ref: (node) => {
             if (node) {
                 tableHeadCellRefs.current[column.id] = node;
@@ -2019,54 +2062,60 @@ const MRT_TableHeadCell = ({ header, table, }) => {
                 ? 3
                 : column.getIsPinned() && columnDefType !== 'group'
                     ? 2
-                    : 1 }, getCommonCellStyles({
+                    : 1 }, getCommonMRTCellStyles({
             column,
             header,
             table,
             tableCellProps,
             theme,
-        })), draggingBorders)), children: [header.isPlaceholder ? null : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
-                    alignItems: 'center',
-                    display: 'flex',
-                    flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                    justifyContent: columnDefType === 'group' || (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
-                        ? 'center'
-                        : column.getCanResize()
-                            ? 'space-between'
-                            : 'flex-start',
-                    position: 'relative',
-                    width: '100%',
-                }, children: [jsxs(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
-                            alignItems: 'center',
-                            cursor: column.getCanSort() && columnDefType !== 'group'
-                                ? 'pointer'
-                                : undefined,
-                            display: 'flex',
-                            flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
-                            overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                            pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
-                                ? `${headerPL}rem`
-                                : undefined,
-                        }, children: [jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
-                                    '&:hover': {
-                                        textOverflow: 'clip',
-                                    },
-                                    minWidth: `${Math.min((_c = (_b = columnDef.header) === null || _b === void 0 ? void 0 : _b.length) !== null && _c !== void 0 ? _c : 0, 4)}ch`,
-                                    overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: ((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0) < 20 ? 'nowrap' : 'normal',
-                                }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table, tableCellProps: tableCellProps }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
-                                    current: tableHeadCellRefs.current[column.id],
-                                } })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
-};
-
-const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+        })), draggingBorders)), children: [header.isPlaceholder
+                ? null
+                : (_c = tableCellProps.children) !== null && _c !== void 0 ? _c : (jsxs(Box, { className: "Mui-TableHeadCell-Content", sx: {
+                        alignItems: 'center',
+                        display: 'flex',
+                        flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
+                        justifyContent: columnDefType === 'group' ||
+                            (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                            ? 'center'
+                            : column.getCanResize()
+                                ? 'space-between'
+                                : 'flex-start',
+                        position: 'relative',
+                        width: '100%',
+                    }, children: [jsxs(Box, { className: "Mui-TableHeadCell-Content-Labels", onClick: column.getToggleSortingHandler(), sx: {
+                                alignItems: 'center',
+                                cursor: column.getCanSort() && columnDefType !== 'group'
+                                    ? 'pointer'
+                                    : undefined,
+                                display: 'flex',
+                                flexDirection: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'right' ? 'row-reverse' : 'row',
+                                overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                                pl: (tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.align) === 'center'
+                                    ? `${headerPL}rem`
+                                    : undefined,
+                            }, children: [jsx(Box, { className: "Mui-TableHeadCell-Content-Wrapper", sx: {
+                                        '&:hover': {
+                                            textOverflow: 'clip',
+                                        },
+                                        minWidth: `${Math.min((_f = (_d = columnDef.header) === null || _d === void 0 ? void 0 : _d.length) !== null && _f !== void 0 ? _f : 0, 4)}ch`,
+                                        overflow: columnDefType === 'data' ? 'hidden' : undefined,
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: ((_h = (_g = columnDef.header) === null || _g === void 0 ? void 0 : _g.length) !== null && _h !== void 0 ? _h : 0) < 20
+                                            ? 'nowrap'
+                                            : 'normal',
+                                    }, title: columnDefType === 'data' ? columnDef.header : undefined, children: headerElement }), column.getCanFilter() && (jsx(MRT_TableHeadCellFilterLabel, { header: header, table: table })), column.getCanSort() && (jsx(MRT_TableHeadCellSortLabel, { header: header, table: table }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                                        current: tableHeadCellRefs.current[column.id],
+                                    } })), showColumnActions && (jsx(MRT_TableHeadCellColumnActionsButton, { header: header, table: table }))] })), column.getCanResize() && (jsx(MRT_TableHeadCellResizeHandle, { header: header, table: table }))] })), columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (jsx(MRT_TableHeadCellFilterContainer, { header: header, table: table }))] })));
+};
+
+const MRT_TableHeadRow = (_a) => {
+    var { headerGroup, table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["headerGroup", "table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
     const { options: { layoutMode, muiTableHeadRowProps }, } = table;
-    const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
+    const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
         headerGroup,
         table,
-    });
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: lighten(theme.palette.background.default, 0.05), boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
+    })), { rest });
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, boxShadow: `4px 0 8px ${alpha$1(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, top: 0 }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme))), children: [virtualPaddingLeft ? (jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader) => {
                 const header = virtualColumns
                     ? headerGroup.headers[headerOrVirtualHeader.index]
                     : headerOrVirtualHeader;
@@ -2074,14 +2123,15 @@ const MRT_TableHeadRow = ({ headerGroup, table, virtualColumns, virtualPaddingLe
             }), virtualPaddingRight ? (jsx("th", { style: { display: 'flex', width: virtualPaddingRight } })) : null] })));
 };
 
-const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
+const MRT_LinearProgressBar = (_a) => {
+    var { isTopToolbar, table } = _a, rest = __rest(_a, ["isTopToolbar", "table"]);
     const { getState, options: { muiLinearProgressProps }, } = table;
-    const { showProgressBars } = getState();
-    const linearProgressProps = parseFromValuesOrFunc(muiLinearProgressProps, {
+    const { isSaving, showProgressBars } = getState();
+    const linearProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiLinearProgressProps, {
         isTopToolbar,
         table,
-    });
-    return (jsx(Collapse, { in: showProgressBars, mountOnEnter: true, sx: {
+    })), rest);
+    return (jsx(Collapse, { in: showProgressBars !== false && (showProgressBars || isSaving), mountOnEnter: true, sx: {
             bottom: isTopToolbar ? 0 : undefined,
             position: 'absolute',
             top: !isTopToolbar ? 0 : undefined,
@@ -2089,46 +2139,20 @@ const MRT_LinearProgressBar = ({ isTopToolbar, table, }) => {
         }, unmountOnExit: true, children: jsx(LinearProgress, Object.assign({ "aria-busy": "true", "aria-label": "Loading", sx: { position: 'relative' } }, linearProgressProps)) }));
 };
 
-/******************************************************************************
-Copyright (c) Microsoft Corporation.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */
-function __rest(s, e) {
-  var t = {};
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-}
-typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
-  var e = new Error(message);
-  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
-};
-
 const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
-const MRT_TablePagination = ({ position = 'bottom', table, }) => {
+const MRT_TablePagination = (_a) => {
+    var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
     const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
     const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
-    const paginationProps = parseFromValuesOrFunc(muiPaginationProps, {
+    const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
         table,
-    });
+    })), rest);
     const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
     const numberOfPages = Math.ceil(totalRowCount / pageSize);
     const showFirstLastPageButtons = numberOfPages > 2;
     const firstRowIndex = pageIndex * pageSize;
     const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
-    const _a = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _a, rest = __rest(_a, ["rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
+    const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
     return (jsxs(Box, { sx: {
             alignItems: 'center',
             display: 'flex',
@@ -2142,7 +2166,7 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
                 ? '3rem'
                 : undefined,
             position: 'relative',
-            px: '4px',
+            px: '8px',
             py: '12px',
             zIndex: 2,
         }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, { disableUnderline: true, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard", children: rowsPerPageOptions.map((value) => (jsx(MenuItem, { sx: { m: 0 }, value: value, children: value }, value))) })] })), paginationDisplayMode === 'pages' ? (jsx(Pagination, Object.assign({ count: numberOfPages, onChange: (_e, newPageIndex) => setPageIndex(newPageIndex - 1), page: pageIndex + 1, renderItem: (item) => (jsx(PaginationItem, Object.assign({ slots: {
@@ -2150,16 +2174,17 @@ const MRT_TablePagination = ({ position = 'bottom', table, }) => {
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", sx: { mb: 0, minWidth: '10ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", sx: { mb: 0, minWidth: '8ch', mx: '4px' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, {}) })), jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: pageIndex <= 0, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, {}) }), jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, {}) }), showLastButton && (jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: lastRowIndex >= totalRowCount, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, {}) }))] })] })) : null] }));
 };
 
-const MRT_GlobalFilterTextField = ({ table, }) => {
-    var _a;
+const MRT_GlobalFilterTextField = (_a) => {
+    var _b;
+    var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { enableGlobalFilterModes, icons: { CloseIcon, SearchIcon }, localization, manualFiltering, muiSearchTextFieldProps, }, refs: { searchInputRef }, setGlobalFilter, } = table;
     const { globalFilter, showGlobalFilter } = getState();
-    const textFieldProps = parseFromValuesOrFunc(muiSearchTextFieldProps, {
+    const textFieldProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiSearchTextFieldProps, {
         table,
-    });
+    })), rest);
     const isMounted = useRef(false);
     const [anchorEl, setAnchorEl] = useState(null);
     const [searchValue, setSearchValue] = useState(globalFilter !== null && globalFilter !== void 0 ? globalFilter : '');
@@ -2189,10 +2214,10 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
         }
         isMounted.current = true;
     }, [globalFilter]);
-    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ InputProps: {
-                    endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { arrow: true, title: (_a = localization.clearSearch) !== null && _a !== void 0 ? _a : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })),
-                    startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { arrow: true, title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })),
-                }, onChange: handleChange, placeholder: localization.search, value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "standard" }, textFieldProps, { inputRef: (inputRef) => {
+    return (jsxs(Collapse, { in: showGlobalFilter, mountOnEnter: true, orientation: "horizontal", unmountOnExit: true, children: [jsx(TextField, Object.assign({ InputProps: Object.assign(Object.assign({ endAdornment: (jsx(InputAdornment, { position: "end", children: jsx(Tooltip, { title: (_b = localization.clearSearch) !== null && _b !== void 0 ? _b : '', children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.clearSearch, disabled: !(searchValue === null || searchValue === void 0 ? void 0 : searchValue.length), onClick: handleClear, size: "small", children: jsx(CloseIcon, {}) }) }) }) })), startAdornment: enableGlobalFilterModes ? (jsx(InputAdornment, { position: "start", children: jsx(Tooltip, { title: localization.changeSearchMode, children: jsx(IconButton, { "aria-label": localization.changeSearchMode, onClick: handleGlobalFilterMenuOpen, size: "small", sx: { height: '1.75rem', width: '1.75rem' }, children: jsx(SearchIcon, {}) }) }) })) : (jsx(SearchIcon, { style: { marginRight: '4px' } })) }, textFieldProps.InputProps), { sx: (theme) => {
+                        var _a;
+                        return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
+                    } }), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onChange: handleChange, placeholder: localization.search, size: "small", value: searchValue !== null && searchValue !== void 0 ? searchValue : '', variant: "outlined" }, textFieldProps, { inputRef: (inputRef) => {
                     searchInputRef.current = inputRef;
                     if (textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.inputRef) {
                         textFieldProps.inputRef = inputRef;
@@ -2200,13 +2225,14 @@ const MRT_GlobalFilterTextField = ({ table, }) => {
                 } })), jsx(MRT_FilterOptionMenu, { anchorEl: anchorEl, onSelect: handleClear, setAnchorEl: setAnchorEl, table: table })] }));
 };
 
-const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
-    var _a;
+const MRT_SelectCheckbox = (_a) => {
+    var _b;
+    var { row, selectAll, table } = _a, rest = __rest(_a, ["row", "selectAll", "table"]);
     const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, } = table;
     const { density, isLoading } = getState();
-    const checkboxProps = !row
+    const checkboxProps = Object.assign(Object.assign({}, (!row
         ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
-        : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table });
+        : parseFromValuesOrFunc(muiSelectCheckboxProps, { row, table }))), rest);
     const allRowsSelected = selectAll
         ? selectAllMode === 'page'
             ? table.getIsAllPageRowsSelected()
@@ -2240,25 +2266,26 @@ const MRT_SelectCheckbox = ({ row, selectAll, table, }) => {
             e.stopPropagation();
             (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.onClick) === null || _a === void 0 ? void 0 : _a.call(checkboxProps, e);
         }, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.5rem', m: density !== 'compact' ? '-0.4rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.5rem', zIndex: 0 }, parseFromValuesOrFunc(checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.sx, theme))), title: undefined });
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: (_a = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _a !== void 0 ? _a : (selectAll
+    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: (_b = checkboxProps === null || checkboxProps === void 0 ? void 0 : checkboxProps.title) !== null && _b !== void 0 ? _b : (selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow), children: enableMultiRowSelection === false ? (jsx(Radio, Object.assign({}, commonProps))) : (jsx(Checkbox, Object.assign({ indeterminate: selectAll
                 ? table.getIsSomeRowsSelected() && !allRowsSelected
                 : row === null || row === void 0 ? void 0 : row.getIsSomeSelected() }, commonProps))) }));
 };
 
-const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
-    var _a, _b, _c;
+const MRT_ToolbarAlertBanner = (_a) => {
+    var _b, _c, _d;
+    var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
     const { getPrePaginationRowModel, getSelectedRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
     const { density, grouping, showAlertBanner } = getState();
-    const alertProps = parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
+    const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
         table,
-    });
+    })), rest);
     const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
         table,
     });
     const selectedAlert = getSelectedRowModel().rows.length > 0
-        ? (_b = (_a = localization.selectedCountOfRowCountRowsSelected) === null || _a === void 0 ? void 0 : _a.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _b === void 0 ? void 0 : _b.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
+        ? (_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', getSelectedRowModel().rows.length.toString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', (rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length).toString())
         : null;
     const groupedAlert = grouping.length > 0 ? (jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxs(Fragment$1, { children: [index > 0 ? localization.thenBy : '', jsx(Chip, Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
     return (jsx(Collapse, { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsx(Alert, Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
@@ -2271,11 +2298,11 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
                         : positionToolbarAlertBanner === 'bottom'
                             ? '-1rem'
                             : undefined, p: 0, position: 'relative', right: 0, top: 0, width: '100%', zIndex: 2 }, parseFromValuesOrFunc(alertProps === null || alertProps === void 0 ? void 0 : alertProps.sx, theme)));
-            }, children: (_c = renderToolbarAlertBannerContent === null || renderToolbarAlertBannerContent === void 0 ? void 0 : renderToolbarAlertBannerContent({
+            }, children: (_d = renderToolbarAlertBannerContent === null || renderToolbarAlertBannerContent === void 0 ? void 0 : renderToolbarAlertBannerContent({
                 groupedAlert,
                 selectedAlert,
                 table,
-            })) !== null && _c !== void 0 ? _c : (jsxs(Fragment, { children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Stack, { sx: {
+            })) !== null && _d !== void 0 ? _d : (jsxs(Fragment, { children: [(alertProps === null || alertProps === void 0 ? void 0 : alertProps.title) && jsx(AlertTitle, { children: alertProps.title }), jsxs(Stack, { sx: {
                             p: positionToolbarAlertBanner !== 'head-overlay'
                                 ? '0.5rem 1rem'
                                 : density === 'spacious'
@@ -2288,8 +2315,9 @@ const MRT_ToolbarAlertBanner = ({ stackAlertBanner, table, }) => {
                                         positionToolbarAlertBanner === 'head-overlay' && (jsx(MRT_SelectCheckbox, { selectAll: true, table: table })), ' ', selectedAlert] }), selectedAlert && groupedAlert && jsx("br", {}), groupedAlert] })] })) })) }));
 };
 
-const MRT_ToolbarDropZone = ({ table, }) => {
-    var _a, _b;
+const MRT_ToolbarDropZone = (_a) => {
+    var _b, _c;
+    var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { enableGrouping, localization }, setHoveredColumn, setShowToolbarDropZone, } = table;
     const { draggingColumn, grouping, hoveredColumn, showToolbarDropZone } = getState();
     const handleDragEnter = (_event) => {
@@ -2304,35 +2332,57 @@ const MRT_ToolbarDropZone = ({ table, }) => {
                 !grouping.includes(draggingColumn.id));
         }
     }, [enableGrouping, draggingColumn, grouping]);
-    return (jsx(Fade, { in: showToolbarDropZone, children: jsx(Box, { className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter, sx: (theme) => ({
-                alignItems: 'center',
-                backdropFilter: 'blur(4px)',
-                backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1),
-                border: `dashed ${theme.palette.info.main} 2px`,
-                boxSizing: 'border-box',
-                display: 'flex',
-                height: '100%',
-                justifyContent: 'center',
-                position: 'absolute',
-                width: '100%',
-                zIndex: 4,
-            }), children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_b = (_a = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _a === void 0 ? void 0 : _a.header) !== null && _b !== void 0 ? _b : '') }) }) }));
+    return (jsx(Fade, { in: showToolbarDropZone, children: jsx(Box, Object.assign({ className: "Mui-ToolbarDropZone", onDragEnter: handleDragEnter }, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', backdropFilter: 'blur(4px)', backgroundColor: alpha(theme.palette.info.main, (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === 'drop-zone' ? 0.2 : 0.1), border: `dashed ${theme.palette.info.main} 2px`, boxSizing: 'border-box', display: 'flex', height: '100%', justifyContent: 'center', position: 'absolute', width: '100%', zIndex: 4 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsx(Typography, { fontStyle: "italic", children: localization.dropToGroupBy.replace('{column}', (_c = (_b = draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.columnDef) === null || _b === void 0 ? void 0 : _b.header) !== null && _c !== void 0 ? _c : '') }) })) }));
+};
+
+const MRT_BottomToolbar = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
+    const { isFullScreen } = getState();
+    const isMobile = useMediaQuery('(max-width:720px)');
+    const toolbarProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiBottomToolbarProps, { table })), rest);
+    const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
+    return (jsxs(Box, Object.assign({}, toolbarProps, { ref: (node) => {
+            if (node) {
+                bottomToolbarRef.current = node;
+                if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
+                    // @ts-ignore
+                    toolbarProps.ref.current = node;
+                }
+            }
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, getCommonToolbarStyles({ table, theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha$1(theme.palette.grey[700], 0.5)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
+                    alignItems: 'center',
+                    boxSizing: 'border-box',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    p: '0.5rem',
+                    width: '100%',
+                }, children: [renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (jsx("span", {})), jsx(Box, { sx: {
+                            display: 'flex',
+                            justifyContent: 'flex-end',
+                            position: stackAlertBanner ? 'relative' : 'absolute',
+                            right: 0,
+                            top: 0,
+                        }, children: enablePagination &&
+                            ['both', 'bottom'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { position: "bottom", table: table })) })] })] })));
 };
 
-const MRT_ColumnPinningButtons = ({ column, table, }) => {
+const MRT_ColumnPinningButtons = (_a) => {
+    var { column, table } = _a, rest = __rest(_a, ["column", "table"]);
     const { options: { icons: { PushPinIcon }, localization, }, } = table;
     const handlePinColumn = (pinDirection) => {
         column.pin(pinDirection);
     };
-    return (jsx(Box, { sx: { minWidth: '70px', textAlign: 'center' }, children: column.getIsPinned() ? (jsx(Tooltip, { arrow: true, title: localization.unpin, children: jsx(IconButton, { onClick: () => handlePinColumn(false), size: "small", children: jsx(PushPinIcon, {}) }) })) : (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.pinToLeft, children: jsx(IconButton, { onClick: () => handlePinColumn('left'), size: "small", children: jsx(PushPinIcon, { style: {
+    return (jsx(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ minWidth: '70px', textAlign: 'center' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: column.getIsPinned() ? (jsx(Tooltip, { title: localization.unpin, children: jsx(IconButton, { onClick: () => handlePinColumn(false), size: "small", children: jsx(PushPinIcon, {}) }) })) : (jsxs(Fragment, { children: [jsx(Tooltip, { title: localization.pinToLeft, children: jsx(IconButton, { onClick: () => handlePinColumn('left'), size: "small", children: jsx(PushPinIcon, { style: {
                                 transform: 'rotate(90deg)',
-                            } }) }) }), jsx(Tooltip, { arrow: true, title: localization.pinToRight, children: jsx(IconButton, { onClick: () => handlePinColumn('right'), size: "small", children: jsx(PushPinIcon, { style: {
+                            } }) }) }), jsx(Tooltip, { title: localization.pinToRight, children: jsx(IconButton, { onClick: () => handlePinColumn('right'), size: "small", children: jsx(PushPinIcon, { style: {
                                 transform: 'rotate(-90deg)',
-                            } }) }) })] })) }));
+                            } }) }) })] })) })));
 };
 
-const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, setHoveredColumn, table, }) => {
-    var _a;
+const MRT_ShowHideColumnsMenuItems = (_a) => {
+    var _b;
+    var { allColumns, column, hoveredColumn, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "setHoveredColumn", "table"]);
     const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, setColumnOrder, } = table;
     const { columnOrder } = getState();
     const { columnDef } = column;
@@ -2369,20 +2419,13 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, setHo
             setHoveredColumn(column);
         }
     };
-    return (jsxs(Fragment, { children: [jsx(MenuItem, { disableRipple: true, onDragEnter: handleDragEnter, ref: menuItemRef, sx: (theme) => ({
-                    alignItems: 'center',
-                    justifyContent: 'flex-start',
-                    my: 0,
-                    opacity: isDragging ? 0.5 : 1,
-                    outline: isDragging
-                        ? `2px dashed ${theme.palette.divider}`
+    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
-                            ? `2px dashed ${theme.palette.primary.main}`
-                            : 'none',
-                    outlineOffset: '-2px',
-                    pl: `${(column.depth + 0.5) * 2}rem`,
-                    py: '6px',
-                }), children: jsxs(Box, { sx: {
+                            ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
+                            : 'none', outlineOffset: '-2px', pl: `${(column.depth + 0.5) * 2}rem`, py: '6px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: jsxs(Box, { sx: {
                         display: 'flex',
                         flexWrap: 'nowrap',
                         gap: '8px',
@@ -2397,10 +2440,11 @@ const MRT_ShowHideColumnsMenuItems = ({ allColumns, column, hoveredColumn, setHo
                                         opacity: columnDefType !== 'display' ? 1 : 0.5,
                                     },
                                 },
-                            }, control: jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility, children: jsx(Switch, {}) }), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) }), (_a = column.columns) === null || _a === void 0 ? void 0 : _a.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
+                            }, control: jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: localization.toggleVisibility, children: jsx(Switch, {}) }), disabled: !column.getCanHide(), label: columnDef.header, onChange: () => handleToggleColumnHidden(column) })) : (jsx(Typography, { sx: { alignSelf: 'center' }, children: columnDef.header }))] }) })), (_b = column.columns) === null || _b === void 0 ? void 0 : _b.map((c, i) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: c, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${i}-${c.id}`)))] }));
 };
 
-const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
+const MRT_ShowHideColumnsMenu = (_a) => {
+    var { anchorEl, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "setAnchorEl", "table"]);
     const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, toggleAllColumnsVisible, } = table;
     const { columnOrder, columnPinning, density } = getState();
     const hideAllColumns = () => {
@@ -2428,14 +2472,14 @@ const MRT_ShowHideColumnsMenu = ({ anchorEl, setAnchorEl, table, }) => {
         getRightLeafColumns(),
     ]);
     const [hoveredColumn, setHoveredColumn] = useState(null);
-    return (jsxs(Menu, { MenuListProps: {
+    return (jsxs(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
-        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl, children: [jsxs(Box, { sx: {
+        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [jsxs(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     pt: 0,
-                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns, children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] }));
+                }, children: [enableHiding && (jsx(Button, { disabled: !getIsSomeColumnsVisible(), onClick: hideAllColumns, children: localization.hideAll })), enableColumnOrdering && (jsx(Button, { onClick: () => table.setColumnOrder(getDefaultColumnOrderIds(table.options)), children: localization.resetOrder })), enableColumnPinning && (jsx(Button, { disabled: !getIsSomeColumnsPinned(), onClick: () => table.resetColumnPinning(true), children: localization.unpinAll })), enableHiding && (jsx(Button, { disabled: getIsAllColumnsVisible(), onClick: () => toggleAllColumnsVisible(true), children: localization.showAll }))] }), jsx(Divider, {}), allColumns.map((column, index) => (jsx(MRT_ShowHideColumnsMenuItems, { allColumns: allColumns, column: column, hoveredColumn: hoveredColumn, setHoveredColumn: setHoveredColumn, table: table }, `${index}-${column.id}`)))] })));
 };
 
 const MRT_ShowHideColumnsButton = (_a) => {
@@ -2446,7 +2490,7 @@ const MRT_ShowHideColumnsButton = (_a) => {
     const handleClick = (event) => {
         setAnchorEl(event.currentTarget);
     };
-    return (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined, children: jsx(ViewColumnIcon, {}) })) }), anchorEl && (jsx(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))] }));
+    return (jsxs(Fragment, { children: [jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideColumns, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideColumns, onClick: handleClick }, rest, { title: undefined, children: jsx(ViewColumnIcon, {}) })) }), anchorEl && (jsx(MRT_ShowHideColumnsMenu, { anchorEl: anchorEl, setAnchorEl: setAnchorEl, table: table }))] }));
 };
 
 const MRT_ToggleDensePaddingButton = (_a) => {
@@ -2462,7 +2506,7 @@ const MRT_ToggleDensePaddingButton = (_a) => {
                 : 'comfortable';
         setDensity(nextDensity);
     };
-    return (jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined, children: density === 'compact' ? (jsx(DensitySmallIcon, {})) : density === 'comfortable' ? (jsx(DensityMediumIcon, {})) : (jsx(DensityLargeIcon, {})) })) }));
+    return (jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleDensity, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleDensity, onClick: handleToggleDensePadding }, rest, { title: undefined, children: density === 'compact' ? (jsx(DensitySmallIcon, {})) : density === 'comfortable' ? (jsx(DensityMediumIcon, {})) : (jsx(DensityLargeIcon, {})) })) }));
 };
 
 const MRT_ToggleFiltersButton = (_a) => {
@@ -2473,7 +2517,7 @@ const MRT_ToggleFiltersButton = (_a) => {
     const handleToggleShowFilters = () => {
         setShowColumnFilters(!showColumnFilters);
     };
-    return (jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined, children: showColumnFilters ? jsx(FilterListOffIcon, {}) : jsx(FilterListIcon, {}) })) }));
+    return (jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideFilters, children: jsx(IconButton, Object.assign({ "aria-label": localization.showHideFilters, onClick: handleToggleShowFilters }, rest, { title: undefined, children: showColumnFilters ? jsx(FilterListOffIcon, {}) : jsx(FilterListIcon, {}) })) }));
 };
 
 const MRT_ToggleFullScreenButton = (_a) => {
@@ -2486,7 +2530,7 @@ const MRT_ToggleFullScreenButton = (_a) => {
         setTooltipOpened(false);
         setIsFullScreen(!isFullScreen);
     };
-    return (jsx(Tooltip, { arrow: true, open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleFullScreen, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
+    return (jsx(Tooltip, { open: tooltipOpened, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.toggleFullScreen, children: jsx(IconButton, Object.assign({ "aria-label": localization.toggleFullScreen, onClick: handleToggleFullScreen, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false) }, rest, { title: undefined, children: isFullScreen ? jsx(FullscreenExitIcon, {}) : jsx(FullscreenIcon, {}) })) }));
 };
 
 const MRT_ToggleGlobalFilterButton = (_a) => {
@@ -2498,37 +2542,22 @@ const MRT_ToggleGlobalFilterButton = (_a) => {
         setShowGlobalFilter(!showGlobalFilter);
         queueMicrotask(() => { var _a; return (_a = searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
     };
-    return (jsx(Tooltip, { arrow: true, title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) }));
+    return (jsx(Tooltip, { title: (_b = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _b !== void 0 ? _b : localization.showHideSearch, children: jsx(IconButton, Object.assign({ "aria-label": (_c = rest === null || rest === void 0 ? void 0 : rest.title) !== null && _c !== void 0 ? _c : localization.showHideSearch, disabled: !!globalFilter, onClick: handleToggleSearch }, rest, { title: undefined, children: showGlobalFilter ? jsx(SearchOffIcon, {}) : jsx(SearchIcon, {}) })) }));
 };
 
-const MRT_ToolbarInternalButtons = ({ table, }) => {
-    var _a;
+const MRT_ToolbarInternalButtons = (_a) => {
+    var _b;
+    var { table } = _a, rest = __rest(_a, ["table"]);
     const { options: { columnFilterDisplayMode, enableColumnFilters, enableColumnOrdering, enableColumnPinning, enableDensityToggle, enableFilters, enableFullScreenToggle, enableGlobalFilter, enableHiding, initialState, renderToolbarInternalActions, }, } = table;
-    return (jsx(Box, { sx: {
-            alignItems: 'center',
-            display: 'flex',
-            zIndex: 3,
-        }, children: (_a = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
+    return (jsx(Box, Object.assign({}, rest, { sx: (theme) => (Object.assign({ alignItems: 'center', display: 'flex', zIndex: 3 }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: (_b = renderToolbarInternalActions === null || renderToolbarInternalActions === void 0 ? void 0 : renderToolbarInternalActions({
             table,
-        })) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [enableFilters &&
+        })) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [enableFilters &&
                     enableGlobalFilter &&
                     !(initialState === null || initialState === void 0 ? void 0 : initialState.showGlobalFilter) && (jsx(MRT_ToggleGlobalFilterButton, { table: table })), enableFilters &&
                     enableColumnFilters &&
-                    columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) }));
+                    columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) })));
 };
 
-const commonToolbarStyles = ({ theme }) => ({
-    alignItems: 'flex-start',
-    backgroundColor: lighten(theme.palette.background.default, 0.05),
-    backgroundImage: 'none',
-    display: 'grid',
-    flexWrap: 'wrap-reverse',
-    minHeight: '3.5rem',
-    overflow: 'hidden',
-    p: '0 !important',
-    transition: 'all 150ms ease-in-out',
-    zIndex: 1,
-});
 const MRT_TopToolbar = ({ table, }) => {
     var _a;
     const { getState, options: { enableGlobalFilter, enablePagination, enableToolbarInternalActions, muiTopToolbarProps, positionGlobalFilter, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderTopToolbarCustomActions, }, refs: { topToolbarRef }, } = table;
@@ -2536,16 +2565,17 @@ const MRT_TopToolbar = ({ table, }) => {
     const isMobile = useMediaQuery('(max-width:720px)');
     const toolbarProps = parseFromValuesOrFunc(muiTopToolbarProps, { table });
     const stackAlertBanner = isMobile || !!renderTopToolbarCustomActions || showGlobalFilter;
-    return (jsxs(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (ref) => {
+    return (jsxs(Box, Object.assign({}, toolbarProps, { ref: (ref) => {
             topToolbarRef.current = ref;
             if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
                 // @ts-ignore
                 toolbarProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign(Object.assign({ position: isFullScreen ? 'sticky' : undefined, top: isFullScreen ? '0' : undefined }, commonToolbarStyles({ theme })), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [positionToolbarAlertBanner === 'top' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
+        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, getCommonToolbarStyles({ table, theme })), { position: isFullScreen ? 'sticky' : 'relative', top: isFullScreen ? '0' : undefined }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [positionToolbarAlertBanner === 'top' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'top'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
                     alignItems: 'flex-start',
                     boxSizing: 'border-box',
                     display: 'flex',
+                    gap: '0.5rem',
                     justifyContent: 'space-between',
                     p: '0.5rem',
                     position: stackAlertBanner ? 'relative' : 'absolute',
@@ -2553,49 +2583,21 @@ const MRT_TopToolbar = ({ table, }) => {
                     top: 0,
                     width: '100%',
                 }, children: [enableGlobalFilter && positionGlobalFilter === 'left' && (jsx(MRT_GlobalFilterTextField, { table: table })), (_a = renderTopToolbarCustomActions === null || renderTopToolbarCustomActions === void 0 ? void 0 : renderTopToolbarCustomActions({ table })) !== null && _a !== void 0 ? _a : jsx("span", {}), enableToolbarInternalActions ? (jsxs(Box, { sx: {
+                            alignItems: 'center',
                             display: 'flex',
                             flexWrap: 'wrap-reverse',
+                            gap: '0.5rem',
                             justifyContent: 'flex-end',
                         }, children: [enableGlobalFilter && positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })), jsx(MRT_ToolbarInternalButtons, { table: table })] })) : (enableGlobalFilter &&
                         positionGlobalFilter === 'right' && (jsx(MRT_GlobalFilterTextField, { table: table })))] }), enablePagination &&
                 ['both', 'top'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { position: "top", table: table })), jsx(MRT_LinearProgressBar, { isTopToolbar: true, table: table })] })));
 };
 
-const MRT_BottomToolbar = ({ table, }) => {
-    const { getState, options: { enablePagination, muiBottomToolbarProps, positionPagination, positionToolbarAlertBanner, positionToolbarDropZone, renderBottomToolbarCustomActions, }, refs: { bottomToolbarRef }, } = table;
-    const { isFullScreen } = getState();
-    const isMobile = useMediaQuery('(max-width:720px)');
-    const toolbarProps = parseFromValuesOrFunc(muiBottomToolbarProps, { table });
-    const stackAlertBanner = isMobile || !!renderBottomToolbarCustomActions;
-    return (jsxs(Toolbar, Object.assign({ variant: "dense" }, toolbarProps, { ref: (node) => {
-            if (node) {
-                bottomToolbarRef.current = node;
-                if (toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.ref) {
-                    // @ts-ignore
-                    toolbarProps.ref.current = node;
-                }
-            }
-        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ theme })), { bottom: isFullScreen ? '0' : undefined, boxShadow: `0 1px 2px -1px ${alpha(theme.palette.common.black, 0.1)} inset`, left: 0, position: isFullScreen ? 'fixed' : 'relative', right: 0 }), parseFromValuesOrFunc(toolbarProps === null || toolbarProps === void 0 ? void 0 : toolbarProps.sx, theme))), children: [jsx(MRT_LinearProgressBar, { isTopToolbar: false, table: table }), positionToolbarAlertBanner === 'bottom' && (jsx(MRT_ToolbarAlertBanner, { stackAlertBanner: stackAlertBanner, table: table })), ['both', 'bottom'].includes(positionToolbarDropZone !== null && positionToolbarDropZone !== void 0 ? positionToolbarDropZone : '') && (jsx(MRT_ToolbarDropZone, { table: table })), jsxs(Box, { sx: {
-                    alignItems: 'center',
-                    boxSizing: 'border-box',
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    p: '0.5rem',
-                    width: '100%',
-                }, children: [renderBottomToolbarCustomActions ? (renderBottomToolbarCustomActions({ table })) : (jsx("span", {})), jsx(Box, { sx: {
-                            display: 'flex',
-                            justifyContent: 'flex-end',
-                            position: stackAlertBanner ? 'relative' : 'absolute',
-                            right: 0,
-                            top: 0,
-                        }, children: enablePagination &&
-                            ['both', 'bottom'].includes(positionPagination !== null && positionPagination !== void 0 ? positionPagination : '') && (jsx(MRT_TablePagination, { position: "bottom", table: table })) })] })] })));
-};
-
-const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddingRight, }) => {
+const MRT_TableHead = (_a) => {
+    var { table, virtualColumns, virtualPaddingLeft, virtualPaddingRight } = _a, rest = __rest(_a, ["table", "virtualColumns", "virtualPaddingLeft", "virtualPaddingRight"]);
     const { getHeaderGroups, getSelectedRowModel, getState, options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner, }, refs: { tableHeadRef }, } = table;
     const { isFullScreen, showAlertBanner } = getState();
-    const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
+    const tableHeadProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadProps, { table })), rest);
     const stickyHeader = enableStickyHeader || isFullScreen;
     return (jsx(TableHead, Object.assign({}, tableHeadProps, { ref: (ref) => {
             tableHeadRef.current = ref;
@@ -2607,16 +2609,17 @@ const MRT_TableHead = ({ table, virtualColumns, virtualPaddingLeft, virtualPaddi
             (showAlertBanner || getSelectedRowModel().rows.length > 0) ? (jsx("tr", { style: {
                 display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
             }, children: jsx("th", { colSpan: table.getVisibleLeafColumns().length, style: {
-                    display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : 'table-cell',
+                    display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined,
                     padding: 0,
                 }, children: jsx(MRT_ToolbarAlertBanner, { table: table }) }) })) : (getHeaderGroups().map((headerGroup) => (jsx(MRT_TableHeadRow, { headerGroup: headerGroup, table: table, virtualColumns: virtualColumns, virtualPaddingLeft: virtualPaddingLeft, virtualPaddingRight: virtualPaddingRight }, headerGroup.id)))) })));
 };
 
-const MRT_Table = ({ table, }) => {
-    var _a, _b, _c, _d;
-    const { getFlatHeaders, getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, columns, enableColumnPinning, enableColumnResizing, enableColumnVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
+const MRT_Table = (_a) => {
+    var _b, _c, _d, _e;
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getFlatHeaders, getState, options: { columnVirtualizerInstanceRef, columnVirtualizerOptions, columns, enableColumnPinning, enableColumnVirtualization, enableStickyHeader, enableTableFooter, enableTableHead, layoutMode, memoMode, muiTableProps, }, refs: { tableContainerRef }, } = table;
     const { columnPinning, columnSizing, columnSizingInfo, columnVisibility, draggingColumn, isFullScreen, } = getState();
-    const tableProps = parseFromValuesOrFunc(muiTableProps, { table });
+    const tableProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableProps, { table })), rest);
     const columnVirtualizerProps = parseFromValuesOrFunc(columnVirtualizerOptions, { table });
     const columnSizeVars = useMemo(() => {
         const headers = getFlatHeaders();
@@ -2671,10 +2674,10 @@ const MRT_Table = ({ table, }) => {
     let virtualPaddingLeft;
     let virtualPaddingRight;
     if (columnVirtualizer && (virtualColumns === null || virtualColumns === void 0 ? void 0 : virtualColumns.length)) {
-        virtualPaddingLeft = (_b = (_a = virtualColumns[leftPinnedIndexes.length]) === null || _a === void 0 ? void 0 : _a.start) !== null && _b !== void 0 ? _b : 0;
+        virtualPaddingLeft = (_c = (_b = virtualColumns[leftPinnedIndexes.length]) === null || _b === void 0 ? void 0 : _b.start) !== null && _c !== void 0 ? _c : 0;
         virtualPaddingRight =
             columnVirtualizer.getTotalSize() -
-                ((_d = (_c = virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]) === null || _c === void 0 ? void 0 : _c.end) !== null && _d !== void 0 ? _d : 0);
+                ((_e = (_d = virtualColumns[virtualColumns.length - 1 - rightPinnedIndexes.length]) === null || _d === void 0 ? void 0 : _d.end) !== null && _e !== void 0 ? _e : 0);
     }
     const props = {
         table,
@@ -2682,12 +2685,31 @@ const MRT_Table = ({ table, }) => {
         virtualPaddingLeft,
         virtualPaddingRight,
     };
-    return (jsx(Fragment, { children: jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, tableLayout: layoutMode === 'semantic' && enableColumnResizing
-                    ? 'fixed'
-                    : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })) }));
+    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [enableTableHead && jsx(MRT_TableHead, Object.assign({}, props)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))) : (jsx(MRT_TableBody, Object.assign({ columnVirtualizer: columnVirtualizer }, props))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, props))] })));
+};
+
+const MRT_TableLoadingOverlay = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { options: { localization, muiCircularProgressProps }, } = table;
+    const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
+    return (jsx(Box, { sx: (theme) => ({
+            alignItems: 'center',
+            backgroundColor: alpha(getMRTTheme(table, theme).baseBackgroundColor, 0.5),
+            bottom: 0,
+            display: 'flex',
+            justifyContent: 'center',
+            left: 0,
+            maxHeight: '100vh',
+            position: 'absolute',
+            right: 0,
+            top: 0,
+            width: '100%',
+            zIndex: 2,
+        }), children: jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) }));
 };
 
-const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
+const MRT_EditActionButtons = (_a) => {
+    var { row, table, variant = 'icon' } = _a, rest = __rest(_a, ["row", "table", "variant"]);
     const { getState, options: { icons: { CancelIcon, SaveIcon }, localization, onCreatingRowCancel, onCreatingRowSave, onEditingRowCancel, onEditingRowSave, }, refs: { editInputRefs }, setCreatingRow, setEditingRow, } = table;
     const { creatingRow, editingRow, isSaving } = getState();
     const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
@@ -2730,16 +2752,17 @@ const MRT_EditActionButtons = ({ row, table, variant = 'icon', }) => {
             });
         }
     };
-    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: { display: 'flex', gap: '0.75rem' }, children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { arrow: true, title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
+    return (jsx(Box, { onClick: (e) => e.stopPropagation(), sx: (theme) => (Object.assign({ display: 'flex', gap: '0.75rem' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: variant === 'icon' ? (jsxs(Fragment, { children: [jsx(Tooltip, { title: localization.cancel, children: jsx(IconButton, { "aria-label": localization.cancel, onClick: handleCancel, children: jsx(CancelIcon, {}) }) }), jsx(Tooltip, { title: localization.save, children: jsx(IconButton, { "aria-label": localization.save, color: "info", onClick: handleSubmitRow, children: isSaving ? jsx(CircularProgress, { size: 18 }) : jsx(SaveIcon, {}) }) })] })) : (jsxs(Fragment, { children: [jsx(Button, { onClick: handleCancel, sx: { minWidth: '100px' }, children: localization.cancel }), jsxs(Button, { onClick: handleSubmitRow, sx: { minWidth: '100px' }, variant: "contained", children: [isSaving && jsx(CircularProgress, { color: "inherit", size: 18 }), localization.save] })] })) }));
 };
 
-const MRT_EditRowModal = ({ open, table, }) => {
-    var _a;
-    const { getState, options: { localization, muiCreateRowModalProps, muiEditRowModalProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowModalContent, renderEditRowModalContent, }, setCreatingRow, setEditingRow, } = table;
+const MRT_EditRowModal = (_a) => {
+    var _b;
+    var { open, table } = _a, rest = __rest(_a, ["open", "table"]);
+    const { getState, options: { localization, muiCreateRowModalProps, muiEditRowDialogProps, onCreatingRowCancel, onEditingRowCancel, renderCreateRowDialogContent, renderEditRowDialogContent, }, setCreatingRow, setEditingRow, } = table;
     const { creatingRow, editingRow } = getState();
     const row = (creatingRow !== null && creatingRow !== void 0 ? creatingRow : editingRow);
-    const dialogProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowModalProps, { row, table })), (creatingRow &&
-        parseFromValuesOrFunc(muiCreateRowModalProps, { row, table })));
+    const dialogProps = Object.assign(Object.assign(Object.assign({}, parseFromValuesOrFunc(muiEditRowDialogProps, { row, table })), (creatingRow &&
+        parseFromValuesOrFunc(muiCreateRowModalProps, { row, table }))), rest);
     const internalEditComponents = row
         .getAllCells()
         .filter((cell) => cell.column.columnDef.columnDefType === 'data')
@@ -2756,33 +2779,33 @@ const MRT_EditRowModal = ({ open, table, }) => {
             }
             row._valuesCache = {}; //reset values cache
             (_a = dialogProps.onClose) === null || _a === void 0 ? void 0 : _a.call(dialogProps, event, reason);
-        }, open: open }, dialogProps, { children: (_a = ((creatingRow &&
-            (renderCreateRowModalContent === null || renderCreateRowModalContent === void 0 ? void 0 : renderCreateRowModalContent({
+        }, open: open }, dialogProps, { children: (_b = ((creatingRow &&
+            (renderCreateRowDialogContent === null || renderCreateRowDialogContent === void 0 ? void 0 : renderCreateRowDialogContent({
                 internalEditComponents,
                 row,
                 table,
             }))) ||
-            (renderEditRowModalContent === null || renderEditRowModalContent === void 0 ? void 0 : renderEditRowModalContent({
+            (renderEditRowDialogContent === null || renderEditRowDialogContent === void 0 ? void 0 : renderEditRowDialogContent({
                 internalEditComponents,
                 row,
                 table,
-            })))) !== null && _a !== void 0 ? _a : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
-                                gap: '24px',
+            })))) !== null && _b !== void 0 ? _b : (jsxs(Fragment, { children: [jsx(DialogTitle, { sx: { textAlign: 'center' }, children: localization.edit }), jsx(DialogContent, { children: jsx("form", { onSubmit: (e) => e.preventDefault(), children: jsx(Stack, { sx: {
+                                gap: '32px',
                                 paddingTop: '16px',
                                 width: '100%',
                             }, children: internalEditComponents }) }) }), jsx(DialogActions, { sx: { p: '1.25rem' }, children: jsx(MRT_EditActionButtons, { row: row, table: table, variant: "text" }) })] })) })));
 };
 
 const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect;
-const MRT_TableContainer = ({ table, }) => {
-    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, localization, muiCircularProgressProps, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
+const MRT_TableContainer = (_a) => {
+    var { table } = _a, rest = __rest(_a, ["table"]);
+    const { getState, options: { createDisplayMode, editDisplayMode, enableStickyHeader, muiTableContainerProps, }, refs: { bottomToolbarRef, tableContainerRef, topToolbarRef }, } = table;
     const { creatingRow, editingRow, isFullScreen, isLoading, showLoadingOverlay, } = getState();
-    const loading = (isLoading || showLoadingOverlay) && showLoadingOverlay !== false;
+    const loading = showLoadingOverlay !== false && (isLoading || showLoadingOverlay);
     const [totalToolbarHeight, setTotalToolbarHeight] = useState(0);
-    const tableContainerProps = parseFromValuesOrFunc(muiTableContainerProps, {
+    const tableContainerProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableContainerProps, {
         table,
-    });
-    const circularProgressProps = parseFromValuesOrFunc(muiCircularProgressProps, { table });
+    })), rest);
     useIsomorphicLayoutEffect(() => {
         var _a, _b, _c, _d;
         const topToolbarHeight = typeof document !== 'undefined'
@@ -2795,7 +2818,7 @@ const MRT_TableContainer = ({ table, }) => {
     });
     const createModalOpen = createDisplayMode === 'modal' && creatingRow;
     const editModalOpen = editDisplayMode === 'modal' && editingRow;
-    return (jsxs(TableContainer, Object.assign({ "aria-busy": loading, "aria-describedby": "mrt-progress" }, tableContainerProps, { ref: (node) => {
+    return (jsxs(TableContainer, Object.assign({ "aria-busy": loading, "aria-describedby": loading ? 'mrt-progress' : undefined }, tableContainerProps, { ref: (node) => {
             if (node) {
                 tableContainerRef.current = node;
                 if (tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.ref) {
@@ -2807,27 +2830,15 @@ const MRT_TableContainer = ({ table, }) => {
                 ? `calc(100vh - ${totalToolbarHeight}px)`
                 : undefined }, tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.style), sx: (theme) => (Object.assign({ maxHeight: enableStickyHeader
                 ? `clamp(350px, calc(100vh - ${totalToolbarHeight}px), 9999px)`
-                : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? (jsx(Box, { sx: (theme) => ({
-                    alignItems: 'center',
-                    backgroundColor: alpha(lighten(theme.palette.background.paper, 0.05), 0.5),
-                    bottom: 0,
-                    display: 'flex',
-                    justifyContent: 'center',
-                    left: 0,
-                    maxHeight: '100vh',
-                    position: 'absolute',
-                    right: 0,
-                    top: 0,
-                    width: '100%',
-                    zIndex: 2,
-                }), children: jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps)) })) : null, jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
+                : undefined, maxWidth: '100%', overflow: 'auto', position: 'relative' }, parseFromValuesOrFunc(tableContainerProps === null || tableContainerProps === void 0 ? void 0 : tableContainerProps.sx, theme))), children: [loading ? jsx(MRT_TableLoadingOverlay, { table: table }) : null, jsx(MRT_Table, { table: table }), (createModalOpen || editModalOpen) && (jsx(MRT_EditRowModal, { open: true, table: table }))] })));
 };
 
-const MRT_TablePaper = ({ table, }) => {
-    var _a, _b;
+const MRT_TablePaper = (_a) => {
+    var _b, _c;
+    var { table } = _a, rest = __rest(_a, ["table"]);
     const { getState, options: { enableBottomToolbar, enableTopToolbar, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
-    const tablePaperProps = parseFromValuesOrFunc(muiTablePaperProps, { table });
+    const tablePaperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
     return (jsxs(Paper, Object.assign({ elevation: 2 }, tablePaperProps, { ref: (ref) => {
             tablePaperRef.current = ref;
             if (tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.ref) {
@@ -2847,14 +2858,15 @@ const MRT_TablePaper = ({ table, }) => {
                 right: 0,
                 top: 0,
                 width: '100vw',
-                zIndex: 9999,
+                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 &&
-                ((_a = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _a !== void 0 ? _a : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
-                ((_b = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_BottomToolbar, { table: table })))] })));
+            : {})), tablePaperProps === null || tablePaperProps === void 0 ? void 0 : tablePaperProps.style), sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, backgroundImage: 'unset', 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 })))] })));
 };
 
-const MRT_RowPinButton = ({ pinningPosition, row, table, }) => {
+const MRT_RowPinButton = (_a) => {
+    var { pinningPosition, row, table } = _a, rest = __rest(_a, ["pinningPosition", "row", "table"]);
     const { options: { icons: { CloseIcon, PushPinIcon }, localization, rowPinningDisplayMode, }, } = table;
     const isPinned = row.getIsPinned();
     const [tooltipOpened, setTooltipOpened] = useState(false);
@@ -2863,44 +2875,43 @@ const MRT_RowPinButton = ({ pinningPosition, row, table, }) => {
         event.stopPropagation();
         row.pin(isPinned ? false : pinningPosition);
     };
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, { "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small", sx: {
-                height: '24px',
-                width: '24px',
-            }, children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
+    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, open: tooltipOpened, title: isPinned ? localization.unpin : localization.pin, children: jsx(IconButton, Object.assign({ "aria-label": localization.pin, onClick: handleTogglePin, onMouseEnter: () => setTooltipOpened(true), onMouseLeave: () => setTooltipOpened(false), size: "small" }, rest, { sx: (theme) => (Object.assign({ height: '24px', width: '24px' }, parseFromValuesOrFunc(rest === null || rest === void 0 ? void 0 : rest.sx, theme))), children: isPinned ? (jsx(CloseIcon, {})) : (jsx(PushPinIcon, { fontSize: "small", style: {
                     transform: `rotate(${rowPinningDisplayMode === 'sticky'
                         ? 135
                         : pinningPosition === 'top'
                             ? 180
                             : 0}deg)`,
-                } })) }) }));
+                } })) })) }));
 };
 
-const MRT_TableBodyRowPinButton = ({ row, table, }) => {
+const MRT_TableBodyRowPinButton = (_a) => {
+    var { row, table } = _a, rest = __rest(_a, ["row", "table"]);
     const { getState, options: { enableRowPinning, rowPinningDisplayMode }, } = table;
     const { density } = getState();
     const canPin = parseFromValuesOrFunc(enableRowPinning, row);
     if (!canPin)
         return null;
+    const rowPinButtonProps = Object.assign({ row,
+        table }, rest);
     if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
         return (jsxs(Box, { sx: {
                 display: 'flex',
                 flexDirection: density === 'compact' ? 'row' : 'column',
-            }, children: [jsx(MRT_RowPinButton, { pinningPosition: "top", row: row, table: table }), jsx(MRT_RowPinButton, { pinningPosition: "bottom", row: row, table: table })] }));
+            }, children: [jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "top" }, rowPinButtonProps)), jsx(MRT_RowPinButton, Object.assign({ pinningPosition: "bottom" }, rowPinButtonProps))] }));
     }
-    return (jsx(MRT_RowPinButton, { pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top', row: row, table: table }));
+    return (jsx(MRT_RowPinButton, Object.assign({ pinningPosition: rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top' }, rowPinButtonProps)));
 };
 
-const MRT_ExpandAllButton = ({ table, }) => {
-    var _a, _b;
+const MRT_ExpandAllButton = (_a) => {
+    var _b, _c;
+    var { table } = _a, rest = __rest(_a, ["table"]);
     const { getCanSomeRowsExpand, getIsAllRowsExpanded, getIsSomeRowsExpanded, getState, options: { icons: { KeyboardDoubleArrowDownIcon }, localization, muiExpandAllButtonProps, renderDetailPanel, }, toggleAllRowsExpanded, } = table;
     const { density, isLoading } = getState();
-    const iconButtonProps = parseFromValuesOrFunc(muiExpandAllButtonProps, {
+    const iconButtonProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiExpandAllButtonProps, {
         table,
-    });
+    })), rest);
     const isAllRowsExpanded = getIsAllRowsExpanded();
-    return (jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isAllRowsExpanded)
-            ? localization.collapseAll
-            : localization.expandAll, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(KeyboardDoubleArrowDownIcon, { style: {
+    return (jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _b !== void 0 ? _b : (isAllRowsExpanded ? localization.collapseAll : localization.expandAll), children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expandAll, disabled: isLoading || (!renderDetailPanel && !getCanSomeRowsExpand()), onClick: () => toggleAllRowsExpanded(!isAllRowsExpanded) }, iconButtonProps, { sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', mt: density !== 'compact' ? '-0.25rem' : undefined, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_c = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _c !== void 0 ? _c : (jsx(KeyboardDoubleArrowDownIcon, { style: {
                         transform: `rotate(${isAllRowsExpanded ? -180 : getIsSomeRowsExpanded() ? -90 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
@@ -2922,24 +2933,23 @@ const MRT_ExpandButton = ({ row, table, }) => {
         row.toggleExpanded();
         (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.onClick) === null || _a === void 0 ? void 0 : _a.call(iconButtonProps, event);
     };
-    return (jsx(Tooltip, { arrow: true, disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: ((_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : isExpanded)
-            ? localization.collapse
-            : localization.expand, children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !renderDetailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
+    return (jsx(Tooltip, { disableHoverListener: !canExpand && !renderDetailPanel, enterDelay: 1000, enterNextDelay: 1000, title: (_a = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.title) !== null && _a !== void 0 ? _a : (isExpanded ? localization.collapse : localization.expand), children: jsx("span", { children: jsx(IconButton, Object.assign({ "aria-label": localization.expand, disabled: !canExpand && !renderDetailPanel }, iconButtonProps, { onClick: handleToggleExpand, sx: (theme) => (Object.assign({ height: density === 'compact' ? '1.75rem' : '2.25rem', opacity: !canExpand && !renderDetailPanel ? 0.3 : 1, width: density === 'compact' ? '1.75rem' : '2.25rem' }, parseFromValuesOrFunc(iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.sx, theme))), title: undefined, children: (_b = iconButtonProps === null || iconButtonProps === void 0 ? void 0 : iconButtonProps.children) !== null && _b !== void 0 ? _b : (jsx(ExpandMoreIcon, { style: {
                         transform: `rotate(${!canExpand && !renderDetailPanel ? -90 : isExpanded ? -180 : 0}deg)`,
                         transition: 'transform 150ms',
                     } })) })) }) }));
 };
 
-const MRT_RowActionMenu = ({ anchorEl, handleEdit, row, setAnchorEl, table, }) => {
+const MRT_RowActionMenu = (_a) => {
+    var { anchorEl, handleEdit, row, setAnchorEl, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "table"]);
     const { getState, options: { enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
     const { density } = getState();
-    return (jsxs(Menu, { MenuListProps: {
+    return (jsxs(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
-        }, anchorEl: anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl, children: [parseFromValuesOrFunc(enableEditing, row) && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
+        }, anchorEl: anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
                 closeMenu: () => setAnchorEl(null),
                 row,
                 table,
-            })] }));
+            })] })));
 };
 
 const commonIconButtonStyles = {
@@ -2952,7 +2962,8 @@ const commonIconButtonStyles = {
     transition: 'opacity 150ms',
     width: '2rem',
 };
-const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
+const MRT_ToggleRowActionMenuButton = (_a) => {
+    var { cell, row, table } = _a, rest = __rest(_a, ["cell", "row", "table"]);
     const { getState, options: { createDisplayMode, editDisplayMode, enableEditing, icons: { EditIcon, MoreHorizIcon }, localization, renderRowActionMenuItems, renderRowActions, }, setEditingRow, } = table;
     const { creatingRow, editingRow } = getState();
     const isCreating = (creatingRow === null || creatingRow === void 0 ? void 0 : creatingRow.id) === row.id;
@@ -2971,317 +2982,11 @@ const MRT_ToggleRowActionMenuButton = ({ cell, row, table, }) => {
         setAnchorEl(null);
     };
     return (jsx(Fragment, { children: renderRowActions && !showEditActionButtons ? (renderRowActions({ cell, row, table })) : showEditActionButtons ? (jsx(MRT_EditActionButtons, { row: row, table: table })) : !renderRowActionMenuItems &&
-            parseFromValuesOrFunc(enableEditing, row) ? (jsx(Tooltip, { arrow: true, placement: "right", title: localization.edit, children: jsx(IconButton, { "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles, children: jsx(EditIcon, {}) }) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, { "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles, children: jsx(MoreHorizIcon, {}) }) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
+            parseFromValuesOrFunc(enableEditing, row) &&
+            ['modal', 'row'].includes(editDisplayMode) ? (jsx(Tooltip, { placement: "right", title: localization.edit, children: jsx(IconButton, Object.assign({ "aria-label": localization.edit, onClick: handleStartEditMode, sx: commonIconButtonStyles }, rest, { children: jsx(EditIcon, {}) })) })) : renderRowActionMenuItems ? (jsxs(Fragment, { children: [jsx(Tooltip, { enterDelay: 1000, enterNextDelay: 1000, title: localization.rowActions, children: jsx(IconButton, Object.assign({ "aria-label": localization.rowActions, onClick: handleOpenRowActionMenu, size: "small", sx: commonIconButtonStyles }, rest, { children: jsx(MoreHorizIcon, {}) })) }), jsx(MRT_RowActionMenu, { anchorEl: anchorEl, handleEdit: handleStartEditMode, row: row, setAnchorEl: setAnchorEl, table: table })] })) : null }));
 };
 
-const blankColProps = {
-    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: '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 MRT_AggregationFns = Object.assign({}, aggregationFns);
+const MRT_AggregationFns = Object.assign({}, aggregationFns);
 
 const fuzzy = (row, columnId, filterValue, addMeta) => {
     const itemRank = rankItem(row.getValue(columnId), filterValue, {
@@ -3495,6 +3200,26 @@ const MRT_Localization_EN = {
     unpinAll: 'Unpin all',
 };
 
+const MRT_DefaultColumn = {
+    filterVariant: 'text',
+    maxSize: 1000,
+    minSize: 40,
+    size: 180,
+};
+const MRT_DefaultDisplayColumn = {
+    columnDefType: 'display',
+    enableClickToCopy: false,
+    enableColumnActions: false,
+    enableColumnDragging: false,
+    enableColumnFilter: false,
+    enableColumnOrdering: false,
+    enableEditing: false,
+    enableGlobalFilter: false,
+    enableGrouping: false,
+    enableHiding: false,
+    enableResizing: false,
+    enableSorting: false,
+};
 const useMRT_TableOptions = (_a) => {
     var _b;
     var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode = 'semantic', localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
@@ -3572,12 +3297,309 @@ const useMRT_TableOptions = (_a) => {
         selectAllMode, sortingFns: _sortingFns }, rest);
 };
 
-const useMaterialReactTable = (tableOptions) => {
-    const parsedTableOptions = useMRT_TableOptions(tableOptions);
-    const tableInstance = useMRT_TableInstance(parsedTableOptions);
-    return tableInstance;
+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;
 const MaterialReactTable = (props) => {
     let table;
@@ -3590,5 +3612,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
-//# sourceMappingURL=material-react-table.esm.js.map
+export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, createMRTColumnHelper, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonMRTCellStyles, getCommonToolbarStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getMRTTheme, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
+//# sourceMappingURL=index.esm.js.map