material-react-table 2.11.1 → 2.11.3

package/dist/index.esm.js

@@ -169,32 +169,6 @@ const getDefaultColumnFilterFn = (columnDef) => {
         return 'equals';
     return 'fuzzy';
 };
-const getIsFirstColumn = (column, table) => {
-    const leftColumns = table.getLeftVisibleLeafColumns();
-    return leftColumns.length
-        ? leftColumns[0].id === column.id
-        : table.getVisibleLeafColumns()[0].id === column.id;
-};
-const getIsLastColumn = (column, table) => {
-    const rightColumns = table.getRightVisibleLeafColumns();
-    const columns = table.getVisibleLeafColumns();
-    return rightColumns.length
-        ? rightColumns[rightColumns.length - 1].id === column.id
-        : columns[columns.length - 1].id === column.id;
-};
-const getIsLastLeftPinnedColumn = (table, column) => {
-    return (column.getIsPinned() === 'left' &&
-        table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex());
-};
-const getIsFirstRightPinnedColumn = (column) => {
-    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
-};
-const getTotalRight = (table, column) => {
-    return table
-        .getRightLeafHeaders()
-        .slice(column.getPinnedIndex() + 1)
-        .reduce((acc, col) => acc + col.getSize(), 0);
-};
 
 const flexRender = flexRender$1;
 function createMRTColumnHelper() {
@@ -332,8 +306,8 @@ 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 getMRT_Rows = (table, pinnedRowIds = [], all) => {
-    const { getBottomRows, getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
+const getMRT_Rows = (table, all) => {
+    const { getCenterRows, getPrePaginationRowModel, getRowModel, getState, getTopRows, options: { createDisplayMode, enablePagination, enableRowPinning, manualPagination, positionCreatingRow, rowPinningDisplayMode, }, } = table;
     const { creatingRow, pagination } = getState();
     const isRankingRows = getIsRankingRows(table);
     let rows = [];
@@ -346,19 +320,28 @@ const getMRT_Rows = (table, pinnedRowIds = [], all) => {
                 : getCenterRows();
     }
     else {
+        // fuzzy ranking adjustments
         rows = getPrePaginationRowModel().rows.sort((a, b) => rankGlobalFuzzy(a, b));
         if (enablePagination && !manualPagination && !all) {
             const start = pagination.pageIndex * pagination.pageSize;
             rows = rows.slice(start, start + pagination.pageSize);
         }
+        if (enableRowPinning && !(rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
+            // "re-center-ize" the rows (no top or bottom pinned rows unless sticky)
+            rows = rows.filter((row) => !row.getIsPinned());
+        }
     }
+    // row pinning adjustments
     if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky'))) {
+        const centerPinnedRowIds = rows
+            .filter((row) => row.getIsPinned())
+            .map((r) => r.id);
         rows = [
-            ...getTopRows().filter((row) => !pinnedRowIds.includes(row.id)),
+            ...getTopRows().filter((row) => !centerPinnedRowIds.includes(row.id)),
             ...rows,
-            ...getBottomRows().filter((row) => !pinnedRowIds.includes(row.id)),
         ];
     }
+    // blank inserted creating row adjustments
     if (positionCreatingRow !== undefined &&
         creatingRow &&
         createDisplayMode === 'row') {
@@ -400,20 +383,21 @@ const getIsRowSelected = ({ row, table, }) => {
             row.getCanSelectSubRows() &&
             row.getIsAllSubRowsSelected()));
 };
-const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, table, }) => {
+const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (event, value) => {
     var _a;
-    const { getState, options: { enableBatchRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
+    const { getState, options: { enableBatchRowSelection, enableMultiRowSelection, enableRowPinning, manualPagination, rowPinningDisplayMode, }, refs: { lastSelectedRowId: lastSelectedRowId }, } = table;
     const { pagination: { pageIndex, pageSize }, } = getState();
     const paginationOffset = manualPagination ? 0 : pageSize * pageIndex;
-    const isCurrentRowChecked = getIsRowSelected({ row, table });
-    const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
+    const wasCurrentRowChecked = getIsRowSelected({ row, table });
     // toggle selection of this row
-    row.getToggleSelectedHandler()(event);
+    row.toggleSelected(value !== null && value !== void 0 ? value : !wasCurrentRowChecked);
+    const changedRowIds = new Set([row.id]);
     // if shift key is pressed, select all rows between last selected and this one
     if (enableBatchRowSelection &&
+        enableMultiRowSelection &&
         event.nativeEvent.shiftKey &&
         lastSelectedRowId.current !== null) {
-        const rows = getMRT_Rows(table, undefined, true);
+        const rows = getMRT_Rows(table, true);
         const lastIndex = rows.findIndex((r) => r.id === lastSelectedRowId.current);
         if (lastIndex !== -1) {
             const isLastIndexChecked = getIsRowSelected({
@@ -426,9 +410,10 @@ const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, tabl
                 : [currentIndex, lastIndex];
             // toggle selection of all rows between last selected and this one
             // but only if the last selected row is not the same as the current one
-            if (isCurrentRowChecked !== isLastIndexChecked) {
+            if (wasCurrentRowChecked !== isLastIndexChecked) {
                 for (let i = start; i <= end; i++) {
-                    rows[i].toggleSelected(!isCurrentRowChecked);
+                    rows[i].toggleSelected(!wasCurrentRowChecked);
+                    changedRowIds.add(rows[i].id);
                 }
             }
         }
@@ -439,13 +424,26 @@ const getMRT_RowSelectionHandler = () => ({ event, row, staticRowIndex = 0, tabl
     if (row.getCanSelectSubRows() && row.getIsAllSubRowsSelected()) {
         (_a = row.subRows) === null || _a === void 0 ? void 0 : _a.forEach((r) => r.toggleSelected(false));
     }
-    if (isStickySelection) {
-        row.pin(!row.getIsPinned() && isCurrentRowChecked
-            ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
-                ? 'bottom'
-                : 'top'
-            : false);
+    if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
+        changedRowIds.forEach((rowId) => {
+            const rowToTogglePin = table.getRow(rowId);
+            rowToTogglePin.pin(!wasCurrentRowChecked //was not previously pinned or selected
+                ? (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('bottom'))
+                    ? 'bottom'
+                    : 'top'
+                : false);
+        });
+    }
+};
+const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
+    const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
+    selectAllMode === 'all' || forceAll
+        ? table.toggleAllRowsSelected(value !== null && value !== void 0 ? value : event.target.checked)
+        : table.toggleAllPageRowsSelected(value !== null && value !== void 0 ? value : event.target.checked);
+    if (enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'))) {
+        table.setRowPinning({ bottom: [], top: [] });
     }
+    lastSelectedRowId.current = null;
 };
 
 const MRT_AggregationFns = Object.assign({}, aggregationFns);
@@ -615,15 +613,15 @@ const MRT_EditActionButtons = (_a) => {
 };
 
 const parseCSSVarId = (id) => id.replace(/[^a-zA-Z0-9]/g, '_');
-const getMRTTheme = (table, theme) => {
+const getMRTTheme = (mrtTheme, muiTheme) => {
     var _a;
-    const themeOverrides = parseFromValuesOrFunc(table.options.mrtTheme, theme);
-    const baseBackgroundColor = (_a = themeOverrides === null || themeOverrides === void 0 ? void 0 : themeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (theme.palette.mode === 'dark'
-        ? lighten(theme.palette.background.default, 0.05)
-        : theme.palette.background.default);
-    return Object.assign({ baseBackgroundColor, draggingBorderColor: theme.palette.primary.main, matchHighlightColor: theme.palette.mode === 'dark'
-            ? darken(theme.palette.warning.dark, 0.25)
-            : lighten(theme.palette.warning.light, 0.5), menuBackgroundColor: lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(theme.palette.primary.main, 0.2) }, themeOverrides);
+    const mrtThemeOverrides = parseFromValuesOrFunc(mrtTheme, muiTheme);
+    const baseBackgroundColor = (_a = mrtThemeOverrides === null || mrtThemeOverrides === void 0 ? void 0 : mrtThemeOverrides.baseBackgroundColor) !== null && _a !== void 0 ? _a : (muiTheme.palette.mode === 'dark'
+        ? lighten(muiTheme.palette.background.default, 0.05)
+        : muiTheme.palette.background.default);
+    return Object.assign({ baseBackgroundColor, draggingBorderColor: muiTheme.palette.primary.main, matchHighlightColor: muiTheme.palette.mode === 'dark'
+            ? darken(muiTheme.palette.warning.dark, 0.25)
+            : lighten(muiTheme.palette.warning.light, 0.5), menuBackgroundColor: lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.1), selectedRowBackgroundColor: alpha(muiTheme.palette.primary.main, 0.2) }, mrtThemeOverrides);
 };
 const commonCellBeforeAfterStyles = {
     content: '""',
@@ -635,13 +633,14 @@ const commonCellBeforeAfterStyles = {
     zIndex: -1,
 };
 const getCommonPinnedCellStyles = ({ column, table, theme, }) => {
-    const { baseBackgroundColor } = getMRTTheme(table, theme);
+    const { baseBackgroundColor } = table.options.mrtTheme;
+    const isPinned = column === null || column === void 0 ? void 0 : column.getIsPinned();
     return {
         '&[data-pinned="true"]': {
             '&:before': Object.assign({ backgroundColor: alpha(darken(baseBackgroundColor, theme.palette.mode === 'dark' ? 0.05 : 0.01), 0.97), boxShadow: column
-                    ? getIsLastLeftPinnedColumn(table, column)
+                    ? isPinned === 'left' && column.getIsLastColumn(isPinned)
                         ? `-4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
-                        : getIsFirstRightPinnedColumn(column)
+                        : isPinned === 'right' && column.getIsFirstColumn(isPinned)
                             ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
                             : undefined
                     : undefined }, commonCellBeforeAfterStyles),
@@ -671,7 +670,7 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
         ? Object.assign(Object.assign({}, getCommonPinnedCellStyles({ column, table, theme })), { left: isColumnPinned === 'left'
                 ? `${column.getStart('left')}px`
                 : undefined, opacity: 0.97, position: 'sticky', right: isColumnPinned === 'right'
-                ? `${getTotalRight(table, column)}px`
+                ? `${column.getAfter('right')}px`
                 : undefined }) : {};
     return Object.assign(Object.assign(Object.assign({ backgroundColor: 'inherit', backgroundImage: 'inherit', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, justifyContent: columnDefType === 'group'
             ? 'center'
@@ -688,9 +687,9 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
                 ? 1
                 : 0 }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
 };
-const getCommonToolbarStyles = ({ table, theme, }) => ({
+const getCommonToolbarStyles = ({ table, }) => ({
     alignItems: 'flex-start',
-    backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
+    backgroundColor: table.options.mrtTheme.baseBackgroundColor,
     display: 'grid',
     flexWrap: 'wrap-reverse',
     minHeight: '3.5rem',
@@ -726,10 +725,8 @@ const MRT_ActionMenuItem = (_a) => {
 
 const MRT_RowActionMenu = (_a) => {
     var { anchorEl, handleEdit, row, setAnchorEl, staticRowIndex, table } = _a, rest = __rest(_a, ["anchorEl", "handleEdit", "row", "setAnchorEl", "staticRowIndex", "table"]);
-    const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, renderRowActionMenuItems, }, } = table;
+    const { getState, options: { editDisplayMode, enableEditing, icons: { EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderRowActionMenuItems, }, } = table;
     const { density } = getState();
-    const theme = useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsxs(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
@@ -991,10 +988,9 @@ const getMRT_RowPinningColumnDef = (tableOptions) => {
 const MRT_SelectCheckbox = (_a) => {
     var _b;
     var { row, staticRowIndex, table } = _a, rest = __rest(_a, ["row", "staticRowIndex", "table"]);
-    const { getState, options: { enableMultiRowSelection, enableRowPinning, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, rowPinningDisplayMode, selectAllMode, }, refs: { lastSelectedRowId }, } = table;
+    const { getState, options: { enableMultiRowSelection, localization, muiSelectAllCheckboxProps, muiSelectCheckboxProps, selectAllMode, }, } = table;
     const { density, isLoading } = getState();
     const selectAll = !row;
-    const isStickySelection = enableRowPinning && (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('select'));
     const allRowsSelected = selectAll
         ? selectAllMode === 'page'
             ? table.getIsAllPageRowsSelected()
@@ -1007,18 +1003,17 @@ const MRT_SelectCheckbox = (_a) => {
         ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
         : parseFromValuesOrFunc(muiSelectCheckboxProps, {
             row,
+            staticRowIndex,
             table,
         }))), rest);
-    const onSelectionChange = getMRT_RowSelectionHandler();
-    const onSelectAllChange = (event) => {
-        selectAllMode === 'all'
-            ? table.getToggleAllRowsSelectedHandler()(event)
-            : table.getToggleAllPageRowsSelectedHandler()(event);
-        if (isStickySelection) {
-            table.setRowPinning({ bottom: [], top: [] });
-        }
-        lastSelectedRowId.current = null;
-    };
+    const onSelectionChange = row
+        ? getMRT_RowSelectionHandler({
+            row,
+            staticRowIndex,
+            table,
+        })
+        : undefined;
+    const onSelectAllChange = getMRT_SelectAllHandler({ table });
     const commonProps = Object.assign(Object.assign({ 'aria-label': selectAll
             ? localization.toggleSelectAll
             : localization.toggleSelectRow, checked: isChecked, disabled: isLoading || (row && !row.getCanSelect()) || (row === null || row === void 0 ? void 0 : row.id) === 'mrt-row-create', inputProps: {
@@ -1027,9 +1022,7 @@ const MRT_SelectCheckbox = (_a) => {
                 : localization.toggleSelectRow,
         }, onChange: (event) => {
             event.stopPropagation();
-            row
-                ? onSelectionChange({ event, row, staticRowIndex, table })
-                : onSelectAllChange(event);
+            selectAll ? onSelectAllChange(event) : onSelectionChange(event);
         }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
             var _a;
             e.stopPropagation();
@@ -1207,10 +1200,11 @@ const MRT_DefaultDisplayColumn = {
 };
 const useMRT_TableOptions = (_a) => {
     var _b;
-    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
+    var { aggregationFns, autoResetExpanded = false, columnFilterDisplayMode = 'subheader', columnResizeDirection, columnResizeMode = 'onChange', createDisplayMode = 'modal', defaultColumn, defaultDisplayColumn, editDisplayMode = 'modal', enableBatchRowSelection = true, enableBottomToolbar = true, enableColumnActions = true, enableColumnFilters = true, enableColumnOrdering = false, enableColumnPinning = false, enableColumnResizing = false, enableColumnVirtualization, enableDensityToggle = true, enableExpandAll = true, enableExpanding, enableFacetedValues = false, enableFilterMatchHighlighting = true, enableFilters = true, enableFullScreenToggle = true, enableGlobalFilter = true, enableGlobalFilterRankedResults = true, enableGrouping = false, enableHiding = true, enableMultiRowSelection = true, enableMultiSort = true, enablePagination = true, enableRowPinning = false, enableRowSelection = false, enableRowVirtualization, enableSelectAll = true, enableSorting = true, enableStickyHeader = false, enableTableFooter = true, enableTableHead = true, enableToolbarInternalActions = true, enableTopToolbar = true, filterFns, icons, layoutMode, localization, manualFiltering, manualGrouping, manualPagination, manualSorting, mrtTheme, paginationDisplayMode = 'default', positionActionsColumn = 'first', positionCreatingRow = 'top', positionExpandColumn = 'first', positionGlobalFilter = 'right', positionPagination = 'bottom', positionToolbarAlertBanner = 'top', positionToolbarDropZone = 'top', rowNumberDisplayMode = 'static', rowPinningDisplayMode = 'sticky', selectAllMode = 'page', sortingFns } = _a, rest = __rest(_a, ["aggregationFns", "autoResetExpanded", "columnFilterDisplayMode", "columnResizeDirection", "columnResizeMode", "createDisplayMode", "defaultColumn", "defaultDisplayColumn", "editDisplayMode", "enableBatchRowSelection", "enableBottomToolbar", "enableColumnActions", "enableColumnFilters", "enableColumnOrdering", "enableColumnPinning", "enableColumnResizing", "enableColumnVirtualization", "enableDensityToggle", "enableExpandAll", "enableExpanding", "enableFacetedValues", "enableFilterMatchHighlighting", "enableFilters", "enableFullScreenToggle", "enableGlobalFilter", "enableGlobalFilterRankedResults", "enableGrouping", "enableHiding", "enableMultiRowSelection", "enableMultiSort", "enablePagination", "enableRowPinning", "enableRowSelection", "enableRowVirtualization", "enableSelectAll", "enableSorting", "enableStickyHeader", "enableTableFooter", "enableTableHead", "enableToolbarInternalActions", "enableTopToolbar", "filterFns", "icons", "layoutMode", "localization", "manualFiltering", "manualGrouping", "manualPagination", "manualSorting", "mrtTheme", "paginationDisplayMode", "positionActionsColumn", "positionCreatingRow", "positionExpandColumn", "positionGlobalFilter", "positionPagination", "positionToolbarAlertBanner", "positionToolbarDropZone", "rowNumberDisplayMode", "rowPinningDisplayMode", "selectAllMode", "sortingFns"]);
     const theme = useTheme();
     icons = useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     localization = useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
+    mrtTheme = useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
     aggregationFns = useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
     filterFns = useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
     sortingFns = useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
@@ -1295,6 +1289,7 @@ const useMRT_TableOptions = (_a) => {
         manualGrouping,
         manualPagination,
         manualSorting,
+        mrtTheme,
         paginationDisplayMode,
         positionActionsColumn,
         positionCreatingRow,
@@ -1689,10 +1684,10 @@ const useMRT_RowVirtualizer = (table, rows) => {
     return rowVirtualizer;
 };
 
-const useMRT_Rows = (table, pinnedRowIds = []) => {
+const useMRT_Rows = (table) => {
     const { getRowModel, getState, options: { data, enableGlobalFilterRankedResults, positionCreatingRow }, } = table;
     const { creatingRow, expanded, globalFilter, pagination, rowPinning, sorting, } = getState();
-    const rows = useMemo(() => getMRT_Rows(table, pinnedRowIds), [
+    const rows = useMemo(() => getMRT_Rows(table), [
         creatingRow,
         data,
         enableGlobalFilterRankedResults,
@@ -1711,7 +1706,7 @@ const useMRT_Rows = (table, pinnedRowIds = []) => {
 const allowedTypes = ['string', 'number'];
 const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowIndex, table, }) => {
     var _a, _b, _c;
-    const { getState, options: { enableFilterMatchHighlighting }, } = table;
+    const { getState, options: { enableFilterMatchHighlighting, mrtTheme: { matchHighlightColor }, }, } = table;
     const { column, row } = cell;
     const { columnDef } = column;
     const { globalFilter, globalFilterFn } = getState();
@@ -1755,7 +1750,7 @@ const MRT_TableBodyCellValue = ({ cell, rowRef, staticColumnIndex, staticRowInde
         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,
+                            backgroundColor: matchHighlightColor,
                             borderRadius: '2px',
                             color: (theme) => theme.palette.mode === 'dark'
                                 ? theme.palette.common.white
@@ -1907,7 +1902,7 @@ const MRT_TableBodyCell = (_a) => {
     var _b, _c, _d, _e, _f;
     var { cell, numRows, rowRef, staticColumnIndex, staticRowIndex, table } = _a, rest = __rest(_a, ["cell", "numRows", "rowRef", "staticColumnIndex", "staticRowIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
+    const { getState, options: { columnResizeDirection, columnResizeMode, createDisplayMode, editDisplayMode, enableCellActions, enableClickToCopy, enableColumnOrdering, enableColumnPinning, enableGrouping, layoutMode, mrtTheme: { draggingBorderColor }, muiSkeletonProps, muiTableBodyCellProps, }, setHoveredColumn, } = table;
     const { actionCell, columnSizingInfo, creatingRow, density, draggingColumn, draggingRow, editingCell, editingRow, hoveredColumn, hoveredRow, isLoading, showSkeletons, } = getState();
     const { column, row } = cell;
     const { columnDef } = column;
@@ -1920,7 +1915,6 @@ const MRT_TableBodyCell = (_a) => {
         row,
         table,
     });
-    const { draggingBorderColor } = getMRTTheme(table, theme);
     const [skeletonWidth, setSkeletonWidth] = useState(100);
     useEffect(() => {
         if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
@@ -1935,8 +1929,8 @@ const MRT_TableBodyCell = (_a) => {
         const isHoveredColumn = (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id;
         const isDraggingRow = (draggingRow === null || draggingRow === void 0 ? void 0 : draggingRow.id) === row.id;
         const isHoveredRow = (hoveredRow === null || hoveredRow === void 0 ? void 0 : hoveredRow.id) === row.id;
-        const isFirstColumn = getIsFirstColumn(column, table);
-        const isLastColumn = getIsLastColumn(column, table);
+        const isFirstColumn = column.getIsFirstColumn();
+        const isLastColumn = column.getIsLastColumn();
         const isLastRow = numRows && staticRowIndex === numRows - 1;
         const isResizingColumn = columnSizingInfo.isResizingColumn === column.id;
         const showResizeBorder = isResizingColumn && columnResizeMode === 'onChange';
@@ -2068,7 +2062,7 @@ const Memo_MRT_TableBodyCell = memo(MRT_TableBodyCell, (prev, next) => next.cell
 
 const MRT_TableDetailPanel = (_a) => {
     var { parentRowRef, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["parentRowRef", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
-    const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
+    const { getState, getVisibleLeafColumns, options: { enableRowVirtualization, layoutMode, mrtTheme: { baseBackgroundColor }, muiDetailPanelProps, muiTableBodyRowProps, renderDetailPanel, }, } = table;
     const { isLoading } = getState();
     const tableRowProps = parseFromValuesOrFunc(muiTableBodyRowProps, {
         isDetailPanel: true,
@@ -2093,9 +2087,7 @@ const MRT_TableDetailPanel = (_a) => {
                     : undefined, transform: virtualRow
                     ? `translateY(${virtualRow === null || virtualRow === void 0 ? void 0 : virtualRow.start}px)`
                     : undefined, width: '100%' }, parseFromValuesOrFunc(tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.sx, theme)));
-        }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow
-                    ? getMRTTheme(table, theme).baseBackgroundColor
-                    : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !enableRowVirtualization
+        }, children: jsx(TableCell, Object.assign({ className: "Mui-TableBodyCell-DetailPanel", colSpan: getVisibleLeafColumns().length }, tableCellProps, { sx: (theme) => (Object.assign({ backgroundColor: virtualRow ? baseBackgroundColor : undefined, borderBottom: !row.getIsExpanded() ? 'none' : undefined, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0, transition: !enableRowVirtualization
                     ? 'all 150ms ease-in-out'
                     : undefined, width: `100%` }, parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme))), children: enableRowVirtualization ? (row.getIsExpanded() && DetailPanel) : (jsx(Collapse, { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
 };
@@ -2104,7 +2096,7 @@ const MRT_TableBodyRow = (_a) => {
     var _b, _c, _d, _f;
     var { columnVirtualizer, numRows, pinnedRowIds, row, rowVirtualizer, staticRowIndex, table, virtualRow } = _a, rest = __rest(_a, ["columnVirtualizer", "numRows", "pinnedRowIds", "row", "rowVirtualizer", "staticRowIndex", "table", "virtualRow"]);
     const theme = useTheme();
-    const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
+    const { getState, options: { enableRowOrdering, enableRowPinning, enableStickyFooter, enableStickyHeader, layoutMode, memoMode, mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, }, muiTableBodyRowProps, renderDetailPanel, rowPinningDisplayMode, }, refs: { tableFooterRef, tableHeadRef }, setHoveredRow, } = table;
     const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen, rowPinning, } = getState();
     const visibleCells = row.getVisibleCells();
     const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
@@ -2144,7 +2136,6 @@ const MRT_TableBodyRow = (_a) => {
         }
     };
     const rowRef = useRef(null);
-    const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
     const cellHighlightColor = isRowSelected
         ? selectedRowBackgroundColor
         : isRowPinned
@@ -2220,7 +2211,7 @@ const MRT_TableBody = (_a) => {
             .rows.filter((row) => row.getIsPinned())
             .map((r) => r.id);
     }, [rowPinning, getRowModel().rows]);
-    const rows = useMRT_Rows(table, pinnedRowIds);
+    const rows = useMRT_Rows(table);
     const rowVirtualizer = useMRT_RowVirtualizer(table, rows);
     const { virtualRows } = rowVirtualizer !== null && rowVirtualizer !== void 0 ? rowVirtualizer : {};
     const commonRowProps = {
@@ -2321,7 +2312,7 @@ const MRT_TableFooterCell = (_a) => {
 const MRT_TableFooterRow = (_a) => {
     var _b;
     var { columnVirtualizer, footerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "footerGroup", "table"]);
-    const { options: { layoutMode, muiTableFooterRowProps }, } = table;
+    const { options: { layoutMode, mrtTheme: { baseBackgroundColor }, muiTableFooterRowProps, }, } = table;
     const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     // if no content in row, skip row
     if (!((_b = footerGroup.headers) === null || _b === void 0 ? void 0 : _b.some((header) => (typeof header.column.columnDef.footer === 'string' &&
@@ -2333,7 +2324,7 @@ const MRT_TableFooterRow = (_a) => {
         footerGroup,
         table,
     })), 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, position: 'relative', 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, staticColumnIndex) => {
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: 'relative', 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, staticColumnIndex) => {
                 let footer = footerOrVirtualFooter;
                 if (columnVirtualizer) {
                     staticColumnIndex = footerOrVirtualFooter
@@ -2458,7 +2449,7 @@ const rangeVariants = ['range-slider', 'date-range', 'datetime-range', 'range'];
 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 { getState, options: { columnFilterModeOptions, globalFilterModeOptions, localization, mrtTheme: { menuBackgroundColor }, 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 : {};
@@ -2541,8 +2532,6 @@ const MRT_FilterOptionMenu = (_a) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    const theme = useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
@@ -2570,7 +2559,7 @@ const MRT_FilterOptionMenu = (_a) => {
 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 { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
+    const { getAllLeafColumns, getState, options: { columnFilterDisplayMode, columnFilterModeOptions, enableColumnFilterModes, enableColumnFilters, enableColumnPinning, enableColumnResizing, enableGrouping, enableHiding, enableSorting, enableSortingRemoval, icons: { ClearAllIcon, DynamicFeedIcon, FilterListIcon, FilterListOffIcon, PushPinIcon, RestartAltIcon, SortIcon, ViewColumnIcon, VisibilityOffIcon, }, localization, mrtTheme: { menuBackgroundColor }, renderColumnActionsMenuItems, }, refs: { filterInputRefs }, setColumnFilterFns, setColumnOrder, setColumnSizingInfo, setShowColumnFilters, } = table;
     const { column } = header;
     const { columnDef } = column;
     const { columnSizing, columnVisibility, density, showColumnFilters } = getState();
@@ -2682,8 +2671,6 @@ const MRT_ColumnActionMenu = (_a) => {
             ]
             : []),
     ].filter(Boolean);
-    const theme = useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsx(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
@@ -3251,7 +3238,7 @@ const MRT_TableHeadCell = (_a) => {
     var _b, _c, _d, _f, _g, _h;
     var { columnVirtualizer, header, staticColumnIndex, table } = _a, rest = __rest(_a, ["columnVirtualizer", "header", "staticColumnIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
+    const { getState, options: { columnFilterDisplayMode, columnResizeDirection, columnResizeMode, enableColumnActions, enableColumnDragging, enableColumnOrdering, enableColumnPinning, enableGrouping, enableMultiSort, layoutMode, mrtTheme: { draggingBorderColor }, muiTableHeadCellProps, }, refs: { tableHeadCellRefs }, setHoveredColumn, } = table;
     const { columnSizingInfo, density, draggingColumn, grouping, hoveredColumn, showColumnFilters, } = getState();
     const { column } = header;
     const { columnDef } = column;
@@ -3260,7 +3247,6 @@ const MRT_TableHeadCell = (_a) => {
         column,
         table,
     })), rest);
-    const { draggingBorderColor } = getMRTTheme(table, theme);
     const isColumnPinned = enableColumnPinning &&
         columnDef.columnDefType !== 'group' &&
         column.getIsPinned();
@@ -3403,13 +3389,13 @@ const MRT_TableHeadCell = (_a) => {
 
 const MRT_TableHeadRow = (_a) => {
     var { columnVirtualizer, headerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table"]);
-    const { options: { enableStickyHeader, layoutMode, muiTableHeadRowProps }, } = table;
+    const { options: { enableStickyHeader, layoutMode, mrtTheme: { baseBackgroundColor }, muiTableHeadRowProps, }, } = table;
     const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer !== null && columnVirtualizer !== void 0 ? columnVirtualizer : {};
     const tableRowProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTableHeadRowProps, {
         headerGroup,
         table,
     })), rest);
-    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: enableStickyHeader && layoutMode === 'semantic'
+    return (jsxs(TableRow, Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`, display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, position: enableStickyHeader && layoutMode === 'semantic'
                 ? 'sticky'
                 : 'relative', 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, staticColumnIndex) => {
                 let header = headerOrVirtualHeader;
@@ -3425,7 +3411,7 @@ const MRT_TableHeadRow = (_a) => {
 const MRT_ToolbarAlertBanner = (_a) => {
     var _b, _c, _d;
     var { stackAlertBanner, table } = _a, rest = __rest(_a, ["stackAlertBanner", "table"]);
-    const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { lastSelectedRowId, tablePaperRef }, } = table;
+    const { getFilteredSelectedRowModel, getPrePaginationRowModel, getState, options: { enableRowSelection, enableSelectAll, localization, manualPagination, muiToolbarAlertBannerChipProps, muiToolbarAlertBannerProps, positionToolbarAlertBanner, renderToolbarAlertBannerContent, rowCount, }, refs: { tablePaperRef }, } = table;
     const { density, grouping, rowSelection, showAlertBanner } = getState();
     const alertProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiToolbarAlertBannerProps, {
         table,
@@ -3433,14 +3419,11 @@ const MRT_ToolbarAlertBanner = (_a) => {
     const chipProps = parseFromValuesOrFunc(muiToolbarAlertBannerChipProps, {
         table,
     });
-    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().rows.length;
+    const totalRowCount = rowCount !== null && rowCount !== void 0 ? rowCount : getPrePaginationRowModel().flatRows.length;
     const selectedRowCount = useMemo(() => manualPagination
         ? Object.values(rowSelection).filter(Boolean).length
         : getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
-    const selectedAlert = selectedRowCount > 0 ? (jsxs(Stack, { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsx(Button, { onClick: () => {
-                    table.toggleAllRowsSelected(false);
-                    lastSelectedRowId.current = null;
-                }, size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
+    const selectedAlert = selectedRowCount > 0 ? (jsxs(Stack, { alignItems: "center", direction: "row", gap: "16px", children: [(_c = (_b = localization.selectedCountOfRowCountRowsSelected) === null || _b === void 0 ? void 0 : _b.replace('{selectedCount}', selectedRowCount.toLocaleString())) === null || _c === void 0 ? void 0 : _c.replace('{rowCount}', totalRowCount.toString()), jsx(Button, { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : 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) => {
                 var _a, _b;
@@ -3518,11 +3501,11 @@ const MRT_Table = (_a) => {
 const MRT_TableLoadingOverlay = (_a) => {
     var _b;
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { options: { localization, muiCircularProgressProps }, } = table;
+    const { options: { localization, mrtTheme: { baseBackgroundColor }, muiCircularProgressProps, }, } = table;
     const circularProgressProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiCircularProgressProps, { table })), rest);
-    return (jsx(Box, { sx: (theme) => ({
+    return (jsx(Box, { sx: {
             alignItems: 'center',
-            backgroundColor: alpha(getMRTTheme(table, theme).baseBackgroundColor, 0.5),
+            backgroundColor: alpha(baseBackgroundColor, 0.5),
             bottom: 0,
             display: 'flex',
             justifyContent: 'center',
@@ -3533,20 +3516,18 @@ const MRT_TableLoadingOverlay = (_a) => {
             top: 0,
             width: '100%',
             zIndex: 3,
-        }), children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps))) }));
+        }, children: (_b = circularProgressProps === null || circularProgressProps === void 0 ? void 0 : circularProgressProps.Component) !== null && _b !== void 0 ? _b : (jsx(CircularProgress, Object.assign({ "aria-label": localization.noRecordsToDisplay, id: "mrt-progress" }, circularProgressProps))) }));
 };
 
 const MRT_CellActionMenu = (_a) => {
     var _b, _c;
     var { table } = _a, rest = __rest(_a, ["table"]);
-    const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
+    const { getState, options: { editDisplayMode, enableClickToCopy, enableEditing, icons: { ContentCopy, EditIcon }, localization, mrtTheme: { menuBackgroundColor }, renderCellActionMenuItems, }, refs: { actionCellRef }, } = table;
     const { actionCell, density } = getState();
     const cell = actionCell;
     const { row } = cell;
     const { column } = cell;
     const { columnDef } = column;
-    const theme = useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     const handleClose = (event) => {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         table.setActionCell(null);
@@ -3798,7 +3779,7 @@ const MRT_ColumnPinningButtons = (_a) => {
 const MRT_ShowHideColumnsMenuItems = (_a) => {
     var _b;
     var { allColumns, column, hoveredColumn, isNestedColumns, setHoveredColumn, table } = _a, rest = __rest(_a, ["allColumns", "column", "hoveredColumn", "isNestedColumns", "setHoveredColumn", "table"]);
-    const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, }, setColumnOrder, } = table;
+    const { getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { draggingBorderColor }, }, setColumnOrder, } = table;
     const { columnOrder } = getState();
     const { columnDef } = column;
     const { columnDefType } = columnDef;
@@ -3845,7 +3826,7 @@ 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.grey[500]}`
                         : (hoveredColumn === null || hoveredColumn === void 0 ? void 0 : hoveredColumn.id) === column.id
-                            ? `2px dashed ${getMRTTheme(table, theme).draggingBorderColor}`
+                            ? `2px dashed ${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',
@@ -3866,7 +3847,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
 
 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, }, } = table;
+    const { getAllColumns, getAllLeafColumns, getCenterLeafColumns, getIsAllColumnsVisible, getIsSomeColumnsPinned, getIsSomeColumnsVisible, getLeftLeafColumns, getRightLeafColumns, getState, options: { enableColumnOrdering, enableColumnPinning, enableHiding, localization, mrtTheme: { menuBackgroundColor }, }, } = table;
     const { columnOrder, columnPinning, density } = getState();
     const handleToggleAllColumns = (value) => {
         getAllLeafColumns()
@@ -3894,8 +3875,6 @@ const MRT_ShowHideColumnsMenu = (_a) => {
     ]);
     const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
     const [hoveredColumn, setHoveredColumn] = useState(null);
-    const theme = useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsxs(Menu, Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
@@ -4082,7 +4061,7 @@ const MRT_TopToolbar = ({ table, }) => {
 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 { getState, options: { enableBottomToolbar, enableTopToolbar, mrtTheme: { baseBackgroundColor }, muiTablePaperProps, renderBottomToolbar, renderTopToolbar, }, refs: { tablePaperRef }, } = table;
     const { isFullScreen } = getState();
     const paperProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiTablePaperProps, { table })), rest);
     return (jsxs(Paper, Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
@@ -4106,7 +4085,7 @@ const MRT_TablePaper = (_a) => {
                 width: '100vw',
                 zIndex: 999,
             }
-            : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.sx, theme))), children: [enableTopToolbar &&
+            : {})), paperProps === null || paperProps === void 0 ? void 0 : paperProps.style), sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, backgroundImage: 'unset', overflow: 'hidden', transition: 'all 100ms ease-in-out' }, parseFromValuesOrFunc(paperProps === null || paperProps === void 0 ? void 0 : paperProps.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 })))] })));
 };
@@ -4123,5 +4102,5 @@ const MaterialReactTable = (props) => {
     return jsx(MRT_TablePaper, { table: table });
 };
 
-export { MRT_ActionMenuItem, 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, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsFirstColumn, getIsFirstRightPinnedColumn, getIsLastColumn, getIsLastLeftPinnedColumn, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getTotalRight, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
+export { MRT_ActionMenuItem, 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, createMRTColumnHelper, createRow, defaultDisplayColumnProps, flexRender, getAllLeafColumnDefs, getCanRankRows, getColumnId, getDefaultColumnFilterFn, getDefaultColumnOrderIds, getIsRankingRows, getIsRowSelected, getLeadingDisplayColumnIds, getMRT_RowSelectionHandler, getMRT_Rows, getMRT_SelectAllHandler, getTrailingDisplayColumnIds, isCellEditable, mrtFilterOptions, openEditingCell, prepareColumns, rankGlobalFuzzy, reorderColumn, showRowActionsColumn, showRowDragColumn, showRowExpandColumn, showRowNumbersColumn, showRowPinningColumn, showRowSelectionColumn, showRowSpacerColumn, useMRT_ColumnVirtualizer, useMRT_Effects, useMRT_RowVirtualizer, useMRT_Rows, useMRT_TableInstance, useMRT_TableOptions, useMaterialReactTable };
 //# sourceMappingURL=index.esm.js.map