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

package/src/column.utils.ts

@@ -1,12 +1,18 @@
+import { type ReactNode } from 'react';
+import {
+  type Row,
+  type Renderable,
+  flexRender as _flexRender,
+  createRow as _createRow,
+} from '@tanstack/react-table';
 import { alpha, lighten } from '@mui/material/styles';
 import { type MRT_AggregationFns } from './aggregationFns';
 import { type MRT_FilterFns } from './filterFns';
 import { type MRT_SortingFns } from './sortingFns';
-import { type Row } from '@tanstack/react-table';
 import { type TableCellProps } from '@mui/material/TableCell';
 import { type Theme } from '@mui/material/styles';
 import {
-  type MaterialReactTableProps,
+  type MRT_TableOptions,
   type MRT_Column,
   type MRT_ColumnDef,
   type MRT_ColumnOrderState,
@@ -16,14 +22,15 @@ import {
   type MRT_GroupingState,
   type MRT_Header,
   type MRT_TableInstance,
+  type MRT_Row,
 } from './types';
 
-export const getColumnId = <TData extends Record<string, any> = {}>(
+export const getColumnId = <TData extends Record<string, any>>(
   columnDef: MRT_ColumnDef<TData>,
 ): string =>
   columnDef.id ?? columnDef.accessorKey?.toString?.() ?? columnDef.header;
 
-export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
+export const getAllLeafColumnDefs = <TData extends Record<string, any>>(
   columns: MRT_ColumnDef<TData>[],
 ): MRT_ColumnDef<TData>[] => {
   const allLeafColumnDefs: MRT_ColumnDef<TData>[] = [];
@@ -40,7 +47,7 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any> = {}>(
   return allLeafColumnDefs;
 };
 
-export const prepareColumns = <TData extends Record<string, any> = {}>({
+export const prepareColumns = <TData extends Record<string, any>>({
   aggregationFns,
   columnDefs,
   columnFilterFns,
@@ -49,13 +56,12 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
   sortingFns,
 }: {
   aggregationFns: typeof MRT_AggregationFns &
-    MaterialReactTableProps<TData>['aggregationFns'];
+    MRT_TableOptions<TData>['aggregationFns'];
   columnDefs: MRT_ColumnDef<TData>[];
   columnFilterFns: { [key: string]: MRT_FilterOption };
   defaultDisplayColumn: Partial<MRT_ColumnDef<TData>>;
-  filterFns: typeof MRT_FilterFns & MaterialReactTableProps<TData>['filterFns'];
-  sortingFns: typeof MRT_SortingFns &
-    MaterialReactTableProps<TData>['sortingFns'];
+  filterFns: typeof MRT_FilterFns & MRT_TableOptions<TData>['filterFns'];
+  sortingFns: typeof MRT_SortingFns & MRT_TableOptions<TData>['sortingFns'];
 }): MRT_DefinedColumnDef<TData>[] =>
   columnDefs.map((columnDef) => {
     //assign columnId
@@ -97,7 +103,7 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
       if (Object.keys(filterFns).includes(columnFilterFns[columnDef.id])) {
         columnDef.filterFn =
           filterFns[columnFilterFns[columnDef.id]] ?? filterFns.fuzzy;
-        (columnDef as MRT_DefinedColumnDef)._filterFn =
+        (columnDef as MRT_DefinedColumnDef<TData>)._filterFn =
           columnFilterFns[columnDef.id];
       }
 
@@ -115,7 +121,7 @@ export const prepareColumns = <TData extends Record<string, any> = {}>({
     return columnDef;
   }) as MRT_DefinedColumnDef<TData>[];
 
-export const reorderColumn = <TData extends Record<string, any> = {}>(
+export const reorderColumn = <TData extends Record<string, any>>(
   draggedColumn: MRT_Column<TData>,
   targetColumn: MRT_Column<TData>,
   columnOrder: MRT_ColumnOrderState,
@@ -132,8 +138,8 @@ export const reorderColumn = <TData extends Record<string, any> = {}>(
   return newColumnOrder;
 };
 
-export const showExpandColumn = <TData extends Record<string, any> = {}>(
-  props: MaterialReactTableProps<TData>,
+export const showExpandColumn = <TData extends Record<string, any>>(
+  props: MRT_TableOptions<TData>,
   grouping?: MRT_GroupingState,
 ) =>
   !!(
@@ -142,17 +148,15 @@ export const showExpandColumn = <TData extends Record<string, any> = {}>(
     props.renderDetailPanel
   );
 
-export const getLeadingDisplayColumnIds = <
-  TData extends Record<string, any> = {},
->(
-  props: MaterialReactTableProps<TData>,
+export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
+  props: MRT_TableOptions<TData>,
 ) =>
   [
     (props.enableRowDragging || props.enableRowOrdering) && 'mrt-row-drag',
     props.positionActionsColumn === 'first' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editingMode ?? ''))) &&
+          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'first' &&
       showExpandColumn(props) &&
@@ -161,26 +165,22 @@ export const getLeadingDisplayColumnIds = <
     props.enableRowNumbers && 'mrt-row-numbers',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
-export const getTrailingDisplayColumnIds = <
-  TData extends Record<string, any> = {},
->(
-  props: MaterialReactTableProps<TData>,
+export const getTrailingDisplayColumnIds = <TData extends Record<string, any>>(
+  props: MRT_TableOptions<TData>,
 ) =>
   [
     props.positionActionsColumn === 'last' &&
       (props.enableRowActions ||
         (props.enableEditing &&
-          ['row', 'modal'].includes(props.editingMode ?? ''))) &&
+          ['row', 'modal'].includes(props.editDisplayMode ?? ''))) &&
       'mrt-row-actions',
     props.positionExpandColumn === 'last' &&
       showExpandColumn(props) &&
       'mrt-row-expand',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
-export const getDefaultColumnOrderIds = <
-  TData extends Record<string, any> = {},
->(
-  props: MaterialReactTableProps<TData>,
+export const getDefaultColumnOrderIds = <TData extends Record<string, any>>(
+  props: MRT_TableOptions<TData>,
 ) => {
   const leadingDisplayCols: string[] = getLeadingDisplayColumnIds(props);
   const trailingDisplayCols: string[] = getTrailingDisplayColumnIds(props);
@@ -194,9 +194,7 @@ export const getDefaultColumnOrderIds = <
   return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
 
-export const getDefaultColumnFilterFn = <
-  TData extends Record<string, any> = {},
->(
+export const getDefaultColumnFilterFn = <TData extends Record<string, any>>(
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
   if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
@@ -213,24 +211,24 @@ export const getDefaultColumnFilterFn = <
   return 'fuzzy';
 };
 
-export const getIsFirstColumn = (
-  column: MRT_Column,
-  table: MRT_TableInstance,
+export const getIsFirstColumn = <TData extends Record<string, any>>(
+  column: MRT_Column<TData>,
+  table: MRT_TableInstance<TData>,
 ) => {
   return table.getVisibleLeafColumns()[0].id === column.id;
 };
 
-export const getIsLastColumn = (
-  column: MRT_Column,
-  table: MRT_TableInstance,
+export const getIsLastColumn = <TData extends Record<string, any>>(
+  column: MRT_Column<TData>,
+  table: MRT_TableInstance<TData>,
 ) => {
   const columns = table.getVisibleLeafColumns();
   return columns[columns.length - 1].id === column.id;
 };
 
-export const getIsLastLeftPinnedColumn = (
-  table: MRT_TableInstance,
-  column: MRT_Column,
+export const getIsLastLeftPinnedColumn = <TData extends Record<string, any>>(
+  table: MRT_TableInstance<TData>,
+  column: MRT_Column<TData>,
 ) => {
   return (
     column.getIsPinned() === 'left' &&
@@ -238,27 +236,57 @@ export const getIsLastLeftPinnedColumn = (
   );
 };
 
-export const getIsFirstRightPinnedColumn = (column: MRT_Column) => {
+export const getIsFirstRightPinnedColumn = <TData extends Record<string, any>>(
+  column: MRT_Column<TData>,
+) => {
   return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
 };
 
-export const getTotalRight = (table: MRT_TableInstance, column: MRT_Column) => {
+export const getTotalRight = <TData extends Record<string, any>>(
+  table: MRT_TableInstance<TData>,
+  column: MRT_Column<TData>,
+) => {
   return table
     .getRightLeafHeaders()
     .slice(column.getPinnedIndex() + 1)
     .reduce((acc, col) => acc + col.getSize(), 0);
 };
 
-export const getCommonCellStyles = ({
+export const getCanRankRows = <TData extends Record<string, any>>(
+  table: MRT_TableInstance<TData>,
+) => {
+  const { options, getState } = table;
+  const {
+    manualExpanding,
+    manualFiltering,
+    manualGrouping,
+    manualSorting,
+    enableGlobalFilterRankedResults,
+  } = options;
+  const { globalFilterFn, expanded } = getState();
+
+  return (
+    !manualExpanding &&
+    !manualFiltering &&
+    !manualGrouping &&
+    !manualSorting &&
+    enableGlobalFilterRankedResults &&
+    globalFilterFn === 'fuzzy' &&
+    expanded !== true &&
+    !Object.values(expanded).some(Boolean)
+  );
+};
+
+export const getCommonCellStyles = <TData extends Record<string, any>>({
   column,
   header,
   table,
   tableCellProps,
   theme,
 }: {
-  column: MRT_Column;
-  header?: MRT_Header;
-  table: MRT_TableInstance;
+  column: MRT_Column<TData>;
+  header?: MRT_Header<TData>;
+  table: MRT_TableInstance<TData>;
   tableCellProps: TableCellProps;
   theme: Theme;
 }) => {
@@ -358,3 +386,26 @@ export const MRT_DefaultDisplayColumn = {
 } as const;
 
 export const parseCSSVarId = (id: string) => id.replace(/[^a-zA-Z0-9]/g, '_');
+
+export const flexRender = _flexRender as (
+  Comp: Renderable<any>,
+  props: any,
+) => ReactNode | JSX.Element;
+
+export const createRow = <TData extends Record<string, any>>(
+  table: MRT_TableInstance<TData>,
+  originalRow?: TData,
+): MRT_Row<TData> =>
+  _createRow(
+    table as any,
+    'mrt-row-create',
+    originalRow ??
+      Object.assign(
+        {},
+        ...getAllLeafColumnDefs(table.options.columns).map((col) => ({
+          [getColumnId(col)]: '',
+        })),
+      ),
+    -1,
+    0,
+  ) as MRT_Row<TData>;

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

@@ -3,19 +3,19 @@ import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_TableInstance } from '../types';
 
-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,

package/src/footer/MRT_TableFooterCell.tsx

@@ -2,12 +2,15 @@ import TableCell from '@mui/material/TableCell';
 import { getCommonCellStyles } 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 },

package/src/footer/MRT_TableFooterRow.tsx

@@ -8,21 +8,21 @@ import {
   type MRT_TableInstance,
 } from '../types';
 
-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;
@@ -61,7 +61,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

@@ -3,19 +3,19 @@ import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { type VirtualItem } from '@tanstack/react-virtual';
 import { type MRT_TableInstance } from '../types';
 
-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,

package/src/head/MRT_TableHeadCell.tsx

@@ -12,12 +12,15 @@ import { getCommonCellStyles } from '../column.utils';
 import { type Theme } from '@mui/material/styles';
 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,

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -4,20 +4,22 @@ import Tooltip from '@mui/material/Tooltip';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 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;
@@ -32,17 +34,17 @@ export const MRT_TableHeadCellColumnActionsButton = ({
   };
 
   const mTableHeadCellColumnActionsButtonProps =
-    muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? muiTableHeadCellColumnActionsButtonProps({ column, table })
-      : muiTableHeadCellColumnActionsButtonProps;
+    muiColumnActionsButtonProps instanceof Function
+      ? muiColumnActionsButtonProps({ column, table })
+      : muiColumnActionsButtonProps;
 
   const mcTableHeadCellColumnActionsButtonProps =
-    columnDef.muiTableHeadCellColumnActionsButtonProps instanceof Function
-      ? columnDef.muiTableHeadCellColumnActionsButtonProps({
+    columnDef.muiColumnActionsButtonProps instanceof Function
+      ? columnDef.muiColumnActionsButtonProps({
           column,
           table,
         })
-      : columnDef.muiTableHeadCellColumnActionsButtonProps;
+      : columnDef.muiColumnActionsButtonProps;
 
   const iconButtonProps = {
     ...mTableHeadCellColumnActionsButtonProps,

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