@cutting/material-react-table 5.0.0 → 5.1.0

package/src/components/body/MRT_TableBodyRow.tsx

@@ -1,7 +1,7 @@
 import { TableRow, type TableRowProps } from '@mui/material';
-import { alpha, darken, lighten, type Theme, useTheme } from '@mui/material/styles';
+import { alpha, type CSSObject, darken, lighten, type Theme, useTheme } from '@mui/material/styles';
 import { type VirtualItem } from '@tanstack/react-virtual';
-import { type DragEvent, memo, useMemo, useRef } from 'react';
+import { type DragEvent, memo, useRef } from 'react';
 
 import {
   type MRT_Cell,
@@ -13,16 +13,12 @@ import {
   type MRT_VirtualItem,
 } from '../../types';
 import { getIsRowSelected } from '../../utils/row.utils';
-import {
-  commonCellBeforeAfterStyles,
-  getCommonPinnedCellStyles,
-} from '../../utils/style.utils';
+import { commonCellBeforeAfterStyles, getCommonPinnedCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { Memo_MRT_TableBodyCell, MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 
-export interface MRT_TableBodyRowProps<TData extends MRT_RowData>
-  extends TableRowProps {
+export interface MRT_TableBodyRowProps<TData extends MRT_RowData> extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   numRows?: number;
   pinnedRowIds?: string[];
@@ -43,7 +39,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   table,
   virtualRow,
   ...rest
-}: MRT_TableBodyRowProps<TData>) => {
+}: MRT_TableBodyRowProps<TData>): JSX.Element => {
   const theme = useTheme();
 
   const {
@@ -54,11 +50,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
       enableStickyHeader,
       layoutMode,
       memoMode,
-      mrtTheme: {
-        baseBackgroundColor,
-        pinnedRowBackgroundColor,
-        selectedRowBackgroundColor,
-      },
+      mrtTheme: { baseBackgroundColor, pinnedRowBackgroundColor, selectedRowBackgroundColor },
       muiTableBodyRowProps,
       renderDetailPanel,
       rowPinningDisplayMode,
@@ -66,21 +58,11 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     refs: { tableFooterRef, tableHeadRef },
     setHoveredRow,
   } = table;
-  const {
-    density,
-    draggingColumn,
-    draggingRow,
-    editingCell,
-    editingRow,
-    hoveredRow,
-    isFullScreen,
-    rowPinning,
-  } = table.state;
+  const { density, draggingColumn, draggingRow, editingCell, editingRow, hoveredRow, isFullScreen } = table.state;
 
   const visibleCells = row.getVisibleCells();
 
-  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } =
-    columnVirtualizer ?? {};
+  const { virtualColumns, virtualPaddingLeft, virtualPaddingRight } = columnVirtualizer ?? {};
 
   const isRowSelected = getIsRowSelected({ row, table });
   const isRowPinned = enableRowPinning && row.getIsPinned();
@@ -96,35 +78,22 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
     ...rest,
   };
 
-  const [bottomPinnedIndex, topPinnedIndex] = useMemo(() => {
-    if (
-      !enableRowPinning ||
-      !rowPinningDisplayMode?.includes('sticky') ||
-      !pinnedRowIds ||
-      !row.getIsPinned()
-    )
+  const getPinnedIndexes = (): number[] => {
+    if (!enableRowPinning || !rowPinningDisplayMode?.includes('sticky') || !pinnedRowIds || !row.getIsPinned()) {
       return [];
-    return [
-      [...pinnedRowIds].reverse().indexOf(row.id),
-      pinnedRowIds.indexOf(row.id),
-    ];
-  }, [pinnedRowIds, rowPinning]);
+    }
+    return [[...pinnedRowIds].reverse().indexOf(row.id), pinnedRowIds.indexOf(row.id)];
+  };
+  const [bottomPinnedIndex, topPinnedIndex] = getPinnedIndexes();
 
-  const tableHeadHeight =
-    ((enableStickyHeader || isFullScreen) &&
-      tableHeadRef.current?.clientHeight) ||
-    0;
-  const tableFooterHeight =
-    (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
+  const tableHeadHeight = ((enableStickyHeader || isFullScreen) && tableHeadRef.current?.clientHeight) || 0;
+  const tableFooterHeight = (enableStickyFooter && tableFooterRef.current?.clientHeight) || 0;
 
-  const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme as any);
+  const sx = parseFromValuesOrFunc(tableRowProps?.sx, theme) as CSSObject | undefined;
 
