material-react-table 2.9.1 → 2.9.2

package/dist/index.esm.js

@@ -500,7 +500,7 @@ const getMRTTheme = (table, theme) => {
             ? 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 pinnedBeforeAfterStyles = {
+const commonCellBeforeAfterStyles = {
     content: '""',
     height: '100%',
     left: 0,
@@ -519,14 +519,16 @@ const getCommonPinnedCellStyles = ({ column, table, theme, }) => {
                         : getIsFirstRightPinnedColumn(column)
                             ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
                             : undefined
-                    : undefined }, pinnedBeforeAfterStyles),
+                    : undefined }, commonCellBeforeAfterStyles),
         },
     };
 };
 const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme, }) => {
     var _a, _b, _c, _d, _e, _f;
-    const { options: { enableColumnVirtualization, layoutMode }, } = table;
+    const { getState, options: { enableColumnVirtualization, layoutMode }, } = table;
+    const { draggingColumn } = getState();
     const { columnDef } = column;
+    const { columnDefType } = columnDef;
     const isColumnPinned = columnDef.columnDefType !== 'group' && column.getIsPinned();
     const widthStyles = {
         minWidth: `max(calc(var(--${header ? 'header' : 'col'}-${parseCSSVarId((_a = header === null || header === void 0 ? void 0 : header.id) !== null && _a !== void 0 ? _a : column.id)}-size) * 1px), ${(_b = columnDef.minSize) !== null && _b !== void 0 ? _b : 30}px)`,
@@ -545,13 +547,21 @@ const getCommonMRTCellStyles = ({ column, header, table, tableCellProps, theme,
                 ? `${column.getStart('left')}px`
                 : undefined, opacity: 0.97, position: 'sticky', right: isColumnPinned === 'right'
                 ? `${getTotalRight(table, column)}px`
-                : undefined, zIndex: 1 }) : {};
-    return Object.assign(Object.assign(Object.assign({ backgroundColor: 'inherit', backgroundImage: 'inherit', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
+                : 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'
+            : (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
+                ? tableCellProps.align
+                : undefined, opacity: ((_e = table.getState().draggingColumn) === null || _e === void 0 ? void 0 : _e.id) === column.id ||
             ((_f = table.getState().hoveredColumn) === null || _f === void 0 ? void 0 : _f.id) === column.id
             ? 0.5
             : 1, position: 'relative', transition: enableColumnVirtualization
             ? 'none'
-            : `padding 150ms ease-in-out`, zIndex: 0 }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
+            : `padding 150ms ease-in-out`, zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
+            ? 2
+            : columnDefType !== 'group' && isColumnPinned
+                ? 1
+                : 0 }, pinnedStyles), widthStyles), parseFromValuesOrFunc(tableCellProps === null || tableCellProps === void 0 ? void 0 : tableCellProps.sx, theme));
 };
 const getCommonToolbarStyles = ({ table, theme, }) => ({
     alignItems: 'flex-start',
@@ -757,7 +767,7 @@ const MRT_FilterOptionMenu = (_a) => {
             sx: {
                 backgroundColor: menuBackgroundColor,
             },
-        }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
+        }, anchorEl: anchorEl, anchorOrigin: { horizontal: 'right', vertical: 'center' }, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_e = (header && column && columnDef
             ? (_d = (_c = columnDef.renderColumnFilterModeMenuItems) === null || _c === void 0 ? void 0 : _c.call(columnDef, {
                 column: column,
                 internalFilterOptions,
@@ -912,7 +922,7 @@ const MRT_ColumnActionMenu = (_a) => {
             sx: {
                 backgroundColor: menuBackgroundColor,
             },
-        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
+        }, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: (_l = (_k = (_j = columnDef.renderColumnActionsMenuItems) === null || _j === void 0 ? void 0 : _j.call(columnDef, {
             closeMenu: () => setAnchorEl(null),
             column,
             internalColumnMenuItems,
@@ -936,7 +946,7 @@ const MRT_RowActionMenu = (_a) => {
             sx: {
                 backgroundColor: menuBackgroundColor,
             },
-        }, anchorEl: anchorEl, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
+        }, anchorEl: anchorEl, disableScrollLock: true, onClick: (event) => event.stopPropagation(), onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [parseFromValuesOrFunc(enableEditing, row) &&
                 ['modal', 'row'].includes(editDisplayMode) && (jsx(MenuItem, { onClick: handleEdit, sx: commonMenuItemStyles, children: jsxs(Box, { sx: commonListItemStyles, children: [jsx(ListItemIcon, { children: jsx(EditIcon, {}) }), localization.edit] }) })), renderRowActionMenuItems === null || renderRowActionMenuItems === void 0 ? void 0 : renderRowActionMenuItems({
                 closeMenu: () => setAnchorEl(null),
                 row,
@@ -2131,7 +2141,9 @@ const MRT_EditCellTextField = (_a) => {
             : {})), textFieldProps.InputProps), { sx: (theme) => {
                 var _a;
                 return (Object.assign({ mb: 0 }, parseFromValuesOrFunc((_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.sx, theme)));
-            } }), inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
+            } }), SelectProps: {
+            MenuProps: { disableScrollLock: true },
+        }, inputProps: Object.assign({ autoComplete: 'new-password' }, textFieldProps.inputProps), onBlur: handleBlur, onChange: handleChange, onClick: (e) => {
             var _a;
             e.stopPropagation();
             (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps.onClick) === null || _a === void 0 ? void 0 : _a.call(textFieldProps, e);
@@ -2274,9 +2286,7 @@ const MRT_TableBodyCell = (_a) => {
                     : undefined,
                 outlineOffset: '-1px',
                 textOverflow: 'clip',
-            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', justifyContent: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid'))
-                ? tableCellProps.align
-                : undefined, overflow: 'hidden', p: density === 'compact'
+            }, alignItems: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'center' : undefined, cursor: isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit', overflow: 'hidden', p: density === 'compact'
                 ? columnDefType === 'display'
                     ? '0 0.5rem'
                     : '0.5rem'
@@ -2286,7 +2296,7 @@ const MRT_TableBodyCell = (_a) => {
                         : '1rem'
                     : columnDefType === 'display'
                         ? '1rem 1.25rem'
-                        : '1.5rem', textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal', zIndex: (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id ? 2 : column.getIsPinned() ? 1 : 0 }, getCommonMRTCellStyles({
+                        : '1.5rem', textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined, whiteSpace: row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal' }, getCommonMRTCellStyles({
             column,
             table,
             tableCellProps,
@@ -2403,25 +2413,21 @@ const MRT_TableBodyRow = ({ columnVirtualizer, numRows, pinnedRowIds, row, rowVi
                     }
                 }, selected: isRowSelected }, tableRowProps, { style: Object.assign({ transform: virtualRow
                         ? `translateY(${virtualRow.start}px)`
-                        : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td': {
-                        '&:after': Object.assign({ backgroundColor: cellHighlightColorHover
-                                ? alpha(cellHighlightColorHover, 0.3)
-                                : undefined }, pinnedBeforeAfterStyles),
-                    }, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
+                        : undefined }, tableRowProps === null || tableRowProps === void 0 ? void 0 : tableRowProps.style), sx: (theme) => (Object.assign({ '&:hover td:after': cellHighlightColorHover
+                        ? Object.assign({ backgroundColor: alpha(cellHighlightColorHover, 0.3) }, commonCellBeforeAfterStyles) : undefined, backgroundColor: `${baseBackgroundColor} !important`, bottom: !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
                         ? `${bottomPinnedIndex * rowHeight +
                             (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
                         : undefined, boxSizing: 'border-box', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'flex' : undefined, opacity: isRowPinned ? 0.97 : isDraggingRow || isHoveredRow ? 0.5 : 1, position: virtualRow
                         ? 'absolute'
                         : (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned
                             ? 'sticky'
-                            : undefined, td: Object.assign({ '&:after': Object.assign({ backgroundColor: cellHighlightColor }, pinnedBeforeAfterStyles) }, getCommonPinnedCellStyles({ table, theme })), top: virtualRow
+                            : 'relative', td: Object.assign({}, getCommonPinnedCellStyles({ table, theme })), 'td:after': cellHighlightColor
+                        ? Object.assign({ backgroundColor: cellHighlightColor }, commonCellBeforeAfterStyles) : undefined, top: virtualRow
                         ? 0
                         : topPinnedIndex !== undefined && isRowPinned
                             ? `${topPinnedIndex * rowHeight +
                                 (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
-                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned
-                        ? 2
-                        : undefined }, sx)), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
+                            : undefined, transition: virtualRow ? 'none' : 'all 150ms ease-in-out', width: '100%', zIndex: (rowPinningDisplayMode === null || rowPinningDisplayMode === void 0 ? void 0 : rowPinningDisplayMode.includes('sticky')) && isRowPinned ? 2 : 0 }, sx)), children: [virtualPaddingLeft ? (jsx("td", { style: { display: 'flex', width: virtualPaddingLeft } })) : null, (virtualColumns !== null && virtualColumns !== void 0 ? virtualColumns : visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
                         let cell = cellOrVirtualCell;
                         if (columnVirtualizer) {
                             staticColumnIndex = cellOrVirtualCell.index;
@@ -2531,7 +2537,7 @@ const MRT_TableFooterCell = (_a) => {
     var _b, _c, _d;
     var { footer, staticColumnIndex, table } = _a, rest = __rest(_a, ["footer", "staticColumnIndex", "table"]);
     const theme = useTheme();
-    const { getState, options: { enableColumnPinning, layoutMode, muiTableFooterCellProps }, } = table;
+    const { getState, options: { enableColumnPinning, muiTableFooterCellProps }, } = table;
     const { density } = getState();
     const { column } = footer;
     const { columnDef } = column;
@@ -2545,12 +2551,13 @@ const MRT_TableFooterCell = (_a) => {
             ? 'center'
             : theme.direction === 'rtl'
                 ? 'right'
-                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, fontWeight: 'bold', justifyContent: columnDefType === 'group' ? 'center' : undefined, p: density === 'compact'
+                : 'left', colSpan: footer.colSpan, "data-index": staticColumnIndex, "data-pinned": !!isColumnPinned || undefined, variant: "footer" }, tableCellProps, { sx: (theme) => (Object.assign(Object.assign({ fontWeight: 'bold', p: density === 'compact'
                 ? '0.5rem'
                 : density === 'comfortable'
                     ? '1rem'
-                    : '1.5rem', verticalAlign: 'top', zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1 }, getCommonMRTCellStyles({
+                    : '1.5rem', verticalAlign: 'top' }, getCommonMRTCellStyles({
             column,
+            header: footer,
             table,
             tableCellProps,
             theme,
@@ -2577,7 +2584,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, 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: 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) => {
                 let footer = footerOrVirtualFooter;
                 if (columnVirtualizer) {
                     staticColumnIndex = footerOrVirtualFooter
@@ -2606,7 +2613,7 @@ const MRT_TableFooter = (_a) => {
                 ? theme.palette.mode === 'light'
                     ? `1px solid ${theme.palette.grey[300]}`
                     : `1px solid ${theme.palette.grey[700]}`
-                : undefined, position: stickFooter ? 'sticky' : undefined, zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
+                : undefined, position: stickFooter ? 'sticky' : 'relative', zIndex: stickFooter ? 1 : undefined }, parseFromValuesOrFunc(tableFooterProps === null || tableFooterProps === void 0 ? void 0 : tableFooterProps.sx, theme))), children: getFooterGroups().map((footerGroup) => (jsx(MRT_TableFooterRow, { columnVirtualizer: columnVirtualizer, footerGroup: footerGroup, table: table }, footerGroup.id))) })));
 };
 
 const MRT_TableHeadCellColumnActionsButton = (_a) => {
@@ -2874,7 +2881,7 @@ const MRT_FilterTextField = (_a) => {
                 } }))) : isAutocompleteFilter ? (jsx(Autocomplete, Object.assign({ freeSolo: true, getOptionLabel: (option) => getValueAndLabel(option).label, onChange: (_e, newValue) => handleChange(getValueAndLabel(newValue).value), options: (_t = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.map((option) => getValueAndLabel(option))) !== null && _t !== void 0 ? _t : [] }, autocompleteProps, { renderInput: (builtinTextFieldProps) => {
                     var _a;
                     return (jsx(TextField, Object.assign({}, builtinTextFieldProps, commonTextFieldProps, { InputProps: Object.assign(Object.assign({}, builtinTextFieldProps.InputProps), { startAdornment: (_a = commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.InputProps) === null || _a === void 0 ? void 0 : _a.startAdornment }), inputProps: Object.assign(Object.assign({}, builtinTextFieldProps.inputProps), commonTextFieldProps === null || commonTextFieldProps === void 0 ? void 0 : commonTextFieldProps.inputProps), onChange: handleTextFieldChange, onClick: (e) => e.stopPropagation() })));
-                }, value: filterValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
+                }, value: filterValue }))) : (jsx(TextField, Object.assign({ select: isSelectFilter || isMultiSelectFilter }, commonTextFieldProps, { SelectProps: Object.assign({ MenuProps: { disableScrollLock: true }, displayEmpty: true, multiple: isMultiSelectFilter, renderValue: isMultiSelectFilter
                         ? (selected) => !(selected === null || selected === void 0 ? void 0 : selected.length) ? (jsx(Box, { sx: { opacity: 0.5 }, children: filterPlaceholder })) : (jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: '2px' }, children: selected === null || selected === void 0 ? void 0 : selected.map((value) => {
                                 const selectedValue = dropdownOptions === null || dropdownOptions === void 0 ? void 0 : dropdownOptions.find((option) => getValueAndLabel(option).value === value);
                                 return (jsx(Chip, { label: getValueAndLabel(selectedValue).label }, value));
@@ -3251,11 +3258,7 @@ const MRT_TableHeadCell = (_a) => {
                 ? '0.25rem'
                 : density === 'comfortable'
                     ? '.75rem'
-                    : '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top', zIndex: column.getIsResizing() || (draggingColumn === null || draggingColumn === void 0 ? void 0 : draggingColumn.id) === column.id
-                ? 3
-                : column.getIsPinned() && columnDefType !== 'group'
-                    ? 2
-                    : 1 }, getCommonMRTCellStyles({
+                    : '1.25rem', userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined, verticalAlign: 'top' }, getCommonMRTCellStyles({
             column,
             header,
             table,
@@ -3305,13 +3308,15 @@ const MRT_TableHeadCell = (_a) => {
 
 const MRT_TableHeadRow = (_a) => {
     var { columnVirtualizer, headerGroup, table } = _a, rest = __rest(_a, ["columnVirtualizer", "headerGroup", "table"]);
-    const { options: { layoutMode, muiTableHeadRowProps }, } = table;
+    const { options: { enableStickyHeader, layoutMode, 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, 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) => {
+    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'
+                ? '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;
                 if (columnVirtualizer) {
                     staticColumnIndex = headerOrVirtualHeader
@@ -3408,7 +3413,7 @@ const MRT_Table = (_a) => {
         columnVirtualizer,
         table,
     };
-    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [!!Caption && jsx("caption", { children: Caption }), enableTableHead && jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
+    return (jsxs(Table, Object.assign({ stickyHeader: enableStickyHeader || isFullScreen }, tableProps, { style: Object.assign(Object.assign({}, columnSizeVars), tableProps === null || tableProps === void 0 ? void 0 : tableProps.style), sx: (theme) => (Object.assign({ borderCollapse: 'separate', display: (layoutMode === null || layoutMode === void 0 ? void 0 : layoutMode.startsWith('grid')) ? 'grid' : undefined, position: 'relative' }, parseFromValuesOrFunc(tableProps === null || tableProps === void 0 ? void 0 : tableProps.sx, theme))), children: [!!Caption && jsx("caption", { children: Caption }), enableTableHead && jsx(MRT_TableHead, Object.assign({}, commonTableGroupProps)), memoMode === 'table-body' || columnSizingInfo.isResizingColumn ? (jsx(Memo_MRT_TableBody, Object.assign({}, commonTableGroupProps))) : (jsx(MRT_TableBody, Object.assign({}, commonTableGroupProps))), enableTableFooter && jsx(MRT_TableFooter, Object.assign({}, commonTableGroupProps))] })));
 };
 
 const MRT_TableLoadingOverlay = (_a) => {
@@ -3529,6 +3534,7 @@ const defaultRowsPerPage = [5, 10, 15, 20, 25, 30, 50, 100];
 const MRT_TablePagination = (_a) => {
     var { position = 'bottom', table } = _a, rest = __rest(_a, ["position", "table"]);
     const theme = useTheme();
+    const isMobile = useMediaQuery('(max-width: 720px)');
     const { getPrePaginationRowModel, getState, options: { enableToolbarInternalActions, icons: { ChevronLeftIcon, ChevronRightIcon, FirstPageIcon, LastPageIcon }, localization, muiPaginationProps, paginationDisplayMode, rowCount, }, setPageIndex, setPageSize, } = table;
     const { pagination: { pageIndex = 0, pageSize = 10 }, showGlobalFilter, } = getState();
     const paginationProps = Object.assign(Object.assign({}, parseFromValuesOrFunc(muiPaginationProps, {
@@ -3539,9 +3545,12 @@ const MRT_TablePagination = (_a) => {
     const showFirstLastPageButtons = numberOfPages > 2;
     const firstRowIndex = pageIndex * pageSize;
     const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
-    const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { SelectProps, disabled = false, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, _rest = __rest(_b, ["SelectProps", "disabled", "rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
+    const _b = paginationProps !== null && paginationProps !== void 0 ? paginationProps : {}, { SelectProps = {}, disabled = false, rowsPerPageOptions = defaultRowsPerPage, showFirstButton = showFirstLastPageButtons, showLastButton = showFirstLastPageButtons, showRowsPerPage = true } = _b, restPaginationProps = __rest(_b, ["SelectProps", "disabled", "rowsPerPageOptions", "showFirstButton", "showLastButton", "showRowsPerPage"]);
     const disableBack = pageIndex <= 0 || disabled;
     const disableNext = lastRowIndex >= totalRowCount || disabled;
+    if (isMobile && (SelectProps === null || SelectProps === void 0 ? void 0 : SelectProps.native) !== false) {
+        SelectProps.native = true;
+    }
     const tooltipProps = getCommonTooltipProps();
     return (jsxs(Box, { className: "MuiTablePagination-root", sx: {
             alignItems: 'center',
@@ -3559,7 +3568,10 @@ const MRT_TablePagination = (_a) => {
             px: '8px',
             py: '12px',
             zIndex: 2,
-        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ disableUnderline: true, disabled: disabled, id: "mrt-rows-per-page", inputProps: { 'aria-label': localization.rowsPerPage }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
+        }, children: [showRowsPerPage && (jsxs(Box, { sx: { alignItems: 'center', display: 'flex', gap: '8px' }, children: [jsx(InputLabel, { htmlFor: "mrt-rows-per-page", sx: { mb: 0 }, children: localization.rowsPerPage }), jsx(Select, Object.assign({ MenuProps: { disableScrollLock: true }, disableUnderline: true, disabled: disabled, inputProps: {
+                            'aria-label': localization.rowsPerPage,
+                            id: 'mrt-rows-per-page',
+                        }, label: localization.rowsPerPage, onChange: (event) => setPageSize(+event.target.value), sx: { mb: 0 }, value: pageSize, variant: "standard" }, SelectProps, { children: rowsPerPageOptions.map((option) => {
                             var _a;
                             const value = typeof option !== 'number' ? option.value : option;
                             const label = typeof option !== 'number' ? option.label : `${option}`;
@@ -3569,7 +3581,7 @@ const MRT_TablePagination = (_a) => {
                         last: LastPageIcon,
                         next: ChevronRightIcon,
                         previous: ChevronLeftIcon,
-                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, _rest))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
+                    } }, item))), showFirstButton: showFirstButton, showLastButton: showLastButton }, restPaginationProps))) : paginationDisplayMode === 'default' ? (jsxs(Fragment, { children: [jsx(Typography, { align: "center", component: "span", sx: { m: '0 4px', minWidth: '8ch' }, variant: "body2", children: `${lastRowIndex === 0 ? 0 : (firstRowIndex + 1).toLocaleString()}-${lastRowIndex.toLocaleString()} ${localization.of} ${totalRowCount.toLocaleString()}` }), jsxs(Box, { gap: "xs", children: [showFirstButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToFirstPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToFirstPage, disabled: disableBack, onClick: () => setPageIndex(0), size: "small", children: jsx(FirstPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) }))), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToPreviousPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToPreviousPage, disabled: disableBack, onClick: () => setPageIndex(pageIndex - 1), size: "small", children: jsx(ChevronLeftIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToNextPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToNextPage, disabled: disableNext, onClick: () => setPageIndex(pageIndex + 1), size: "small", children: jsx(ChevronRightIcon, Object.assign({}, flipIconStyles(theme))) }) }) })), showLastButton && (jsx(Tooltip, Object.assign({}, tooltipProps, { title: localization.goToLastPage, children: jsx("span", { children: jsx(IconButton, { "aria-label": localization.goToLastPage, disabled: disableNext, onClick: () => setPageIndex(numberOfPages - 1), size: "small", children: jsx(LastPageIcon, Object.assign({}, flipIconStyles(theme))) }) }) })))] })] })) : null] }));
 };
 
 const MRT_ToolbarDropZone = (_a) => {
@@ -3742,7 +3754,7 @@ const MRT_ShowHideColumnsMenu = (_a) => {
             sx: {
                 backgroundColor: menuBackgroundColor,
             },
-        }, anchorEl: anchorEl, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [jsxs(Box, { sx: {
+        }, anchorEl: anchorEl, disableScrollLock: true, onClose: () => setAnchorEl(null), open: !!anchorEl }, rest, { children: [jsxs(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'space-between',
                     p: '0.5rem',