@cutting/material-react-table 5.0.0-beta.2 → 5.1.0

package/src/components/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -1,30 +1,22 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { type MouseEvent, useState } from 'react';
 
-import {
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 
-export interface MRT_TableHeadCellColumnActionsButtonProps<
-  TData extends MRT_RowData,
-> extends IconButtonProps {
+export interface MRT_TableHeadCellColumnActionsButtonProps<TData extends MRT_RowData> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellColumnActionsButton = <
-  TData extends MRT_RowData,
->({
+export const MRT_TableHeadCellColumnActionsButton = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: MRT_TableHeadCellColumnActionsButtonProps<TData>) => {
+}: MRT_TableHeadCellColumnActionsButtonProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { MoreVertIcon },
@@ -57,10 +49,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
 
   return (
     <>
-      <Tooltip
-        {...getCommonTooltipProps('top')}
-        title={iconButtonProps?.title ?? localization.columnActions}
-      >
+      <Tooltip {...getCommonTooltipProps('top')} title={iconButtonProps?.title ?? localization.columnActions}>
         <IconButton
           aria-label={localization.columnActions}
           onClick={handleClick}
@@ -75,23 +64,14 @@ export const MRT_TableHeadCellColumnActionsButton = <
             opacity: 0.3,
             transition: 'all 150ms',
             width: '2rem',
-            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as CSSObject),
           })}
           title={undefined}
         >
-          {iconButtonProps?.children ?? (
-            <MoreVertIcon style={{ transform: 'scale(0.9)' }} />
-          )}
+          {iconButtonProps?.children ?? <MoreVertIcon style={{ transform: 'scale(0.9)' }} />}
         </IconButton>
       </Tooltip>
-      {anchorEl && (
-        <MRT_ColumnActionMenu
-          anchorEl={anchorEl}
-          header={header}
-          setAnchorEl={setAnchorEl}
-          table={table}
-        />
-      )}
+      {anchorEl && <MRT_ColumnActionMenu anchorEl={anchorEl} header={header} setAnchorEl={setAnchorEl} table={table} />}
     </>
   );
 };

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -1,19 +1,13 @@
 import { Collapse, type CollapseProps } from '@mui/material';
 
