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

package/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,13 +1,7 @@
-import { IconButton, type IconButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { IconButton, type IconButtonProps, Tooltip } from '@mui/material';
 import { type MouseEvent, useState } from 'react';
 
-import {
-  type MRT_Cell,
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Cell, type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
@@ -24,8 +18,7 @@ const commonIconButtonStyles = {
   width: '2rem',
 };
 
-export interface MRT_ToggleRowActionMenuButtonProps<TData extends MRT_RowData>
-  extends IconButtonProps {
+export interface MRT_ToggleRowActionMenuButtonProps<TData extends MRT_RowData> extends IconButtonProps {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
   staticRowIndex?: number;
@@ -38,7 +31,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   ...rest
-}: MRT_ToggleRowActionMenuButtonProps<TData>) => {
+}: MRT_ToggleRowActionMenuButtonProps<TData>): JSX.Element => {
   const {
     options: {
       createDisplayMode,
@@ -57,9 +50,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   const isCreating = creatingRow?.id === row.id;
   const isEditing = editingRow?.id === row.id;
 
-  const showEditActionButtons =
-    (isCreating && createDisplayMode === 'row') ||
-    (isEditing && editDisplayMode === 'row');
+  const showEditActionButtons = (isCreating && createDisplayMode === 'row') || (isEditing && editDisplayMode === 'row');
 
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
 
@@ -96,9 +87,10 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
         </Tooltip>
       ) : renderRowActionMenuItems?.({
           row,
+          closeMenu: () => {},
           staticRowIndex,
           table,
-        } as any)?.length ? (
+        })?.length ? (
         <>
           <Tooltip {...getCommonTooltipProps()} title={localization.rowActions}>
             <IconButton

package/src/components/footer/MRT_TableFooter.tsx

@@ -1,15 +1,11 @@
 import { TableFooter, type TableFooterProps } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
-import {
-  type MRT_ColumnVirtualizer,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_ColumnVirtualizer, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 
-export interface MRT_TableFooterProps<TData extends MRT_RowData>
-  extends TableFooterProps {
+export interface MRT_TableFooterProps<TData extends MRT_RowData> extends TableFooterProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +14,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   ...rest
-}: MRT_TableFooterProps<TData>) => {
+}: MRT_TableFooterProps<TData>): JSX.Element | null => {
   const {
     options: { enableStickyFooter, layoutMode, muiTableFooterProps },
     refs: { tableFooterRef },
@@ -32,8 +28,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
     ...rest,
   };
 
-  const stickFooter =
-    (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
+  const stickFooter = (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
 
   const footerGroups = table.getFooterGroups();
 
@@ -42,8 +37,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
     !footerGroups.some((footerGroup) =>
       footerGroup.headers?.some(
         (header) =>
-          (typeof header.column.columnDef.footer === 'string' &&
-            !!header.column.columnDef.footer) ||
+          (typeof header.column.columnDef.footer === 'string' && !!header.column.columnDef.footer) ||
           header.column.columnDef.Footer,
       ),
     )
@@ -56,8 +50,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
       {...tableFooterProps}
       ref={(ref: HTMLTableSectionElement) => {
         tableFooterRef.current = ref;
-        if (tableFooterProps?.ref) {
-          // @ts-expect-error
+        if (tableFooterProps?.ref && typeof tableFooterProps.ref === 'object') {
           tableFooterProps.ref.current = ref;
         }
       }}
@@ -72,13 +65,13 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
           : undefined,
         position: stickFooter ? 'sticky' : 'relative',
         zIndex: stickFooter ? 1 : undefined,
-        ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as CSSObject),
       })}
     >
       {footerGroups.map((footerGroup) => (
         <MRT_TableFooterRow
           columnVirtualizer={columnVirtualizer}
-          footerGroup={footerGroup as any}
+          footerGroup={footerGroup}
           key={footerGroup.id}
           table={table}
         />

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -1,17 +1,12 @@
 import { TableCell, type TableCellProps } from '@mui/material';
-import { useTheme } from '@mui/material/styles';
+import { type CSSObject, useTheme } 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 { cellKeyboardShortcuts } from '../../utils/cell.utils';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_TableFooterCellProps<TData extends MRT_RowData>
-  extends TableCellProps {
+export interface MRT_TableFooterCellProps<TData extends MRT_RowData> extends TableCellProps {
   footer: MRT_Header<TData>;
   staticColumnIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -22,24 +17,17 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   staticColumnIndex,
   table,
   ...rest
-}: MRT_TableFooterCellProps<TData>) => {
+}: MRT_TableFooterCellProps<TData>): JSX.Element => {
   const theme = useTheme();
   const {
-    options: {
-      enableColumnPinning,
-      enableKeyboardShortcuts,
-      muiTableFooterCellProps,
-    },
+    options: { enableColumnPinning, enableKeyboardShortcuts, muiTableFooterCellProps },
   } = table;
   const { density } = table.state;
   const { column } = footer;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const isColumnPinned =
-    enableColumnPinning &&
-    columnDef.columnDefType !== 'group' &&
-    column.getIsPinned();
+  const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== 'group' && column.getIsPinned();
 
   const args = { column, table };
   const tableCellProps = {
@@ -59,13 +47,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
 
   return (
     <TableCell
-      align={
-        columnDefType === 'group'
-          ? 'center'
-          : theme.direction === 'rtl'
-            ? 'right'
-            : 'left'
-      }
+      align={columnDefType === 'group' ? 'center' : theme.direction === 'rtl' ? 'right' : 'left'}
       colSpan={footer.colSpan}
       data-index={staticColumnIndex}
       data-pinned={!!isColumnPinned || undefined}
@@ -75,12 +57,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
       onKeyDown={handleKeyDown}
       sx={(theme) => ({
         fontWeight: 'bold',
-        p:
-          density === 'compact'
-            ? '0.5rem'
-            : density === 'comfortable'
-              ? '1rem'
-              : '1.5rem',
+        p: density === 'compact' ? '0.5rem' : density === 'comfortable' ? '1rem' : '1.5rem',
         verticalAlign: 'top',
         ...getCommonMRTCellStyles({
           column,
@@ -89,7 +66,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
           tableCellProps,
           theme,
         }),
-        ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as CSSObject),
       })}
     >
       {tableCellProps.children ??

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -1,4 +1,5 @@
 import { TableRow, type TableRowProps } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
 import {
   type MRT_ColumnVirtualizer,
@@ -11,8 +12,7 @@ import {
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_TableFooterCell } from './MRT_TableFooterCell';
 
-export interface MRT_TableFooterRowProps<TData extends MRT_RowData>
-  extends TableRowProps {
+export interface MRT_TableFooterRowProps<TData extends MRT_RowData> extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   footerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
@@ -23,7 +23,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   footerGroup,
   table,
   ...rest
-}: MRT_TableFooterRowProps<TData>) => {
+}: MRT_TableFooterRowProps<TData>): JSX.Element | null => {
   const {
     options: {
       layoutMode,
@@ -32,15 +32,13 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
     },
   } = table;
 
-  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
-    columnVirtualizer ?? {};
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
 
   // if no content in row, skip row
   if (
     !footerGroup.headers?.some(
       (header) =>
-        (typeof header.column.columnDef.footer === 'string' &&
-          !!header.column.columnDef.footer) ||
+        (typeof header.column.columnDef.footer === 'string' && !!header.column.columnDef.footer) ||
         header.column.columnDef.Footer,
     )
   ) {
@@ -63,34 +61,22 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         position: 'relative',
         width: '100%',
-        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as CSSObject),
       })}
     >
-      {virtualPaddingLeft ? (
-        <th style={{ display: 'flex', width: virtualPaddingLeft }} />
-      ) : null}
-      {(virtualColumns ?? footerGroup.headers).map(
-        (footerOrVirtualFooter, staticColumnIndex) => {
-          let footer = footerOrVirtualFooter as MRT_Header<TData>;
-          if (columnVirtualizer) {
-            staticColumnIndex = (footerOrVirtualFooter as MRT_VirtualItem)
-              .index;
-            footer = footerGroup.headers[staticColumnIndex];
-          }
+      {virtualPaddingLeft ? <th style={{ display: 'flex', width: virtualPaddingLeft }} /> : null}
+      {(virtualColumns ?? footerGroup.headers).map((footerOrVirtualFooter, staticColumnIndex) => {
+        let footer = footerOrVirtualFooter as MRT_Header<TData>;
+        if (columnVirtualizer) {
+          staticColumnIndex = (footerOrVirtualFooter as MRT_VirtualItem).index;
+          footer = footerGroup.headers[staticColumnIndex];
+        }
 
-          return footer ? (
-            <MRT_TableFooterCell
-              footer={footer}
-              key={footer.id}
-              staticColumnIndex={staticColumnIndex}
-              table={table}
-            />
-          ) : null;
-        },
-      )}
-      {virtualPaddingRight ? (
-        <th style={{ display: 'flex', width: virtualPaddingRight }} />
-      ) : null}
+        return footer ? (
+          <MRT_TableFooterCell footer={footer} key={footer.id} staticColumnIndex={staticColumnIndex} table={table} />
+        ) : null;
+      })}
+      {virtualPaddingRight ? <th style={{ display: 'flex', width: virtualPaddingRight }} /> : null}
     </TableRow>
   );
 };

package/src/components/head/MRT_TableHead.tsx

@@ -1,16 +1,12 @@
 import { TableHead, type TableHeadProps } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
-import {
-  type MRT_ColumnVirtualizer,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_ColumnVirtualizer, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ToolbarAlertBanner } from '../toolbar/MRT_ToolbarAlertBanner';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 
-export interface MRT_TableHeadProps<TData extends MRT_RowData>
-  extends TableHeadProps {
+export interface MRT_TableHeadProps<TData extends MRT_RowData> extends TableHeadProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
 }
@@ -19,14 +15,9 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   ...rest
-}: MRT_TableHeadProps<TData>) => {
+}: MRT_TableHeadProps<TData>): JSX.Element => {
   const {
-    options: {
-      enableStickyHeader,
-      layoutMode,
-      muiTableHeadProps,
-      positionToolbarAlertBanner,
-    },
+    options: { enableStickyHeader, layoutMode, muiTableHeadProps, positionToolbarAlertBanner },
     refs: { tableHeadRef },
   } = table;
   const { isFullScreen, showAlertBanner } = table.state;
@@ -43,8 +34,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
       {...tableHeadProps}
       ref={(ref: HTMLTableSectionElement) => {
         tableHeadRef.current = ref;
-        if (tableHeadProps?.ref) {
-          // @ts-expect-error
+        if (tableHeadProps?.ref && typeof tableHeadProps.ref === 'object') {
           tableHeadProps.ref.current = ref;
         }
       }}
@@ -54,7 +44,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
         position: stickyHeader ? 'sticky' : 'relative',
         top: stickyHeader && layoutMode?.startsWith('grid') ? 0 : undefined,
         zIndex: stickyHeader ? 2 : undefined,
-        ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as CSSObject),
       })}
     >
       {positionToolbarAlertBanner === 'head-overlay' &&
@@ -80,7 +70,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
           .map((headerGroup) => (
             <MRT_TableHeadRow
               columnVirtualizer={columnVirtualizer}
-              headerGroup={headerGroup as any}
+              headerGroup={headerGroup}
               key={headerGroup.id}
               table={table}
             />

package/src/components/head/MRT_TableHeadCell.tsx

@@ -1,15 +1,9 @@
-import { Box } from '@mui/material';
-import { TableCell, type TableCellProps } from '@mui/material';
+import { Box, TableCell, type TableCellProps } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
 import { type Theme } from '@mui/material/styles';
 import { type DragEvent, useCallback, useMemo, useRef } from 'react';
 
-import {
-  type MRT_ColumnVirtualizer,
-  type MRT_Header,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_ColumnVirtualizer, type MRT_Header, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { cellKeyboardShortcuts } from '../../utils/cell.utils';
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
@@ -20,8 +14,7 @@ import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 
-export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
-  extends TableCellProps {
+export interface MRT_TableHeadCellProps<TData extends MRT_RowData> extends TableCellProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   header: MRT_Header<TData>;
   staticColumnIndex?: number;
@@ -34,7 +27,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   staticColumnIndex,
   table,
   ...rest
-}: MRT_TableHeadCellProps<TData>) => {
+}: MRT_TableHeadCellProps<TData>): JSX.Element => {
   const theme = useTheme();
   const {
     options: {
@@ -55,14 +48,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     refs: { tableHeadCellRefs },
     setHoveredColumn,
   } = table;
-  const {
-    columnResizing,
-    density,
-    draggingColumn,
-    grouping,
-    hoveredColumn,
-    showColumnFilters,
-  } = table.state;
+  const { columnResizing, density, draggingColumn, grouping, hoveredColumn, showColumnFilters } = table.state;
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -76,37 +62,35 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
     ...rest,
   };
 
-  const isColumnPinned =
-    enableColumnPinning &&
-    columnDef.columnDefType !== 'group' &&
-    column.getIsPinned();
+  const isColumnPinned = enableColumnPinning && columnDef.columnDefType !== 'group' && column.getIsPinned();
 
   const showColumnActions =
-    (enableColumnActions || columnDef.enableColumnActions) &&
-    columnDef.enableColumnActions !== false;
+    (enableColumnActions || columnDef.enableColumnActions) && columnDef.enableColumnActions !== false;
 
   const showDragHandle =
     enableColumnDragging !== false &&
     columnDef.enableColumnDragging !== false &&
     (enableColumnDragging ||
       (enableColumnOrdering && columnDef.enableColumnOrdering !== false) ||
-      (enableGrouping &&
-        columnDef.enableGrouping !== false &&
-        !grouping.includes(column.id)));
+      (enableGrouping && columnDef.enableGrouping !== false && !grouping.includes(column.id)));
 
   const headerPL = useMemo(() => {
     let pl = 0;
-    if (column.getCanSort()) pl += 1;
-    if (showColumnActions) pl += 1.75;
-    if (showDragHandle) pl += 1.5;
+    if (column.getCanSort()) {
+      pl += 1;
+    }
+    if (showColumnActions) {
+      pl += 1.75;
+    }
+    if (showDragHandle) {
+      pl += 1.5;
+    }
     return pl;
-  }, [showColumnActions, showDragHandle]);
+  }, [column, showColumnActions, showDragHandle]);
 
   const draggingBorders = useMemo(() => {
     const showResizeBorder =
-      columnResizing.isResizingColumn === column.id &&
-      columnResizeMode === 'onChange' &&
-      !header.subHeaders.length;
+      columnResizing.isResizingColumn === column.id && columnResizeMode === 'onChange' && !header.subHeaders.length;
 
     const borderStyle = showResizeBorder
       ? `2px solid ${draggingBorderColor} !important`
@@ -117,9 +101,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
           : undefined;
 
     if (showResizeBorder) {
-      return columnResizeDirection === 'ltr'
-        ? { borderRight: borderStyle }
-        : { borderLeft: borderStyle };
+      return columnResizeDirection === 'ltr' ? { borderRight: borderStyle } : { borderLeft: borderStyle };
     }
     const draggingBorders = borderStyle
       ? {
@@ -130,16 +112,24 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       : undefined;
 
     return draggingBorders;
-  }, [draggingColumn, hoveredColumn, columnResizing.isResizingColumn]);
+  }, [
+    column.id,
+    columnResizeDirection,
+    columnResizeMode,
+    columnResizing.isResizingColumn,
+    draggingBorderColor,
+    draggingColumn,
+    header.subHeaders.length,
+    hoveredColumn,
+    theme.palette.grey,
+  ]);
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
       setHoveredColumn(null);
     }
     if (enableColumnOrdering && draggingColumn && columnDefType !== 'group') {
-      setHoveredColumn(
-        columnDef.enableColumnOrdering !== false ? column : null,
-      );
+      setHoveredColumn(columnDef.enableColumnOrdering !== false ? column : null);
     }
   };
 
