material-react-table 2.9.0 → 2.9.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.9.0",
+  "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.",
@@ -61,14 +61,14 @@
     "storybook:dev": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.7",
+    "@babel/core": "^7.23.9",
     "@babel/preset-react": "^7.23.3",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
-    "@faker-js/faker": "^8.3.1",
-    "@mui/icons-material": "^5.15.5",
-    "@mui/material": "^5.15.5",
-    "@mui/x-date-pickers": "^6.19.0",
+    "@faker-js/faker": "^8.4.0",
+    "@mui/icons-material": "^5.15.6",
+    "@mui/material": "^5.15.6",
+    "@mui/x-date-pickers": "^6.19.2",
     "@rollup/plugin-typescript": "^11.1.6",
     "@size-limit/preset-small-lib": "^11.0.2",
     "@storybook/addon-a11y": "^7.6.10",
@@ -80,11 +80,11 @@
     "@storybook/react": "^7.6.10",
     "@storybook/react-vite": "^7.6.10",
     "@storybook/testing-library": "^0.2.2",
-    "@types/node": "^20.11.5",
+    "@types/node": "^20.11.6",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "@typescript-eslint/eslint-plugin": "^6.19.0",
-    "@typescript-eslint/parser": "^6.19.0",
+    "@typescript-eslint/eslint-plugin": "^6.19.1",
+    "@typescript-eslint/parser": "^6.19.1",
     "@vitejs/plugin-react": "^4.2.1",
     "eslint": "^8.56.0",
     "eslint-plugin-mui-path-imports": "^0.0.15",
@@ -115,8 +115,8 @@
     "react-dom": ">=18.0"
   },
   "dependencies": {
-    "@tanstack/match-sorter-utils": "8.11.3",
-    "@tanstack/react-table": "8.11.6",
+    "@tanstack/match-sorter-utils": "8.11.7",
+    "@tanstack/react-table": "8.11.7",
     "@tanstack/react-virtual": "3.0.2",
     "highlight-words": "1.2.2"
   }

package/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,

package/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,14 +176,12 @@ 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': cellHighlightColorHover
+            ? {
+                backgroundColor: alpha(cellHighlightColorHover, 0.3),
+                ...commonCellBeforeAfterStyles,
+              }
+            : undefined,
           backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
             !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
@@ -199,14 +197,16 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
             ? 'absolute'
             : rowPinningDisplayMode?.includes('sticky') && isRowPinned
               ? 'sticky'
-              : undefined,
+              : 'relative',
           td: {
-            '&:after': {
-              backgroundColor: cellHighlightColor,
-              ...pinnedBeforeAfterStyles,
-            },
             ...getCommonPinnedCellStyles({ table, theme }),
           },
+          'td:after': cellHighlightColor
+            ? {
+                backgroundColor: cellHighlightColor,
+                ...commonCellBeforeAfterStyles,
+              }
+            : undefined,
           top: virtualRow
             ? 0
             : topPinnedIndex !== undefined && isRowPinned
@@ -218,9 +218,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),
         })}
       >

package/src/components/footer/MRT_TableFooter.tsx

@@ -54,7 +54,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
             ? `1px solid ${theme.palette.grey[300]}`
             : `1px solid ${theme.palette.grey[700]}`
           : undefined,
-        position: stickFooter ? 'sticky' : undefined,
+        position: stickFooter ? 'sticky' : 'relative',
         zIndex: stickFooter ? 1 : undefined,
         ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
       })}

package/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,9 +57,7 @@ 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'
@@ -67,9 +65,9 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
               ? '1rem'
               : '1.5rem',
         verticalAlign: 'top',
-        zIndex: column.getIsPinned() && columnDefType !== 'group' ? 2 : 1,
         ...getCommonMRTCellStyles({
           column,
+          header: footer,
           table,
           tableCellProps,
           theme,

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -55,6 +55,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
       sx={(theme) => ({
         backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+        position: 'relative',
         width: '100%',
         ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}

package/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,

package/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),
       })}

package/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}

package/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

package/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}

package/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}

package/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}

package/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}

package/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),
       })}
     >

package/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' ? (
         <>

package/src/hooks/useMRT_TableInstance.ts

@@ -1,16 +1,5 @@
 import { useMemo, useRef, useState } from 'react';
