material-react-table 1.0.0-beta.0 → 1.0.0-beta.11

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -14,7 +14,7 @@ export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
   table,
 }) => {
   const {
-    options: { muiTableBodyRowDragHandleProps, onRowDrop },
+    options: { muiTableBodyRowDragHandleProps },
   } = table;
   const { row } = cell;
 
@@ -23,17 +23,14 @@ export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
       ? muiTableBodyRowDragHandleProps({ row, table })
       : muiTableBodyRowDragHandleProps;
 
-  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
-    e.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragStart?.(event);
+    event.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
     table.setDraggingRow(row as any);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
-    onRowDrop?.({
-      event,
-      draggedRow: table.getState().draggingRow as any,
-      targetRow: table.getState().hoveredRow as any,
-    });
+    iconButtonProps?.onDragEnd?.(event);
     table.setDraggingRow(null);
     table.setHoveredRow(null);
   };

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -33,14 +33,14 @@ export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
       <IconButton
         disableRipple
         draggable="true"
-        onDragStart={onDragStart}
-        onDragEnd={onDragEnd}
         size="small"
         {...iconButtonProps}
         onClick={(e) => {
           e.stopPropagation();
           iconButtonProps?.onClick?.(e);
         }}
+        onDragStart={onDragStart}
+        onDragEnd={onDragEnd}
         sx={(theme) => ({
           cursor: 'grab',
           m: 0,

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -23,7 +23,7 @@ export const MRT_ToggleGlobalFilterButton = <
     refs: { searchInputRef },
     setShowGlobalFilter,
   } = table;
-  const { showGlobalFilter } = getState();
+  const { globalFilter, showGlobalFilter } = getState();
 
   const handleToggleSearch = () => {
     setShowGlobalFilter(!showGlobalFilter);
@@ -32,7 +32,12 @@ export const MRT_ToggleGlobalFilterButton = <
 
   return (
     <Tooltip arrow title={rest?.title ?? localization.showHideSearch}>
-      <IconButton onClick={handleToggleSearch} {...rest} title={undefined}>
+      <IconButton
+        disabled={!!globalFilter}
+        onClick={handleToggleSearch}
+        {...rest}
+        title={undefined}
+      >
         {showGlobalFilter ? <SearchOffIcon /> : <SearchIcon />}
       </IconButton>
     </Tooltip>

package/src/column.utils.ts

@@ -1,4 +1,5 @@
 import { ColumnOrderState, GroupingState } from '@tanstack/react-table';
+import { alpha, lighten, TableCellProps, Theme } from '@mui/material';
 import {
   MaterialReactTableProps,
   MRT_Column,
@@ -6,6 +7,8 @@ import {
   MRT_DefinedColumnDef,
   MRT_DisplayColumnIds,
   MRT_FilterOption,
+  MRT_Header,
+  MRT_TableInstance,
 } from '.';
 import { MRT_FilterFns } from './filterFns';
 import { MRT_SortingFns } from './sortingFns';
@@ -165,3 +168,72 @@ export const getDefaultColumnFilterFn = <
   if (columnDef.filterVariant === 'range') return 'betweenInclusive';
   return 'fuzzy';
 };
+
+export const getIsLastLeftPinnedColumn = (
+  table: MRT_TableInstance,
+  column: MRT_Column,
+) => {
+  return (
+    column.getIsPinned() === 'left' &&
+    table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
+  );
+};
+
+export const getIsFirstRightPinnedColumn = (column: MRT_Column) => {
+  return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
+};
+
+export const getTotalRight = (table: MRT_TableInstance, column: MRT_Column) => {
+  return (
+    (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 160
+  );
+};
+
+export const getCommonCellStyles = ({
+  column,
+  header,
+  table,
+  tableCellProps,
+  theme,
+}: {
+  column: MRT_Column;
+  header?: MRT_Header;
+  table: MRT_TableInstance;
+  tableCellProps: TableCellProps;
+  theme: Theme;
+}) => ({
+  backgroundColor:
+    column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+      ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
+      : 'inherit',
+  backgroundImage: 'inherit',
+  boxShadow: getIsLastLeftPinnedColumn(table, column)
+    ? `-4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+    : getIsFirstRightPinnedColumn(column)
+    ? `4px 0 8px -6px ${alpha(theme.palette.common.black, 0.2)} inset`
+    : undefined,
+  left:
+    column.getIsPinned() === 'left'
+      ? `${column.getStart('left')}px`
+      : undefined,
+  opacity:
+    table.getState().draggingColumn?.id === column.id ||
+    table.getState().hoveredColumn?.id === column.id
+      ? 0.5
+      : 1,
+  position:
+    column.getIsPinned() && column.columnDef.columnDefType !== 'group'
+      ? 'sticky'
+      : undefined,
+  right:
+    column.getIsPinned() === 'right'
+      ? `${getTotalRight(table, column)}px`
+      : undefined,
+  transition: `all ${column.getIsResizing() ? 0 : '0.2s'} ease-in-out`,
+  ...(tableCellProps?.sx instanceof Function
+    ? tableCellProps.sx(theme)
+    : (tableCellProps?.sx as any)),
+  maxWidth: `min(${column.getSize()}px, fit-content)`,
+  minWidth: `max(${column.getSize()}px, ${column.columnDef.minSize ?? 30}px)`,
+  width: header?.getSize() ?? column.getSize(),
+});

package/src/footer/MRT_TableFooter.tsx

@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { TableFooter } from '@mui/material';
+import { lighten, TableFooter } from '@mui/material';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import type { MRT_TableInstance } from '..';
 
@@ -27,7 +27,7 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
     <TableFooter
       {...tableFooterProps}
       sx={(theme) => ({
-        position: stickFooter ? 'sticky' : undefined,
+        backgroundColor: lighten(theme.palette.background.default, 0.06),
         bottom: stickFooter ? 0 : undefined,
         opacity: stickFooter ? 0.95 : undefined,
         outline: stickFooter
@@ -35,6 +35,7 @@ export const MRT_TableFooter: FC<Props> = ({ table }) => {
             ? `1px solid ${theme.palette.grey[300]}`
             : `1px solid ${theme.palette.grey[700]}`
           : undefined,
+        position: stickFooter ? 'sticky' : undefined,
         ...(tableFooterProps?.sx instanceof Function
           ? tableFooterProps?.sx(theme)
           : (tableFooterProps?.sx as any)),

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
-import { alpha, TableCell } from '@mui/material';
+import { TableCell } from '@mui/material';
+import { getCommonCellStyles } from '../column.utils';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -10,7 +11,7 @@ interface Props {
 export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
   const {
     getState,
-    options: { muiTableFooterCellProps, enableColumnResizing },
+    options: { muiTableFooterCellProps },
   } = table;
   const { density } = getState();
   const { column } = footer;
@@ -39,26 +40,15 @@ export const MRT_TableFooterCell: FC<Props> = ({ footer, table }) => {
       variant="head"
       {...tableCellProps}
       sx={(theme) => ({
-        backgroundColor: theme.palette.background.default,
-        backgroundImage: `linear-gradient(${alpha(
-          theme.palette.common.white,
-          0.05,
-        )},${alpha(theme.palette.common.white, 0.05)})`,
         fontWeight: 'bold',
-        maxWidth: `${column.getSize()}px`,
-        minWidth: `${column.getSize()}px`,
         p:
           density === 'compact'
             ? '0.5rem'
             : density === 'comfortable'
             ? '1rem'
             : '1.5rem',
-        transition: `all ${enableColumnResizing ? '10ms' : '0.2s'} ease-in-out`,
-        width: column.getSize(),
-        verticalAlign: 'text-top',
-        ...(tableCellProps?.sx instanceof Function
-          ? tableCellProps.sx(theme)
-          : (tableCellProps?.sx as any)),
+        verticalAlign: 'top',
+        ...getCommonCellStyles({ column, table, theme, tableCellProps }),
       })}
     >
       <>

package/src/head/MRT_TableHead.tsx

@@ -10,7 +10,7 @@ interface Props {
 export const MRT_TableHead: FC<Props> = ({ table }) => {
   const {
     getHeaderGroups,
-    options: { muiTableHeadProps },
+    options: { enableStickyHeader, muiTableHeadProps },
   } = table;
 
   const tableHeadProps =
@@ -19,7 +19,15 @@ export const MRT_TableHead: FC<Props> = ({ table }) => {
       : muiTableHeadProps;
 
   return (
-    <TableHead {...tableHeadProps}>
+    <TableHead
+      {...tableHeadProps}
+      sx={(theme) => ({
+        opacity: enableStickyHeader ? 0.95 : undefined,
+        ...(tableHeadProps?.sx instanceof Function
+          ? tableHeadProps?.sx(theme)
+          : (tableHeadProps?.sx as any)),
+      })}
+    >
       {getHeaderGroups().map((headerGroup) => (
         <MRT_TableHeadRow
           headerGroup={headerGroup as any}

package/src/head/MRT_TableHeadCell.tsx

@@ -1,11 +1,12 @@
 import React, { DragEvent, FC, ReactNode } from 'react';
-import { Box, TableCell, Theme, alpha, lighten, useTheme } from '@mui/material';
+import { Box, TableCell, Theme, useTheme } from '@mui/material';
 import { MRT_TableHeadCellColumnActionsButton } from './MRT_TableHeadCellColumnActionsButton';
 import { MRT_TableHeadCellFilterContainer } from './MRT_TableHeadCellFilterContainer';
 import { MRT_TableHeadCellFilterLabel } from './MRT_TableHeadCellFilterLabel';
 import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
+import { getCommonCellStyles } from '../column.utils';
 import type { MRT_Header, MRT_TableInstance } from '..';
 
 interface Props {
@@ -21,7 +22,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       enableColumnActions,
       enableColumnDragging,
       enableColumnOrdering,
-      enableColumnResizing,
       enableGrouping,
       enableMultiSort,
       muiTableHeadCellProps,
@@ -54,23 +54,6 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
     ...mcTableHeadCellProps,
   };
 
-  const getIsLastLeftPinnedColumn = () => {
-    return (
-      column.getIsPinned() === 'left' &&
-      table.getLeftLeafHeaders().length - 1 === column.getPinnedIndex()
-    );
-  };
-
-  const getIsFirstRightPinnedColumn = () => {
-    return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
-  };
-
-  const getTotalRight = () => {
-    return (
-      (table.getRightLeafHeaders().length - 1 - column.getPinnedIndex()) * 150
-    );
-  };
-
   const handleDragEnter = (_e: DragEvent) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
       setHoveredColumn(null);
@@ -115,26 +98,8 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       ref={tableHeadCellRef}
       {...tableCellProps}
       sx={(theme: Theme) => ({
-        backgroundColor:
-          column.getIsPinned() && columnDefType !== 'group'
-            ? alpha(lighten(theme.palette.background.default, 0.04), 0.95)
-            : 'inherit',
-        backgroundImage: 'inherit',
-        boxShadow: getIsLastLeftPinnedColumn()
-          ? `4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
-          : getIsFirstRightPinnedColumn()
-          ? `-4px 0 4px -2px ${alpha(theme.palette.common.black, 0.1)}`
-          : undefined,
         fontWeight: 'bold',
-        left:
-          column.getIsPinned() === 'left'
-            ? `${column.getStart('left')}px`
-            : undefined,
         overflow: 'visible',
-        opacity:
-          draggingColumn?.id === column.id || hoveredColumn?.id === column.id
-            ? 0.5
-            : 1,
         p:
           density === 'compact'
             ? '0.5rem'
@@ -151,19 +116,12 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : showColumnFilters || density === 'compact'
             ? '0.4rem'
             : '0.6rem',
-        position:
-          column.getIsPinned() && columnDefType !== 'group'
-            ? 'sticky'
-            : undefined,
         pt:
           columnDefType === 'group' || density === 'compact'
             ? '0.25rem'
             : density === 'comfortable'
             ? '.75rem'
             : '1.25rem',
-        right:
-          column.getIsPinned() === 'right' ? `${getTotalRight()}px` : undefined,
-        transition: `all ${enableColumnResizing ? 0 : '0.2s'} ease-in-out`,
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'top',
         zIndex:
@@ -172,13 +130,14 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2
             : 1,
-        ...(tableCellProps?.sx instanceof Function
-          ? tableCellProps.sx(theme)
-          : (tableCellProps?.sx as any)),
+        ...getCommonCellStyles({
+          column,
+          header,
+          table,
+          tableCellProps,
+          theme,
+        }),
         ...draggingBorders,
-        maxWidth: `min(${column.getSize()}px, fit-content)`,
-        minWidth: `max(${column.getSize()}px, ${columnDef.minSize ?? 30}px)`,
-        width: header.getSize(),
       })}
     >
       {header.isPlaceholder ? null : (

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -17,11 +17,11 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
   const { column } = header;
   const { columnDef } = column;
 
-  const isRangeFilter = [
-    'between',
-    'betweenInclusive',
-    'inNumberRange',
-  ].includes(columnDef._filterFn);
+  const isRangeFilter =
+    columnDef.filterVariant === 'range' ||
+    ['between', 'betweenInclusive', 'inNumberRange'].includes(
+      columnDef._filterFn,
+    );
   const currentFilterOption = columnDef._filterFn;
   const filterTooltip = localization.filteringByColumn
     .replace('{column}', String(columnDef.header))
@@ -51,8 +51,8 @@ export const MRT_TableHeadCellFilterLabel: FC<Props> = ({ header, table }) => {
     <Grow
       unmountOnExit
       in={
-        (!!column.getFilterValue() && isRangeFilter) ||
-        (!isRangeFilter && // @ts-ignore
+        (!!column.getFilterValue() && !isRangeFilter) ||
+        (isRangeFilter && // @ts-ignore
           (!!column.getFilterValue()?.[0] || !!column.getFilterValue()?.[1]))
       }
     >

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -16,11 +16,7 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
 }) => {
   const {
     getState,
-    options: {
-      enableColumnOrdering,
-      muiTableHeadCellDragHandleProps,
-      onColumnDrop,
-    },
+    options: { enableColumnOrdering, muiTableHeadCellDragHandleProps },
     setColumnOrder,
     setDraggingColumn,
     setHoveredColumn,
@@ -43,17 +39,14 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
     ...mcIconButtonProps,
   };
 
-  const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
+  const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
+    iconButtonProps?.onDragStart?.(event);
     setDraggingColumn(column);
-    e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
+    event.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
-    onColumnDrop?.({
-      event,
-      draggedColumn: column,
-      targetColumn: hoveredColumn,
-    });
+    iconButtonProps?.onDragEnd?.(event);
     if (hoveredColumn?.id === 'drop-zone') {
       column.toggleGrouping();
     } else if (

package/src/index.tsx

@@ -3,23 +3,26 @@ export default MaterialReactTable;
 export * from './MaterialReactTable';
 
 import type { MRT_Icons } from './icons';
-import type { MRT_Localization } from './localization';
-export type { MRT_Localization, MRT_Icons };
+export type { MRT_Icons };
 
 import { MRT_CopyButton } from './buttons/MRT_CopyButton';
 import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
 import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
 import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
+import { MRT_TablePagination } from './toolbar/MRT_TablePagination';
 import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
 import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
 import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+import { MRT_ToolbarInternalButtons } from './toolbar/MRT_ToolbarInternalButtons';
 
 export {
+  MRT_CopyButton,
   MRT_FullScreenToggleButton,
   MRT_GlobalFilterTextField,
   MRT_ShowHideColumnsButton,
+  MRT_TablePagination,
   MRT_ToggleDensePaddingButton,
   MRT_ToggleFiltersButton,
   MRT_ToggleGlobalFilterButton,
-  MRT_CopyButton,
+  MRT_ToolbarInternalButtons,
 };

package/src/inputs/MRT_FilterTextField.tsx

@@ -18,8 +18,8 @@ import {
   TextFieldProps,
   Tooltip,
 } from '@mui/material';
-import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import type { MRT_Header, MRT_TableInstance } from '..';
+import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 
 interface Props {
   header: MRT_Header;
@@ -171,8 +171,10 @@ export const MRT_FilterTextField: FC<Props> = ({
   };
 
   useEffect(() => {
-    setFilterValue('');
-  }, [columnDef._filterFn]);
+    if (column.getFilterValue() === undefined) {
+      handleClear();
+    }
+  }, [column.getFilterValue()]);
 
   if (columnDef.Filter) {
     return <>{columnDef.Filter?.({ column, header, table })}</>;
@@ -313,9 +315,14 @@ export const MRT_FilterTextField: FC<Props> = ({
         }}
         sx={(theme) => ({
           p: 0,
-          minWidth: !filterChipLabel ? '120px' : 'auto',
+          minWidth:
+            columnDef.filterVariant === 'range'
+              ? '90px'
+              : !filterChipLabel
+              ? '120px'
+              : 'auto',
           width: '100%',
-          '&	.MuiSelect-icon': {
+          '& .MuiSelect-icon': {
             mr: '1.5rem',
           },
           ...(textFieldProps?.sx instanceof Function
@@ -369,6 +376,7 @@ export const MRT_FilterTextField: FC<Props> = ({
         header={header}
         setAnchorEl={setAnchorEl}
         table={table}
+        setFilterValue={setFilterValue}
       />
     </>
   );

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -1,4 +1,10 @@
-import React, { ChangeEvent, MouseEvent, useCallback, useState } from 'react';
+import React, {
+  ChangeEvent,
+  MouseEvent,
+  useCallback,
+  useEffect,
+  useState,
+} from 'react';
 import {
   Collapse,
   debounce,
@@ -32,6 +38,11 @@ export const MRT_GlobalFilterTextField = <
   } = table;
   const { globalFilter, showGlobalFilter } = getState();
 
+  const textFieldProps =
+    muiSearchTextFieldProps instanceof Function
+      ? muiSearchTextFieldProps({ table })
+      : muiSearchTextFieldProps;
+
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
   const [searchValue, setSearchValue] = useState(globalFilter ?? '');
 
@@ -56,10 +67,11 @@ export const MRT_GlobalFilterTextField = <
     setGlobalFilter(undefined);
   };
 
-  const textFieldProps =
-    muiSearchTextFieldProps instanceof Function
-      ? muiSearchTextFieldProps({ table })
-      : muiSearchTextFieldProps;
+  useEffect(() => {
+    if (globalFilter === undefined) {
+      handleClear();
+    }
+  }, [globalFilter]);
 
   return (
     <Collapse
@@ -119,6 +131,7 @@ export const MRT_GlobalFilterTextField = <
         anchorEl={anchorEl}
         setAnchorEl={setAnchorEl}
         table={table}
+        onSelect={handleClear}
       />
     </Collapse>
   );

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -4,9 +4,9 @@ import type {
   MRT_FilterOption,
   MRT_Header,
   MRT_InternalFilterOption,
+  MRT_Localization,
   MRT_TableInstance,
 } from '..';
-import { MRT_Localization } from '../localization';
 
 export const mrtFilterOptions = (
   localization: MRT_Localization,
@@ -102,6 +102,7 @@ interface Props<TData extends Record<string, any> = {}> {
   header?: MRT_Header<TData>;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
+  setFilterValue?: (filterValue: any) => void;
   table: MRT_TableInstance<TData>;
 }
 
@@ -110,6 +111,7 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   header,
   onSelect,
   setAnchorEl,
+  setFilterValue,
   table,
 }: Props<TData>) => {
   const {
@@ -152,10 +154,25 @@ export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
       }));
       if (['empty', 'notEmpty'].includes(option as string)) {
         column.setFilterValue(' ');
-      } else if (option === 'between') {
+      } else if (
+        columnDef?.filterVariant === 'multi-select' ||
+        ['arrIncludesSome', 'arrIncludesAll', 'arrIncludes'].includes(
+          option as string,
+        )
+      ) {
+        column.setFilterValue([]);
+        setFilterValue?.([]);
+      } else if (
+        columnDef?.filterVariant === 'range' ||
+        ['between', 'betweenInclusive', 'inNumberRange'].includes(
+          option as MRT_FilterOption,
+        )
+      ) {
         column.setFilterValue(['', '']);
+        setFilterValue?.('');
       } else {
         column.setFilterValue('');
+        setFilterValue?.('');
       }
     } else {
       setGlobalFilterFn(option);

package/src/table/MRT_Table.tsx

@@ -1,4 +1,4 @@
-import React, { FC, RefObject } from 'react';
+import React, { FC } from 'react';
 import { Table } from '@mui/material';
 import { MRT_TableHead } from '../head/MRT_TableHead';
 import { MRT_TableBody } from '../body/MRT_TableBody';
@@ -6,11 +6,10 @@ import { MRT_TableFooter } from '../footer/MRT_TableFooter';
 import { MRT_TableInstance } from '..';
 
 interface Props {
-  tableContainerRef: RefObject<HTMLDivElement>;
   table: MRT_TableInstance;
 }
 
-export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
+export const MRT_Table: FC<Props> = ({ table }) => {
   const {
     getState,
     options: {
@@ -44,7 +43,7 @@ export const MRT_Table: FC<Props> = ({ tableContainerRef, table }) => {
       })}
     >
       {enableTableHead && <MRT_TableHead table={table} />}
-      <MRT_TableBody tableContainerRef={tableContainerRef} table={table} />
+      <MRT_TableBody table={table} />
       {enableTableFooter && <MRT_TableFooter table={table} />}
     </Table>
   );

package/src/table/MRT_TableContainer.tsx

@@ -1,10 +1,4 @@
-import React, {
-  FC,
-  RefObject,
-  useEffect,
-  useLayoutEffect,
-  useState,
-} from 'react';
+import React, { FC, useEffect, useLayoutEffect, useState } from 'react';
 import { TableContainer } from '@mui/material';
 import { MRT_Table } from './MRT_Table';
 import type { MRT_TableInstance } from '..';
@@ -77,10 +71,7 @@ export const MRT_TableContainer: FC<Props> = ({ table }) => {
         ...tableContainerProps?.style,
       }}
     >
-      <MRT_Table
-        tableContainerRef={tableContainerRef as RefObject<HTMLDivElement>}
-        table={table}
-      />
+      <MRT_Table table={table} />
     </TableContainer>
   );
 };