fix a bunch of CSS bugs

apps/material-react-table-docs/components/mdx/SourceCodeSnippet.tsx

@@ -237,6 +237,7 @@ export const SourceCodeSnippet = ({
                     variant="standard"
                   />
                   <Select
+                    MenuProps={{ disableScrollLock: true }}
                     value={isLightTheme ? 'light' : 'dark'}
                     onChange={(e) => {
                       setIsLightTheme(e.target.value === 'light');

apps/material-react-table-docs/components/navigation/TopBar.tsx

@@ -153,6 +153,7 @@ export const TopBar = ({ navOpen, setNavOpen }: Props) => {
             >
               <Select
                 onOpen={() => plausible('version-select')}
+                MenuProps={{ disableScrollLock: true }}
                 value="v2"
                 size="small"
                 sx={{ m: '8px', height: '30px' }}

apps/material-react-table-docs/pages/docs/guides/data-columns.mdx

@@ -248,24 +248,30 @@ const columns = [
   {
     accessorKey: 'id',
     header: 'ID',
-    //right align the header and body cells
+    //right align the header, body, and footer cells each individually
     muiTableHeadCellProps: {
       align: 'right',
     },
     muiTableBodyCellProps: {
       align: 'right',
     },
+    muiTableFooterCellProps: {
+      align: 'right',
+    },
   },
   {
     accessorKey: 'username',
     header: 'Username',
-    //center align the header and body cells
+    //center align the header, body, and footer cells each individually
     muiTableHeadCellProps: {
       align: 'center',
     },
     muiTableBodyCellProps: {
       align: 'center',
     },
+    muiTableFooterCellProps: {
+      align: 'center',
+    },
   },
 ];
 ```

apps/material-react-table-docs/styles/globals.css

@@ -1,16 +1,26 @@
-html,
 body {
   background-color: #111;
   padding: 0;
   margin: 0;
-  font-family: 'Open Sans', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto,
-    Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
+  font-family:
+    'Open Sans',
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    Fira Sans,
+    Droid Sans,
+    Helvetica Neue,
+    sans-serif;
   scroll-behavior: smooth;
   scroll-padding-top: 5rem;
   overflow-y: overlay;
   overflow-x: hidden;
 }
- 
+
 a {
   color: inherit;
   text-decoration: none;
@@ -26,13 +36,13 @@ a {
 
 ::-webkit-scrollbar {
   right: 0;
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
 }
 
 ::-webkit-scrollbar-thumb {
   background-color: #999;
   border-radius: 8px;
-  width: 12px;
-  height: 12px;
+  width: 10px;
+  height: 10px;
 }

packages/material-react-table/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.9.1",
+  "version": "2.9.2",
   "license": "MIT",
   "name": "material-react-table",
   "description": "A fully featured Material UI V5 implementation of TanStack React Table V8, written from the ground up in TypeScript.",

packages/material-react-table/src/components/body/MRT_TableBodyCell.tsx

@@ -241,9 +241,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         alignItems: layoutMode?.startsWith('grid') ? 'center' : undefined,
         cursor:
           isEditable && editDisplayMode === 'cell' ? 'pointer' : 'inherit',
-        justifyContent: layoutMode?.startsWith('grid')
-          ? tableCellProps.align
-          : undefined,
         overflow: 'hidden',
         p:
           density === 'compact'
@@ -260,8 +257,6 @@ export const MRT_TableBodyCell = <TData extends MRT_RowData>({
         textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         whiteSpace:
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
-        zIndex:
-          draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
         ...getCommonMRTCellStyles({
           column,
           table,

packages/material-react-table/src/components/body/MRT_TableBodyRow.tsx

@@ -21,9 +21,9 @@ import {
 } from '../../types';
 import { getIsRowSelected } from '../../utils/row.utils';
 import {
+  commonCellBeforeAfterStyles,
   getCommonPinnedCellStyles,
   getMRTTheme,
-  pinnedBeforeAfterStyles,
 } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
@@ -176,13 +176,11 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           ...tableRowProps?.style,
         }}
         sx={(theme: Theme) => ({
-          '&:hover td': {
-            '&:after': {
-              backgroundColor: cellHighlightColorHover
-                ? alpha(cellHighlightColorHover, 0.3)
-                : undefined,
-              ...pinnedBeforeAfterStyles,
-            },
+          '&:hover td:after': {
+            backgroundColor: cellHighlightColorHover
+              ? alpha(cellHighlightColorHover, 0.3)
+              : undefined,
+            ...commonCellBeforeAfterStyles,
           },
           backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
@@ -199,11 +197,11 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             ? 'absolute'
             : rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 'sticky'
-              : undefined,
+              : 'relative',
           td: {
             '&:after': {
               backgroundColor: cellHighlightColor,
-              ...pinnedBeforeAfterStyles,
+              ...commonCellBeforeAfterStyles,
             },
             ...getCommonPinnedCellStyles({ table, theme }),
           },
@@ -218,9 +216,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
           zIndex:
-            rowPinningDisplayMode?.includes('sticky') && isRowPinned
-              ? 2
-              : undefined,
+            rowPinningDisplayMode?.includes('sticky') && isRowPinned ? 2 : 0,
           ...(sx as any),
         })}
       >

packages/material-react-table/src/components/footer/MRT_TableFooterCell.tsx

@@ -23,7 +23,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   const theme = useTheme();
   const {
     getState,
-    options: { enableColumnPinning, layoutMode, muiTableFooterCellProps },
+    options: { enableColumnPinning, muiTableFooterCellProps },
   } = table;
   const { density } = getState();
   const { column } = footer;
@@ -57,19 +57,17 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       variant="footer"
       {...tableCellProps}
       sx={(theme) => ({
-        display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
         fontWeight: 'bold',
-        justifyContent: columnDefType === 'group' ? 'center' : undefined,
         p:
           density === 'compact'
             ? '0.5rem'
             : density === 'comfortable'
               ? '1rem'
               : '1.5rem',
         verticalAlign: 'top',
-        zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
         ...getCommonMRTCellStyles({
           column,
+          header: footer,
           table,
           tableCellProps,
           theme,

packages/material-react-table/src/components/head/MRT_TableHeadCell.tsx

@@ -197,12 +197,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
               : '1.25rem',
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'top',
-        zIndex:
-          column.getIsResizing() || draggingColumn?.id === column.id
-            ? 3
-            : column.getIsPinned() && columnDefType !== 'group'
-              ? 2
-              : 1,
         ...getCommonMRTCellStyles({
           column,
           header,

packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx

@@ -25,7 +25,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   ...rest
 }: Props<TData>) => {
   const {
-    options: { layoutMode, muiTableHeadRowProps },
+    options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
   } = table;
 
   const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
@@ -46,6 +46,10 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
         backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+        position:
+          enableStickyHeader && layoutMode === 'semantic'
+            ? 'sticky'
+            : 'relative',
         top: 0,
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}

packages/material-react-table/src/components/inputs/MRT_EditCellTextField.tsx

@@ -148,8 +148,11 @@ export const MRT_EditCellTextField = <TData extends MRT_RowData>({
           ) as any),
         }),
       }}
+      SelectProps={{
+        MenuProps: { disableScrollLock: true },
+      }}
       inputProps={{
-        autoComplete: 'new-password', // disable autocomplete and autofill
+        autoComplete: 'new-password', //disable autocomplete and autofill
         ...textFieldProps.inputProps,
       }}
       onBlur={handleBlur}

packages/material-react-table/src/components/inputs/MRT_FilterTextField.tsx

@@ -468,6 +468,7 @@ export const MRT_FilterTextField = <TData extends MRT_RowData>({
           select={isSelectFilter || isMultiSelectFilter}
           {...commonTextFieldProps}
           SelectProps={{
+            MenuProps: { disableScrollLock: true },
             displayEmpty: true,
             multiple: isMultiSelectFilter,
             renderValue: isMultiSelectFilter

packages/material-react-table/src/components/menus/MRT_ColumnActionMenu.tsx

@@ -410,6 +410,7 @@ export const MRT_ColumnActionMenu = <TData extends MRT_RowData>({
         },
       }}
       anchorEl={anchorEl}
+      disableScrollLock
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       {...rest}

packages/material-react-table/src/components/menus/MRT_FilterOptionMenu.tsx

@@ -252,6 +252,7 @@ export const MRT_FilterOptionMenu = <TData extends MRT_RowData>({
       }}
       anchorEl={anchorEl}
       anchorOrigin={{ horizontal: 'right', vertical: 'center' }}
+      disableScrollLock
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       {...rest}

packages/material-react-table/src/components/menus/MRT_RowActionMenu.tsx

@@ -58,6 +58,7 @@ export const MRT_RowActionMenu = <TData extends MRT_RowData>({
         },
       }}
       anchorEl={anchorEl}
+      disableScrollLock
       onClick={(event) => event.stopPropagation()}
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}

packages/material-react-table/src/components/menus/MRT_ShowHideColumnsMenu.tsx

@@ -91,6 +91,7 @@ export const MRT_ShowHideColumnsMenu = <TData extends MRT_RowData>({
         },
       }}
       anchorEl={anchorEl}
+      disableScrollLock
       onClose={() => setAnchorEl(null)}
       open={!!anchorEl}
       {...rest}

packages/material-react-table/src/components/table/MRT_Table.tsx

@@ -67,6 +67,7 @@ export const MRT_Table = <TData extends MRT_RowData>({
       sx={(theme) => ({
         borderCollapse: 'separate',
         display: layoutMode?.startsWith('grid') ? 'grid' : undefined,
+        position: 'relative',
         ...(parseFromValuesOrFunc(tableProps?.sx, theme) as any),
       })}
     >

packages/material-react-table/src/components/toolbar/MRT_TablePagination.tsx

@@ -8,6 +8,7 @@ import Select, { type SelectProps } from '@mui/material/Select';
 import Tooltip from '@mui/material/Tooltip';
 import Typography from '@mui/material/Typography';
 import { useTheme } from '@mui/material/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { flipIconStyles, getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -33,6 +34,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   ...rest
 }: Props<TData>) => {
   const theme = useTheme();
+  const isMobile = useMediaQuery('(max-width: 720px)');
 
   const {
     getPrePaginationRowModel,
@@ -67,18 +69,22 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
   const lastRowIndex = Math.min(pageIndex * pageSize + pageSize, totalRowCount);
 
   const {
-    SelectProps,
+    SelectProps = {},
     disabled = false,
     rowsPerPageOptions = defaultRowsPerPage,
     showFirstButton = showFirstLastPageButtons,
     showLastButton = showFirstLastPageButtons,
     showRowsPerPage = true,
-    ..._rest
+    ...restPaginationProps
   } = paginationProps ?? {};
 
   const disableBack = pageIndex <= 0 || disabled;
   const disableNext = lastRowIndex >= totalRowCount || disabled;
 
+  if (isMobile && SelectProps?.native !== false) {
+    SelectProps.native = true;
+  }
+
   const tooltipProps = getCommonTooltipProps();
 
   return (
@@ -109,10 +115,13 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
             {localization.rowsPerPage}
           </InputLabel>
           <Select
+            MenuProps={{ disableScrollLock: true }}
             disableUnderline
             disabled={disabled}
-            id="mrt-rows-per-page"
-            inputProps={{ 'aria-label': localization.rowsPerPage }}
+            inputProps={{
+              'aria-label': localization.rowsPerPage,
+              id: 'mrt-rows-per-page',
+            }}
             label={localization.rowsPerPage}
             onChange={(event) => setPageSize(+(event.target.value as any))}
             sx={{ mb: 0 }}
@@ -159,7 +168,7 @@ export const MRT_TablePagination = <TData extends MRT_RowData>({
           )}
           showFirstButton={showFirstButton}
           showLastButton={showLastButton}
-          {..._rest}
+          {...restPaginationProps}
         />
       ) : paginationDisplayMode === 'default' ? (
         <>