material-react-table 2.0.0-alpha.1 → 2.0.0-alpha.3

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,8 +1,8 @@
 import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
+import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import CircularProgress from '@mui/material/CircularProgress';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
@@ -23,8 +23,8 @@ export const MRT_EditActionButtons = <TData extends Record<string, any>>({
       localization,
       onCreatingRowCancel,
       onCreatingRowSave,
-      onEditingRowSave,
       onEditingRowCancel,
+      onEditingRowSave,
     },
     refs: { editInputRefs },
     setCreatingRow,
@@ -100,12 +100,12 @@ export const MRT_EditActionButtons = <TData extends Record<string, any>>({
         </>
       ) : (
         <>
-          <Button sx={{ minWidth: '100px' }} onClick={handleCancel}>
+          <Button onClick={handleCancel} sx={{ minWidth: '100px' }}>
             {localization.cancel}
           </Button>
           <Button
-            sx={{ minWidth: '100px' }}
             onClick={handleSubmitRow}
+            sx={{ minWidth: '100px' }}
             variant="contained"
           >
             {isSaving && <CircularProgress color="inherit" size={18} />}

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,7 +1,7 @@
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -11,9 +11,9 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
   table,
 }: Props<TData>) => {
   const {
+    getCanSomeRowsExpand,
     getIsAllRowsExpanded,
     getIsSomeRowsExpanded,
-    getCanSomeRowsExpand,
     getState,
     options: {
       icons: { KeyboardDoubleArrowDownIcon },
@@ -52,8 +52,8 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
           {...iconButtonProps}
           sx={(theme) => ({
             height: density === 'compact' ? '1.75rem' : '2.25rem',
-            width: density === 'compact' ? '1.75rem' : '2.25rem',
             mt: density !== 'compact' ? '-0.25rem' : undefined,
+            width: density === 'compact' ? '1.75rem' : '2.25rem',
             ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,8 +1,8 @@
 import { type MouseEvent } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   row: MRT_Row<TData>;

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,14 +1,14 @@
 import { type DragEventHandler } from 'react';
 import IconButton from '@mui/material/IconButton';
-import Tooltip from '@mui/material/Tooltip';
 import { type IconButtonProps } from '@mui/material/IconButton';
+import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   iconButtonProps?: IconButtonProps;
-  onDragStart: DragEventHandler<HTMLButtonElement>;
   onDragEnd: DragEventHandler<HTMLButtonElement>;
+  onDragStart: DragEventHandler<HTMLButtonElement>;
   table: MRT_TableInstance<TData>;
 }
 
@@ -42,21 +42,21 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
           e.stopPropagation();
           iconButtonProps?.onClick?.(e);
         }}
-        onDragStart={onDragStart}
         onDragEnd={onDragEnd}
+        onDragStart={onDragStart}
         sx={(theme) => ({
+          '&:active': {
+            cursor: 'grabbing',
+          },
+          '&:hover': {
+            backgroundColor: 'transparent',
+            opacity: 1,
+          },
           cursor: 'grab',
           m: '0 -0.1rem',
           opacity: 0.5,
           p: '2px',
           transition: 'all 150ms ease-in-out',
-          '&:hover': {
-            backgroundColor: 'transparent',
-            opacity: 1,
-          },
-          '&:active': {
-            cursor: 'grabbing',
-          },
           ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
         })}
         title={undefined}

package/src/buttons/MRT_RowPinButton.tsx

@@ -1,23 +1,23 @@
-import { useState, type MouseEvent } from 'react';
+import { type MouseEvent, useState } from 'react';
 import { type RowPinningPosition } from '@tanstack/react-table';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Row, type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
+  pinningPosition: RowPinningPosition;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
-  pinningPosition: RowPinningPosition;
 }
 
 export const MRT_RowPinButton = <TData extends Record<string, any>>({
+  pinningPosition,
   row,
   table,
-  pinningPosition,
 }: Props<TData>) => {
   const {
     options: {
-      icons: { PushPinIcon, CloseIcon },
+      icons: { CloseIcon, PushPinIcon },
       localization,
       rowPinningDisplayMode,
     },
@@ -36,9 +36,9 @@ export const MRT_RowPinButton = <TData extends Record<string, any>>({
   return (
     <Tooltip
       arrow
-      open={tooltipOpened}
       enterDelay={1000}
       enterNextDelay={1000}
+      open={tooltipOpened}
       title={isPinned ? localization.unpin : localization.pin}
     >
       <IconButton

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -20,7 +20,7 @@ export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
     },
   } = table;
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleClick = (event: MouseEvent<HTMLElement>) => {
     setAnchorEl(event.currentTarget);

package/src/buttons/MRT_ToggleFullScreenButton.tsx

@@ -1,8 +1,8 @@
+import { useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_TableInstance } from '../types';
-import { useState } from 'react';
 
 interface Props<TData extends Record<string, any>> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
@@ -31,8 +31,8 @@ export const MRT_ToggleFullScreenButton = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      open={tooltipOpened}
       arrow
+      open={tooltipOpened}
       title={rest?.title ?? localization.toggleFullScreen}
     >
       <IconButton

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,20 +1,20 @@
 import { type MouseEvent, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
-import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
+import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
 
 const commonIconButtonStyles = {
+  '&:hover': {
+    opacity: 1,
+  },
   height: '2rem',
   ml: '10px',
   opacity: 0.5,
   transition: 'opacity 150ms',
   width: '2rem',
-  '&:hover': {
-    opacity: 1,
-  },
 };
 
 interface Props<TData extends Record<string, any>> {
@@ -53,7 +53,7 @@ export const MRT_ToggleRowActionMenuButton = <
     (isCreating && createDisplayMode === 'row') ||
     (isEditing && editDisplayMode === 'row');
 
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
   const handleOpenRowActionMenu = (event: MouseEvent<HTMLElement>) => {
     event.stopPropagation();
@@ -75,11 +75,11 @@ export const MRT_ToggleRowActionMenuButton = <
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
         parseFromValuesOrFunc(enableEditing, row) ? (
-        <Tooltip placement="right" arrow title={localization.edit}>
+        <Tooltip arrow placement="right" title={localization.edit}>
           <IconButton
             aria-label={localization.edit}
-            sx={commonIconButtonStyles}
             onClick={handleStartEditMode}
+            sx={commonIconButtonStyles}
           >
             <EditIcon />
           </IconButton>

package/src/column.utils.ts

@@ -1,18 +1,17 @@
 import { type ReactNode } from 'react';
 import {
-  type Row,
-  type Renderable,
-  flexRender as _flexRender,
   createRow as _createRow,
+  flexRender as _flexRender,
+  type Renderable,
+  type Row,
 } from '@tanstack/react-table';
+import { type TableCellProps } from '@mui/material/TableCell';
 import { alpha, lighten } from '@mui/material/styles';
+import { type Theme } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
-import { type TableCellProps } from '@mui/material/TableCell';
-import { type Theme } from '@mui/material/styles';
 import {
-  type MRT_TableOptions,
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
@@ -21,8 +20,9 @@ import {
   type MRT_FilterOption,
   type MRT_GroupingState,
   type MRT_Header,
-  type MRT_TableInstance,
   type MRT_Row,
+  type MRT_TableInstance,
+  type MRT_TableOptions,
 } from './types';
 
 export const getColumnId = <TData extends Record<string, any>>(
@@ -159,7 +159,7 @@ export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
     props.positionActionsColumn === 'first' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
+          ['modal', 'row'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
       showExpandColumn(props) &&
@@ -175,7 +175,7 @@ export const getTrailingDisplayColumnIds = <TData extends Record<string, any>>(
     props.positionActionsColumn === 'last' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
+          ['modal', 'row'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'last' &&
       showExpandColumn(props) &&
@@ -201,11 +201,7 @@ export const getDefaultColumnFilterFn = <TData extends Record<string, any>>(
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
   if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
-  if (
-    columnDef.filterVariant === 'range' ||
-    columnDef.filterVariant === 'range-slider'
-  )
-    return 'betweenInclusive';
+  if (columnDef.filterVariant?.includes('range')) return 'betweenInclusive';
   if (
     columnDef.filterVariant === 'select' ||
     columnDef.filterVariant === 'checkbox'
@@ -218,15 +214,21 @@ export const getIsFirstColumn = <TData extends Record<string, any>>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
-  return table.getVisibleLeafColumns()[0].id === column.id;
+  const leftColumns = table.getLeftVisibleLeafColumns();
+  return leftColumns.length
+    ? leftColumns[0].id === column.id
+    : table.getVisibleLeafColumns()[0].id === column.id;
 };
 
 export const getIsLastColumn = <TData extends Record<string, any>>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
+  const rightColumns = table.getRightVisibleLeafColumns();
   const columns = table.getVisibleLeafColumns();
-  return columns[columns.length - 1].id === column.id;
+  return rightColumns.length
+    ? rightColumns[rightColumns.length - 1].id === column.id
+    : columns[columns.length - 1].id === column.id;
 };
 
 export const getIsLastLeftPinnedColumn = <TData extends Record<string, any>>(
@@ -258,15 +260,15 @@ export const getTotalRight = <TData extends Record<string, any>>(
 export const getCanRankRows = <TData extends Record<string, any>>(
   table: MRT_TableInstance<TData>,
 ) => {
-  const { options, getState } = table;
+  const { getState, options } = table;
   const {
+    enableGlobalFilterRankedResults,
     manualExpanding,
     manualFiltering,
     manualGrouping,
     manualSorting,
-    enableGlobalFilterRankedResults,
   } = options;
-  const { globalFilterFn, expanded } = getState();
+  const { expanded, globalFilterFn } = getState();
 
   return (
     !manualExpanding &&
@@ -366,8 +368,8 @@ export const getCommonCellStyles = <TData extends Record<string, any>>({
 
 export const MRT_DefaultColumn = {
   filterVariant: 'text',
-  minSize: 40,
   maxSize: 1000,
+  minSize: 40,
   size: 180,
 } as const;
 
@@ -387,7 +389,7 @@ export const MRT_DefaultDisplayColumn = {
 } as const;
 
 export const parseFromValuesOrFunc = <T, U>(
-  fn: T | ((arg: U) => T) | undefined,
+  fn: ((arg: U) => T) | T | undefined,
   arg: U,
 ): T | undefined => (fn instanceof Function ? fn(arg) : fn);
 
@@ -396,7 +398,7 @@ export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
 export const flexRender = _flexRender as (
   Comp: Renderable<any>,
   props: any,
-) => ReactNode | JSX.Element;
+) => JSX.Element | ReactNode;
 
 export const createRow = <TData extends Record<string, any>>(
   table: MRT_TableInstance<TData>,

package/src/filterFns.ts

@@ -1,14 +1,14 @@
 import {
+  type RankingInfo,
   rankItem,
   rankings,
-  type RankingInfo,
 } from '@tanstack/match-sorter-utils';
-import { filterFns, type Row } from '@tanstack/react-table';
+import { type Row, filterFns } from '@tanstack/react-table';
 
 const fuzzy = <TData extends Record<string, any>>(
   row: Row<TData>,
   columnId: string,
-  filterValue: string | number,
+  filterValue: number | string,
   addMeta: (item: RankingInfo) => void,
 ) => {
   const itemRank = rankItem(row.getValue(columnId), filterValue as string, {
@@ -23,10 +23,10 @@ fuzzy.autoRemove = (val: any) => !val;
 const contains = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
   row
-    .getValue<string | number>(id)
+    .getValue<number | string>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -37,10 +37,10 @@ contains.autoRemove = (val: any) => !val;
 const startsWith = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
   row
-    .getValue<string | number>(id)
+    .getValue<number | string>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -51,10 +51,10 @@ startsWith.autoRemove = (val: any) => !val;
 const endsWith = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
   row
-    .getValue<string | number>(id)
+    .getValue<number | string>(id)
     .toString()
     .toLowerCase()
     .trim()
@@ -65,9 +65,9 @@ endsWith.autoRemove = (val: any) => !val;
 const equals = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  row.getValue<string | number>(id).toString().toLowerCase().trim() ===
+  row.getValue<number | string>(id).toString().toLowerCase().trim() ===
   filterValue.toString().toLowerCase().trim();
 
 equals.autoRemove = (val: any) => !val;
@@ -75,9 +75,9 @@ equals.autoRemove = (val: any) => !val;
 const notEquals = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  row.getValue<string | number>(id).toString().toLowerCase().trim() !==
+  row.getValue<number | string>(id).toString().toLowerCase().trim() !==
   filterValue.toString().toLowerCase().trim();
 
 notEquals.autoRemove = (val: any) => !val;
@@ -85,11 +85,11 @@ notEquals.autoRemove = (val: any) => !val;
 const greaterThan = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) > +filterValue
-    : row.getValue<string | number>(id).toString().toLowerCase().trim() >
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) > +filterValue
+    : row.getValue<number | string>(id).toString().toLowerCase().trim() >
       filterValue.toString().toLowerCase().trim();
 
 greaterThan.autoRemove = (val: any) => !val;
@@ -97,7 +97,7 @@ greaterThan.autoRemove = (val: any) => !val;
 const greaterThanOrEqualTo = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) => equals(row, id, filterValue) || greaterThan(row, id, filterValue);
 
 greaterThanOrEqualTo.autoRemove = (val: any) => !val;
@@ -105,11 +105,11 @@ greaterThanOrEqualTo.autoRemove = (val: any) => !val;
 const lessThan = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) =>
-  !isNaN(+filterValue) && !isNaN(+row.getValue<string | number>(id))
-    ? +row.getValue<string | number>(id) < +filterValue
-    : row.getValue<string | number>(id).toString().toLowerCase().trim() <
+  !isNaN(+filterValue) && !isNaN(+row.getValue<number | string>(id))
+    ? +row.getValue<number | string>(id) < +filterValue
+    : row.getValue<number | string>(id).toString().toLowerCase().trim() <
       filterValue.toString().toLowerCase().trim();
 
 lessThan.autoRemove = (val: any) => !val;
@@ -117,7 +117,7 @@ lessThan.autoRemove = (val: any) => !val;
 const lessThanOrEqualTo = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValue: string | number,
+  filterValue: number | string,
 ) => equals(row, id, filterValue) || lessThan(row, id, filterValue);
 
 lessThanOrEqualTo.autoRemove = (val: any) => !val;
@@ -125,7 +125,7 @@ lessThanOrEqualTo.autoRemove = (val: any) => !val;
 const between = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValues: [string | number, string | number],
+  filterValues: [number | string, number | string],
 ) =>
   ((['', undefined] as any[]).includes(filterValues[0]) ||
     greaterThan(row, id, filterValues[0])) &&
@@ -140,7 +140,7 @@ between.autoRemove = (val: any) => !val;
 const betweenInclusive = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  filterValues: [string | number, string | number],
+  filterValues: [number | string, number | string],
 ) =>
   ((['', undefined] as any[]).includes(filterValues[0]) ||
     greaterThanOrEqualTo(row, id, filterValues[0])) &&
@@ -155,16 +155,16 @@ betweenInclusive.autoRemove = (val: any) => !val;
 const empty = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  _filterValue: string | number,
-) => !row.getValue<string | number>(id).toString().trim();
+  _filterValue: number | string,
+) => !row.getValue<number | string>(id).toString().trim();
 
 empty.autoRemove = (val: any) => !val;
 
 const notEmpty = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
-  _filterValue: string | number,
-) => !!row.getValue<string | number>(id).toString().trim();
+  _filterValue: number | string,
+) => !!row.getValue<number | string>(id).toString().trim();
 
 notEmpty.autoRemove = (val: any) => !val;
 

package/src/footer/MRT_TableFooter.tsx

@@ -1,8 +1,8 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableFooter from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
-import { type VirtualItem } from '@tanstack/react-virtual';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -35,6 +35,13 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
   return (
     <TableFooter
       {...tableFooterProps}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableFooterRef.current = ref;
+        if (tableFooterProps?.ref) {
+          // @ts-ignore
+          tableFooterProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         bottom: stickFooter ? 0 : undefined,
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
@@ -48,13 +55,6 @@ export const MRT_TableFooter = <TData extends Record<string, any>>({
         zIndex: stickFooter ? 1 : undefined,
         ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
       })}
-      ref={(ref: HTMLTableSectionElement) => {
-        tableFooterRef.current = ref;
-        if (tableFooterProps?.ref) {
-          // @ts-ignore
-          tableFooterProps.ref.current = ref;
-        }
-      }}
     >
       {getFooterGroups().map((footerGroup) => (
         <MRT_TableFooterRow

package/src/footer/MRT_TableFooterCell.tsx

@@ -49,8 +49,8 @@ export const MRT_TableFooterCell = <TData extends Record<string, any>>({
         ...getCommonCellStyles({
           column,
           table,
-          theme,
           tableCellProps,
+          theme,
         }),
       })}
     >

package/src/footer/MRT_TableFooterRow.tsx

@@ -1,13 +1,13 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableRow from '@mui/material/TableRow';
 import { lighten } from '@mui/material/styles';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
-import { type VirtualItem } from '@tanstack/react-virtual';
+import { parseFromValuesOrFunc } from '../column.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
   type MRT_TableInstance,
 } from '../types';
-import { parseFromValuesOrFunc } from '../column.utils';
 
 interface Props<TData extends Record<string, any>> {
   footerGroup: MRT_HeaderGroup<TData>;

package/src/head/MRT_TableHead.tsx

@@ -1,8 +1,8 @@
+import { type VirtualItem } from '@tanstack/react-virtual';
 import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
-import { type VirtualItem } from '@tanstack/react-virtual';
-import { type MRT_TableInstance } from '../types';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { type MRT_TableInstance } from '../types';
 
 interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
@@ -32,6 +32,13 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
   return (
     <TableHead
       {...tableHeadProps}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableHeadRef.current = ref;
+        if (tableHeadProps?.ref) {
+          // @ts-ignore
+          tableHeadProps.ref.current = ref;
+        }
+      }}
       sx={(theme) => ({
         display: layoutMode === 'grid' ? 'grid' : 'table-row-group',
         opacity: 0.97,
@@ -40,13 +47,6 @@ export const MRT_TableHead = <TData extends Record<string, any>>({
         zIndex: stickyHeader ? 2 : undefined,
         ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
       })}
-      ref={(ref: HTMLTableSectionElement) => {
-        tableHeadRef.current = ref;
-        if (tableHeadProps?.ref) {
-          // @ts-ignore
-          tableHeadProps.ref.current = ref;
-        }
-      }}
     >
       {getHeaderGroups().map((headerGroup) => (
         <MRT_TableHeadRow