material-react-table 2.9.2 → 2.11.0

package/src/components/body/MRT_TableBodyRowPinButton.tsx

@@ -8,7 +8,8 @@ import {
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_RowPinButton } from '../buttons/MRT_RowPinButton';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableBodyRowPinButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -17,7 +18,7 @@ export const MRT_TableBodyRowPinButton = <TData extends MRT_RowData>({
   row,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableBodyRowPinButtonProps<TData>) => {
   const {
     getState,
     options: { enableRowPinning, rowPinningDisplayMode },

package/src/components/body/MRT_TableDetailPanel.tsx

@@ -12,7 +12,8 @@ import {
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableCellProps {
+export interface MRT_TableDetailPanelProps<TData extends MRT_RowData>
+  extends TableCellProps {
   parentRowRef: RefObject<HTMLTableRowElement>;
   row: MRT_Row<TData>;
   rowVirtualizer?: MRT_RowVirtualizer;
@@ -29,7 +30,7 @@ export const MRT_TableDetailPanel = <TData extends MRT_RowData>({
   table,
   virtualRow,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableDetailPanelProps<TData>) => {
   const {
     getState,
     getVisibleLeafColumns,

package/src/components/buttons/MRT_ColumnPinningButtons.tsx

@@ -8,7 +8,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends BoxProps {
+export interface MRT_ColumnPinningButtonsProps<TData extends MRT_RowData>
+  extends BoxProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -17,7 +18,7 @@ export const MRT_ColumnPinningButtons = <TData extends MRT_RowData>({
   column,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ColumnPinningButtonsProps<TData>) => {
   const {
     options: {
       icons: { PushPinIcon },

package/src/components/buttons/MRT_CopyButton.tsx

@@ -9,7 +9,8 @@ import {
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends ButtonProps {
+export interface MRT_CopyButtonProps<TData extends MRT_RowData>
+  extends ButtonProps {
   cell: MRT_Cell<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +19,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
   cell,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_CopyButtonProps<TData>) => {
   const {
     options: { localization, muiCopyButtonProps },
   } = table;
@@ -74,6 +75,7 @@ export const MRT_CopyButton = <TData extends MRT_RowData>({
           letterSpacing: 'inherit',
           m: '-0.25rem',
           minWidth: 'unset',
+          py: 0,
           textAlign: 'inherit',
           textTransform: 'inherit',
           ...(parseFromValuesOrFunc(buttonProps?.sx, theme) as any),

package/src/components/buttons/MRT_EditActionButtons.tsx

@@ -10,7 +10,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends BoxProps {
+export interface MRT_EditActionButtonsProps<TData extends MRT_RowData>
+  extends BoxProps {
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
   variant?: 'icon' | 'text';
@@ -21,7 +22,7 @@ export const MRT_EditActionButtons = <TData extends MRT_RowData>({
   table,
   variant = 'icon',
   ...rest
-}: Props<TData>) => {
+}: MRT_EditActionButtonsProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ExpandAllButton.tsx

@@ -4,14 +4,15 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ExpandAllButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ExpandAllButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ExpandAllButtonProps<TData>) => {
   const {
     getCanSomeRowsExpand,
     getIsAllRowsExpanded,

package/src/components/buttons/MRT_ExpandButton.tsx

@@ -10,7 +10,8 @@ import {
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ExpandButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   row: MRT_Row<TData>;
   staticRowIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -20,7 +21,7 @@ export const MRT_ExpandButton = <TData extends MRT_RowData>({
   row,
   staticRowIndex,
   table,
-}: Props<TData>) => {
+}: MRT_ExpandButtonProps<TData>) => {
   const theme = useTheme();
   const {
     getState,

package/src/components/buttons/MRT_GrabHandleButton.tsx

@@ -5,7 +5,8 @@ import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_GrabHandleButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   iconButtonProps?: IconButtonProps;
   location?: 'column' | 'row';
   onDragEnd: DragEventHandler<HTMLButtonElement>;
@@ -14,13 +15,10 @@ interface Props<TData extends MRT_RowData> extends IconButtonProps {
 }
 
 export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
-  iconButtonProps,
   location,
-  onDragEnd,
-  onDragStart,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_GrabHandleButtonProps<TData>) => {
   const {
     options: {
       icons: { DragHandleIcon },
@@ -28,25 +26,21 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
     },
   } = table;
 
-  const _iconButtonProps = { ...iconButtonProps, ...rest };
-
   return (
     <Tooltip
       {...getCommonTooltipProps('top')}
-      title={_iconButtonProps?.title ?? localization.move}
+      title={rest?.title ?? localization.move}
     >
       <IconButton
-        aria-label={_iconButtonProps.title ?? localization.move}
+        aria-label={rest.title ?? localization.move}
         disableRipple
         draggable="true"
         size="small"
-        {..._iconButtonProps}
+        {...rest}
         onClick={(e) => {
           e.stopPropagation();
-          _iconButtonProps?.onClick?.(e);
+          rest?.onClick?.(e);
         }}
-        onDragEnd={onDragEnd}
-        onDragStart={onDragStart}
         sx={(theme) => ({
           '&:active': {
             cursor: 'grabbing',
@@ -57,10 +51,10 @@ export const MRT_GrabHandleButton = <TData extends MRT_RowData>({
           },
           cursor: 'grab',
           m: '0 -0.1rem',
-          opacity: location === 'row' ? 1 : 0.3,
+          opacity: location === 'row' ? 1 : 0.5,
           p: '2px',
           transition: 'all 150ms ease-in-out',
-          ...(parseFromValuesOrFunc(_iconButtonProps?.sx, theme) as any),
+          ...(parseFromValuesOrFunc(rest?.sx, theme) as any),
         })}
         title={undefined}
       >

package/src/components/buttons/MRT_RowPinButton.tsx

@@ -10,7 +10,8 @@ import {
 import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_RowPinButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   pinningPosition: RowPinningPosition;
   row: MRT_Row<TData>;
   table: MRT_TableInstance<TData>;
@@ -21,7 +22,7 @@ export const MRT_RowPinButton = <TData extends MRT_RowData>({
   row,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_RowPinButtonProps<TData>) => {
   const {
     options: {
       icons: { CloseIcon, PushPinIcon },

package/src/components/buttons/MRT_ShowHideColumnsButton.tsx

@@ -4,14 +4,15 @@ import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 import { MRT_ShowHideColumnsMenu } from '../menus/MRT_ShowHideColumnsMenu';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ShowHideColumnsButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ShowHideColumnsButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ShowHideColumnsButtonProps<TData>) => {
   const {
     options: {
       icons: { ViewColumnIcon },

package/src/components/buttons/MRT_ToggleDensePaddingButton.tsx

@@ -2,14 +2,15 @@ import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleDensePaddingButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleDensePaddingButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleDensePaddingButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ToggleFiltersButton.tsx

@@ -2,14 +2,15 @@ import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleFiltersButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleFiltersButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleFiltersButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ToggleFullScreenButton.tsx

@@ -3,14 +3,15 @@ import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleFullScreenButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleFullScreenButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleFullScreenButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ToggleGlobalFilterButton.tsx

@@ -2,14 +2,15 @@ import IconButton, { type IconButtonProps } from '@mui/material/IconButton';
 import Tooltip from '@mui/material/Tooltip';
 import { type MRT_RowData, type MRT_TableInstance } from '../../types';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleGlobalFilterButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_ToggleGlobalFilterButton = <TData extends MRT_RowData>({
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleGlobalFilterButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/buttons/MRT_ToggleRowActionMenuButton.tsx

@@ -23,7 +23,8 @@ const commonIconButtonStyles = {
   width: '2rem',
 };
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_ToggleRowActionMenuButtonProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   cell: MRT_Cell<TData>;
   row: MRT_Row<TData>;
   staticRowIndex?: number;
@@ -36,7 +37,7 @@ export const MRT_ToggleRowActionMenuButton = <TData extends MRT_RowData>({
   staticRowIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_ToggleRowActionMenuButtonProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/footer/MRT_TableFooter.tsx

@@ -7,7 +7,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableFooterProps {
+export interface MRT_TableFooterProps<TData extends MRT_RowData>
+  extends TableFooterProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
 }
@@ -16,7 +17,7 @@ export const MRT_TableFooter = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableFooterProps<TData>) => {
   const {
     getFooterGroups,
     getState,

package/src/components/footer/MRT_TableFooterCell.tsx

@@ -8,7 +8,8 @@ import {
 import { getCommonMRTCellStyles } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableCellProps {
+export interface MRT_TableFooterCellProps<TData extends MRT_RowData>
+  extends TableCellProps {
   footer: MRT_Header<TData>;
   staticColumnIndex?: number;
   table: MRT_TableInstance<TData>;
@@ -19,7 +20,7 @@ export const MRT_TableFooterCell = <TData extends MRT_RowData>({
   staticColumnIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableFooterCellProps<TData>) => {
   const theme = useTheme();
   const {
     getState,

package/src/components/footer/MRT_TableFooterRow.tsx

@@ -11,7 +11,8 @@ import {
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableRowProps {
+export interface MRT_TableFooterRowProps<TData extends MRT_RowData>
+  extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   footerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
@@ -22,7 +23,7 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
   footerGroup,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableFooterRowProps<TData>) => {
   const {
     options: { layoutMode, muiTableFooterRowProps },
   } = table;
@@ -38,8 +39,9 @@ export const MRT_TableFooterRow = <TData extends MRT_RowData>({
           !!header.column.columnDef.footer) ||
         header.column.columnDef.Footer,
     )
-  )
+  ) {
     return null;
+  }
 
   const tableRowProps = {
     ...parseFromValuesOrFunc(muiTableFooterRowProps, {

package/src/components/head/MRT_TableHead.tsx

@@ -8,7 +8,8 @@ import {
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ToolbarAlertBanner } from '../toolbar/MRT_ToolbarAlertBanner';
 
-interface Props<TData extends MRT_RowData> extends TableHeadProps {
+export interface MRT_TableHeadProps<TData extends MRT_RowData>
+  extends TableHeadProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   table: MRT_TableInstance<TData>;
 }
@@ -17,7 +18,7 @@ export const MRT_TableHead = <TData extends MRT_RowData>({
   columnVirtualizer,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadProps<TData>) => {
   const {
     getHeaderGroups,
     getSelectedRowModel,

package/src/components/head/MRT_TableHeadCell.tsx

@@ -10,6 +10,7 @@ import { MRT_TableHeadCellGrabHandle } from './MRT_TableHeadCellGrabHandle';
 import { MRT_TableHeadCellResizeHandle } from './MRT_TableHeadCellResizeHandle';
 import { MRT_TableHeadCellSortLabel } from './MRT_TableHeadCellSortLabel';
 import {
+  type MRT_ColumnVirtualizer,
   type MRT_Header,
   type MRT_RowData,
   type MRT_TableInstance,
@@ -17,18 +18,21 @@ import {
 import { getCommonMRTCellStyles, getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableCellProps {
+export interface MRT_TableHeadCellProps<TData extends MRT_RowData>
+  extends TableCellProps {
+  columnVirtualizer?: MRT_ColumnVirtualizer;
   header: MRT_Header<TData>;
   staticColumnIndex?: number;
   table: MRT_TableInstance<TData>;
 }
 
 export const MRT_TableHeadCell = <TData extends MRT_RowData>({
+  columnVirtualizer,
   header,
   staticColumnIndex,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellProps<TData>) => {
   const theme = useTheme();
   const {
     getState,
@@ -161,6 +165,9 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
       ref={(node: HTMLTableCellElement) => {
         if (node) {
           tableHeadCellRefs.current[column.id] = node;
+          if (columnDefType !== 'group') {
+            columnVirtualizer?.measureElement?.(node);
+          }
         }
       }}
       {...tableCellProps}
@@ -261,9 +268,6 @@ export const MRT_TableHeadCell = <TData extends MRT_RowData>({
                         ? 'nowrap'
                         : 'normal',
                   }}
-                  title={
-                    columnDefType === 'data' ? columnDef.header : undefined
-                  }
                 >
                   {HeaderElement}
                 </Box>

package/src/components/head/MRT_TableHeadCellColumnActionsButton.tsx

@@ -10,7 +10,9 @@ import { getCommonTooltipProps } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_ColumnActionMenu } from '../menus/MRT_ColumnActionMenu';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableHeadCellColumnActionsButtonProps<
+  TData extends MRT_RowData,
+> extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -21,7 +23,7 @@ export const MRT_TableHeadCellColumnActionsButton = <
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellColumnActionsButtonProps<TData>) => {
   const {
     options: {
       icons: { MoreVertIcon },

package/src/components/head/MRT_TableHeadCellFilterContainer.tsx

@@ -9,7 +9,9 @@ import { MRT_FilterRangeFields } from '../inputs/MRT_FilterRangeFields';
 import { MRT_FilterRangeSlider } from '../inputs/MRT_FilterRangeSlider';
 import { MRT_FilterTextField } from '../inputs/MRT_FilterTextField';
 
-interface Props<TData extends MRT_RowData> extends CollapseProps {
+export interface MRT_TableHeadCellFilterContainerProps<
+  TData extends MRT_RowData,
+> extends CollapseProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -18,7 +20,7 @@ export const MRT_TableHeadCellFilterContainer = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellFilterContainerProps<TData>) => {
   const {
     getState,
     options: { columnFilterDisplayMode },

package/src/components/head/MRT_TableHeadCellFilterLabel.tsx

@@ -12,7 +12,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableHeadCellFilterLabelProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -21,7 +22,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellFilterLabelProps<TData>) => {
   const {
     options: {
       columnFilterDisplayMode,
@@ -131,6 +132,7 @@ export const MRT_TableHeadCellFilterLabel = <TData extends MRT_RowData = {}>({
           horizontal: 'center',
           vertical: 'top',
         }}
+        disableScrollLock
         onClick={(event) => event.stopPropagation()}
         onClose={(event) => {
           //@ts-ignore

package/src/components/head/MRT_TableHeadCellGrabHandle.tsx

@@ -9,7 +9,8 @@ import { reorderColumn } from '../../utils/column.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 import { MRT_GrabHandleButton } from '../buttons/MRT_GrabHandleButton';
 
-interface Props<TData extends MRT_RowData> extends IconButtonProps {
+export interface MRT_TableHeadCellGrabHandleProps<TData extends MRT_RowData>
+  extends IconButtonProps {
   column: MRT_Column<TData>;
   table: MRT_TableInstance<TData>;
   tableHeadCellRef: RefObject<HTMLTableCellElement>;
@@ -20,7 +21,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
   table,
   tableHeadCellRef,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellGrabHandleProps<TData>) => {
   const {
     getState,
     options: { enableColumnOrdering, muiColumnDragHandleProps },
@@ -73,7 +74,7 @@ export const MRT_TableHeadCellGrabHandle = <TData extends MRT_RowData>({
 
   return (
     <MRT_GrabHandleButton
-      iconButtonProps={iconButtonProps}
+      {...iconButtonProps}
       onDragEnd={handleDragEnd}
       onDragStart={handleDragStart}
       table={table}

package/src/components/head/MRT_TableHeadCellResizeHandle.tsx

@@ -7,7 +7,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends DividerProps {
+export interface MRT_TableHeadCellResizeHandleProps<TData extends MRT_RowData>
+  extends DividerProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -16,7 +17,7 @@ export const MRT_TableHeadCellResizeHandle = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellResizeHandleProps<TData>) => {
   const {
     getState,
     options: { columnResizeDirection, columnResizeMode },

package/src/components/head/MRT_TableHeadCellSortLabel.tsx

@@ -10,7 +10,8 @@ import {
 } from '../../types';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableSortLabelProps {
+export interface MRT_TableHeadCellSortLabelProps<TData extends MRT_RowData>
+  extends TableSortLabelProps {
   header: MRT_Header<TData>;
   table: MRT_TableInstance<TData>;
 }
@@ -19,7 +20,7 @@ export const MRT_TableHeadCellSortLabel = <TData extends MRT_RowData>({
   header,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadCellSortLabelProps<TData>) => {
   const {
     getState,
     options: {

package/src/components/head/MRT_TableHeadRow.tsx

@@ -12,7 +12,8 @@ import {
 import { getMRTTheme } from '../../utils/style.utils';
 import { parseFromValuesOrFunc } from '../../utils/utils';
 
-interface Props<TData extends MRT_RowData> extends TableRowProps {
+export interface MRT_TableHeadRowProps<TData extends MRT_RowData>
+  extends TableRowProps {
   columnVirtualizer?: MRT_ColumnVirtualizer;
   headerGroup: MRT_HeaderGroup<TData>;
   table: MRT_TableInstance<TData>;
@@ -23,7 +24,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
   headerGroup,
   table,
   ...rest
-}: Props<TData>) => {
+}: MRT_TableHeadRowProps<TData>) => {
   const {
     options: { enableStickyHeader, layoutMode, muiTableHeadRowProps },
   } = table;
@@ -68,6 +69,7 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
 
           return header ? (
             <MRT_TableHeadCell
+              columnVirtualizer={columnVirtualizer}
               header={header}
               key={header.id}
               staticColumnIndex={staticColumnIndex}