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

package/src/buttons/MRT_CopyButton.tsx

@@ -1,19 +1,22 @@
-import { type MouseEvent, type ReactNode, useState } from 'react';
-import Button from '@mui/material/Button';
+import { type MouseEvent, useState } from 'react';
+import Button, { type ButtonProps } from '@mui/material/Button';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Cell, type MRT_TableInstance } from '../types';
+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 ButtonProps {
   cell: MRT_Cell<TData>;
-  children: ReactNode;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_CopyButton = <TData extends Record<string, any>>({
+export const MRT_CopyButton = <TData extends MRT_RowData>({
   cell,
-  children,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { localization, muiCopyButtonProps },
@@ -43,11 +46,11 @@ export const MRT_CopyButton = <TData extends Record<string, any>>({
       row,
       table,
     }),
+    ...rest,
   };
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       placement="top"
@@ -77,9 +80,7 @@ export const MRT_CopyButton = <TData extends Record<string, any>>({
           ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as any),
         })}
         title={undefined}
-      >
-        {children}
-      </Button>
+      />
     </Tooltip>
   );
 };

package/src/buttons/MRT_EditActionButtons.tsx

@@ -1,20 +1,26 @@
-import Box from '@mui/material/Box';
+import Box, { type BoxProps } from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import CircularProgress from '@mui/material/CircularProgress';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.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 BoxProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
   variant?: 'icon' | 'text';
 }
 
