material-react-table 2.0.0-beta.0 → 2.0.0-beta.2

package/src/column.utils.ts

@@ -15,23 +15,27 @@ import { type MRT_SortingFns } from './sortingFns';
 import {
   type MRT_Column,
   type MRT_ColumnDef,
+  type MRT_ColumnHelper,
   type MRT_ColumnOrderState,
   type MRT_DefinedColumnDef,
+  type MRT_DisplayColumnDef,
   type MRT_DisplayColumnIds,
   type MRT_FilterOption,
+  type MRT_GroupColumnDef,
   type MRT_GroupingState,
   type MRT_Header,
   type MRT_Row,
+  type MRT_RowData,
   type MRT_TableInstance,
   type MRT_TableOptions,
 } from './types';
 
-export const getColumnId = <TData extends Record<string, any>>(
+export const getColumnId = <TData extends MRT_RowData>(
   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 MRT_RowData>(
   columns: MRT_ColumnDef<TData>[],
 ): MRT_ColumnDef<TData>[] => {
   const allLeafColumnDefs: MRT_ColumnDef<TData>[] = [];
@@ -48,7 +52,7 @@ export const getAllLeafColumnDefs = <TData extends Record<string, any>>(
   return allLeafColumnDefs;
 };
 
-export const prepareColumns = <TData extends Record<string, any>>({
+export const prepareColumns = <TData extends MRT_RowData>({
   aggregationFns,
   columnDefs,
   columnFilterFns,
@@ -122,7 +126,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 MRT_RowData>(
   draggedColumn: MRT_Column<TData>,
   targetColumn: MRT_Column<TData>,
   columnOrder: MRT_ColumnOrderState,
@@ -139,7 +143,7 @@ export const reorderColumn = <TData extends Record<string, any>>(
   return newColumnOrder;
 };
 
-export const showExpandColumn = <TData extends Record<string, any>>(
+export const showExpandColumn = <TData extends MRT_RowData>(
   props: MRT_TableOptions<TData>,
   grouping?: MRT_GroupingState,
 ) =>
@@ -149,7 +153,7 @@ export const showExpandColumn = <TData extends Record<string, any>>(
     props.renderDetailPanel
   );
 
-export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
+export const getLeadingDisplayColumnIds = <TData extends MRT_RowData>(
   props: MRT_TableOptions<TData>,
 ) =>
   [
@@ -170,7 +174,7 @@ export const getLeadingDisplayColumnIds = <TData extends Record<string, any>>(
     props.layoutMode === 'grid-no-grow' && 'mrt-row-spacer',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
-export const getTrailingDisplayColumnIds = <TData extends Record<string, any>>(
+export const getTrailingDisplayColumnIds = <TData extends MRT_RowData>(
   props: MRT_TableOptions<TData>,
 ) =>
   [
@@ -184,7 +188,7 @@ export const getTrailingDisplayColumnIds = <TData extends Record<string, any>>(
       'mrt-row-expand',
   ].filter(Boolean) as MRT_DisplayColumnIds[];
 
-export const getDefaultColumnOrderIds = <TData extends Record<string, any>>(
+export const getDefaultColumnOrderIds = <TData extends MRT_RowData>(
   props: MRT_TableOptions<TData>,
 ) => {
   const leadingDisplayCols: string[] = getLeadingDisplayColumnIds(props);
@@ -199,7 +203,7 @@ export const getDefaultColumnOrderIds = <TData extends Record<string, any>>(
   return [...leadingDisplayCols, ...allLeafColumnDefs, ...trailingDisplayCols];
 };
 
-export const getDefaultColumnFilterFn = <TData extends Record<string, any>>(
+export const getDefaultColumnFilterFn = <TData extends MRT_RowData>(
   columnDef: MRT_ColumnDef<TData>,
 ): MRT_FilterOption => {
   if (columnDef.filterVariant === 'multi-select') return 'arrIncludesSome';
@@ -212,7 +216,7 @@ export const getDefaultColumnFilterFn = <TData extends Record<string, any>>(
   return 'fuzzy';
 };
 
-export const getIsFirstColumn = <TData extends Record<string, any>>(
+export const getIsFirstColumn = <TData extends MRT_RowData>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
@@ -222,7 +226,7 @@ export const getIsFirstColumn = <TData extends Record<string, any>>(
     : table.getVisibleLeafColumns()[0].id === column.id;
 };
 
-export const getIsLastColumn = <TData extends Record<string, any>>(
+export const getIsLastColumn = <TData extends MRT_RowData>(
   column: MRT_Column<TData>,
   table: MRT_TableInstance<TData>,
 ) => {
@@ -233,7 +237,7 @@ export const getIsLastColumn = <TData extends Record<string, any>>(
     : columns[columns.length - 1].id === column.id;
 };
 
-export const getIsLastLeftPinnedColumn = <TData extends Record<string, any>>(
+export const getIsLastLeftPinnedColumn = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
   column: MRT_Column<TData>,
 ) => {
@@ -243,13 +247,13 @@ export const getIsLastLeftPinnedColumn = <TData extends Record<string, any>>(
   );
 };
 
-export const getIsFirstRightPinnedColumn = <TData extends Record<string, any>>(
+export const getIsFirstRightPinnedColumn = <TData extends MRT_RowData>(
   column: MRT_Column<TData>,
 ) => {
   return column.getIsPinned() === 'right' && column.getPinnedIndex() === 0;
 };
 
-export const getTotalRight = <TData extends Record<string, any>>(
+export const getTotalRight = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
   column: MRT_Column<TData>,
 ) => {
@@ -259,7 +263,7 @@ export const getTotalRight = <TData extends Record<string, any>>(
     .reduce((acc, col) => acc + col.getSize(), 0);
 };
 
-export const getCanRankRows = <TData extends Record<string, any>>(
+export const getCanRankRows = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
 ) => {
   const { getState, options } = table;
@@ -284,7 +288,7 @@ export const getCanRankRows = <TData extends Record<string, any>>(
   );
 };
 
-export const getCommonCellStyles = <TData extends Record<string, any>>({
+export const getCommonCellStyles = <TData extends MRT_RowData>({
   column,
   header,
   table,
@@ -409,7 +413,7 @@ export const flexRender = _flexRender as (
   props: any,
 ) => JSX.Element | ReactNode;
 
-export const createRow = <TData extends Record<string, any>>(
+export const createRow = <TData extends MRT_RowData>(
   table: MRT_TableInstance<TData>,
   originalRow?: TData,
 ): MRT_Row<TData> =>
@@ -443,3 +447,23 @@ export const extraIndexRangeExtractor = (
   }
   return newIndexs;
 };
+
+export function createMRTColumnHelper<
+  TData extends MRT_RowData,
+>(): MRT_ColumnHelper<TData> {
+  return {
+    accessor: (accessor, column) => {
+      return typeof accessor === 'function'
+        ? ({
+            ...column,
+            accessorFn: accessor,
+          } as any)
+        : {
+            ...column,
+            accessorKey: accessor,
+          };
+    },
+    display: (column) => column as MRT_DisplayColumnDef<TData>,
+    group: (column) => column as MRT_GroupColumnDef<TData>,
+  };
+}

package/src/filterFns.ts

@@ -4,8 +4,9 @@ import {
   rankings,
 } from '@tanstack/match-sorter-utils';
 import { type Row, filterFns } from '@tanstack/react-table';
+import { type MRT_RowData } from './types';
 
-const fuzzy = <TData extends Record<string, any>>(
+const fuzzy = <TData extends MRT_RowData>(
   row: Row<TData>,
   columnId: string,
   filterValue: number | string,
@@ -20,7 +21,7 @@ const fuzzy = <TData extends Record<string, any>>(
 
 fuzzy.autoRemove = (val: any) => !val;
 
-const contains = <TData extends Record<string, any>>(
+const contains = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -34,7 +35,7 @@ const contains = <TData extends Record<string, any>>(
 
 contains.autoRemove = (val: any) => !val;
 
-const startsWith = <TData extends Record<string, any>>(
+const startsWith = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -48,7 +49,7 @@ const startsWith = <TData extends Record<string, any>>(
 
 startsWith.autoRemove = (val: any) => !val;
 
-const endsWith = <TData extends Record<string, any>>(
+const endsWith = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -62,7 +63,7 @@ const endsWith = <TData extends Record<string, any>>(
 
 endsWith.autoRemove = (val: any) => !val;
 
-const equals = <TData extends Record<string, any>>(
+const equals = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -72,7 +73,7 @@ const equals = <TData extends Record<string, any>>(
 
 equals.autoRemove = (val: any) => !val;
 
-const notEquals = <TData extends Record<string, any>>(
+const notEquals = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -82,7 +83,7 @@ const notEquals = <TData extends Record<string, any>>(
 
 notEquals.autoRemove = (val: any) => !val;
 
-const greaterThan = <TData extends Record<string, any>>(
+const greaterThan = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -94,7 +95,7 @@ const greaterThan = <TData extends Record<string, any>>(
 
 greaterThan.autoRemove = (val: any) => !val;
 
-const greaterThanOrEqualTo = <TData extends Record<string, any>>(
+const greaterThanOrEqualTo = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -102,7 +103,7 @@ const greaterThanOrEqualTo = <TData extends Record<string, any>>(
 
 greaterThanOrEqualTo.autoRemove = (val: any) => !val;
 
-const lessThan = <TData extends Record<string, any>>(
+const lessThan = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -114,7 +115,7 @@ const lessThan = <TData extends Record<string, any>>(
 
 lessThan.autoRemove = (val: any) => !val;
 
-const lessThanOrEqualTo = <TData extends Record<string, any>>(
+const lessThanOrEqualTo = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValue: number | string,
@@ -122,7 +123,7 @@ const lessThanOrEqualTo = <TData extends Record<string, any>>(
 
 lessThanOrEqualTo.autoRemove = (val: any) => !val;
 
-const between = <TData extends Record<string, any>>(
+const between = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValues: [number | string, number | string],
@@ -137,7 +138,7 @@ const between = <TData extends Record<string, any>>(
 
 between.autoRemove = (val: any) => !val;
 
-const betweenInclusive = <TData extends Record<string, any>>(
+const betweenInclusive = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   filterValues: [number | string, number | string],
@@ -152,7 +153,7 @@ const betweenInclusive = <TData extends Record<string, any>>(
 
 betweenInclusive.autoRemove = (val: any) => !val;
 
-const empty = <TData extends Record<string, any>>(
+const empty = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   _filterValue: number | string,
@@ -160,7 +161,7 @@ const empty = <TData extends Record<string, any>>(
 
 empty.autoRemove = (val: any) => !val;
 
-const notEmpty = <TData extends Record<string, any>>(
+const notEmpty = <TData extends MRT_RowData>(
   row: Row<TData>,
   id: string,
   _filterValue: number | string,

package/src/footer/MRT_TableFooter.tsx

@@ -2,16 +2,16 @@ import { type VirtualItem } from '@tanstack/react-virtual';
 import TableFooter from '@mui/material/TableFooter';
 import { MRT_TableFooterRow } from './MRT_TableFooterRow';
 import { parseFromValuesOrFunc } from '../column.utils';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableFooter = <TData extends Record<string, any>>({
+export const MRT_TableFooter = <TData extends MRT_RowData>({
   table,
   virtualColumns,
   virtualPaddingLeft,

package/src/footer/MRT_TableFooterCell.tsx

@@ -1,13 +1,17 @@
 import TableCell from '@mui/material/TableCell';
 import { getCommonCellStyles, parseFromValuesOrFunc } from '../column.utils';
-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> {
   footer: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableFooterCell = <TData extends Record<string, any>>({
+export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   footer,
   table,
 }: Props<TData>) => {

package/src/footer/MRT_TableFooterRow.tsx

@@ -6,10 +6,11 @@ import { parseFromValuesOrFunc } from '../column.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> {
   footerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -17,7 +18,7 @@ interface Props<TData extends Record<string, any>> {
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableFooterRow = <TData extends Record<string, any>>({
+export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   footerGroup,
   table,
   virtualColumns,

package/src/head/MRT_TableHead.tsx

@@ -3,16 +3,16 @@ import TableHead from '@mui/material/TableHead';
 import { MRT_TableHeadRow } from './MRT_TableHeadRow';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_ToolbarAlertBanner } from '../toolbar';
-import { type MRT_TableInstance } from '../types';
+import { type MRT_RowData, type MRT_TableInstance } from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
   virtualPaddingLeft?: number;
   virtualPaddingRight?: number;
 }
 
-export const MRT_TableHead = <TData extends Record<string, any>>({
+export const MRT_TableHead = <TData extends MRT_RowData>({
   table,
   virtualColumns,
   virtualPaddingLeft,

package/src/head/MRT_TableHeadCell.tsx

@@ -11,14 +11,18 @@ import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import { getCommonCellStyles } from '../column.utils';
 import { parseFromValuesOrFunc } from '../column.utils';
-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> {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
-export const MRT_TableHeadCell = <TData extends Record<string, any>>({
+export const MRT_TableHeadCell = <TData extends MRT_RowData>({
   header,
   table,
 }: Props<TData>) => {
@@ -39,6 +43,7 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
     setHoveredColumn,
   } = table;
   const {
+    columnSizingInfo,
     density,
     draggingColumn,
     grouping,
@@ -78,23 +83,30 @@ export const MRT_TableHeadCell = <TData extends Record<string, any>>({
     return pl;
   }, [showColumnActions, showDragHandle]);
 
-  const draggingBorder = useMemo(
-    () =>
-      draggingColumn?.id === column.id
+  const draggingBorders = useMemo(() => {
+    const borderStyle =
+      columnSizingInfo.isResizingColumn === column.id &&
+      !header.subHeaders.length
+        ? `2px solid ${theme.palette.primary.main} !important`
+        : draggingColumn?.id === column.id
         ? `1px dashed ${theme.palette.text.secondary}`
         : hoveredColumn?.id === column.id
         ? `2px dashed ${theme.palette.primary.main}`
-        : undefined,
-    [draggingColumn, hoveredColumn],
-  );
+        : undefined;
+
+    if (columnSizingInfo.isResizingColumn === column.id) {
+      return { borderRight: borderStyle };
+    }
+    const draggingBorders = borderStyle
+      ? {
+          borderLeft: borderStyle,
+          borderRight: borderStyle,
+          borderTop: borderStyle,
+        }
+      : undefined;
 
-  const draggingBorders = draggingBorder
-    ? {
-        borderLeft: draggingBorder,
-        borderRight: draggingBorder,
-        borderTop: draggingBorder,
-      }
-    : undefined;
+    return draggingBorders;
+  }, [draggingColumn, hoveredColumn, columnSizingInfo.isResizingColumn]);
 
   const handleDragEnter = (_e: DragEvent) => {
     if (enableGrouping && hoveredColumn?.id === 'drop-zone') {

package/src/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -3,15 +3,19 @@ import IconButton from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { parseFromValuesOrFunc } from '../column.utils';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
-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> {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableHeadCellColumnActionsButton = <
-  TData extends Record<string, any>,
+  TData extends MRT_RowData,
 >({
   header,
   table,

package/src/head/MRT_TableHeadCellFilterContainer.tsx

@@ -3,16 +3,18 @@ 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> {
   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,
 }: Props<TData>) => {

package/src/head/MRT_TableHeadCellFilterLabel.tsx

@@ -5,16 +5,18 @@ import IconButton 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 {
+  type MRT_Header,
+  type MRT_RowData,
+  type MRT_TableInstance,
+} from '../types';
 
-interface Props<TData extends Record<string, any>> {
+interface Props<TData extends MRT_RowData> {
   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,
 }: Props<TData>) => {

package/src/head/MRT_TableHeadCellGrabHandle.tsx

@@ -1,15 +1,19 @@
 import { type DragEvent, type RefObject } from 'react';
 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> {
   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,

package/src/head/MRT_TableHeadCellResizeHandle.tsx

@@ -1,15 +1,17 @@
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-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> {
   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,
 }: Props<TData>) => {
@@ -42,13 +44,18 @@ export const MRT_TableHeadCellResizeHandle = <
       sx={(theme) => ({
         '&:active > hr': {
           backgroundColor: theme.palette.info.main,
-          opacity: 1,
+          opacity: header.subHeaders.length ? 1 : 0,
         },
         cursor: 'col-resize',
-        mr: density === 'compact' ? '-0.75rem' : '-1rem',
+        mr:
+          density === 'compact'
+            ? '-12px'
+            : density === 'comfortable'
+            ? '-20px'
+            : '-28px',
         position: 'absolute',
         px: '4px',
-        right: '4px',
+        right: '0',
       })}
     >
       <Divider

package/src/head/MRT_TableHeadCellSortLabel.tsx

@@ -2,15 +2,19 @@ import Badge from '@mui/material/Badge';
 import { type TableCellProps } from '@mui/material/TableCell';
 import TableSortLabel from '@mui/material/TableSortLabel';
 import Tooltip from '@mui/material/Tooltip';
-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> {
   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,
 }: Props<TData>) => {

package/src/head/MRT_TableHeadRow.tsx

@@ -6,10 +6,11 @@ import { parseFromValuesOrFunc } from '../column.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> {
   headerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
   virtualColumns?: VirtualItem[];
@@ -17,7 +18,7 @@ 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,