-  const defaultRowHeight =
-    density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
+  const defaultRowHeight = density === 'compact' ? 37 : density === 'comfortable' ? 53 : 69;
 
-  const customRowHeight =
-    // @ts-expect-error
-    parseInt(tableRowProps?.style?.height ?? sx?.height, 10) || undefined;
+  const customRowHeight = parseInt(String(tableRowProps?.style?.height ?? sx?.height), 10) || undefined;
 
   const rowHeight = customRowHeight || defaultRowHeight;
 
@@ -172,9 +141,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
         selected={isRowSelected}
         {...tableRowProps}
         style={{
-          transform: virtualRow
-            ? `translateY(${virtualRow.start}px)`
-            : undefined,
+          transform: virtualRow ? `translateY(${virtualRow.start}px)` : undefined,
           ...tableRowProps?.style,
         }}
         sx={(theme: Theme) => ({
@@ -187,10 +154,7 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
             !virtualRow && bottomPinnedIndex !== undefined && isRowPinned
-              ? `${
-                  bottomPinnedIndex * rowHeight +
-                  (enableStickyFooter ? tableFooterHeight - 1 : 0)
-                }px`
+              ? `${bottomPinnedIndex * rowHeight + (enableStickyFooter ? tableFooterHeight - 1 : 0)}px`
               : undefined,
           boxSizing: 'border-box',
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
@@ -212,54 +176,44 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
           top: virtualRow
             ? 0
             : topPinnedIndex !== undefined && isRowPinned
-              ? `${
-                  topPinnedIndex * rowHeight +
-                  (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)
-                }px`
+              ? `${topPinnedIndex * rowHeight + (enableStickyHeader || isFullScreen ? tableHeadHeight - 1 : 0)}px`
               : undefined,
           transition: virtualRow ? 'none' : 'all 150ms ease-in-out',
           width: '100%',
-          zIndex:
-            rowPinningDisplayMode?.includes('sticky') && isRowPinned ? 2 : 0,
-          ...(sx as any),
+          zIndex: rowPinningDisplayMode?.includes('sticky') && isRowPinned ? 2 : 0,
+          ...sx,
         })}
       >
