Missing header when activating row virtualization with empty data

[fredericbahr]

material-react-table version

3.2.1

react & react-dom versions

18.3.1

Describe the bug and the steps to reproduce it

When using column virtualization and providing empty data the first render does not show the header row of the table.
It appears that this bug only happens sometimes and can not be reproduced reliably with the storybook example.

Investigation Hints.
It appears that the tableContainerRef.current property returns null in the useMRT_ColumnVirtualizer hook resulting in an empty array as virtual items. Therefore with the current implementation now headers are rendered.

I think there might be two possible solutions.

1. We can trigger the measure function of the virtualizer once the tableContainerRef is defined
   In useMRT_ColumnVirtualizer add:

useEffect(() => {
  if (tableContainerRef.current) {
    columnVirtualizer.measure
  }
}, [tableContainerRef.current, columnVirtualizer])

2. Fallback to headerGroups.header in MRT_TableHeadRow to always display headers.

const headerColumns = (virtualColumns && vortiaulColumns.length > 0) ? virtualColumns : headerGroup.headers
headerColumns.map((headerColumn) => {...})

I will provide a PR for the second approach as it seems better from my point of view, but I like to document the decision or give you the possibility to adjust based on your ideas.

Minimal, Reproducible Example - (Optional, but Recommended)

https://www.material-react-table.dev/?path=/story/features-virtualization--empty-data-virtualization

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

Maybe, I'll investigate and start debugging

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.