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

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -1,20 +1,23 @@
-import Collapse from '@mui/material/Collapse';
+import Collapse, { type CollapseProps } from '@mui/material/Collapse';
 import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends CollapseProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellFilterContainer = <
-  TData extends Record<string, any>,
->({
+export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -29,6 +32,7 @@ export const MRT_TableHeadCellFilterContainer = <
       in={showColumnFilters || columnFilterDisplayMode === 'popover'}
       mountOnEnter
       unmountOnExit
+      {...rest}
     >
       {columnDef.filterVariant === 'checkbox' ? (
         <MRT_FilterCheckbox column={column} table={table} />

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -1,22 +1,26 @@
 import { type MouseEvent, useState } from 'react';
 import Box from '@mui/material/Box';
 import Grow from '@mui/material/Grow';
-import IconButton from '@mui/material/IconButton';
+import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Popover from '@mui/material/Popover';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellFilterLabel = <
-  TData extends Record<string, any> = {},
->({
+export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     options: {
@@ -88,7 +92,7 @@ export const MRT_TableHeadCellFilterLabel = <
         unmountOnExit
       >
         <Box component="span" sx={{ flex: '0 0' }}>
-          <Tooltip arrow placement="top" title={filterTooltip}>
+          <Tooltip placement="top" title={filterTooltip}>
             <IconButton
               disableRipple
               onClick={(event: MouseEvent<HTMLButtonElement>) => {
@@ -104,7 +108,8 @@ export const MRT_TableHeadCellFilterLabel = <
                 event.stopPropagation();
               }}
               size="small"
-              sx={{
+              {...rest}
+              sx={(theme) => ({
                 height: '16px',
                 ml: '4px',
                 opacity: isFilterActive ? 1 : 0.3,
@@ -112,7 +117,8 @@ export const MRT_TableHeadCellFilterLabel = <
                 transform: 'scale(0.75)',
                 transition: 'all 150ms ease-in-out',
                 width: '16px',
-              }}
+                ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+              })}
             >
               <FilterAltIcon />
             </IconButton>

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -1,18 +1,24 @@
 import { type DragEvent, type RefObject } from 'react';
+import { type IconButtonProps } from '@mui/material/IconButton';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+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 IconButtonProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
   tableHeadCellRef: RefObject<HTMLTableCellElement>;
 }
 
-export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
+export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   column,
   table,
   tableHeadCellRef,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -30,6 +36,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
       column,
       table,
     }),
+    ...rest,
   };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -1,17 +1,21 @@
 import Box from '@mui/material/Box';
-import Divider from '@mui/material/Divider';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import Divider, { type DividerProps } from '@mui/material/Divider';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends DividerProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellResizeHandle = <
-  TData extends Record<string, any>,
->({
+export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -53,14 +57,14 @@ export const MRT_TableHeadCellResizeHandle = <
             : '-28px',
         position: 'absolute',
         px: '4px',
-        right: '0',
+        right: column.columnDef.columnDefType === 'display' ? '4px' : '0',
       })}
     >
       <Divider
         className="Mui-TableHeadCell-ResizeHandle-Divider"
         flexItem
         orientation="vertical"
-        sx={{
+        sx={(theme) => ({
           borderRadius: '2px',
           borderWidth: '2px',
           height: '24px',
@@ -70,7 +74,8 @@ export const MRT_TableHeadCellResizeHandle = <
             : 'all 150ms ease-in-out',
           userSelect: 'none',
           zIndex: 4,
-        }}
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+        })}
       />
     </Box>
   );

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -1,18 +1,24 @@
 import Badge from '@mui/material/Badge';
-import { type TableCellProps } from '@mui/material/TableCell';
-import TableSortLabel from '@mui/material/TableSortLabel';
+import TableSortLabel, {
+  type TableSortLabelProps,
+} from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
-import { type MRT_Header, type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
+import {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableSortLabelProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
-  tableCellProps?: TableCellProps;
 }
 
-export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
+export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
   header,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -23,20 +29,23 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
   } = table;
   const { column } = header;
   const { columnDef } = column;
-  const { sorting } = getState();
+  const { isLoading, showSkeletons, sorting } = getState();
 
   const isSorted = !!column.getIsSorted();
 
-  const sortTooltip = column.getIsSorted()
-    ? column.getIsSorted() === 'desc'
-      ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
-      : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
-    : column.getNextSortingOrder() === 'desc'
-    ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
-    : localization.sortByColumnAsc.replace('{column}', columnDef.header);
+  const sortTooltip =
+    isLoading || showSkeletons
+      ? ''
+      : column.getIsSorted()
+      ? column.getIsSorted() === 'desc'
+        ? localization.sortedByColumnDesc.replace('{column}', columnDef.header)
+        : localization.sortedByColumnAsc.replace('{column}', columnDef.header)
+      : column.getNextSortingOrder() === 'desc'
+      ? localization.sortByColumnDesc.replace('{column}', columnDef.header)
+      : localization.sortByColumnAsc.replace('{column}', columnDef.header);
 
   return (
-    <Tooltip arrow placement="top" title={sortTooltip}>
+    <Tooltip placement="top" title={sortTooltip}>
       <Badge
         badgeContent={sorting.length > 1 ? column.getSortIndex() + 1 : 0}
         overlap="circular"
@@ -47,7 +56,9 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
               ? (props) => (
                   <SyncAltIcon
                     {...props}
-                    style={{ transform: 'rotate(-90deg) scaleX(0.8)' }}
+                    style={{
+                      transform: 'rotate(-90deg) scaleX(0.9) translateX(-1px)',
+                    }}
                   />
                 )
               : ArrowDownwardIcon
@@ -61,12 +72,21 @@ export const MRT_TableHeadCellSortLabel = <TData extends Record<string, any>>({
             e.stopPropagation();
             header.column.getToggleSortingHandler()?.(e);
           }}
-          sx={{
+          {...rest}
+          sx={(theme) => ({
+            '.MuiTableSortLabel-icon': {
+              color: `${
+                theme.palette.mode === 'dark'
+                  ? theme.palette.text.primary
+                  : theme.palette.text.secondary
+              } !important`,
+            },
             flex: '0 0',
             opacity: isSorted ? 1 : 0.3,
             transition: 'all 150ms ease-in-out',
             width: '3ch',
-          }}
+            ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
+          })}
         />
       </Badge>
     </Tooltip>

package/src/head/MRT_TableHeadRow.tsx

@@ -1,15 +1,17 @@
 import { type VirtualItem } from '@tanstack/react-virtual';
-import TableRow from '@mui/material/TableRow';
-import { alpha, lighten } from '@mui/material/styles';
+import { alpha } from '@mui/material';
+import TableRow, { type TableRowProps } from '@mui/material/TableRow';
 import { MRT_TableHeadCell } from './MRT_TableHeadCell';
 import { parseFromValuesOrFunc } from '../column.utils';
+import { getMRTTheme } from '../style.utils';
 import {
   type MRT_Header,
   type MRT_HeaderGroup,
+  type MRT_RowData,
   type MRT_TableInstance,
 } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> extends TableRowProps {
   headerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -17,27 +19,31 @@ interface Props<TData extends Record<string, any>> {
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableHeadRow = <TData extends Record<string, any>>({
+export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   headerGroup,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
+  ...rest
 }: Props<TData>) => {
   const {
     options: { layoutMode, muiTableHeadRowProps },
   } = table;
 
-  const tableRowProps = parseFromValuesOrFunc(muiTableHeadRowProps, {
-    headerGroup,
-    table,
-  });
+  const tableRowProps = {
+    ...parseFromValuesOrFunc(muiTableHeadRowProps, {
+      headerGroup,
+      table,
+    }),
+    rest,
+  };
 
   return (
     <TableRow
       {...tableRowProps}
       sx={(theme) => ({
-        backgroundColor: lighten(theme.palette.background.default, 0.05),
+        backgroundColor: getMRTTheme(table, theme).baseBackgroundColor,
         boxShadow: `4px 0 8px ${alpha(theme.palette.common.black, 0.1)}`,
         display: layoutMode?.startsWith('grid') ? 'flex' : undefined,
         top: 0,

package/src/hooks/useMRT_DisplayColumns.tsx

@@ -12,9 +12,12 @@ import {
   type MRT_DefinedTableOptions,
   type MRT_GroupingState,
   type MRT_Row,
+  type MRT_RowData,
 } from '../types';
+import { MRT_DefaultDisplayColumn } from './useMRT_TableOptions';
 
 const blankColProps = {
+  children: null,
   sx: {
     flex: '1 0 auto',
     minWidth: 0,
@@ -23,14 +26,14 @@ const blankColProps = {
   },
 };
 
-interface Params<TData extends Record<string, any>> {
+interface Params<TData extends MRT_RowData> {
   columnOrder: MRT_ColumnOrderState;
   creatingRow: MRT_Row<TData> | null;
   grouping: MRT_GroupingState;
   tableOptions: MRT_DefinedTableOptions<TData>;
 }
 
-export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
+export const useMRT_DisplayColumns = <TData extends MRT_RowData>({
   columnOrder,
   creatingRow,
   grouping,
@@ -48,8 +51,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
             ),
             header: tableOptions.localization.pin,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-pin'],
+            columnDefType: 'display',
             id: 'mrt-row-pin',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -64,8 +67,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
             ),
             header: tableOptions.localization.move,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-drag'],
+            columnDefType: 'display',
             id: 'mrt-row-drag',
           },
           ((tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -81,8 +84,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
             ),
             header: tableOptions.localization.actions,
             size: 70,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-actions'],
+            columnDefType: 'display',
             id: 'mrt-row-actions',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -100,8 +103,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
                 : null,
               header: tableOptions.localization.expand,
               size: 60,
-              ...tableOptions.defaultDisplayColumn,
               ...tableOptions.displayColumnDefOptions?.['mrt-row-expand'],
+              columnDefType: 'display',
               id: 'mrt-row-expand',
             },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -117,8 +120,8 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
                 : null,
             header: tableOptions.localization.select,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-select'],
+            columnDefType: 'display',
             id: 'mrt-row-select',
           },
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
@@ -128,17 +131,18 @@ export const useMRT_DisplayColumns = <TData extends Record<string, any>>({
             Header: () => tableOptions.localization.rowNumber,
             header: tableOptions.localization.rowNumbers,
             size: 60,
-            ...tableOptions.defaultDisplayColumn,
             ...tableOptions.displayColumnDefOptions?.['mrt-row-numbers'],
+            columnDefType: 'display',
             id: 'mrt-row-numbers',
           },
-
           (tableOptions.state?.columnOrder ?? columnOrder).includes(
             'mrt-row-spacer',
           ) && {
+            ...tableOptions.displayColumnDefOptions?.['mrt-row-spacer'],
+            ...MRT_DefaultDisplayColumn,
             columnDefType: 'display',
             header: '',
-            id: 'spacer',
+            id: 'mrt-row-spacer',
             muiTableBodyCellProps: blankColProps,
             muiTableFooterCellProps: blankColProps,
             muiTableHeadCellProps: blankColProps,

package/src/hooks/useMRT_Effects.ts

@@ -1,8 +1,12 @@
 import { useEffect, useReducer, useRef } from 'react';
 import { getCanRankRows } from '../column.utils';
-import { type MRT_SortingState, type MRT_TableInstance } from '../types';
+import {
+  type MRT_RowData,
+  type MRT_SortingState,
+  type MRT_TableInstance,
+} from '../types';
 
-export const useMRT_Effects = <TData extends Record<string, any> = {}>(
+export const useMRT_Effects = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
 ) => {
   const {

package/src/hooks/useMRT_TableInstance.ts

@@ -30,6 +30,7 @@ import {
   type MRT_FilterOption,
   type MRT_GroupingState,
   type MRT_Row,
+  type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableState,
   type MRT_Updater,
@@ -37,9 +38,9 @@ import {
 import { useMRT_DisplayColumns } from './useMRT_DisplayColumns';
 import { useMRT_Effects } from './useMRT_Effects';
 
-export const useMRT_TableInstance: <TData extends Record<string, any>>(
+export const useMRT_TableInstance: <TData extends MRT_RowData>(
   tableOptions: MRT_DefinedTableOptions<TData>,
-) => MRT_TableInstance<TData> = <TData extends Record<string, any>>(
+) => MRT_TableInstance<TData> = <TData extends MRT_RowData>(
   tableOptions: MRT_DefinedTableOptions<TData>,
 ) => {
   const bottomToolbarRef = useRef<HTMLDivElement>(null);

package/src/hooks/useMRT_TableOptions.ts

@@ -1,15 +1,40 @@
 import { useMemo } from 'react';
 import { MRT_AggregationFns } from '../aggregationFns';
-import { MRT_DefaultColumn, MRT_DefaultDisplayColumn } from '../column.utils';
 import { MRT_FilterFns } from '../filterFns';
 import { MRT_Default_Icons } from '../icons';
 import { MRT_Localization_EN } from '../locales/en';
 import { MRT_SortingFns } from '../sortingFns';
-import { type MRT_DefinedTableOptions, type MRT_TableOptions } from '../types';
+import {
+  type MRT_DefinedTableOptions,
+  type MRT_RowData,
+  type MRT_TableOptions,
+} from '../types';
 
-export const useMRT_TableOptions: <TData extends Record<string, any>>(
+export const MRT_DefaultColumn = {
+  filterVariant: 'text',
+  maxSize: 1000,
+  minSize: 40,
+  size: 180,
+} as const;
+
+export const MRT_DefaultDisplayColumn = {
+  columnDefType: 'display',
+  enableClickToCopy: false,
+  enableColumnActions: false,
+  enableColumnDragging: false,
+  enableColumnFilter: false,
+  enableColumnOrdering: false,
+  enableEditing: false,
+  enableGlobalFilter: false,
+  enableGrouping: false,
+  enableHiding: false,
+  enableResizing: false,
+  enableSorting: false,
+} as const;
+
+export const useMRT_TableOptions: <TData extends MRT_RowData>(
   tableOptions: MRT_TableOptions<TData>,
-) => MRT_DefinedTableOptions<TData> = <TData extends Record<string, any>>({
+) => MRT_DefinedTableOptions<TData> = <TData extends MRT_RowData>({
   aggregationFns,
   autoResetExpanded = false,
   columnFilterDisplayMode = 'subheader',

package/src/index.ts

@@ -10,6 +10,7 @@ export * from './inputs';
 export * from './menus';
 export * from './modals';
 export * from './sortingFns';
+export * from './style.utils';
 export * from './table';
 export * from './toolbar';
 export * from './types';

package/src/inputs/MRT_EditCellTextField.tsx

@@ -8,16 +8,21 @@ import MenuItem from '@mui/material/MenuItem';
 import TextField from '@mui/material/TextField';
 import { type TextFieldProps } from '@mui/material/TextField';
 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 TextFieldProps<'standard'> {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_EditCellTextField = <TData extends Record<string, any>>({
+export const MRT_EditCellTextField = <TData extends MRT_RowData>({
   cell,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -50,6 +55,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
       row,
       table,
     }),
+    ...rest,
   };
 
   const saveInputValueToRowCache = (newValue: string) => {
@@ -100,7 +106,7 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
         }
       }}
       label={
-        !['custom', 'modal'].includes(
+        ['custom', 'modal'].includes(
           (isCreating ? createDisplayMode : editDisplayMode) as string,
         )
           ? columnDef.header
@@ -116,12 +122,20 @@ export const MRT_EditCellTextField = <TData extends Record<string, any>>({
           : undefined
       }
       select={isSelectEdit}
+      size="small"
       value={value}
       variant="standard"
       {...textFieldProps}
       InputProps={{
         disableUnderline: editDisplayMode === 'table',
         ...textFieldProps.InputProps,
+        sx: (theme) => ({
+          mb: 0,
+          ...(parseFromValuesOrFunc(
+            textFieldProps?.InputProps?.sx,
+            theme,
+          ) as any),
+        }),
       }}
       inputProps={{
         autoComplete: 'new-password', // disable autocomplete and autofill

package/src/inputs/MRT_FilterCheckbox.tsx

@@ -1,17 +1,22 @@
-import Checkbox from '@mui/material/Checkbox';
+import Checkbox, { type CheckboxProps } from '@mui/material/Checkbox';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_Column, type MRT_TableInstance } from '../types';
+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 CheckboxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
+export const MRT_FilterCheckbox = <TData extends MRT_RowData>({
   column,
   table,
+  ...rest
 }: Props<TData>) => {
   const {
     getState,
@@ -29,6 +34,7 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
       column,
       table,
     }),
+    ...rest,
   };
 
   const filterLabel = localization.filterByColumn?.replace(
@@ -38,7 +44,6 @@ export const MRT_FilterCheckbox = <TData extends Record<string, any>>({
 
   return (
     <Tooltip
-      arrow
       enterDelay={1000}
       enterNextDelay={1000}
       title={checkboxProps?.title ?? filterLabel}