material-react-table 0.33.6 → 0.35.0

package/src/body/MRT_TableBodyCell.tsx

@@ -50,14 +50,14 @@ export const MRT_TableBodyCell: FC<Props> = ({
       rowNumberMode,
       tableId,
     },
-    setCurrentEditingCell,
-    setCurrentHoveredColumn,
+    setEditingCell,
+    setHoveredColumn,
   } = table;
   const {
-    currentDraggingColumn,
-    currentEditingCell,
-    currentEditingRow,
-    currentHoveredColumn,
+    draggingColumn,
+    editingCell,
+    editingRow,
+    hoveredColumn,
     density,
     isLoading,
     showSkeletons,
@@ -88,8 +88,8 @@ export const MRT_TableBodyCell: FC<Props> = ({
   const isEditing =
     isEditable &&
     (editingMode === 'table' ||
-      currentEditingRow?.id === row.id ||
-      currentEditingCell?.id === cell.id);
+      editingRow?.id === row.id ||
+      editingCell?.id === cell.id);
 
   const [skeletonWidth, setSkeletonWidth] = useState(0);
   useEffect(
@@ -113,7 +113,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
       columnDef.enableEditing !== false &&
       editingMode === 'cell'
     ) {
-      setCurrentEditingCell(cell);
+      setEditingCell(cell);
       setTimeout(() => {
         const textField = document.getElementById(
           `mrt-${tableId}-edit-cell-text-field-${cell.id}`,
@@ -144,20 +144,20 @@ export const MRT_TableBodyCell: FC<Props> = ({
   };
 
   const handleDragEnter = (_e: DragEvent) => {
-    if (enableGrouping && currentHoveredColumn?.id === 'drop-zone') {
-      setCurrentHoveredColumn(null);
+    if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+      setHoveredColumn(null);
     }
-    if (enableColumnOrdering && currentDraggingColumn) {
-      setCurrentHoveredColumn(
+    if (enableColumnOrdering && draggingColumn) {
+      setHoveredColumn(
         columnDef.enableColumnOrdering !== false ? column : null,
       );
     }
   };
 
   const draggingBorder =
-    currentDraggingColumn?.id === column.id
+    draggingColumn?.id === column.id
       ? `1px dashed ${theme.palette.text.secondary}`
-      : currentHoveredColumn?.id === column.id
+      : hoveredColumn?.id === column.id
       ? `2px dashed ${theme.palette.primary.main}`
       : undefined;
 
@@ -197,8 +197,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
             ? `${column.getStart('left')}px`
             : undefined,
         opacity:
-          currentDraggingColumn?.id === column.id ||
-          currentHoveredColumn?.id === column.id
+          draggingColumn?.id === column.id || hoveredColumn?.id === column.id
             ? 0.5
             : 1,
         overflow: 'hidden',
@@ -232,7 +231,7 @@ export const MRT_TableBodyCell: FC<Props> = ({
         transition: 'all 0.2s ease-in-out',
         whiteSpace: density === 'compact' ? 'nowrap' : 'normal',
         zIndex:
-          currentDraggingColumn?.id === column.id
+          draggingColumn?.id === column.id
             ? 2
             : column.getIsPinned()
             ? 1

package/src/body/MRT_TableBodyRow.tsx

@@ -16,9 +16,9 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
     getIsSomeColumnsPinned,
     getState,
     options: { enableRowOrdering, muiTableBodyRowProps, renderDetailPanel },
-    setCurrentHoveredRow,
+    setHoveredRow,
   } = table;
-  const { currentDraggingRow, currentHoveredRow } = getState();
+  const { draggingRow, hoveredRow } = getState();
 
   const tableRowProps =
     muiTableBodyRowProps instanceof Function
@@ -26,17 +26,17 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
       : muiTableBodyRowProps;
 
   const handleDragEnter = (_e: DragEvent) => {
-    if (enableRowOrdering && currentDraggingRow) {
-      setCurrentHoveredRow(row);
+    if (enableRowOrdering && draggingRow) {
+      setHoveredRow(row);
     }
   };
 
   const rowRef = useRef<HTMLTableRowElement>(null);
 
   const draggingBorder =
-    currentDraggingRow?.id === row.id
+    draggingRow?.id === row.id
       ? `1px dashed ${theme.palette.text.secondary}`
-      : currentHoveredRow?.id === row.id
+      : hoveredRow?.id === row.id
       ? `2px dashed ${theme.palette.primary.main}`
       : undefined;
 
@@ -57,10 +57,7 @@ export const MRT_TableBodyRow: FC<Props> = ({ row, rowIndex, table }) => {
         sx={(theme) => ({
           backgroundColor: lighten(theme.palette.background.default, 0.06),
           opacity:
-            currentDraggingRow?.id === row.id ||
-            currentHoveredRow?.id === row.id
-              ? 0.5
-              : 1,
+            draggingRow?.id === row.id || hoveredRow?.id === row.id ? 0.5 : 1,
           transition: 'all 0.2s ease-in-out',
           '&:hover td': {
             backgroundColor:

package/src/body/MRT_TableBodyRowGrabHandle.tsx

@@ -24,17 +24,17 @@ export const MRT_TableBodyRowGrabHandle: FC<Props> = ({
 
   const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
     e.dataTransfer.setDragImage(rowRef.current as HTMLElement, 0, 0);
-    table.setCurrentDraggingRow(cell.row as any);
+    table.setDraggingRow(cell.row as any);
   };
 
   const handleDragEnd = (event: DragEvent<HTMLButtonElement>) => {
     onRowDrop?.({
       event,
-      draggedRow: table.getState().currentDraggingRow as any,
-      targetRow: table.getState().currentHoveredRow as any,
+      draggedRow: table.getState().draggingRow as any,
+      targetRow: table.getState().hoveredRow as any,
     });
-    table.setCurrentDraggingRow(null);
-    table.setCurrentHoveredRow(null);
+    table.setDraggingRow(null);
+    table.setHoveredRow(null);
   };
 
   return (

package/src/buttons/MRT_ColumnPinningButtons.tsx

@@ -1,13 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { Box, IconButton, Tooltip } from '@mui/material';
 import type { MRT_Column, MRT_TableInstance } from '..';
 
-interface Props {
-  column: MRT_Column;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ColumnPinningButtons: FC<Props> = ({ column, table }) => {
+export const MRT_ColumnPinningButtons = <
+  TData extends Record<string, any> = {},
+>({
+  column,
+  table,
+}: Props<TData>) => {
   const {
     options: {
       icons: { PushPinIcon },

package/src/buttons/MRT_EditActionButtons.tsx

@@ -15,18 +15,22 @@ export const MRT_EditActionButtons: FC<Props> = ({ row, table }) => {
       localization,
       onEditRowSubmit,
     },
-    setCurrentEditingRow,
+    setEditingRow,
   } = table;
-  const { currentEditingRow } = getState();
+  const { editingRow } = getState();
 
   const handleCancel = () => {
-    row._valuesCache = row.original ?? {};
-    setCurrentEditingRow(null);
+    row._valuesCache = { ...row.original };
+    setEditingRow(null);
   };
 
   const handleSave = () => {
-    onEditRowSubmit?.({ row: currentEditingRow ?? row, table });
-    setCurrentEditingRow(null);
+    onEditRowSubmit?.({
+      row: editingRow ?? row,
+      table,
+      values: editingRow?._valuesCache ?? { ...row.original },
+    });
+    setEditingRow(null);
   };
 
   return (

package/src/buttons/MRT_FullScreenToggleButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FullScreenToggleButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_FullScreenToggleButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_GrabHandleButton.tsx

@@ -1,20 +1,20 @@
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
-import React, { DragEventHandler, FC } from 'react';
+import React, { DragEventHandler } from 'react';
 import { MRT_TableInstance } from '..';
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   iconButtonProps?: IconButtonProps;
   onDragStart: DragEventHandler<HTMLButtonElement>;
   onDragEnd: DragEventHandler<HTMLButtonElement>;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GrabHandleButton: FC<Props> = ({
+export const MRT_GrabHandleButton = <TData extends Record<string, any> = {}>({
   iconButtonProps,
   onDragEnd,
   onDragStart,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     options: {
       icons: { DragHandleIcon },

package/src/buttons/MRT_ShowHideColumnsButton.tsx

@@ -1,13 +1,19 @@
-import React, { FC, MouseEvent, useState } from 'react';
+import React, { MouseEvent, useState } from 'react';
 import { IconButton, Tooltip, IconButtonProps } from '@mui/material';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ShowHideColumnsButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ShowHideColumnsButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     options: {
       icons: { ViewColumnIcon },

package/src/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleDensePaddingButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ToggleDensePaddingButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_ToggleFiltersButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleFiltersButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ToggleFiltersButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -1,12 +1,18 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { IconButton, IconButtonProps, Tooltip } from '@mui/material';
 import { MRT_TableInstance } from '..';
 
-interface Props extends IconButtonProps {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}>
+  extends IconButtonProps {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_ToggleGlobalFilterButton: FC<Props> = ({ table, ...rest }) => {
+export const MRT_ToggleGlobalFilterButton = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+  ...rest
+}: Props<TData>) => {
   const {
     getState,
     options: {

package/src/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -30,10 +30,10 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
       renderRowActionMenuItems,
       renderRowActions,
     },
-    setCurrentEditingRow,
+    setEditingRow,
   } = table;
 
-  const { currentEditingRow } = getState();
+  const { editingRow } = getState();
 
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
 
@@ -44,7 +44,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
   };
 
   const handleStartEditMode = () => {
-    setCurrentEditingRow({ ...row });
+    setEditingRow({ ...row });
     setAnchorEl(null);
   };
 
@@ -52,7 +52,7 @@ export const MRT_ToggleRowActionMenuButton: FC<Props> = ({ row, table }) => {
     <>
       {renderRowActions ? (
         <>{renderRowActions({ row, table })}</>
-      ) : row.id === currentEditingRow?.id ? (
+      ) : row.id === editingRow?.id ? (
         <MRT_EditActionButtons row={row} table={table} />
       ) : !renderRowActionMenuItems && enableEditing ? (
         <Tooltip placement="right" arrow title={localization.edit}>

package/src/head/MRT_TableHeadCell.tsx

@@ -26,14 +26,10 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
       enableMultiSort,
       muiTableHeadCellProps,
     },
-    setCurrentHoveredColumn,
+    setHoveredColumn,
   } = table;
-  const {
-    density,
-    currentDraggingColumn,
-    currentHoveredColumn,
-    showColumnFilters,
-  } = getState();
+  const { density, draggingColumn, hoveredColumn, showColumnFilters } =
+    getState();
   const { column } = header;
   const { columnDef } = column;
   const { columnDefType } = columnDef;
@@ -71,20 +67,20 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
   };
 
   const handleDragEnter = (_e: DragEvent) => {
-    if (enableGrouping && currentHoveredColumn?.id === 'drop-zone') {
-      setCurrentHoveredColumn(null);
+    if (enableGrouping && hoveredColumn?.id === 'drop-zone') {
+      setHoveredColumn(null);
     }
-    if (enableColumnOrdering && currentDraggingColumn) {
-      setCurrentHoveredColumn(
+    if (enableColumnOrdering && draggingColumn) {
+      setHoveredColumn(
         columnDef.enableColumnOrdering !== false ? column : null,
       );
     }
   };
 
   const draggingBorder =
-    currentDraggingColumn?.id === column.id
+    draggingColumn?.id === column.id
       ? `1px dashed ${theme.palette.text.secondary}`
-      : currentHoveredColumn?.id === column.id
+      : hoveredColumn?.id === column.id
       ? `2px dashed ${theme.palette.primary.main}`
       : undefined;
 
@@ -131,8 +127,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
             : undefined,
         overflow: 'visible',
         opacity:
-          currentDraggingColumn?.id === column.id ||
-          currentHoveredColumn?.id === column.id
+          draggingColumn?.id === column.id || hoveredColumn?.id === column.id
             ? 0.5
             : 1,
         p:
@@ -169,7 +164,7 @@ export const MRT_TableHeadCell: FC<Props> = ({ header, table }) => {
         userSelect: enableMultiSort && column.getCanSort() ? 'none' : undefined,
         verticalAlign: 'top',
         zIndex:
-          column.getIsResizing() || currentDraggingColumn?.id === column.id
+          column.getIsResizing() || draggingColumn?.id === column.id
             ? 3
             : column.getIsPinned() && columnDefType !== 'group'
             ? 2

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -22,12 +22,11 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
       onColumnDrop,
     },
     setColumnOrder,
-    setCurrentDraggingColumn,
-    setCurrentHoveredColumn,
+    setDraggingColumn,
+    setHoveredColumn,
   } = table;
   const { columnDef } = column;
-  const { currentHoveredColumn, currentDraggingColumn, columnOrder } =
-    getState();
+  const { hoveredColumn, draggingColumn, columnOrder } = getState();
 
   const mIconButtonProps =
     muiTableHeadCellDragHandleProps instanceof Function
@@ -45,7 +44,7 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
   };
 
   const handleDragStart = (e: DragEvent<HTMLButtonElement>) => {
-    setCurrentDraggingColumn(column);
+    setDraggingColumn(column);
     e.dataTransfer.setDragImage(tableHeadCellRef.current as HTMLElement, 0, 0);
   };
 
@@ -53,21 +52,21 @@ export const MRT_TableHeadCellGrabHandle: FC<Props> = ({
     onColumnDrop?.({
       event,
       draggedColumn: column,
-      targetColumn: currentHoveredColumn,
+      targetColumn: hoveredColumn,
     });
-    if (currentHoveredColumn?.id === 'drop-zone') {
+    if (hoveredColumn?.id === 'drop-zone') {
       column.toggleGrouping();
     } else if (
       enableColumnOrdering &&
-      currentHoveredColumn &&
-      currentHoveredColumn?.id !== currentDraggingColumn?.id
+      hoveredColumn &&
+      hoveredColumn?.id !== draggingColumn?.id
     ) {
       setColumnOrder(
-        reorderColumn(column, currentHoveredColumn as MRT_Column, columnOrder),
+        reorderColumn(column, hoveredColumn as MRT_Column, columnOrder),
       );
     }
-    setCurrentDraggingColumn(null);
-    setCurrentHoveredColumn(null);
+    setDraggingColumn(null);
+    setHoveredColumn(null);
   };
 
   return (

package/src/index.tsx

@@ -3,7 +3,21 @@ export default MaterialReactTable;
 export * from './MaterialReactTable';
 
 import type { MRT_Icons } from './icons';
-export type { MRT_Icons };
-
 import type { MRT_Localization } from './localization';
-export type { MRT_Localization };
+export type { MRT_Localization, MRT_Icons };
+
+import { MRT_FullScreenToggleButton } from './buttons/MRT_FullScreenToggleButton';
+import { MRT_GlobalFilterTextField } from './inputs/MRT_GlobalFilterTextField';
+import { MRT_ShowHideColumnsButton } from './buttons/MRT_ShowHideColumnsButton';
+import { MRT_ToggleDensePaddingButton } from './buttons/MRT_ToggleDensePaddingButton';
+import { MRT_ToggleFiltersButton } from './buttons/MRT_ToggleFiltersButton';
+import { MRT_ToggleGlobalFilterButton } from './buttons/MRT_ToggleGlobalFilterButton';
+
+export {
+  MRT_FullScreenToggleButton,
+  MRT_GlobalFilterTextField,
+  MRT_ShowHideColumnsButton,
+  MRT_ToggleDensePaddingButton,
+  MRT_ToggleFiltersButton,
+  MRT_ToggleGlobalFilterButton,
+};

package/src/inputs/MRT_EditCellTextField.tsx

@@ -18,34 +18,34 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
     getState,
     options: {
       tableId,
-      enableEditing,
       muiTableBodyCellEditTextFieldProps,
       onCellEditBlur,
       onCellEditChange,
     },
-    setCurrentEditingCell,
-    setCurrentEditingRow,
+    setEditingCell,
+    setEditingRow,
   } = table;
   const { column, row } = cell;
   const { columnDef } = column;
+  const { editingRow } = getState();
 
-  const [value, setValue] = useState(cell.getValue<string>());
+  const [value, setValue] = useState(() => cell.getValue<string>());
 
   const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
     setValue(event.target.value);
-    columnDef.onCellEditChange?.({ event, cell, table });
-    onCellEditChange?.({ event, cell, table });
+    columnDef.onCellEditChange?.({ event, cell, table, value });
+    onCellEditChange?.({ event, cell, table, value });
   };
 
   const handleBlur = (event: FocusEvent<HTMLInputElement>) => {
-    if (getState().currentEditingRow) {
+    if (editingRow) {
       if (!row._valuesCache) row._valuesCache = {};
       (row._valuesCache as Record<string, any>)[column.id] = value;
-      setCurrentEditingRow({ ...getState().currentEditingRow } as MRT_Row);
+      setEditingRow({ ...editingRow } as MRT_Row);
     }
-    setCurrentEditingCell(null);
-    columnDef.onCellEditBlur?.({ event, cell, table });
-    onCellEditBlur?.({ event, cell, table });
+    setEditingCell(null);
+    columnDef.onCellEditBlur?.({ event, cell, table, value });
+    onCellEditBlur?.({ event, cell, table, value });
   };
 
   const mTableBodyCellEditTextFieldProps =
@@ -66,14 +66,14 @@ export const MRT_EditCellTextField: FC<Props> = ({ cell, table }) => {
     ...mcTableBodyCellEditTextFieldProps,
   };
 
-  if (enableEditing && columnDef.enableEditing !== false && columnDef.Edit) {
+  if (columnDef.Edit) {
     return <>{columnDef.Edit?.({ cell, column, table })}</>;
   }
 
   return (
     <TextField
       id={`mrt-${tableId}-edit-cell-text-field-${cell.id}`}
-      margin="dense"
+      margin="none"
       onBlur={handleBlur}
       onChange={handleChange}
       onClick={(e: MouseEvent<HTMLInputElement>) => e.stopPropagation()}

package/src/inputs/MRT_GlobalFilterTextField.tsx

@@ -1,10 +1,4 @@
-import React, {
-  ChangeEvent,
-  FC,
-  MouseEvent,
-  useCallback,
-  useState,
-} from 'react';
+import React, { ChangeEvent, MouseEvent, useCallback, useState } from 'react';
 import {
   Collapse,
   debounce,
@@ -16,11 +10,15 @@ import {
 import { MRT_FilterOptionMenu } from '../menus/MRT_FilterOptionMenu';
 import { MRT_TableInstance } from '..';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any> = {}> {
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_GlobalFilterTextField: FC<Props> = ({ table }) => {
+export const MRT_GlobalFilterTextField = <
+  TData extends Record<string, any> = {},
+>({
+  table,
+}: Props<TData>) => {
   const {
     getState,
     setGlobalFilter,

package/src/menus/MRT_FilterOptionMenu.tsx

@@ -1,4 +1,4 @@
-import React, { FC, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { Box, Menu, MenuItem } from '@mui/material';
 import type { MRT_FilterOption, MRT_Header, MRT_TableInstance } from '..';
 import { MRT_Localization } from '../localization';
@@ -97,21 +97,21 @@ export const internalFilterOptions = (
   },
 ];
 
-interface Props {
+interface Props<TData extends Record<string, any> = {}> {
   anchorEl: HTMLElement | null;
   header?: MRT_Header;
   onSelect?: () => void;
   setAnchorEl: (anchorEl: HTMLElement | null) => void;
-  table: MRT_TableInstance;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_FilterOptionMenu: FC<Props> = ({
+export const MRT_FilterOptionMenu = <TData extends Record<string, any> = {}>({
   anchorEl,
   header,
   onSelect,
   setAnchorEl,
   table,
-}) => {
+}: Props<TData>) => {
   const {
     getState,
     options: {