material-react-table 1.15.0 → 2.0.0-alpha.1

package/src/filterFns.ts

@@ -5,7 +5,7 @@ import {
 } from '@tanstack/match-sorter-utils';
 import { filterFns, type Row } from '@tanstack/react-table';
 
-const fuzzy = <TData extends Record<string, any> = {}>(
+const fuzzy = <TData extends Record<string, any>>(
   row: Row<TData>,
   columnId: string,
   filterValue: string | number,
@@ -20,7 +20,7 @@ const fuzzy = <TData extends Record<string, any> = {}>(
 
 fuzzy.autoRemove = (val: any) => !val;
 
-const contains = <TData extends Record<string, any> = {}>(
+const contains = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -34,7 +34,7 @@ const contains = <TData extends Record<string, any> = {}>(
 
 contains.autoRemove = (val: any) => !val;
 
-const startsWith = <TData extends Record<string, any> = {}>(
+const startsWith = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -48,7 +48,7 @@ const startsWith = <TData extends Record<string, any> = {}>(
 
 startsWith.autoRemove = (val: any) => !val;
 
-const endsWith = <TData extends Record<string, any> = {}>(
+const endsWith = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -62,7 +62,7 @@ const endsWith = <TData extends Record<string, any> = {}>(
 
 endsWith.autoRemove = (val: any) => !val;
 
-const equals = <TData extends Record<string, any> = {}>(
+const equals = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -72,7 +72,7 @@ const equals = <TData extends Record<string, any> = {}>(
 
 equals.autoRemove = (val: any) => !val;
 
-const notEquals = <TData extends Record<string, any> = {}>(
+const notEquals = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -82,7 +82,7 @@ const notEquals = <TData extends Record<string, any> = {}>(
 
 notEquals.autoRemove = (val: any) => !val;
 
-const greaterThan = <TData extends Record<string, any> = {}>(
+const greaterThan = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -94,7 +94,7 @@ const greaterThan = <TData extends Record<string, any> = {}>(
 
 greaterThan.autoRemove = (val: any) => !val;
 
-const greaterThanOrEqualTo = <TData extends Record<string, any> = {}>(
+const greaterThanOrEqualTo = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -102,7 +102,7 @@ const greaterThanOrEqualTo = <TData extends Record<string, any> = {}>(
 
 greaterThanOrEqualTo.autoRemove = (val: any) => !val;
 
-const lessThan = <TData extends Record<string, any> = {}>(
+const lessThan = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -114,7 +114,7 @@ const lessThan = <TData extends Record<string, any> = {}>(
 
 lessThan.autoRemove = (val: any) => !val;
 
-const lessThanOrEqualTo = <TData extends Record<string, any> = {}>(
+const lessThanOrEqualTo = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValue: string | number,
@@ -122,7 +122,7 @@ const lessThanOrEqualTo = <TData extends Record<string, any> = {}>(
 
 lessThanOrEqualTo.autoRemove = (val: any) => !val;
 
-const between = <TData extends Record<string, any> = {}>(
+const between = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValues: [string | number, string | number],
@@ -137,7 +137,7 @@ const between = <TData extends Record<string, any> = {}>(
 
 between.autoRemove = (val: any) => !val;
 
-const betweenInclusive = <TData extends Record<string, any> = {}>(
+const betweenInclusive = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   filterValues: [string | number, string | number],
@@ -152,7 +152,7 @@ const betweenInclusive = <TData extends Record<string, any> = {}>(
 
 betweenInclusive.autoRemove = (val: any) => !val;
 
-const empty = <TData extends Record<string, any> = {}>(
+const empty = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   _filterValue: string | number,
@@ -160,7 +160,7 @@ const empty = <TData extends Record<string, any> = {}>(
 
 empty.autoRemove = (val: any) => !val;
 
-const notEmpty = <TData extends Record<string, any> = {}>(
+const notEmpty = <TData extends Record<string, any>>(
   row: Row<TData>,
   id: string,
   _filterValue: string | number,

package/src/footer/MRT_TableFooter.tsx

@@ -2,31 +2,32 @@ import TableFooter from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableFooter = ({
+export const MRT_TableFooter = <TData extends Record<string, any>>({
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getFooterGroups,
     getState,
     options: { enableStickyFooter, layoutMode, muiTableFooterProps },
+    refs: { tableFooterRef },
   } = table;
   const { isFullScreen } = getState();
 
-  const tableFooterProps =
-    muiTableFooterProps instanceof Function
-      ? muiTableFooterProps({ table })
-      : muiTableFooterProps;
+  const tableFooterProps = parseFromValuesOrFunc(muiTableFooterProps, {
+    table,
+  });
 
   const stickFooter =
     (isFullScreen || enableStickyFooter) && enableStickyFooter !== false;
@@ -45,10 +46,15 @@ export const MRT_TableFooter = ({
           : undefined,
         position: stickFooter ? 'sticky' : undefined,
         zIndex: stickFooter ? 1 : undefined,
-        ...(tableFooterProps?.sx instanceof Function
-          ? tableFooterProps?.sx(theme)
-          : (tableFooterProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableFooterProps?.sx, theme) as any),
       })}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableFooterRef.current = ref;
+        if (tableFooterProps?.ref) {
+          // @ts-ignore
+          tableFooterProps.ref.current = ref;
+        }
+      }}
     >
       {getFooterGroups().map((footerGroup) => (
         <MRT_TableFooterRow

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,13 +1,16 @@
 import TableCell from '@mui/material/TableCell';
-import { getCommonCellStyles } from '../column.utils';
+import { getCommonCellStyles, parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
-interface Props {
-  footer: MRT_Header;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  footer: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableFooterCell = ({ footer, table }: Props) => {
+export const MRT_TableFooterCell = <TData extends Record<string, any>>({
+  footer,
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: { layoutMode, muiTableFooterCellProps },
@@ -17,19 +20,12 @@ export const MRT_TableFooterCell = ({ footer, table }: Props) => {
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableFooterCellProps =
-    muiTableFooterCellProps instanceof Function
-      ? muiTableFooterCellProps({ column, table })
-      : muiTableFooterCellProps;
-
-  const mcTableFooterCellProps =
-    columnDef.muiTableFooterCellProps instanceof Function
-      ? columnDef.muiTableFooterCellProps({ column, table })
-      : columnDef.muiTableFooterCellProps;
-
   const tableCellProps = {
-    ...mTableFooterCellProps,
-    ...mcTableFooterCellProps,
+    ...parseFromValuesOrFunc(muiTableFooterCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableFooterCellProps, {
+      column,
+      table,
+    }),
   };
 
   return (
@@ -61,13 +57,7 @@ export const MRT_TableFooterCell = ({ footer, table }: Props) => {
       <>
         {footer.isPlaceholder
           ? null
-          : (columnDef.Footer instanceof Function
-              ? columnDef.Footer?.({
-                  column,
-                  footer,
-                  table,
-                })
-              : columnDef.Footer) ??
+          : parseFromValuesOrFunc(columnDef.Footer, { column, footer, table }) ??
             columnDef.footer ??
             null}
       </>

package/src/footer/MRT_TableFooterRow.tsx

@@ -7,22 +7,23 @@ import {
   type MRT_HeaderGroup,
   type MRT_TableInstance,
 } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
-  footerGroup: MRT_HeaderGroup;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  footerGroup: MRT_HeaderGroup<TData>;
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableFooterRow = ({
+export const MRT_TableFooterRow = <TData extends Record<string, any>>({
   footerGroup,
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
-}: Props) => {
+}: Props<TData>) => {
   const {
     options: { layoutMode, muiTableFooterRowProps },
   } = table;
@@ -38,10 +39,10 @@ export const MRT_TableFooterRow = ({
   )
     return null;
 
-  const tableRowProps =
-    muiTableFooterRowProps instanceof Function
-      ? muiTableFooterRowProps({ footerGroup, table })
-      : muiTableFooterRowProps;
+  const tableRowProps = parseFromValuesOrFunc(muiTableFooterRowProps, {
+    footerGroup,
+    table,
+  });
 
   return (
     <TableRow
@@ -50,9 +51,7 @@ export const MRT_TableFooterRow = ({
         backgroundColor: lighten(theme.palette.background.default, 0.04),
         display: layoutMode === 'grid' ? 'flex' : 'table-row',
         width: '100%',
-        ...(tableRowProps?.sx instanceof Function
-          ? tableRowProps?.sx(theme)
-          : (tableRowProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableRowProps?.sx, theme) as any),
       })}
     >
       {virtualPaddingLeft ? (
@@ -61,7 +60,7 @@ export const MRT_TableFooterRow = ({
       {(virtualColumns ?? footerGroup.headers).map((footerOrVirtualFooter) => {
         const footer = virtualColumns
           ? footerGroup.headers[footerOrVirtualFooter.index]
-          : (footerOrVirtualFooter as MRT_Header);
+          : (footerOrVirtualFooter as MRT_Header<TData>);
 
         return (
           <MRT_TableFooterCell footer={footer} key={footer.id} table={table} />

package/src/footer/index.ts

@@ -0,0 +1,3 @@
+export * from './MRT_TableFooter';
+export * from './MRT_TableFooterCell';
+export * from './MRT_TableFooterRow';

package/src/head/MRT_TableHead.tsx

@@ -2,31 +2,30 @@ import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_TableInstance } from '../types';
+import { parseFromValuesOrFunc } from '../column.utils';
 
-interface Props {
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableHead = ({
+export const MRT_TableHead = <TData extends Record<string, any>>({
   table,
   virtualColumns,
   virtualPaddingLeft,
   virtualPaddingRight,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getHeaderGroups,
     getState,
     options: { enableStickyHeader, layoutMode, muiTableHeadProps },
+    refs: { tableHeadRef },
   } = table;
   const { isFullScreen } = getState();
 
-  const tableHeadProps =
-    muiTableHeadProps instanceof Function
-      ? muiTableHeadProps({ table })
-      : muiTableHeadProps;
+  const tableHeadProps = parseFromValuesOrFunc(muiTableHeadProps, { table });
 
   const stickyHeader = enableStickyHeader || isFullScreen;
 
@@ -39,10 +38,15 @@ export const MRT_TableHead = ({
         position: stickyHeader ? 'sticky' : 'relative',
         top: stickyHeader && layoutMode === 'grid' ? 0 : undefined,
         zIndex: stickyHeader ? 2 : undefined,
-        ...(tableHeadProps?.sx instanceof Function
-          ? tableHeadProps?.sx(theme)
-          : (tableHeadProps?.sx as any)),
+        ...(parseFromValuesOrFunc(tableHeadProps?.sx, theme) as any),
       })}
+      ref={(ref: HTMLTableSectionElement) => {
+        tableHeadRef.current = ref;
+        if (tableHeadProps?.ref) {
+          // @ts-ignore
+          tableHeadProps.ref.current = ref;
+        }
+      }}
     >
       {getHeaderGroups().map((headerGroup) => (
         <MRT_TableHeadRow

package/src/head/MRT_TableHeadCell.tsx

@@ -1,4 +1,4 @@
-import { type DragEvent, type ReactNode, useMemo } from 'react';
+import { type DragEvent, useMemo } from 'react';
 import Box from '@mui/material/Box';
 import TableCell from '@mui/material/TableCell';
 import { useTheme } from '@mui/material/styles';
@@ -10,14 +10,18 @@ import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { getCommonCellStyles } from '../column.utils';
 import { type Theme } from '@mui/material/styles';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCell = ({ header, table }: Props) => {
+export const MRT_TableHeadCell = <TData extends Record<string, any>>({
+  header,
+  table,
+}: Props<TData>) => {
   const theme = useTheme();
   const {
     getState,
@@ -44,19 +48,9 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
   const { columnDef } = column;
   const { columnDefType } = columnDef;
 
-  const mTableHeadCellProps =
-    muiTableHeadCellProps instanceof Function
-      ? muiTableHeadCellProps({ column, table })
-      : muiTableHeadCellProps;
-
-  const mcTableHeadCellProps =
-    columnDef.muiTableHeadCellProps instanceof Function
-      ? columnDef.muiTableHeadCellProps({ column, table })
-      : columnDef.muiTableHeadCellProps;
-
   const tableCellProps = {
-    ...mTableHeadCellProps,
-    ...mcTableHeadCellProps,
+    ...parseFromValuesOrFunc(muiTableHeadCellProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiTableHeadCellProps, { column, table }),
   };
 
   const showColumnActions =
@@ -110,13 +104,11 @@ export const MRT_TableHeadCell = ({ header, table }: Props) => {
   };
 
   const headerElement =
-    columnDef?.Header instanceof Function
-      ? columnDef?.Header?.({
-          column,
-          header,
-          table,
-        })
-      : columnDef?.Header ?? (columnDef.header as ReactNode);
+    parseFromValuesOrFunc(columnDef.Header, {
+      column,
+      header,
+      table,
+    }) ?? columnDef.header;
 
   return (
     <TableCell

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -2,22 +2,25 @@ import { type MouseEvent, useState } from 'react';
 import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
+import { parseFromValuesOrFunc } from '../column.utils';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellColumnActionsButton = ({
+export const MRT_TableHeadCellColumnActionsButton = <
+  TData extends Record<string, any>,
+>({
   header,
   table,
-}: Props) => {
+}: Props<TData>) => {
   const {
     options: {
       icons: { MoreVertIcon },
       localization,
-      muiTableHeadCellColumnActionsButtonProps,
+      muiColumnActionsButtonProps,
     },
   } = table;
   const { column } = header;
@@ -31,22 +34,15 @@ export const MRT_TableHeadCellColumnActionsButton = ({
     setAnchorEl(event.currentTarget);
   };
 
-  const mTableHeadCellColumnActionsButtonProps =
-    muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? muiTableHeadCellColumnActionsButtonProps({ column, table })
-      : muiTableHeadCellColumnActionsButtonProps;
-
-  const mcTableHeadCellColumnActionsButtonProps =
-    columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? columnDef.muiTableHeadCellColumnActionsButtonProps({
-          column,
-          table,
-        })
-      : columnDef.muiTableHeadCellColumnActionsButtonProps;
-
   const iconButtonProps = {
-    ...mTableHeadCellColumnActionsButtonProps,
-    ...mcTableHeadCellColumnActionsButtonProps,
+    ...parseFromValuesOrFunc(muiColumnActionsButtonProps, {
+      column,
+      table,
+    }),
+    ...parseFromValuesOrFunc(columnDef.muiColumnActionsButtonProps, {
+      column,
+      table,
+    }),
   };
 
   return (
@@ -73,9 +69,7 @@ export const MRT_TableHeadCellColumnActionsButton = ({
             '&:hover': {
               opacity: 1,
             },
-            ...(iconButtonProps?.sx instanceof Function
-              ? iconButtonProps.sx(theme)
-              : (iconButtonProps?.sx as any)),
+            ...(parseFromValuesOrFunc(iconButtonProps?.sx, theme) as any),
           })}
           title={undefined}
         >

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -5,12 +5,17 @@ import { MRT_FilterCheckbox } from '../inputs/MRT_FilterCheckbox';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellFilterContainer = ({ header, table }: Props) => {
+export const MRT_TableHeadCellFilterContainer = <
+  TData extends Record<string, any>,
+>({
+  header,
+  table,
+}: Props<TData>) => {
   const { getState } = table;
   const { showColumnFilters } = getState();
   const { column } = header;

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -5,12 +5,17 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellFilterLabel = ({ header, table }: Props) => {
+export const MRT_TableHeadCellFilterLabel = <
+  TData extends Record<string, any>,
+>({
+  header,
+  table,
+}: Props<TData>) => {
   const {
     options: {
       icons: { FilterAltIcon },

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -1,22 +1,22 @@
 import { type DragEvent, type RefObject } from 'react';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
-import { reorderColumn } from '../column.utils';
+import { parseFromValuesOrFunc, reorderColumn } from '../column.utils';
 import { type MRT_Column, type MRT_TableInstance } from '../types';
 
-interface Props {
-  column: MRT_Column;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  column: MRT_Column<TData>;
+  table: MRT_TableInstance<TData>;
   tableHeadCellRef: RefObject<HTMLTableCellElement>;
 }
 
-export const MRT_TableHeadCellGrabHandle = ({
+export const MRT_TableHeadCellGrabHandle = <TData extends Record<string, any>>({
   column,
   table,
   tableHeadCellRef,
-}: Props) => {
+}: Props<TData>) => {
   const {
     getState,
-    options: { enableColumnOrdering, muiTableHeadCellDragHandleProps },
+    options: { enableColumnOrdering, muiColumnDragHandleProps },
     setColumnOrder,
     setDraggingColumn,
     setHoveredColumn,
@@ -24,19 +24,12 @@ export const MRT_TableHeadCellGrabHandle = ({
   const { columnDef } = column;
   const { hoveredColumn, draggingColumn, columnOrder } = getState();
 
-  const mIconButtonProps =
-    muiTableHeadCellDragHandleProps instanceof Function
-      ? muiTableHeadCellDragHandleProps({ column, table })
-      : muiTableHeadCellDragHandleProps;
-
-  const mcIconButtonProps =
-    columnDef.muiTableHeadCellDragHandleProps instanceof Function
-      ? columnDef.muiTableHeadCellDragHandleProps({ column, table })
-      : columnDef.muiTableHeadCellDragHandleProps;
-
   const iconButtonProps = {
-    ...mIconButtonProps,
-    ...mcIconButtonProps,
+    ...parseFromValuesOrFunc(muiColumnDragHandleProps, { column, table }),
+    ...parseFromValuesOrFunc(columnDef.muiColumnDragHandleProps, {
+      column,
+      table,
+    }),
   };
 
   const handleDragStart = (event: DragEvent<HTMLButtonElement>) => {
@@ -59,7 +52,7 @@ export const MRT_TableHeadCellGrabHandle = ({
       hoveredColumn?.id !== draggingColumn?.id
     ) {
       setColumnOrder(
-        reorderColumn(column, hoveredColumn as MRT_Column, columnOrder),
+        reorderColumn(column, hoveredColumn as MRT_Column<TData>, columnOrder),
       );
     }
     setDraggingColumn(null);

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -2,12 +2,17 @@ import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import { type MRT_Header, type MRT_TableInstance } from '../types';
 
-interface Props {
-  header: MRT_Header;
-  table: MRT_TableInstance;
+interface Props<TData extends Record<string, any>> {
+  header: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCellResizeHandle = ({ header, table }: Props) => {
+export const MRT_TableHeadCellResizeHandle = <
+  TData extends Record<string, any>,
+>({
+  header,
+  table,
+}: Props<TData>) => {
   const {
     getState,
     options: { columnResizeMode },