Strange Scrolling behaviour with Header Groups and column virtualization

[markhats]

material-react-table version

v2.11.2

react & react-dom versions

v17.0.2

Describe the bug and the steps to reproduce it

When using Header Groups and column virtualization there is some strange behaviour when horizontal scrolling. After a little scrolling, the column headers seem to go out of sync positionally with the column sub-headers. I have modified the Column Virtualization example app to have columns, each with 4 sub-columns. If the columns are horizontally scrolled, you can see that after a while the sub-columns no longer line up horizontally with their parent column header.

Increasing the overscan value does let you scroll for longer before the problem occurs but doesn't solve the issue.

Any ideas?

Thanks.

Minimal, Reproducible Example - (Optional, but Recommended)

https://codesandbox.io/p/devbox/divine-worker-ckq6gs

Screenshots or Videos (Optional)

No response

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

None

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.