diff --git a/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx b/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx index 74e0b089d..bf95f07be 100644 --- a/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx +++ b/packages/material-react-table/src/components/head/MRT_TableHeadRow.tsx @@ -10,6 +10,8 @@ import { type MRT_VirtualItem, } from '../../types'; import { parseFromValuesOrFunc } from '../../utils/utils'; +import { useMemo } from 'react'; +import { VirtualItem } from '@tanstack/react-virtual'; export interface MRT_TableHeadRowProps extends TableRowProps { @@ -44,6 +46,11 @@ export const MRT_TableHeadRow = ({ ...rest, }; + const headerColumns: VirtualItem[] | MRT_Header[] = useMemo( + () => (virtualColumns?.length ? virtualColumns : headerGroup.headers), + [headerGroup.headers, virtualColumns], + ); + return ( ({ {virtualPaddingLeft ? ( ) : null} - {(virtualColumns ?? headerGroup.headers).map( - (headerOrVirtualHeader, staticColumnIndex) => { - let header = headerOrVirtualHeader as MRT_Header; - if (columnVirtualizer) { - staticColumnIndex = (headerOrVirtualHeader as MRT_VirtualItem) - .index; - header = headerGroup.headers[staticColumnIndex]; - } + {headerColumns.map((headerOrVirtualHeader, staticColumnIndex) => { + let header = headerOrVirtualHeader as MRT_Header; + if (columnVirtualizer && virtualColumns?.length) { + staticColumnIndex = (headerOrVirtualHeader as MRT_VirtualItem).index; + header = headerGroup.headers[staticColumnIndex]; + } - return header ? ( - - ) : null; - }, - )} + return header ? ( + + ) : null; + })} {virtualPaddingRight ? ( ) : null}