-export const MRT_EditActionButtons = <TData extends Record<string, any>>({
+export const MRT_EditActionButtons = <TData extends MRT_RowData>({
   row,
   table,
   variant = 'icon',
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -79,16 +85,20 @@ export const MRT_EditActionButtons = <TData extends Record<string, any>>({
   return (
     <Box
       onClick={(e) => e.stopPropagation()}
-      sx={{ display: 'flex', gap: '0.75rem' }}
+      sx={(theme) => ({
+        display: 'flex',
+        gap: '0.75rem',
+        ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+      })}
     >
       {variant === 'icon' ? (
         <>
-          <Tooltip arrow title={localization.cancel}>
+          <Tooltip title={localization.cancel}>
             <IconButton aria-label={localization.cancel} onClick={handleCancel}>
               <CancelIcon />
             </IconButton>
           </Tooltip>
-          <Tooltip arrow title={localization.save}>
+          <Tooltip title={localization.save}>
             <IconButton
               aria-label={localization.save}
               color="info"

package/src/buttons/MRT_ExpandAllButton.tsx

@@ -1,14 +1,15 @@
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
+export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getCanSomeRowsExpand,
@@ -25,21 +26,22 @@ export const MRT_ExpandAllButton = <TData extends Record<string, any>>({
   } = table;
   const { density, isLoading } = getState();
 
-  const iconButtonProps = parseFromValuesOrFunc(muiExpandAllButtonProps, {
-    table,
-  });
+  const iconButtonProps = {
+    ...parseFromValuesOrFunc(muiExpandAllButtonProps, {
+      table,
+    }),
+    ...rest,
+  };
 
   const isAllRowsExpanded = getIsAllRowsExpanded();
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       title={
-        iconButtonProps?.title ?? isAllRowsExpanded
-          ? localization.collapseAll
-          : localization.expandAll
+        iconButtonProps?.title ??
+        (isAllRowsExpanded ? localization.collapseAll : localization.expandAll)
       }
     >
       <span>

package/src/buttons/MRT_ExpandButton.tsx

@@ -1,15 +1,19 @@
 import { type MouseEvent } from 'react';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 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_ExpandButton = <TData extends Record<string, any>>({
+export const MRT_ExpandButton = <TData extends MRT_RowData>({
   row,
   table,
 }: Props<TData>) => {
@@ -40,14 +44,12 @@ export const MRT_ExpandButton = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      arrow
       disableHoverListener={!canExpand && !renderDetailPanel}
       enterDelay={1000}
       enterNextDelay={1000}
       title={
-        iconButtonProps?.title ?? isExpanded
-          ? localization.collapse
-          : localization.expand
+        iconButtonProps?.title ??
+        (isExpanded ? localization.collapse : localization.expand)
       }
     >
       <span>

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -2,9 +2,9 @@ import { type DragEventHandler } from 'react';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   iconButtonProps?: IconButtonProps;
   location?: 'column' | 'row';
   onDragEnd: DragEventHandler<HTMLButtonElement>;
@@ -12,12 +12,13 @@ interface Props<TData extends Record<string, any>> {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
+export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
   iconButtonProps,
   location,
   onDragEnd,
   onDragStart,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -26,22 +27,23 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
     },
   } = table;
 
+  const _iconButtonProps = { ...iconButtonProps, ...rest };
+
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       placement="top"
-      title={iconButtonProps?.title ?? localization.move}
+      title={_iconButtonProps?.title ?? localization.move}
     >
       <IconButton
         disableRipple
         draggable="true"
         size="small"
-        {...iconButtonProps}
+        {..._iconButtonProps}
         onClick={(e) => {
           e.stopPropagation();
-          iconButtonProps?.onClick?.(e);
+          _iconButtonProps?.onClick?.(e);
         }}
         onDragEnd={onDragEnd}
         onDragStart={onDragStart}
@@ -58,7 +60,7 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any>>({
           opacity: location === 'row' ? 1 : 0.3,
           p: '2px',
           transition: 'all 150ms ease-in-out',
-          ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(_iconButtonProps?.sx, theme) as any),
         })}
         title={undefined}
       >

package/src/buttons/MRT_RowPinButton.tsx

@@ -1,19 +1,25 @@
 import { type MouseEvent, useState } from 'react';
 import { type RowPinningPosition } from '@tanstack/react-table';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Row, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   pinningPosition: RowPinningPosition;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_RowPinButton = <TData extends Record<string, any>>({
+export const MRT_RowPinButton = <TData extends MRT_RowData>({
   pinningPosition,
   row,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -35,7 +41,6 @@ export const MRT_RowPinButton = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       open={tooltipOpened}
@@ -47,10 +52,12 @@ export const MRT_RowPinButton = <TData extends Record<string, any>>({
         onMouseEnter={() => setTooltipOpened(true)}
         onMouseLeave={() => setTooltipOpened(false)}
         size="small"
-        sx={{
+        {...rest}
+        sx={(theme) => ({
           height: '24px',
           width: '24px',
-        }}
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
       >
         {isPinned ? (
           <CloseIcon />

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -2,13 +2,13 @@ import { type MouseEvent, useState } from 'react';
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
+export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -27,7 +27,7 @@ export const MRT_ShowHideColumnsButton = <TData extends Record<string, any>>({
 
   return (
     <>
-      <Tooltip arrow title={rest?.title ?? localization.showHideColumns}>
+      <Tooltip title={rest?.title ?? localization.showHideColumns}>
         <IconButton
           aria-label={localization.showHideColumns}
           onClick={handleClick}

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,14 +1,12 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleDensePaddingButton = <
-  TData extends Record<string, any>,
->({
+export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -33,7 +31,7 @@ export const MRT_ToggleDensePaddingButton = <
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.toggleDensity}>
+    <Tooltip title={rest?.title ?? localization.toggleDensity}>
       <IconButton
         aria-label={localization.toggleDensity}
         onClick={handleToggleDensePadding}

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,12 +1,12 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleFiltersButton = <TData extends Record<string, any>>({
+export const MRT_ToggleFiltersButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -25,7 +25,7 @@ export const MRT_ToggleFiltersButton = <TData extends Record<string, any>>({
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.showHideFilters}>
+    <Tooltip title={rest?.title ?? localization.showHideFilters}>
       <IconButton
         aria-label={localization.showHideFilters}
         onClick={handleToggleShowFilters}

package/src/buttons/MRT_ToggleFullScreenButton.tsx

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

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,14 +1,12 @@
 import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> extends IconButtonProps {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleGlobalFilterButton = <
-  TData extends Record<string, any>,
->({
+export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
   table,
   ...rest
 }: Props<TData>) => {
@@ -30,7 +28,7 @@ export const MRT_ToggleGlobalFilterButton = <
   };
 
   return (
-    <Tooltip arrow title={rest?.title ?? localization.showHideSearch}>
+    <Tooltip title={rest?.title ?? localization.showHideSearch}>
       <IconButton
         aria-label={rest?.title ?? localization.showHideSearch}
         disabled={!!globalFilter}

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -1,10 +1,15 @@
 import { type MouseEvent, useState } from 'react';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_EditActionButtons } from './MRT_EditActionButtons';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_RowActionMenu } from '../menus/MRT_RowActionMenu';
-import { type MRT_Cell, type MRT_Row, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Cell,
+  type MRT_Row,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
 const commonIconButtonStyles = {
   '&:hover': {
@@ -17,18 +22,17 @@ const commonIconButtonStyles = {
   width: '2rem',
 };
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleRowActionMenuButton = <
-  TData extends Record<string, any>,
->({
+export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   cell,
   row,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -74,12 +78,14 @@ export const MRT_ToggleRowActionMenuButton = <
       ) : showEditActionButtons ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems &&
-        parseFromValuesOrFunc(enableEditing, row) ? (
-        <Tooltip arrow placement="right" title={localization.edit}>
+        parseFromValuesOrFunc(enableEditing, row) &&
+        ['modal', 'row'].includes(editDisplayMode!) ? (
+        <Tooltip placement="right" title={localization.edit}>
           <IconButton
             aria-label={localization.edit}
             onClick={handleStartEditMode}
             sx={commonIconButtonStyles}
+            {...rest}
           >
             <EditIcon />
           </IconButton>
@@ -87,7 +93,6 @@ export const MRT_ToggleRowActionMenuButton = <
       ) : renderRowActionMenuItems ? (
         <>
           <Tooltip
-            arrow
             enterDelay={1000}
             enterNextDelay={1000}
             title={localization.rowActions}
@@ -97,6 +102,7 @@ export const MRT_ToggleRowActionMenuButton = <
               onClick={handleOpenRowActionMenu}
               size="small"
               sx={commonIconButtonStyles}
+              {...rest}
             >
               <MoreHorizIcon />
             </IconButton>