material-react-table 2.0.0-beta.0 → 2.0.0-beta.10

package/src/body/MRT_TableBodyCell.tsx

@@ -7,40 +7,44 @@ import {
   useMemo,
   useState,
 } from 'react';
-import { type VirtualItem } from '@tanstack/react-virtual';
 import Skeleton from '@mui/material/Skeleton';
-import TableCell from '@mui/material/TableCell';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
 import { MRT_TableBodyCellValue } from './MRT_TableBodyCellValue';
 import { MRT_TableBodyRowGrabHandle } from './MRT_TableBodyRowGrabHandle';
 import { MRT_CopyButton } from '../buttons/MRT_CopyButton';
 import {
-  getCommonCellStyles,
   getIsFirstColumn,
   getIsLastColumn,
   parseFromValuesOrFunc,
 } from '../column.utils';
 import { MRT_EditCellTextField } from '../inputs/MRT_EditCellTextField';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import { getCommonMRTCellStyles, getMRTTheme } from '../style.utils';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   cell: MRT_Cell<TData>;
   measureElement?: (element: HTMLTableCellElement) => void;
-  numRows: number;
+  numRows?: number;
   rowIndex: number;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
-  virtualCell?: VirtualItem;
+  virtualIndex?: number;
 }
 
-export const MRT_TableBodyCell = <TData extends Record<string, any>>({
+export const MRT_TableBodyCell = <TData extends MRT_RowData>({
   cell,
   measureElement,
   numRows,
   rowIndex,
   rowRef,
   table,
-  virtualCell,
+  virtualIndex,
+  ...rest
 }: Props<TData>) => {
   const theme = useTheme();
   const {
@@ -63,6 +67,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
     setHoveredColumn,
   } = table;
   const {
+    columnSizingInfo,
     creatingRow,
     density,
     draggingColumn,
@@ -78,19 +83,11 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
+  const args = { cell, column, row, table };
   const tableCellProps = {
-    ...parseFromValuesOrFunc(muiTableBodyCellProps, {
-      cell,
-      column,
-      row,
-      table,
-    }),
-    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, {
-      cell,
-      column,
-      row,
-      table,
-    }),
+    ...parseFromValuesOrFunc(muiTableBodyCellProps, args),
+    ...parseFromValuesOrFunc(columnDef.muiTableBodyCellProps, args),
+    ...rest,
   };
 
   const skeletonProps = parseFromValuesOrFunc(muiSkeletonProps, {
@@ -100,6 +97,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
     table,
   });
 
+  const { draggingBorderColor } = getMRTTheme(table, theme);
+
   const [skeletonWidth, setSkeletonWidth] = useState(100);
   useEffect(() => {
     if ((!isLoading && !showSkeletons) || skeletonWidth !== 100) return;
@@ -118,15 +117,23 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
     const isHoveredRow = hoveredRow?.id === row.id;
     const isFirstColumn = getIsFirstColumn(column, table);
     const isLastColumn = getIsLastColumn(column, table);
-    const isLastRow = rowIndex === numRows - 1;
+    const isLastRow = numRows && rowIndex === numRows - 1;
 
     const borderStyle =
-      isDraggingColumn || isDraggingRow
-        ? `1px dashed ${theme.palette.text.secondary} !important`
-        : isHoveredColumn || isHoveredRow
-        ? `2px dashed ${theme.palette.primary.main} !important`
+      columnSizingInfo.isResizingColumn === column.id
+        ? `2px solid ${draggingBorderColor} !important`
+        : isDraggingColumn || isDraggingRow
+        ? `1px dashed ${theme.palette.grey[500]} !important`
+        : isHoveredColumn ||
+          isHoveredRow ||
+          columnSizingInfo.isResizingColumn === column.id
+        ? `2px dashed ${draggingBorderColor} !important`
         : undefined;
 
+    if (columnSizingInfo.isResizingColumn === column.id) {
+      return { borderRight: borderStyle };
+    }
+
     return borderStyle
       ? {
           borderBottom:
@@ -148,7 +155,14 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
           borderTop: isDraggingRow || isHoveredRow ? borderStyle : undefined,
         }
       : undefined;
-  }, [draggingColumn, draggingRow, hoveredColumn, hoveredRow, rowIndex]);
+  }, [
+    columnSizingInfo.isResizingColumn,
+    draggingColumn,
+    draggingRow,
+    hoveredColumn,
+    hoveredRow,
+    rowIndex,
+  ]);
 
   const isEditable =
     parseFromValuesOrFunc(enableEditing, row) &&
@@ -193,7 +207,7 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
 
   return (
     <TableCell
-      data-index={virtualCell?.index}
+      data-index={virtualIndex}
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           measureElement?.(node);
@@ -204,9 +218,10 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
       onDragEnter={handleDragEnter}
       sx={(theme) => ({
         '&:hover': {
-          outline: ['cell', 'table'].includes(editDisplayMode ?? '')
-            ? `1px solid ${theme.palette.text.secondary}`
-            : undefined,
+          outline:
+            ['cell', 'table'].includes(editDisplayMode ?? '') && isEditable
+              ? `1px solid ${theme.palette.grey[500]}`
+              : undefined,
           outlineOffset: '-1px',
           textOverflow: 'clip',
         },
@@ -229,7 +244,8 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
             : columnDefType === 'display'
             ? '1rem 1.25rem'
             : '1.5rem',
-        pl:
+        textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
+        [theme.direction === 'rtl' ? 'pr' : 'pl']:
           column.id === 'mrt-row-expand'
             ? `${
                 row.depth +
@@ -240,12 +256,11 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
                   : 1.25)
               }rem`
             : undefined,
-        textOverflow: columnDefType !== 'display' ? 'ellipsis' : undefined,
         whiteSpace:
           row.getIsPinned() || density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
           draggingColumn?.id === column.id ? 2 : column.getIsPinned() ? 1 : 0,
-        ...getCommonCellStyles({
+        ...getCommonMRTCellStyles({
           column,
           table,
           tableCellProps,
@@ -254,47 +269,53 @@ export const MRT_TableBodyCell = <TData extends Record<string, any>>({
         ...draggingBorders,
       })}
     >
-      <>
-        {cell.getIsPlaceholder() ? (
-          columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
-        ) : isLoading || showSkeletons ? (
-          <Skeleton
-            animation="wave"
-            height={20}
-            width={skeletonWidth}
-            {...skeletonProps}
-          />
-        ) : enableRowNumbers &&
-          rowNumberMode === 'static' &&
-          column.id === 'mrt-row-numbers' ? (
-          rowIndex + 1
-        ) : column.id === 'mrt-row-drag' ? (
-          <MRT_TableBodyRowGrabHandle row={row} rowRef={rowRef} table={table} />
-        ) : columnDefType === 'display' &&
-          (column.id === 'mrt-row-select' ||
-            column.id === 'mrt-row-expand' ||
-            !row.getIsGrouped()) ? (
-          columnDef.Cell?.({
-            cell,
-            column,
-            renderedCellValue: cell.renderValue() as any,
-            row,
-            table,
-          })
-        ) : isCreating || isEditing ? (
-          <MRT_EditCellTextField cell={cell} table={table} />
-        ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
-          columnDef.enableClickToCopy !== false ? (
-          <MRT_CopyButton cell={cell} table={table}>
+      {tableCellProps.children ?? (
+        <>
+          {cell.getIsPlaceholder() ? (
+            columnDef.PlaceholderCell?.({ cell, column, row, table }) ?? null
+          ) : showSkeletons !== false && (isLoading || showSkeletons) ? (
+            <Skeleton
+              animation="wave"
+              height={20}
+              width={skeletonWidth}
+              {...skeletonProps}
+            />
+          ) : enableRowNumbers &&
+            rowNumberMode === 'static' &&
+            column.id === 'mrt-row-numbers' ? (
+            rowIndex + 1
+          ) : column.id === 'mrt-row-drag' ? (
+            <MRT_TableBodyRowGrabHandle
+              row={row}
+              rowRef={rowRef}
+              table={table}
+            />
+          ) : columnDefType === 'display' &&
+            (column.id === 'mrt-row-select' ||
+              column.id === 'mrt-row-expand' ||
+              !row.getIsGrouped()) ? (
+            columnDef.Cell?.({
+              cell,
+              column,
+              renderedCellValue: cell.renderValue() as any,
+              row,
+              table,
+            })
+          ) : isCreating || isEditing ? (
+            <MRT_EditCellTextField cell={cell} table={table} />
+          ) : (enableClickToCopy || columnDef.enableClickToCopy) &&
+            columnDef.enableClickToCopy !== false ? (
+            <MRT_CopyButton cell={cell} table={table}>
+              <MRT_TableBodyCellValue cell={cell} table={table} />
+            </MRT_CopyButton>
+          ) : (
             <MRT_TableBodyCellValue cell={cell} table={table} />
-          </MRT_CopyButton>
-        ) : (
-          <MRT_TableBodyCellValue cell={cell} table={table} />
-        )}
-        {cell.getIsGrouped() && !columnDef.GroupedCell && (
-          <> ({row.subRows?.length})</>
-        )}
-      </>
+          )}
+          {cell.getIsGrouped() && !columnDef.GroupedCell && (
+            <> ({row.subRows?.length})</>
+          )}
+        </>
+      )}
     </TableCell>
   );
 };

package/src/body/MRT_TableBodyCellValue.tsx

@@ -1,17 +1,21 @@
 import { type ReactNode } from 'react';
 import Box from '@mui/material/Box';
-import { darken, lighten } from '@mui/material/styles';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
+import { getMRTTheme } from '../style.utils';
+import {
+  type MRT_Cell,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 import highlightWords from 'highlight-words';
 
 const allowedTypes = ['string', 'number'];
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
+export const MRT_TableBodyCellValue = <TData extends MRT_RowData>({
   cell,
   table,
 }: Props<TData>) => {
@@ -79,12 +83,12 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
                 match
                   ? {
                       backgroundColor: (theme) =>
-                        theme.palette.mode === 'dark'
-                          ? darken(theme.palette.warning.dark, 0.25)
-                          : lighten(theme.palette.warning.light, 0.5),
+                        getMRTTheme(table, theme).matchHighlightColor,
                       borderRadius: '2px',
                       color: (theme) =>
-                        theme.palette.mode === 'dark' ? 'white' : 'black',
+                        theme.palette.mode === 'dark'
+                          ? theme.palette.common.white
+                          : theme.palette.common.black,
                       padding: '2px 1px',
                     }
                   : undefined
@@ -108,5 +112,5 @@ export const MRT_TableBodyCellValue = <TData extends Record<string, any>>({
     });
   }
 
-  return <>{renderedCellValue}</>;
+  return renderedCellValue;
 };

package/src/body/MRT_TableBodyRow.tsx

@@ -11,12 +11,18 @@ import {
 import { MRT_TableBodyCell, Memo_MRT_TableBodyCell } from './MRT_TableBodyCell';
 import { MRT_TableDetailPanel } from './MRT_TableDetailPanel';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
+import { getMRTTheme } from '../style.utils';
+import {
+  type MRT_Cell,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   measureElement?: (element: HTMLTableRowElement) => void;
-  numRows: number;
+  numRows?: number;
   pinnedRowIds?: string[];
   row: MRT_Row<TData>;
   rowIndex: number;
@@ -27,7 +33,7 @@ interface Props<TData extends Record<string, any>> {
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableBodyRow = <TData extends Record<string, any>>({
+export const MRT_TableBodyRow = <TData extends MRT_RowData>({
   columnVirtualizer,
   measureElement,
   numRows,
@@ -113,10 +119,18 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
 
   const rowRef = useRef<HTMLTableRowElement | null>(null);
 
+  const {
+    baseBackgroundColor,
+    pinnedRowBackgroundColor,
+    selectedRowBackgroundColor,
+  } = getMRTTheme(table, theme);
+
   return (
     <>
       <TableRow
         data-index={virtualRow?.index}
+        data-pinned={!!isPinned || undefined}
+        data-selected={row.getIsSelected() || undefined}
         onDragEnter={handleDragEnter}
         ref={(node: HTMLTableRowElement) => {
           if (node) {
@@ -137,16 +151,13 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
             backgroundColor:
               tableRowProps?.hover !== false
                 ? row.getIsSelected()
-                  ? `${alpha(theme.palette.primary.main, 0.2)}`
+                  ? `${alpha(selectedRowBackgroundColor, 0.3)}`
                   : theme.palette.mode === 'dark'
-                  ? `${lighten(theme.palette.background.default, 0.12)}`
-                  : `${darken(theme.palette.background.default, 0.05)}`
+                  ? `${lighten(baseBackgroundColor, 0.05)}`
+                  : `${darken(baseBackgroundColor, 0.05)}`
                 : undefined,
           },
-          backgroundColor: `${lighten(
-            theme.palette.background.default,
-            0.05,
-          )} !important`,
+          backgroundColor: `${baseBackgroundColor} !important`,
           bottom:
             !virtualRow && bottomPinnedIndex !== undefined && isPinned
               ? `${
@@ -157,7 +168,7 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
           boxSizing: 'border-box',
           display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
           opacity: isPinned
-            ? 0.98
+            ? 0.97
             : draggingRow?.id === row.id || hoveredRow?.id === row.id
             ? 0.5
             : 1,
@@ -168,9 +179,9 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
             : undefined,
           td: {
             backgroundColor: row.getIsSelected()
-              ? alpha(theme.palette.primary.main, 0.2)
+              ? selectedRowBackgroundColor
               : isPinned
-              ? alpha(theme.palette.primary.main, 0.1)
+              ? pinnedRowBackgroundColor
               : undefined,
           },
           top: virtualRow
@@ -204,8 +215,8 @@ export const MRT_TableBodyRow = <TData extends Record<string, any>>({
             rowIndex,
             rowRef,
             table,
-            virtualCell: columnVirtualizer
-              ? (cellOrVirtualCell as VirtualItem)
+            virtualIndex: columnVirtualizer
+              ? (cellOrVirtualCell as VirtualItem).index
               : undefined,
           };
           return cell ? (

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -1,27 +1,36 @@
 import { type DragEvent, type RefObject } from 'react';
+import { type IconButtonProps } from '@mui/material/IconButton';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;
   rowRef: RefObject<HTMLTableRowElement>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyRowGrabHandle = <TData extends Record<string, any>>({
+export const MRT_TableBodyRowGrabHandle = <TData extends MRT_RowData>({
   row,
   rowRef,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { muiRowDragHandleProps },
   } = table;
 
-  const iconButtonProps = parseFromValuesOrFunc(muiRowDragHandleProps, {
-    row,
-    table,
-  });
+  const iconButtonProps = {
+    ...parseFromValuesOrFunc(muiRowDragHandleProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
     iconButtonProps?.onDragStart?.(event);

package/src/body/MRT_TableBodyRowPinButton.tsx

@@ -1,16 +1,22 @@
 import Box from '@mui/material/Box';
+import { type IconButtonProps } from '@mui/material/IconButton';
 import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
+export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   row,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -22,6 +28,12 @@ export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
 
   if (!canPin) return null;
 
+  const rowPinButtonProps = {
+    row,
+    table,
+    ...rest,
+  };
+
   if (rowPinningDisplayMode === 'top-and-bottom' && !row.getIsPinned()) {
     return (
       <Box
@@ -30,8 +42,8 @@ export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
           flexDirection: density === 'compact' ? 'row' : 'column',
         }}
       >
-        <MRT_RowPinButton pinningPosition="top" row={row} table={table} />
-        <MRT_RowPinButton pinningPosition="bottom" row={row} table={table} />
+        <MRT_RowPinButton pinningPosition="top" {...rowPinButtonProps} />
+        <MRT_RowPinButton pinningPosition="bottom" {...rowPinButtonProps} />
       </Box>
     );
   }
@@ -39,8 +51,7 @@ export const MRT_TableBodyRowPinButton = <TData extends Record<string, any>>({
   return (
     <MRT_RowPinButton
       pinningPosition={rowPinningDisplayMode === 'bottom' ? 'bottom' : 'top'}
-      row={row}
-      table={table}
+      {...rowPinButtonProps}
     />
   );
 };

package/src/body/MRT_TableDetailPanel.tsx

@@ -1,13 +1,17 @@
 import { type RefObject } from 'react';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import Collapse from '@mui/material/Collapse';
-import TableCell from '@mui/material/TableCell';
+import TableCell, { type TableCellProps } from '@mui/material/TableCell';
 import TableRow from '@mui/material/TableRow';
-import { lighten } from '@mui/material/styles';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { getMRTTheme } from '../style.utils';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableCellProps {
   parentRowRef: RefObject<HTMLTableRowElement>;
   row: MRT_Row<TData>;
   rowIndex: number;
@@ -15,12 +19,13 @@ interface Props<TData extends Record<string, any>> {
   virtualRow?: VirtualItem;
 }
 
-export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
+export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   parentRowRef,
   row,
   rowIndex,
   table,
   virtualRow,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -41,10 +46,13 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
     table,
   });
 
-  const tableCellProps = parseFromValuesOrFunc(muiDetailPanelProps, {
-    row,
-    table,
-  });
+  const tableCellProps = {
+    ...parseFromValuesOrFunc(muiDetailPanelProps, {
+      row,
+      table,
+    }),
+    ...rest,
+  };
 
   return (
     <TableRow
@@ -70,12 +78,11 @@ export const MRT_TableDetailPanel = <TData extends Record<string, any>>({
         {...tableCellProps}
         sx={(theme) => ({
           backgroundColor: virtualRow
-            ? lighten(theme.palette.background.default, 0.05)
+            ? getMRTTheme(table, theme).baseBackgroundColor
             : undefined,
           borderBottom: !row.getIsExpanded() ? 'none' : undefined,
-          display: layoutMode?.startsWith('grid') ? 'flex' : 'table-cell',
-          pb: row.getIsExpanded() ? '1rem' : 0,
-          pt: row.getIsExpanded() ? '1rem' : 0,
+          display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
+          py: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',
           width: `${table.getTotalSize()}px`,
           ...(parseFromValuesOrFunc(tableCellProps?.sx, theme) as any),

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -1,16 +1,22 @@
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Column,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends BoxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnPinningButtons = <TData extends Record<string, any>>({
+export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
   column,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -24,16 +30,23 @@ export const MRT_ColumnPinningButtons = <TData extends Record<string, any>>({
   };
 
   return (
-    <Box sx={{ minWidth: '70px', textAlign: 'center' }}>
+    <Box
+      {...rest}
+      sx={(theme) => ({
+        minWidth: '70px',
+        textAlign: 'center',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
+    >
       {column.getIsPinned() ? (
-        <Tooltip arrow title={localization.unpin}>
+        <Tooltip title={localization.unpin}>
           <IconButton onClick={() => handlePinColumn(false)} size="small">
             <PushPinIcon />
           </IconButton>
         </Tooltip>
       ) : (
         <>
-          <Tooltip arrow title={localization.pinToLeft}>
+          <Tooltip title={localization.pinToLeft}>
             <IconButton onClick={() => handlePinColumn('left')} size="small">
               <PushPinIcon
                 style={{
@@ -42,7 +55,7 @@ export const MRT_ColumnPinningButtons = <TData extends Record<string, any>>({
               />
             </IconButton>
           </Tooltip>
-          <Tooltip arrow title={localization.pinToRight}>
+          <Tooltip title={localization.pinToRight}>
             <IconButton onClick={() => handlePinColumn('right')} size="small">
               <PushPinIcon
                 style={{