material-react-table 2.0.0-beta.4 → 2.0.0-beta.5

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

@@ -7,14 +7,14 @@ 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 { darken, lighten, alpha, useTheme } from '@mui/material/styles';
+import { lighten, darken, alpha, useTheme } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
 import TableCell from '@mui/material/TableCell';
 import Box from '@mui/material/Box';
+import { flexRender as flexRender$1, createRow as createRow$1, sortingFns, useReactTable, getCoreRowModel, getExpandedRowModel, getFacetedMinMaxValues, getFacetedRowModel, getFacetedUniqueValues, getFilteredRowModel, getGroupedRowModel, getPaginationRowModel, getSortedRowModel, aggregationFns, filterFns } from '@tanstack/react-table';
 import 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';
@@ -22,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';
@@ -103,6 +104,8 @@ 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.
 ***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
 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];
@@ -116,75 +119,6 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
   return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
 };
 
-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 });
-};
-
 const getColumnId = (columnDef) => { var _a, _b, _c, _d; return (_d = (_a = columnDef.id) !== null && _a !== void 0 ? _a : (_c = (_b = columnDef.accessorKey) === null || _b === void 0 ? void 0 : _b.toString) === null || _c === void 0 ? void 0 : _c.call(_b)) !== null && _d !== void 0 ? _d : columnDef.header; };
 const getAllLeafColumnDefs = (columns) => {
     const allLeafColumnDefs = [];
@@ -351,7 +285,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 newIndexs = defaultRangeExtractor(range);
+    if (draggingIndex >= 0 &&
+        draggingIndex < Math.max(range.startIndex - range.overscan, 0)) {
+        newIndexs.unshift(draggingIndex);
+    }
+    if (draggingIndex >= 0 && draggingIndex > range.endIndex + range.overscan) {
+        newIndexs.push(draggingIndex);
+    }
+    return newIndexs;
+};
+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) }, table.options.mrtTheme));
+const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
     const { options: { layoutMode }, } = table;
     const widthStyles = {
@@ -365,11 +333,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 &&
@@ -394,54 +362,86 @@ 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 }));
+        }
     }
-    return newIndexs;
+    if (columnDef.Cell && !isGroupedValue) {
+        renderedCellValue = columnDef.Cell({
+            cell,
+            column,
+            renderedCellValue,
+            row,
+            table,
+        });
+    }
+    return renderedCellValue;
 };
-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 MRT_GrabHandleButton = (_a) => {
     var _b;
@@ -620,6 +620,7 @@ const MRT_TableBodyCell = (_a) => {
         row,
         table,
     });
