material-react-table 2.11.2 → 2.11.3

package/dist/index.js

@@ -259,32 +259,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 = reactTable.flexRender;
 function createMRTColumnHelper() {
@@ -551,9 +525,9 @@ const getMRT_RowSelectionHandler = ({ row, staticRowIndex = 0, table, }) => (eve
         });
     }
 };
-const getMRT_SelectAllHandler = ({ table }) => (event, value) => {
+const getMRT_SelectAllHandler = ({ table }) => (event, value, forceAll) => {
     const { options: { enableRowPinning, rowPinningDisplayMode, selectAllMode }, refs: { lastSelectedRowId }, } = table;
-    selectAllMode === 'all'
+    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'))) {
@@ -729,15 +703,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'
-        ? styles.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'
-            ? styles.darken(theme.palette.warning.dark, 0.25)
-            : styles.lighten(theme.palette.warning.light, 0.5), menuBackgroundColor: styles.lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: styles.alpha(theme.palette.primary.main, 0.1), selectedRowBackgroundColor: styles.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'
+        ? styles.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'
+            ? styles.darken(muiTheme.palette.warning.dark, 0.25)
+            : styles.lighten(muiTheme.palette.warning.light, 0.5), menuBackgroundColor: styles.lighten(baseBackgroundColor, 0.07), pinnedRowBackgroundColor: styles.alpha(muiTheme.palette.primary.main, 0.1), selectedRowBackgroundColor: styles.alpha(muiTheme.palette.primary.main, 0.2) }, mrtThemeOverrides);
 };
 const commonCellBeforeAfterStyles = {
     content: '""',
@@ -749,13 +723,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: styles.alpha(styles.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 ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
-                        : getIsFirstRightPinnedColumn(column)
+                        : isPinned === 'right' && column.getIsFirstColumn(isPinned)
                             ? `4px 0 4px -4px ${styles.alpha(theme.palette.grey[700], 0.5)} inset`
                             : undefined
                     : undefined }, commonCellBeforeAfterStyles),
@@ -785,7 +760,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'
@@ -802,9 +777,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',
@@ -840,10 +815,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 = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
@@ -1120,6 +1093,7 @@ const MRT_SelectCheckbox = (_a) => {
         ? parseFromValuesOrFunc(muiSelectAllCheckboxProps, { table })
         : parseFromValuesOrFunc(muiSelectCheckboxProps, {
             row,
+            staticRowIndex,
             table,
         }))), rest);
     const onSelectionChange = row
@@ -1138,7 +1112,7 @@ const MRT_SelectCheckbox = (_a) => {
                 : localization.toggleSelectRow,
         }, onChange: (event) => {
             event.stopPropagation();
-            row ? onSelectionChange(event) : onSelectAllChange(event);
+            selectAll ? onSelectAllChange(event) : onSelectionChange(event);
         }, size: (density === 'compact' ? 'small' : 'medium') }, checkboxProps), { onClick: (e) => {
             var _a;
             e.stopPropagation();
@@ -1316,10 +1290,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 = styles.useTheme();
     icons = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Default_Icons), icons)), [icons]);
     localization = react.useMemo(() => (Object.assign(Object.assign({}, MRT_Localization_EN), localization)), [localization]);
+    mrtTheme = react.useMemo(() => getMRTTheme(mrtTheme, theme), [mrtTheme, theme]);
     aggregationFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_AggregationFns), aggregationFns)), []);
     filterFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_FilterFns), filterFns)), []);
     sortingFns = react.useMemo(() => (Object.assign(Object.assign({}, MRT_SortingFns), sortingFns)), []);