-        {virtualPaddingLeft ? (
-          <td style={{ display: 'flex', width: virtualPaddingLeft }} />
-        ) : null}
-        {(virtualColumns ?? visibleCells).map(
-          (cellOrVirtualCell, staticColumnIndex) => {
-            let cell = cellOrVirtualCell as MRT_Cell<TData>;
-            if (columnVirtualizer) {
-              staticColumnIndex = (cellOrVirtualCell as MRT_VirtualItem).index;
-              cell = visibleCells[staticColumnIndex];
-            }
-            const props = {
-              cell,
-              numRows,
-              rowRef,
-              staticColumnIndex,
-              staticRowIndex,
-              table,
-            };
-            const key = `${cell.id}-${staticRowIndex}`;
-            return cell ? (
-              memoMode === 'cells' &&
-              cell.column.columnDef.columnDefType === 'data' &&
-              !draggingColumn &&
-              !draggingRow &&
-              editingCell?.id !== cell.id &&
-              editingRow?.id !== row.id ? (
-                <Memo_MRT_TableBodyCell key={key} {...props} />
-              ) : (
-                <MRT_TableBodyCell key={key} {...props} />
-              )
-            ) : null;
-          },
-        )}
-        {virtualPaddingRight ? (
-          <td style={{ display: 'flex', width: virtualPaddingRight }} />
-        ) : null}
+        {virtualPaddingLeft ? <td style={{ display: 'flex', width: virtualPaddingLeft }} /> : null}
+        {(virtualColumns ?? visibleCells).map((cellOrVirtualCell, staticColumnIndex) => {
+          let cell = cellOrVirtualCell as MRT_Cell<TData>;
+          if (columnVirtualizer) {
+            staticColumnIndex = (cellOrVirtualCell as MRT_VirtualItem).index;
+            cell = visibleCells[staticColumnIndex];
+          }
+          const props = {
+            cell,
+            numRows,
+            rowRef,
+            staticColumnIndex,
+            staticRowIndex,
+            table,
+          };
+          const key = `${cell.id}-${staticRowIndex}`;
+          return cell ? (
+            memoMode === 'cells' &&
+            cell.column.columnDef.columnDefType === 'data' &&
+            !draggingColumn &&
+            !draggingRow &&
+            editingCell?.id !== cell.id &&
+            editingRow?.id !== row.id ? (
+              <Memo_MRT_TableBodyCell key={key} {...props} />
+            ) : (
+              <MRT_TableBodyCell key={key} {...props} />
+            )
+          ) : null;
+        })}
+        {virtualPaddingRight ? <td style={{ display: 'flex', width: virtualPaddingRight }} /> : null}
       </TableRow>
       {renderDetailPanel && !row.getIsGrouped() && (
         <MRT_TableDetailPanel
@@ -277,6 +231,5 @@ export const MRT_TableBodyRow = <TData extends MRT_RowData>({
 
 export const Memo_MRT_TableBodyRow = memo(
   MRT_TableBodyRow,
-  (prev, next) =>
-    prev.row === next.row && prev.staticRowIndex === next.staticRowIndex,
+  (prev, next) => prev.row === next.row && prev.staticRowIndex === next.staticRowIndex,
 ) as typeof MRT_TableBodyRow;

package/src/components/body/MRT_TableBodyRowGrabHandle.test.tsx

@@ -10,9 +10,7 @@ interface Person {
 
 const data: Person[] = [{ name: 'Alice' }, { name: 'Bob' }];
 
-const columns = (): MRT_ColumnDef<Person>[] => [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns = (): MRT_ColumnDef<Person>[] => [{ accessorKey: 'name', header: 'Name' }];
 
 describe('row ordering', () => {
   test('dragging a row over another reports both rows to the drop handler', () => {
@@ -26,9 +24,7 @@ describe('row ordering', () => {
       />,
     );
 
-    const handles = container.querySelectorAll<HTMLElement>(
-      'tbody button[aria-label="Move"]',
-    );
+    const handles = container.querySelectorAll<HTMLElement>('tbody button[aria-label="Move"]');
     const rows = container.querySelectorAll<HTMLElement>('tbody tr');
 
     fireEvent.dragStart(handles[0], {

package/src/components/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,16 +1,11 @@
 import { type IconButtonProps } from '@mui/material/IconButton';
 import { type DragEvent, type RefObject } from 'react';
 
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
-export interface MRT_TableBodyRowGrabHandleProps<TData extends MRT_RowData>
-  extends IconButtonProps {
+export interface MRT_TableBodyRowGrabHandleProps<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;
   rowRef: RefObject<HTMLTableRowElement | null>;
   table: MRT_TableInstance<TData>;
@@ -21,7 +16,7 @@ export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
   rowRef,
   table,
   ...rest
-}: MRT_TableBodyRowGrabHandleProps<TData>) => {
+}: MRT_TableBodyRowGrabHandleProps<TData>): JSX.Element => {
   const {
     options: { muiRowDragHandleProps },
   } = table;
@@ -41,7 +36,7 @@ export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
     } catch (e) {
       console.error(e);
     }
-    table.setDraggingRow(row as any);
+    table.setDraggingRow(row);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {

package/src/components/body/MRT_TableBodyRowPinButton.tsx

@@ -1,16 +1,11 @@
 import { Box } from '@mui/material';
 import { type IconButtonProps } from '@mui/material/IconButton';
 
-import {
-  type MRT_Row,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Row, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
 
-export interface MRT_TableBodyRowPinButtonProps<TData extends MRT_RowData>
-  extends IconButtonProps {
+export interface MRT_TableBodyRowPinButtonProps<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -19,15 +14,17 @@ export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   row,
   table,
   ...rest
-}: MRT_TableBodyRowPinButtonProps<TData>) => {
+}: MRT_TableBodyRowPinButtonProps<TData>): JSX.Element | null => {
   const {
     options: { enableRowPinning, rowPinningDisplayMode },
   } = table;
   const { density } = table.state;
 
-  const canPin = parseFromValuesOrFunc(enableRowPinning, row as any);
+  const canPin = parseFromValuesOrFunc(enableRowPinning, row);
 
-  if (!canPin) return null;
+  if (!canPin) {
+    return null;
+  }
 
   const rowPinButtonProps = {
     row,
@@ -50,9 +47,6 @@ export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   }
 
   return (
-    <MRT_RowPinButton
-      pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
-      {...rowPinButtonProps}
-    />
+    <MRT_RowPinButton pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'} {...rowPinButtonProps} />
   );
 };

package/src/components/body/MRT_TableDetailPanel.test.tsx

@@ -12,9 +12,7 @@ interface Person {
 
 const data: Person[] = [{ city: 'Glasgow', name: 'Alice' }];
 
-const columns = (): MRT_ColumnDef<Person>[] => [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns = (): MRT_ColumnDef<Person>[] => [{ accessorKey: 'name', header: 'Name' }];
 
 describe('detail panel', () => {
   test('reveals the panel content when the expand button is clicked', async () => {
@@ -23,17 +21,13 @@ describe('detail panel', () => {
       <MaterialReactTable
         columns={columns()}
         data={data}
-        renderDetailPanel={({ row }) => (
-          <span>Lives in {row.original.city}</span>
-        )}
+        renderDetailPanel={({ row }) => <span>Lives in {row.original.city}</span>}
       />,
     );
 
     expect(container.textContent).not.toContain('Lives in Glasgow');
 
-    await user.click(
-      container.querySelector('tbody button[aria-label="Expand"]') as HTMLElement,
-    );
+    await user.click(container.querySelector('tbody button[aria-label="Expand"]') as HTMLElement);
 
     expect(container.textContent).toContain('Lives in Glasgow');
   });

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -1,6 +1,5 @@
-import { Collapse } from '@mui/material';
-import { TableCell, type TableCellProps } from '@mui/material';
-import { TableRow } from '@mui/material';
+import { Collapse, TableCell, type TableCellProps, TableRow } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { type RefObject } from 'react';
 
 import {
@@ -12,8 +11,7 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_TableDetailPanelProps<TData extends MRT_RowData>
-  extends TableCellProps {
+export interface MRT_TableDetailPanelProps<TData extends MRT_RowData> extends TableCellProps {
   parentRowRef: RefObject<HTMLTableRowElement | null>;
   row: MRT_Row<TData>;
   rowVirtualizer?: MRT_RowVirtualizer;
@@ -30,7 +28,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   table,
   virtualRow,
   ...rest
-}: MRT_TableDetailPanelProps<TData>) => {
+}: MRT_TableDetailPanelProps<TData>): JSX.Element => {
   const {
     getVisibleLeafColumns,
     options: {
@@ -73,14 +71,10 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
       sx={(theme) => ({
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         position: virtualRow ? 'absolute' : undefined,
-        top: virtualRow
-          ? `${parentRowRef.current?.getBoundingClientRect()?.height}px`
-          : undefined,
-        transform: virtualRow
-          ? `translateY(${virtualRow?.start}px)`
-          : undefined,
+        top: virtualRow ? `${parentRowRef.current?.getBoundingClientRect()?.height}px` : undefined,
+        transform: virtualRow ? `translateY(${virtualRow?.start}px)` : undefined,
         width: '100%',
-        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as CSSObject),
       })}
     >
       <TableCell
@@ -94,7 +88,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
           py: !!DetailPanel && row.getIsExpanded() ? '1rem' : 0,
           transition: !virtualRow ? 'all 150ms ease-in-out' : undefined,
           width: `100%`,
-          ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as CSSObject),
         })}
       >
         {virtualRow ? (

package/src/components/buttons/MRT_ColumnPinningButtons.test.tsx

@@ -18,33 +18,23 @@ 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, ''));
 
 describe('column pinning', () => {
   test('pinning to start moves the column to the front', async () => {
     const user = userEvent.setup();
     const { baseElement, container } = render(
-      <MaterialReactTable
-        columns={columns()}
-        data={data}
-        enableColumnPinning
-      />,
+      <MaterialReactTable columns={columns()} data={data} enableColumnPinning />,
     );
 
     expect(headerOrder(container)).toEqual(['Name', 'City']);
 
-    const cityHeader = Array.from(
-      container.querySelectorAll<HTMLElement>('thead th'),
-    ).find((th) => th.textContent?.includes('City'));
-
-    await user.click(
-      cityHeader?.querySelector(
-        'button[aria-label="Column Actions"]',
-      ) as HTMLElement,
+    const cityHeader = Array.from(container.querySelectorAll<HTMLElement>('thead th')).find((th) =>
+      th.textContent?.includes('City'),
     );
 
+    await user.click(cityHeader?.querySelector('button[aria-label="Column Actions"]') as HTMLElement);
+
     await user.click(
       Array.from(baseElement.querySelectorAll<HTMLElement>('li')).find((li) =>
         li.textContent?.includes('Pin to left'),

package/src/components/buttons/MRT_ColumnPinningButtons.tsx

@@ -1,16 +1,10 @@
-import { Box, type BoxProps } from '@mui/material';
-import { IconButton } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { Box, type BoxProps, IconButton, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 
-import {
-  type MRT_Column,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Column, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_ColumnPinningButtonsProps<TData extends MRT_RowData>
-  extends BoxProps {
+export interface MRT_ColumnPinningButtonsProps<TData extends MRT_RowData> extends BoxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -19,7 +13,7 @@ export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
   column,
   table,
   ...rest
-}: MRT_ColumnPinningButtonsProps<TData>) => {
+}: MRT_ColumnPinningButtonsProps<TData>): JSX.Element => {
   const {
     options: {
       icons: { PushPinIcon },
@@ -37,7 +31,7 @@ export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
       sx={(theme) => ({
         minWidth: '70px',
         textAlign: 'center',
-        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as CSSObject),
       })}
     >
       {column.getIsPinned() ? (

package/src/components/buttons/MRT_CopyButton.tsx

@@ -1,17 +1,12 @@
-import { Button, type ButtonProps } from '@mui/material';
-import { Tooltip } from '@mui/material';
+import { Button, type ButtonProps, Tooltip } from '@mui/material';
+import { type CSSObject } from '@mui/material/styles';
 import { type MouseEvent, useState } from 'react';
 
-import {
-  type MRT_Cell,
-  type MRT_RowData,
-  type MRT_TableInstance,
-} from '../../types';
+import { type MRT_Cell, type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-export interface MRT_CopyButtonProps<TData extends MRT_RowData>
-  extends ButtonProps {
+export interface MRT_CopyButtonProps<TData extends MRT_RowData> extends ButtonProps {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -20,7 +15,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
   cell,
   table,
   ...rest
-}: MRT_CopyButtonProps<TData>) => {
+}: MRT_CopyButtonProps<TData>): JSX.Element => {
   const {
     options: { localization, muiCopyButtonProps },
   } = table;
@@ -55,10 +50,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
   return (
     <Tooltip
       {...getCommonTooltipProps('top')}
-      title={
-        buttonProps?.title ??
-        (copied ? localization.copiedToClipboard : localization.clickToCopy)
-      }
+      title={buttonProps?.title ?? (copied ? localization.copiedToClipboard : localization.clickToCopy)}
     >
       <Button
         onClick={(e) => handleCopy(e, cell.getValue())}
@@ -79,7 +71,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
           py: 0,
           textAlign: 'inherit',
           textTransform: 'inherit',
-          ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as CSSObject),
         })}
         title={undefined}
       />

package/src/components/buttons/MRT_EditActionButtons.test.tsx

@@ -11,9 +11,7 @@ interface Person {
 
 const data: Person[] = [{ name: 'Alice' }];
 
-const columns = (): MRT_ColumnDef<Person>[] => [
-  { accessorKey: 'name', header: 'Name' },
-];
+const columns = (): MRT_ColumnDef<Person>[] => [{ accessorKey: 'name', header: 'Name' }];
 
 describe('creating a row', () => {
   test('calls onCreatingRowSave when save is clicked', async () => {
@@ -41,9 +39,7 @@ describe('creating a row', () => {
 
     expect(container.querySelectorAll('tbody input').length).toBeGreaterThan(0);
 
-    await user.click(
-      container.querySelector('[aria-label="Save"]') as HTMLElement,
-    );
+    await user.click(container.querySelector('[aria-label="Save"]') as HTMLElement);
 
     expect(onCreatingRowSave).toHaveBeenCalled();
   });