@@ -185,20 +175,8 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
 
   return (
     <TableCell
-      align={
-        columnDefType === 'group'
-          ? 'center'
-          : theme.direction === 'rtl'
-            ? 'right'
-            : 'left'
-      }
-      aria-sort={
-        column.getIsSorted()
-          ? column.getIsSorted() === 'asc'
-            ? 'ascending'
-            : 'descending'
-          : 'none'
-      }
+      align={columnDefType === 'group' ? 'center' : theme.direction === 'rtl' ? 'right' : 'left'}
+      aria-sort={column.getIsSorted() ? (column.getIsSorted() === 'asc' ? 'ascending' : 'descending') : 'none'}
       colSpan={header.colSpan}
       data-can-sort={column.getCanSort() || undefined}
       data-index={staticColumnIndex}
@@ -229,12 +207,7 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
               : columnDefType === 'display'
                 ? '1rem 1.25rem'
                 : '1.5rem',
-        pb:
-          columnDefType === 'display'
-            ? 0
-            : showColumnFilters || density === 'compact'
-              ? '0.4rem'
-              : '0.6rem',
+        pb: columnDefType === 'display' ? 0 : showColumnFilters || density === 'compact' ? '0.4rem' : '0.6rem',
         pt:
           columnDefType === 'group' || density === 'compact'
             ? '0.25rem'
@@ -261,11 +234,9 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
               sx={{
                 alignItems: 'center',
                 display: 'flex',
-                flexDirection:
-                  tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
+                flexDirection: tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
                 justifyContent:
-                  columnDefType === 'group' ||
-                  tableCellProps?.align === 'center'
+                  columnDefType === 'group' || tableCellProps?.align === 'center'
                     ? 'center'
                     : column.getCanResize()
                       ? 'space-between'
@@ -279,18 +250,11 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                 onClick={column.getToggleSortingHandler()}
                 sx={{
                   alignItems: 'center',
-                  cursor:
-                    column.getCanSort() && columnDefType !== 'group'
-                      ? 'pointer'
-                      : undefined,
+                  cursor: column.getCanSort() && columnDefType !== 'group' ? 'pointer' : undefined,
                   display: 'flex',
-                  flexDirection:
-                    tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
+                  flexDirection: tableCellProps?.align === 'right' ? 'row-reverse' : 'row',
                   overflow: columnDefType === 'data' ? 'hidden' : undefined,
-                  pl:
-                    tableCellProps?.align === 'center'
-                      ? `${headerPL}rem`
-                      : undefined,
+                  pl: tableCellProps?.align === 'center' ? `${headerPL}rem` : undefined,
                 }}
               >
                 <Box
@@ -302,20 +266,13 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                     minWidth: `${Math.min(columnDef.header?.length ?? 0, 4)}ch`,
                     overflow: columnDefType === 'data' ? 'hidden' : undefined,
                     textOverflow: 'ellipsis',
-                    whiteSpace:
-                      (columnDef.header?.length ?? 0) < 20
-                        ? 'nowrap'
-                        : 'normal',
+                    whiteSpace: (columnDef.header?.length ?? 0) < 20 ? 'nowrap' : 'normal',
                   }}
                 >
                   {HeaderElement}
                 </Box>
-                {column.getCanFilter() && (
-                  <MRT_TableHeadCellFilterLabel header={header} table={table} />
-                )}
-                {column.getCanSort() && (
-                  <MRT_TableHeadCellSortLabel header={header} table={table} />
-                )}
+                {column.getCanFilter() && <MRT_TableHeadCellFilterLabel header={header} table={table} />}
+                {column.getCanSort() && <MRT_TableHeadCellSortLabel header={header} table={table} />}
               </Box>
               {columnDefType !== 'group' && (
                 <Box
@@ -325,23 +282,12 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                   }}
                 >
                   {showDragHandle && (
-                    <MRT_TableHeadCellGrabHandle
-                      column={column}
-                      table={table}
-                      tableHeadCellRef={tableHeadCellRef}
-                    />
-                  )}
-                  {showColumnActions && (
-                    <MRT_TableHeadCellColumnActionsButton
-                      header={header}
-                      table={table}
-                    />
+                    <MRT_TableHeadCellGrabHandle column={column} table={table} tableHeadCellRef={tableHeadCellRef} />
                   )}
+                  {showColumnActions && <MRT_TableHeadCellColumnActionsButton header={header} table={table} />}
                 </Box>
               )}
-              {column.getCanResize() && (
-                <MRT_TableHeadCellResizeHandle header={header} table={table} />
-              )}
+              {column.getCanResize() && <MRT_TableHeadCellResizeHandle header={header} table={table} />}
             </Box>
           ))}
       {columnFilterDisplayMode === 'subheader' && column.getCanFilter() && (