-import {
-  getCoreRowModel,
-  getExpandedRowModel,
-  getFacetedMinMaxValues,
-  getFacetedRowModel,
-  getFacetedUniqueValues,
-  getFilteredRowModel,
-  getGroupedRowModel,
-  getPaginationRowModel,
-  getSortedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
+import { useReactTable } from '@tanstack/react-table';
 import {
   type MRT_Cell,
   type MRT_Column,
@@ -207,36 +196,6 @@ export const useMRT_TableInstance = <TData extends MRT_RowData>(
 
   //@ts-ignore
   const table = useReactTable({
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel:
-      tableOptions.enableExpanding || tableOptions.enableGrouping
-        ? getExpandedRowModel()
-        : undefined,
-    getFacetedMinMaxValues: tableOptions.enableFacetedValues
-      ? getFacetedMinMaxValues()
-      : undefined,
-    getFacetedRowModel: tableOptions.enableFacetedValues
-      ? getFacetedRowModel()
-      : undefined,
-    getFacetedUniqueValues: tableOptions.enableFacetedValues
-      ? getFacetedUniqueValues()
-      : undefined,
-    getFilteredRowModel:
-      tableOptions.enableColumnFilters ||
-      tableOptions.enableGlobalFilter ||
-      tableOptions.enableFilters
-        ? getFilteredRowModel()
-        : undefined,
-    getGroupedRowModel: tableOptions.enableGrouping
-      ? getGroupedRowModel()
-      : undefined,
-    getPaginationRowModel: tableOptions.enablePagination
-      ? getPaginationRowModel()
-      : undefined,
-    getSortedRowModel: tableOptions.enableSorting
-      ? getSortedRowModel()
-      : undefined,
-    getSubRows: (row) => row?.subRows,
     onColumnOrderChange,
     onColumnSizingInfoChange,
     onGroupingChange,

package/src/hooks/useMRT_TableOptions.ts

@@ -1,4 +1,15 @@
 import { useMemo } from 'react';
+import {
+  getCoreRowModel,
+  getExpandedRowModel,
+  getFacetedMinMaxValues,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getGroupedRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+} from '@tanstack/react-table';
 import { useTheme } from '@mui/material/styles';
 import { MRT_AggregationFns } from '../fns/aggregationFns';
 import { MRT_FilterFns } from '../fns/filterFns';
@@ -55,6 +66,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
   enableDensityToggle = true,
   enableExpandAll = true,
   enableExpanding,
+  enableFacetedValues = false,
   enableFilterMatchHighlighting = true,
   enableFilters = true,
   enableFullScreenToggle = true,
@@ -178,6 +190,7 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableDensityToggle,
     enableExpandAll,
     enableExpanding,
+    enableFacetedValues,
     enableFilterMatchHighlighting,
     enableFilters,
     enableFullScreenToggle,
@@ -199,6 +212,26 @@ export const useMRT_TableOptions: <TData extends MRT_RowData>(
     enableToolbarInternalActions,
     enableTopToolbar,
     filterFns,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel:
+      enableExpanding || enableGrouping ? getExpandedRowModel() : undefined,
+    getFacetedMinMaxValues: enableFacetedValues
+      ? getFacetedMinMaxValues()
+      : undefined,
+    getFacetedRowModel: enableFacetedValues ? getFacetedRowModel() : undefined,
+    getFacetedUniqueValues: enableFacetedValues
+      ? getFacetedUniqueValues()
+      : undefined,
+    getFilteredRowModel:
+      enableColumnFilters || enableGlobalFilter || enableFilters
+        ? getFilteredRowModel()
+        : undefined,
+    getGroupedRowModel: enableGrouping ? getGroupedRowModel() : undefined,
+    getPaginationRowModel: enablePagination
+      ? getPaginationRowModel()
+      : undefined,
+    getSortedRowModel: enableSorting ? getSortedRowModel() : undefined,
+    getSubRows: (row) => row?.subRows,
     icons,
     layoutMode,
     localization,

package/src/utils/row.utils.ts

@@ -12,7 +12,10 @@ export const getIsRowSelected = <TData extends MRT_RowData>({
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }) => {
-  const { options: enableRowSelection } = table;
+  const {
+    options: { enableRowSelection },
+  } = table;
+
   return (
     row.getIsSelected() ||
     (parseFromValuesOrFunc(enableRowSelection, row) &&

package/src/utils/style.utils.ts

@@ -42,7 +42,7 @@ export const getMRTTheme = <TData extends MRT_RowData>(
   };
 };
 
-export const pinnedBeforeAfterStyles = {
+export const commonCellBeforeAfterStyles = {
   content: '""',
   height: '100%',
   left: 0,
@@ -79,7 +79,7 @@ export const getCommonPinnedCellStyles = <TData extends MRT_RowData>({
               ? `4px 0 4px -4px ${alpha(theme.palette.grey[700], 0.5)} inset`
               : undefined
           : undefined,
-        ...pinnedBeforeAfterStyles,
+        ...commonCellBeforeAfterStyles,
       },
     },
   };
@@ -99,9 +99,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
   theme: Theme;
 }) => {
   const {
+    getState,
     options: { enableColumnVirtualization, layoutMode },
   } = table;
+  const { draggingColumn } = getState();
   const { columnDef } = column;
+  const { columnDefType } = columnDef;
 
   const isColumnPinned =
     columnDef.columnDefType !== 'group' && column.getIsPinned();
@@ -140,7 +143,6 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
           isColumnPinned === 'right'
             ? `${getTotalRight(table, column)}px`
             : undefined,
-        zIndex: 1,
       }
     : {};
 
@@ -148,6 +150,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     backgroundColor: 'inherit',
     backgroundImage: 'inherit',
     display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+    justifyContent:
+      columnDefType === 'group'
+        ? 'center'
+        : layoutMode?.startsWith('grid')
+          ? tableCellProps.align
+          : undefined,
     opacity:
       table.getState().draggingColumn?.id === column.id ||
       table.getState().hoveredColumn?.id === column.id
@@ -157,7 +165,12 @@ export const getCommonMRTCellStyles = <TData extends MRT_RowData>({
     transition: enableColumnVirtualization
       ? 'none'
       : `padding 150ms ease-in-out`,
-    zIndex: 0,
+    zIndex:
+      column.getIsResizing() || draggingColumn?.id === column.id
+        ? 2
+        : columnDefType !== 'group' && isColumnPinned
+          ? 1
+          : 0,
     ...pinnedStyles,
     ...widthStyles,
     ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),