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

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,9 +11,15 @@ 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;
@@ -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,10 +78,10 @@ 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',
+          display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
           py: row.getIsExpanded() ? '1rem' : 0,
           transition: 'all 150ms ease-in-out',
           width: `${table.getTotalSize()}px`,

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={{

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}
       >