-import {
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getColumnFilterInfo } from '../../utils/column.utils';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 
-export interface MRT_TableHeadCellFilterContainerProps<
-  TData extends MRT_RowData,
-> extends CollapseProps {
+export interface MRT_TableHeadCellFilterContainerProps<TData extends MRT_RowData> extends CollapseProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -22,7 +16,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: MRT_TableHeadCellFilterContainerProps<TData>) => {
+}: MRT_TableHeadCellFilterContainerProps<TData>): JSX.Element => {
   const {
     options: { columnFilterDisplayMode },
   } = table;
@@ -32,12 +26,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   const { isRangeFilter } = getColumnFilterInfo({ header, table });
 
   return (
-    <Collapse
-      in={showColumnFilters || columnFilterDisplayMode === 'popover'}
-      mountOnEnter
-      unmountOnExit
-      {...rest}
-    >
+    <Collapse in={showColumnFilters || columnFilterDisplayMode === 'popover'} mountOnEnter unmountOnExit {...rest}>
       {columnDef.filterVariant === 'checkbox' ? (
         <MRT_FilterCheckbox column={column} table={table} />
       ) : columnDef.filterVariant === 'range-slider' ? (

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -1,33 +1,22 @@
-import { Box } from '@mui/material';
-import { Grow } from '@mui/material';
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Popover } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { Box, Grow, IconButton, type IconButtonProps, Popover, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { type MouseEvent, useState } from 'react';
 
-import {
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
-import {
-  getColumnFilterInfo,
-  useDropdownOptions,
-} from '../../utils/column.utils';
+import { type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { getColumnFilterInfo, getFilterOptionLabel, useDropdownOptions } from '../../utils/column.utils';
 import { getValueAndLabel, parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 
-export interface MRT_TableHeadCellFilterLabelProps<TData extends MRT_RowData>
-  extends IconButtonProps {
+export interface MRT_TableHeadCellFilterLabelProps<TData extends MRT_RowData> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
+export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = MRT_RowData>({
   header,
   table,
   ...rest
-}: MRT_TableHeadCellFilterLabelProps<TData>) => {
+}: MRT_TableHeadCellFilterLabelProps<TData>): JSX.Element => {
   const {
     options: {
       columnFilterDisplayMode,
@@ -44,58 +33,36 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
 
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
 
-  const {
-    currentFilterOption,
-    isMultiSelectFilter,
-    isRangeFilter,
-    isSelectFilter,
-  } = getColumnFilterInfo({ header, table });
+  const { currentFilterOption, isMultiSelectFilter, isRangeFilter, isSelectFilter } = getColumnFilterInfo({
+    header,
+    table,
+  });
 
   const dropdownOptions = useDropdownOptions({ header, table });
 
   const getSelectLabel = (index?: number) =>
     getValueAndLabel(
       dropdownOptions?.find(
-        (option) =>
-          getValueAndLabel(option).value ===
-          (index !== undefined ? filterValue[index] : filterValue),
+        (option) => getValueAndLabel(option).value === (index !== undefined ? filterValue[index] : filterValue),
       ),
     ).label;
 
   const isFilterActive =
-    (Array.isArray(filterValue) && filterValue.some(Boolean)) ||
-    (!!filterValue && !Array.isArray(filterValue));
+    (Array.isArray(filterValue) && filterValue.some(Boolean)) || (!!filterValue && !Array.isArray(filterValue));
 
   const filterTooltip =
     columnFilterDisplayMode === 'popover' && !isFilterActive
-      ? localization.filterByColumn?.replace(
-          '{column}',
-          String(columnDef.header),
-        )
+      ? localization.filterByColumn?.replace('{column}', String(columnDef.header))
       : localization.filteringByColumn
           .replace('{column}', String(columnDef.header))
-          .replace(
-            '{filterType}',
-            currentFilterOption
-              ? localization[
-                  `filter${
-                    currentFilterOption.charAt(0).toUpperCase() +
-                    currentFilterOption.slice(1)
-                  }` as keyof typeof localization
-                ]
-              : '',
-          )
+          .replace('{filterType}', currentFilterOption ? getFilterOptionLabel(localization, currentFilterOption) : '')
           .replace(
             '{filterValue}',
             `"${
               Array.isArray(filterValue)
                 ? (filterValue as [string, string])
-                    .map((value, index) =>
-                      isMultiSelectFilter ? getSelectLabel(index) : value,
-                    )
-                    .join(
-                      `" ${isRangeFilter ? localization.and : localization.or} "`,
-                    )
+                    .map((value, index) => (isMultiSelectFilter ? getSelectLabel(index) : value))
+                    .join(`" ${isRangeFilter ? localization.and : localization.or} "`)
                 : isSelectFilter
                   ? getSelectLabel()
                   : (filterValue as string)
@@ -139,7 +106,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
                 transform: 'scale(0.75)',
                 transition: 'all 150ms ease-in-out',
                 width: '16px',
-                ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+                ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
               })}
             >
               <FilterAltIcon />
@@ -156,9 +123,8 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
           }}
           disableScrollLock
           onClick={(event) => event.stopPropagation()}
-          onClose={(event) => {
-            //@ts-expect-error
-            event.stopPropagation();
+          onClose={(event: { stopPropagation?: () => void }) => {
+            event.stopPropagation?.();
             setAnchorEl(null);
           }}
           onKeyDown={(event) => event.key === 'Enter' && setAnchorEl(null)}

package/src/components/head/MRT_TableHeadCellGrabHandle.test.tsx

@@ -17,20 +17,12 @@ const columns = (): MRT_ColumnDef<Person>[] => [
 ];
 
 const headerOrder = (container: HTMLElement) =>
-  Array.from(container.querySelectorAll('thead th')).map((th) =>
-    th.textContent?.replace(/[^A-Za-z]/g, ''),
-  );
+  Array.from(container.querySelectorAll('thead th')).map((th) => th.textContent?.replace(/[^A-Za-z]/g, ''));
 
 const dragColumnOnto = (container: HTMLElement, from: string, to: string) => {
-  const handles = Array.from(
-    container.querySelectorAll<HTMLElement>('thead [aria-label="Move"]'),
-  );
-  const headerCells = Array.from(
-    container.querySelectorAll<HTMLElement>('thead th'),
-  );
-  const fromIndex = headerCells.findIndex((th) =>
-    th.textContent?.includes(from),
-  );
+  const handles = Array.from(container.querySelectorAll<HTMLElement>('thead [aria-label="Move"]'));
+  const headerCells = Array.from(container.querySelectorAll<HTMLElement>('thead th'));
+  const fromIndex = headerCells.findIndex((th) => th.textContent?.includes(from));
   const toIndex = headerCells.findIndex((th) => th.textContent?.includes(to));
 
   fireEvent.dragStart(handles[fromIndex], {
@@ -44,13 +36,7 @@ const dragColumnOnto = (container: HTMLElement, from: string, to: string) => {
 
 describe('column dragging', () => {
   test('reorders columns when one is dragged onto another', () => {
-    const { container } = render(
-      <MaterialReactTable
-        columns={columns()}
-        data={data}
-        enableColumnOrdering
-      />,
-    );
+    const { container } = render(<MaterialReactTable columns={columns()} data={data} enableColumnOrdering />);
 
     expect(headerOrder(container)).toEqual(['Name', 'City']);
 

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -1,17 +1,12 @@
 import { type IconButtonProps } from '@mui/material/IconButton';
 import { type DragEvent, type RefObject } from 'react';
 
-import {
-  type MRT_Column,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
-import { reorderColumn } from '../../utils/column.utils';
+import { type MRT_Column, type MRT_RowData, type MRT_TableInstance } from '../../types';
+import { moveColumn } from '../../utils/column.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
-export interface MRT_TableHeadCellGrabHandleProps<TData extends MRT_RowData>
-  extends IconButtonProps {
+export interface MRT_TableHeadCellGrabHandleProps<TData extends MRT_RowData> extends IconButtonProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
   tableHeadCellRef: RefObject<HTMLTableCellElement | null>;
@@ -22,16 +17,14 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   table,
   tableHeadCellRef,
   ...rest
-}: MRT_TableHeadCellGrabHandleProps<TData>) => {
+}: MRT_TableHeadCellGrabHandleProps<TData>): JSX.Element => {
   const {
     options: { enableColumnOrdering, muiColumnDragHandleProps },
-    setColumnOrder,
-    setColumnPinning,
     setDraggingColumn,
     setHoveredColumn,
   } = table;
   const { columnDef } = column;
-  const { columnOrder, draggingColumn, hoveredColumn } = table.state;
+  const { draggingColumn, hoveredColumn } = table.state;
 
   const iconButtonProps = {
     ...parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table }),
@@ -46,11 +39,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
     iconButtonProps?.onDragStart?.(event);
     setDraggingColumn(column);
     try {
-      event.dataTransfer.setDragImage(
-        tableHeadCellRef.current as HTMLElement,
-        0,
-        0,
-      );
+      event.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
     } catch (e) {
       console.error(e);
     }
@@ -60,32 +49,14 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
     iconButtonProps?.onDragEnd?.(event);
     if (hoveredColumn?.id === 'drop-zone') {
       column.toggleGrouping();
-    } else if (
-      enableColumnOrdering &&
-      hoveredColumn &&
-      hoveredColumn?.id !== draggingColumn?.id
-    ) {
-      const reorderedColumns = reorderColumn(
-        column,
-        hoveredColumn as MRT_Column<TData>,
-        columnOrder,
-      );
-      setColumnOrder(reorderedColumns);
-      setColumnPinning(({ end = [], start = [] }) => ({
-        end: reorderedColumns.filter((header) => end.includes(header)),
-        start: reorderedColumns.filter((header) => start.includes(header)),
-      }));
+    } else if (enableColumnOrdering && hoveredColumn && hoveredColumn?.id !== draggingColumn?.id) {
+      moveColumn(table, column, hoveredColumn as MRT_Column<TData>);
     }
     setDraggingColumn(null);
     setHoveredColumn(null);
   };
 
   return (
-    <MRT_GrabHandleButton
-      {...iconButtonProps}
-      onDragEnd={handleDragEnd}
-      onDragStart={handleDragStart}
-      table={table}
-    />
+    <MRT_GrabHandleButton {...iconButtonProps} onDragEnd={handleDragEnd} onDragStart={handleDragStart} table={table} />
   );
 };

package/src/components/head/MRT_TableHeadCellResizeHandle.test.tsx

@@ -17,24 +17,14 @@ const columns = (): MRT_ColumnDef<Person>[] => [
 ];
 
 const nameColumnSize = (container: HTMLElement) =>
-  (container.querySelector('table') as HTMLElement).style.getPropertyValue(
-    '--header-name-size',
-  );
+  (container.querySelector('table') as HTMLElement).style.getPropertyValue('--header-name-size');
 
 describe('column resizing', () => {
   test('dragging the resize handle widens the column', () => {
-    const { container } = render(
-      <MaterialReactTable
-        columns={columns()}
-        data={data}
-        enableColumnResizing
-      />,
-    );
+    const { container } = render(<MaterialReactTable columns={columns()} data={data} enableColumnResizing />);
 
     const before = nameColumnSize(container);
-    const handle = container.querySelector(
-      'thead .Mui-TableHeadCell-ResizeHandle-Wrapper',
-    ) as HTMLElement;
+    const handle = container.querySelector('thead .Mui-TableHeadCell-ResizeHandle-Wrapper') as HTMLElement;
 
     fireEvent.mouseDown(handle, { clientX: 0 });
     fireEvent.mouseMove(document, { clientX: 120 });

package/src/components/head/MRT_TableHeadCellResizeHandle.tsx

@@ -1,15 +1,10 @@
-import { Box } from '@mui/material';
-import { Divider, type DividerProps } from '@mui/material';
+import { Box, Divider, type DividerProps } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
-import {
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_TableHeadCellResizeHandleProps<TData extends MRT_RowData>
-  extends DividerProps {
+export interface MRT_TableHeadCellResizeHandleProps<TData extends MRT_RowData> extends DividerProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +13,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: MRT_TableHeadCellResizeHandleProps<TData>) => {
+}: MRT_TableHeadCellResizeHandleProps<TData>): JSX.Element => {
   const {
     options: { columnResizeDirection, columnResizeMode },
     setColumnResizing,
@@ -28,12 +23,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
 
   const handler = header.getResizeHandler();
 
-  const mx =
-    density === 'compact'
-      ? '-8px'
-      : density === 'comfortable'
-        ? '-16px'
-        : '-24px';
+  const mx = density === 'compact' ? '-8px' : density === 'comfortable' ? '-16px' : '-24px';
 
   const lr = column.columnDef.columnDefType === 'display' ? '4px' : '0';
 
@@ -53,16 +43,14 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
         transform:
           column.getIsResizing() && columnResizeMode === 'onEnd'
             ? `translateX(${
-                (columnResizeDirection === 'rtl' ? -1 : 1) *
-                (table.state.columnResizing.deltaOffset ?? 0)
+                (columnResizeDirection === 'rtl' ? -1 : 1) * (table.state.columnResizing.deltaOffset ?? 0)
               }px)`
             : undefined,
       }}
       sx={(theme) => ({
         '&:active > hr': {
           backgroundColor: theme.palette.info.main,
-          opacity:
-            header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
+          opacity: header.subHeaders.length || columnResizeMode === 'onEnd' ? 1 : 0,
         },
         cursor: 'col-resize',
         left: columnResizeDirection === 'rtl' ? lr : undefined,
@@ -83,12 +71,10 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
           height: '24px',
           touchAction: 'none',
           transform: 'translateX(4px)',
-          transition: column.getIsResizing()
-            ? undefined
-            : 'all 150ms ease-in-out',
+          transition: column.getIsResizing() ? undefined : 'all 150ms ease-in-out',
           userSelect: 'none',
           zIndex: 4,
-          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
         })}
       />
     </Box>

package/src/components/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,16 +1,10 @@
-import { Badge } from '@mui/material';
-import { TableSortLabel, type TableSortLabelProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { Badge, TableSortLabel, type TableSortLabelProps, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
-import {
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_TableHeadCellSortLabelProps<TData extends MRT_RowData>
-  extends TableSortLabelProps {
+export interface MRT_TableHeadCellSortLabelProps<TData extends MRT_RowData> extends TableSortLabelProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -19,7 +13,7 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: MRT_TableHeadCellSortLabelProps<TData>) => {
+}: MRT_TableHeadCellSortLabelProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { ArrowDownwardIcon, SyncAltIcon },
@@ -37,25 +31,17 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
       ? ''
       : column.getIsSorted()
         ? column.getIsSorted() === 'desc'
-          ? localization.sortedByColumnDesc.replace(
-              '{column}',
-              columnDef.header,
-            )
+          ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
           : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
         : column.getNextSortingOrder() === 'desc'
           ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
           : localization.sortByColumnAsc.replace('{column}', columnDef.header);
 
-  const direction = isSorted
-    ? (column.getIsSorted() as 'asc' | 'desc')
-    : undefined;
+  const direction = isSorted ? (column.getIsSorted() as 'asc' | 'desc') : undefined;
 
   return (
     <Tooltip placement="top" title={sortTooltip}>
-      <Badge
-        badgeContent={sorting.length > 1 ? column.getSortIndex() + 1 : 0}
-        overlap="circular"
-      >
+      <Badge badgeContent={sorting.length > 1 ? column.getSortIndex() + 1 : 0} overlap="circular">
         <TableSortLabel
           active
           aria-label={sortTooltip}
@@ -81,16 +67,14 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
           sx={(theme) => ({
             '.MuiTableSortLabel-icon': {
               color: `${
-                theme.palette.mode === 'dark'
-                  ? theme.palette.text.primary
-                  : theme.palette.text.secondary
+                theme.palette.mode === 'dark' ? theme.palette.text.primary : theme.palette.text.secondary
               } !important`,
             },
             flex: '0 0',
             opacity: isSorted ? 1 : 0.3,
             transition: 'all 150ms ease-in-out',
             width: '3ch',
-            ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+            ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
           })}
         />
       </Badge>

package/src/components/head/MRT_TableHeadRow.tsx

@@ -1,5 +1,5 @@
 import { TableRow, type TableRowProps } from '@mui/material';
-import { alpha } from '@mui/material/styles';
+import { alpha, type CSSObject } from '@mui/material/styles';
 
 import {
   type MRT_ColumnVirtualizer,
@@ -12,8 +12,7 @@ import {
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 
-export interface MRT_TableHeadRowProps<TData extends MRT_RowData>
-  extends TableRowProps {
+export interface MRT_TableHeadRowProps<TData extends MRT_RowData> extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   headerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
@@ -24,7 +23,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   headerGroup,
   table,
   ...rest
-}: MRT_TableHeadRowProps<TData>) => {
+}: MRT_TableHeadRowProps<TData>): JSX.Element => {
   const {
     options: {
       enableStickyHeader,
@@ -34,8 +33,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
     },
   } = table;
 
-  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
-    columnVirtualizer ?? {};
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
 
   const tableRowProps = {
     ...parseFromValuesOrFunc(muiTableHeadRowProps, {
@@ -52,40 +50,30 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
         backgroundColor: baseBackgroundColor,
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
-        position:
-          enableStickyHeader && layoutMode === 'semantic'
-            ? 'sticky'
-            : 'relative',
+        position: enableStickyHeader && layoutMode === 'semantic' ? 'sticky' : 'relative',
         top: 0,
-        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as CSSObject),
       })}
     >
-      {virtualPaddingLeft ? (
-        <th style={{ display: 'flex', width: virtualPaddingLeft }} />
-      ) : null}
-      {(virtualColumns ?? headerGroup.headers).map(
-        (headerOrVirtualHeader, staticColumnIndex) => {
-          let header = headerOrVirtualHeader as MRT_Header<TData>;
-          if (columnVirtualizer) {
-            staticColumnIndex = (headerOrVirtualHeader as MRT_VirtualItem)
-              .index;
-            header = headerGroup.headers[staticColumnIndex];
-          }
+      {virtualPaddingLeft ? <th style={{ display: 'flex', width: virtualPaddingLeft }} /> : null}
+      {(virtualColumns ?? headerGroup.headers).map((headerOrVirtualHeader, staticColumnIndex) => {
+        let header = headerOrVirtualHeader as MRT_Header<TData>;
+        if (columnVirtualizer) {
+          staticColumnIndex = (headerOrVirtualHeader as MRT_VirtualItem).index;
+          header = headerGroup.headers[staticColumnIndex];
+        }
 
-          return header ? (
-            <MRT_TableHeadCell
-              columnVirtualizer={columnVirtualizer}
-              header={header}
-              key={header.id}
-              staticColumnIndex={staticColumnIndex}
-              table={table}
-            />
-          ) : null;
-        },
-      )}
-      {virtualPaddingRight ? (
-        <th style={{ display: 'flex', width: virtualPaddingRight }} />
-      ) : null}
+        return header ? (
+          <MRT_TableHeadCell
+            columnVirtualizer={columnVirtualizer}
+            header={header}
+            key={header.id}
+            staticColumnIndex={staticColumnIndex}
+            table={table}
+          />
+        ) : null;
+      })}
+      {virtualPaddingRight ? <th style={{ display: 'flex', width: virtualPaddingRight }} /> : null}
     </TableRow>
   );
 };