@@ -1404,6 +1379,7 @@ const useMRT_TableOptions = (_a) => {
         manualGrouping,
         manualPagination,
         manualSorting,
+        mrtTheme,
         paginationDisplayMode,
         positionActionsColumn,
         positionCreatingRow,
@@ -1820,7 +1796,7 @@ const useMRT_Rows = (table) => {
 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();
@@ -1864,7 +1840,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 = (jsxRuntime.jsx("span", { "aria-label": renderedCellValue, role: "note", children: (_c = chunks === null || chunks === void 0 ? void 0 : chunks.map(({ key, match, text }) => (jsxRuntime.jsx(Box__default["default"], { "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
@@ -2016,7 +1992,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 = styles.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;
@@ -2029,7 +2005,6 @@ const MRT_TableBodyCell = (_a) => {
         row,
         table,
     });
-    const { draggingBorderColor } = getMRTTheme(table, theme);
     const [skeletonWidth, setSkeletonWidth] = react.useState(100);
     react.useEffect(() => {
         if ((!isLoading && !showSkeletons) || skeletonWidth !== 100)
@@ -2044,8 +2019,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';
@@ -2177,7 +2152,7 @@ const Memo_MRT_TableBodyCell = react.memo(MRT_TableBodyCell, (prev, next) => nex
 
 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,
@@ -2202,9 +2177,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: jsxRuntime.jsx(TableCell__default["default"], 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: jsxRuntime.jsx(TableCell__default["default"], 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) : (jsxRuntime.jsx(Collapse__default["default"], { in: row.getIsExpanded(), mountOnEnter: true, unmountOnExit: true, children: DetailPanel })) })) })));
 };
@@ -2213,7 +2186,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 = styles.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 : {};
@@ -2253,7 +2226,6 @@ const MRT_TableBodyRow = (_a) => {
         }
     };
     const rowRef = react.useRef(null);
-    const { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor, } = getMRTTheme(table, theme);
     const cellHighlightColor = isRowSelected
         ? selectedRowBackgroundColor
         : isRowPinned
@@ -2430,7 +2402,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' &&
@@ -2442,7 +2414,7 @@ const MRT_TableFooterRow = (_a) => {
         footerGroup,
         table,
     })), rest);
-    return (jsxRuntime.jsxs(TableRow__default["default"], 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 ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
+    return (jsxRuntime.jsxs(TableRow__default["default"], 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 ? (jsxRuntime.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
@@ -2567,7 +2539,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 : {};
@@ -2650,8 +2622,6 @@ const MRT_FilterOptionMenu = (_a) => {
         onSelect === null || onSelect === void 0 ? void 0 : onSelect();
     };
     const filterOption = !!header && columnDef ? columnDef._filterFn : globalFilterFn;
-    const theme = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
@@ -2679,7 +2649,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();
@@ -2791,8 +2761,6 @@ const MRT_ColumnActionMenu = (_a) => {
             ]
             : []),
     ].filter(Boolean);
-    const theme = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsxRuntime.jsx(Menu__default["default"], Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
@@ -3360,7 +3328,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 = styles.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;
@@ -3369,7 +3337,6 @@ const MRT_TableHeadCell = (_a) => {
         column,
         table,
     })), rest);
-    const { draggingBorderColor } = getMRTTheme(table, theme);
     const isColumnPinned = enableColumnPinning &&
         columnDef.columnDefType !== 'group' &&
         column.getIsPinned();
@@ -3512,13 +3479,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 (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: getMRTTheme(table, theme).baseBackgroundColor, boxShadow: `4px 0 8px ${styles.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 (jsxRuntime.jsxs(TableRow__default["default"], Object.assign({}, tableRowProps, { sx: (theme) => (Object.assign({ backgroundColor: baseBackgroundColor, boxShadow: `4px 0 8px ${styles.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 ? (jsxRuntime.jsx("th", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
                 let header = headerOrVirtualHeader;
@@ -3546,7 +3513,7 @@ const MRT_ToolbarAlertBanner = (_a) => {
     const selectedRowCount = react.useMemo(() => manualPagination
         ? Object.values(rowSelection).filter(Boolean).length
         : getFilteredSelectedRowModel().rows.length, [rowSelection, totalRowCount, manualPagination]);
-    const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { 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()), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
+    const selectedAlert = selectedRowCount > 0 ? (jsxRuntime.jsxs(Stack__default["default"], { 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()), jsxRuntime.jsx(Button__default["default"], { onClick: (event) => getMRT_SelectAllHandler({ table })(event, false, true), size: "small", sx: { p: '2px' }, children: localization.clearSelection })] })) : null;
     const groupedAlert = grouping.length > 0 ? (jsxRuntime.jsxs("span", { children: [localization.groupedBy, ' ', grouping.map((columnId, index) => (jsxRuntime.jsxs(react.Fragment, { children: [index > 0 ? localization.thenBy : '', jsxRuntime.jsx(Chip__default["default"], Object.assign({ label: table.getColumn(columnId).columnDef.header, onDelete: () => table.getColumn(columnId).toggleGrouping() }, chipProps))] }, `${index}-${columnId}`)))] })) : null;
     return (jsxRuntime.jsx(Collapse__default["default"], { in: showAlertBanner || !!selectedAlert || !!groupedAlert, timeout: stackAlertBanner ? 200 : 0, children: jsxRuntime.jsx(Alert__default["default"], Object.assign({ color: "info", icon: false }, alertProps, { sx: (theme) => {
                 var _a, _b;
@@ -3624,11 +3591,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 (jsxRuntime.jsx(Box__default["default"], { sx: (theme) => ({
+    return (jsxRuntime.jsx(Box__default["default"], { sx: {
             alignItems: 'center',
-            backgroundColor: styles.alpha(getMRTTheme(table, theme).baseBackgroundColor, 0.5),
+            backgroundColor: styles.alpha(baseBackgroundColor, 0.5),
             bottom: 0,
             display: 'flex',
             justifyContent: 'center',
@@ -3639,20 +3606,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 : (jsxRuntime.jsx(CircularProgress__default["default"], 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 : (jsxRuntime.jsx(CircularProgress__default["default"], 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 = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     const handleClose = (event) => {
         event === null || event === void 0 ? void 0 : event.stopPropagation();
         table.setActionCell(null);
@@ -3904,7 +3869,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;
@@ -3951,7 +3916,7 @@ const MRT_ShowHideColumnsMenuItems = (_a) => {
     return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(MenuItem__default["default"], 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: jsxRuntime.jsxs(Box__default["default"], { sx: {
                         display: 'flex',
                         flexWrap: 'nowrap',
@@ -3972,7 +3937,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()
@@ -4000,8 +3965,6 @@ const MRT_ShowHideColumnsMenu = (_a) => {
     ]);
     const isNestedColumns = allColumns.some((col) => col.columnDef.columnDefType === 'group');
     const [hoveredColumn, setHoveredColumn] = react.useState(null);
-    const theme = styles.useTheme();
-    const { menuBackgroundColor } = getMRTTheme(table, theme);
     return (jsxRuntime.jsxs(Menu__default["default"], Object.assign({ MenuListProps: {
             dense: density === 'compact',
             sx: {
@@ -4188,7 +4151,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 (jsxRuntime.jsxs(Paper__default["default"], Object.assign({ elevation: 2 }, paperProps, { ref: (ref) => {
@@ -4212,7 +4175,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 : (jsxRuntime.jsx(MRT_TopToolbar, { table: table }))), jsxRuntime.jsx(MRT_TableContainer, { table: table }), enableBottomToolbar &&
                 ((_c = parseFromValuesOrFunc(renderBottomToolbar, { table })) !== null && _c !== void 0 ? _c : (jsxRuntime.jsx(MRT_BottomToolbar, { table: table })))] })));
 };
@@ -4304,17 +4267,12 @@ exports.getCanRankRows = getCanRankRows;
 exports.getColumnId = getColumnId;
 exports.getDefaultColumnFilterFn = getDefaultColumnFilterFn;
 exports.getDefaultColumnOrderIds = getDefaultColumnOrderIds;
-exports.getIsFirstColumn = getIsFirstColumn;
-exports.getIsFirstRightPinnedColumn = getIsFirstRightPinnedColumn;
-exports.getIsLastColumn = getIsLastColumn;
-exports.getIsLastLeftPinnedColumn = getIsLastLeftPinnedColumn;
 exports.getIsRankingRows = getIsRankingRows;
 exports.getIsRowSelected = getIsRowSelected;
 exports.getLeadingDisplayColumnIds = getLeadingDisplayColumnIds;
 exports.getMRT_RowSelectionHandler = getMRT_RowSelectionHandler;
 exports.getMRT_Rows = getMRT_Rows;
 exports.getMRT_SelectAllHandler = getMRT_SelectAllHandler;
-exports.getTotalRight = getTotalRight;
 exports.getTrailingDisplayColumnIds = getTrailingDisplayColumnIds;
 exports.isCellEditable = isCellEditable;
 exports.mrtFilterOptions = mrtFilterOptions;