From 7ecba1df6cfde6370b1e60078941bbaacce2622b Mon Sep 17 00:00:00 2001
From: Frederic Bahr <fredericbahr1@gmail.com>
Date: Wed, 5 Mar 2025 09:29:10 +0100
Subject: [PATCH] fix: use headerGroup.headers when virtual columns are not
 available

Before it was possible that the virtual columns were not available and no headers were rendered. To prevent this, now the headerGroup.headers are used to render the headers when the virtual columns are not available.
---
 .../src/components/head/MRT_TableHeadRow.tsx  | 42 ++++++++++---------
 1 file changed, 23 insertions(+), 19 deletions(-)

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<TData extends MRT_RowData>
   extends TableRowProps {
@@ -44,6 +46,11 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
     ...rest,
   };
 
+  const headerColumns: VirtualItem[] | MRT_Header<TData>[] = useMemo(
+    () => (virtualColumns?.length ? virtualColumns : headerGroup.headers),
+    [headerGroup.headers, virtualColumns],
+  );
+
   return (
     <TableRow
       {...tableRowProps}
@@ -62,26 +69,23 @@ export const MRT_TableHeadRow = <TData extends MRT_RowData>({
       {virtualPaddingLeft ? (
         <th style={{ display: 'flex', width: virtualPaddingLeft }} />
       ) : null}
-      {(virtualColumns ?? headerGroup.headers).map(
-        (headerOrVirtualHeader, staticColumnIndex) => {
-          let header = headerOrVirtualHeader as MRT_Header<TData>;
-          if (columnVirtualizer) {
-            staticColumnIndex = (headerOrVirtualHeader as MRT_VirtualItem)
-              .index;
-            header = headerGroup.headers[staticColumnIndex];
-          }
+      {headerColumns.map((headerOrVirtualHeader, staticColumnIndex) => {
+        let header = headerOrVirtualHeader as MRT_Header<TData>;
+        if (columnVirtualizer && virtualColumns?.length) {
+          staticColumnIndex = (headerOrVirtualHeader as MRT_VirtualItem).index;
+          header = headerGroup.headers[staticColumnIndex];
+        }
 
-          return header ? (
-            <MRT_TableHeadCell
-              columnVirtualizer={columnVirtualizer}
-              header={header}
-              key={header.id}
-              staticColumnIndex={staticColumnIndex}
-              table={table}
-            />
-          ) : null;
-        },
-      )}
+        return header ? (
+          <MRT_TableHeadCell
+            columnVirtualizer={columnVirtualizer}
+            header={header}
+            key={header.id}
+            staticColumnIndex={staticColumnIndex}
+            table={table}
+          />
+        ) : null;
+      })}
       {virtualPaddingRight ? (
         <th style={{ display: 'flex', width: virtualPaddingRight }} />
       ) : null}