+    const { draggingBorderColor } = getMRTTheme(table, theme);
     const [skeletonWidth, setSkeletonWidth] = useState(100);
     useEffect(() => {
         if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
@@ -638,13 +639,13 @@ const MRT_TableBodyCell = (_a) => {
         const isLastColumn = getIsLastColumn(column, table);
         const isLastRow = numRows && rowIndex === numRows - 1;
         const borderStyle = columnSizingInfo.isResizingColumn === column.id
-            ? `2px solid ${theme.palette.primary.main} !important`
+            ? `2px solid ${draggingBorderColor} !important`
             : isDraggingColumn || isDraggingRow
-                ? `1px dashed ${theme.palette.text.secondary} !important`
+                ? `1px dashed ${theme.palette.grey[500]} !important`
                 : isHoveredColumn ||
                     isHoveredRow ||
                     columnSizingInfo.isResizingColumn === column.id
-                    ? `2px dashed ${theme.palette.primary.main} !important`
+                    ? `2px dashed ${draggingBorderColor} !important`
                     : undefined;
         if (columnSizingInfo.isResizingColumn === column.id) {
             return { borderRight: borderStyle };
@@ -715,7 +716,7 @@ const MRT_TableBodyCell = (_a) => {
             }
         } }, tableCellProps, { onDoubleClick: handleDoubleClick, onDragEnter: handleDragEnter, sx: (theme) => (Object.assign(Object.assign({ '&:hover': {
                 outline: ['cell', 'table'].includes(editDisplayMode !== null && editDisplayMode !== void 0 ? editDisplayMode : '') && isEditable
-                    ? `1px solid ${theme.palette.text.secondary}`
+                    ? `1px solid ${theme.palette.grey[500]}`
                     : undefined,
                 outlineOffset: '-1px',
                 textOverflow: 'clip',
@@ -738,7 +739,7 @@ const MRT_TableBodyCell = (_a) => {
                         : 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, textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0 }, getCommonMRTCellStyles({
             column,
             table,
             tableCellProps,
@@ -781,7 +782,7 @@ const MRT_TableDetailPanel = (_a) => {
                     ? `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)
+                    ? 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 }) })) })) })));
 };
 
@@ -822,6 +823,7 @@ const MRT_TableBodyRow = ({ columnVirtualizer, measureElement, numRows, pinnedRo
         }
     };
     const rowRef = useRef(null);
+    const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
     return (jsxs(Fragment, { children: [jsxs(TableRow, Object.assign({ "data-index": virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.index, onDragEnter: handleDragEnter, ref: (node) => {
                     if (node) {
                         rowRef.current = node;
@@ -832,12 +834,12 @@ 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
@@ -850,9 +852,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
@@ -992,9 +994,7 @@ const MRT_TableBody = (_a) => {
                         : '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'
-                                    : undefined,
+                                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',
@@ -1056,7 +1056,7 @@ const MRT_TableFooterCell = (_a) => {
                 ? '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,
@@ -1083,7 +1083,7 @@ const MRT_TableFooterRow = (_a) => {
         footerGroup,
         table,
     })), rest);
-    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) => {
+    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;
@@ -1446,7 +1446,7 @@ const MRT_ColumnActionMenu = (_a) => {
 const MRT_TableHeadCellColumnActionsButton = (_a) => {
     var _b;
     var { header, table } = _a, rest = __rest(_a, ["header", "table"]);
-    const { options: { columnFilterDisplayMode, icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
+    const { options: { icons: { MoreVertIcon }, localization, muiColumnActionsButtonProps, }, } = table;
     const { column } = header;
     const { columnDef } = column;
     const [anchorEl, setAnchorEl] = useState(null);
@@ -1464,7 +1464,7 @@ const MRT_TableHeadCellColumnActionsButton = (_a) => {
     })), rest);
     return (jsxs(Fragment, { children: [jsx(Tooltip, { arrow: true, 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.8) ${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 = (_a) => {
@@ -1955,7 +1955,9 @@ const MRT_TableHeadCellSortLabel = (_a) => {
                 ? 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, Object.assign({ IconComponent: !isSorted
-                    ? (props) => (jsx(SyncAltIcon, Object.assign({}, props, { style: { transform: 'rotate(-90deg) scaleX(0.8)' } })))
+                    ? (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();
@@ -1980,6 +1982,7 @@ const MRT_TableHeadCell = (_a) => {
         column,
         table,
     })), rest);
+    const { draggingBorderColor } = getMRTTheme(table, theme);
     const showColumnActions = (enableColumnActions || columnDef.enableColumnActions) &&
         columnDef.enableColumnActions !== false;
     const showDragHandle = enableColumnDragging !== false &&
@@ -2002,11 +2005,11 @@ const MRT_TableHeadCell = (_a) => {
     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 };
@@ -2061,7 +2064,7 @@ const MRT_TableHeadCell = (_a) => {
                 ? 3
                 : column.getIsPinned() && columnDefType !== 'group'
                     ? 2
-                    : 1 }, getCommonCellStyles({
+                    : 1 }, getCommonMRTCellStyles({
             column,
             header,
             table,
@@ -2102,7 +2105,7 @@ const MRT_TableHeadCell = (_a) => {
                                         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, tableCellProps: tableCellProps }))] }), columnDefType !== 'group' && (jsxs(Box, { className: "Mui-TableHeadCell-Content-Actions", sx: { whiteSpace: 'nowrap' }, children: [showDragHandle && (jsx(MRT_TableHeadCellGrabHandle, { column: column, table: table, tableHeadCellRef: {
+                                    }, 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 }))] })));
 };
@@ -2114,7 +2117,7 @@ const MRT_TableHeadRow = (_a) => {
         headerGroup,
         table,
     })), { rest });
-    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) => {
+    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;
@@ -2213,10 +2216,10 @@ const MRT_GlobalFilterTextField = (_a) => {
         }
         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: (_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, { 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, { arrow: true, 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, { 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' } })) }, 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;
@@ -2334,6 +2337,38 @@ const MRT_ToolbarDropZone = (_a) => {
     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 = (_a) => {
     var { column, table } = _a, rest = __rest(_a, ["column", "table"]);
     const { options: { icons: { PushPinIcon }, localization, }, } = table;
@@ -2387,9 +2422,9 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
         }
     };
     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.divider}`
+                        ? `2px dashed ${theme.palette.grey[500]}`
                         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-                            ? `2px dashed ${theme.palette.primary.main}`
+                            ? `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',
@@ -2523,17 +2558,6 @@ const MRT_ToolbarInternalButtons = (_a) => {
                     columnFilterDisplayMode !== 'popover' && (jsx(MRT_ToggleFiltersButton, { table: table })), (enableHiding || enableColumnOrdering || enableColumnPinning) && (jsx(MRT_ShowHideColumnsButton, { table: table })), enableDensityToggle && (jsx(MRT_ToggleDensePaddingButton, { table: table })), enableFullScreenToggle && (jsx(MRT_ToggleFullScreenButton, { table: table }))] })) })));
 };
 
-const commonToolbarStyles = ({ theme }) => ({
-    alignItems: 'flex-start',
-    backgroundColor: lighten(theme.palette.background.default, 0.05),
-    display: 'grid',
-    flexWrap: 'wrap-reverse',
-    minHeight: '3.5rem',
-    overflow: 'hidden',
-    position: 'relative',
-    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;
@@ -2547,10 +2571,11 @@ const MRT_TopToolbar = ({ table, }) => {
                 // @ts-ignore
                 toolbarProps.ref.current = ref;
             }
-        }, sx: (theme) => (Object.assign(Object.assign(Object.assign({}, commonToolbarStyles({ 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: {
+        }, 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',
@@ -2558,46 +2583,16 @@ 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 = (_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({}, 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 = (_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;
@@ -2699,7 +2694,7 @@ const MRT_TableLoadingOverlay = (_a) => {
     const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
     return (jsx(Box, { sx: (theme) => ({
             alignItems: 'center',
-            backgroundColor: alpha(lighten(theme.palette.background.paper, 0.05), 0.5),
+            backgroundColor: alpha(getMRTTheme(table, theme).baseBackgroundColor, 0.5),
             bottom: 0,
             display: 'flex',
             justifyContent: 'center',
@@ -2863,7 +2858,7 @@ const MRT_TablePaper = (_a) => {
                 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 &&
                 ((_b = parseFromValuesOrFunc(renderTopToolbar, { table })) !== null && _b !== void 0 ? _b : (jsx(MRT_TopToolbar, { table: table }))), jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
@@ -3513,6 +3508,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"]);
@@ -3590,11 +3605,7 @@ const useMRT_TableOptions = (_a) => {
         selectAllMode, sortingFns: _sortingFns }, rest);
 };
 
-const useMaterialReactTable = (tableOptions) => {
-    const parsedTableOptions = useMRT_TableOptions(tableOptions);
-    const tableInstance = useMRT_TableInstance(parsedTableOptions);
-    return tableInstance;
-};
+const useMaterialReactTable = (tableOptions) => useMRT_TableInstance(useMRT_TableOptions(tableOptions));
 
 const isTableInstanceProp = (props) => props.table !== undefined;
 const MaterialReactTable = (props) => {
@@ -3608,5 +3619,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_AggregationFns, MRT_BottomToolbar, MRT_ColumnActionMenu, MRT_ColumnPinningButtons, MRT_CopyButton, MRT_DefaultColumn, MRT_DefaultDisplayColumn, MRT_EditActionButtons, MRT_EditCellTextField, MRT_EditRowModal, MRT_ExpandAllButton, MRT_ExpandButton, MRT_FilterCheckbox, MRT_FilterFns, MRT_FilterOptionMenu, MRT_FilterRangeFields, MRT_FilterRangeSlider, MRT_FilterTextField, MRT_GlobalFilterTextField, MRT_GrabHandleButton, MRT_LinearProgressBar, MRT_RowActionMenu, MRT_RowPinButton, MRT_SelectCheckbox, MRT_ShowHideColumnsButton, MRT_ShowHideColumnsMenu, MRT_ShowHideColumnsMenuItems, MRT_SortingFns, MRT_Table, MRT_TableBody, MRT_TableBodyCell, MRT_TableBodyCellValue, MRT_TableBodyRow, MRT_TableBodyRowGrabHandle, MRT_TableBodyRowPinButton, MRT_TableContainer, MRT_TableDetailPanel, MRT_TableFooter, MRT_TableFooterCell, MRT_TableFooterRow, MRT_TableHead, MRT_TableHeadCell, MRT_TableHeadCellColumnActionsButton, MRT_TableHeadCellFilterContainer, MRT_TableHeadCellFilterLabel, MRT_TableHeadCellGrabHandle, MRT_TableHeadCellResizeHandle, MRT_TableHeadCellSortLabel, MRT_TableHeadRow, MRT_TableLoadingOverlay, MRT_TablePagination, MRT_TablePaper, MRT_ToggleDensePaddingButton, MRT_ToggleFiltersButton, MRT_ToggleFullScreenButton, MRT_ToggleGlobalFilterButton, MRT_ToggleRowActionMenuButton, MRT_ToolbarAlertBanner, MRT_ToolbarDropZone, MRT_ToolbarInternalButtons, MRT_TopToolbar, MaterialReactTable, Memo_MRT_TableBody, Memo_MRT_TableBodyCell, Memo_MRT_TableBodyRow, commonListItemStyles, commonMenuItemStyles, commonToolbarStyles, createMRTColumnHelper, createRow, extraIndexRangeExtractor, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getCommonCellStyles, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getLeadingDisplayColumnIds, getTotalRight, getTrailingDisplayColumnIds, mrtFilterOptions, parseCSSVarId, parseFromValuesOrFunc, prepareColumns, rankGlobalFuzzy, reorderColumn, showExpandColumn, useMaterialReactTable };
+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=material-react-table.esm.js.map