Rows' checkbox overlap header checkbox when enableRowSelection and enableStickyHeader is enabled

[tdanh2k]

material-react-table version

v1.0.2

Describe the bug and the steps to reproduce it

1. Create table with enableRowSelection and enableStickyHeader props.
2. Set a height limit for the table (ex: muiTableContainerProps={{ sx: { maxHeight: "30vh" } }})
3. Scroll the table, and the rows' checkbox starts to overlap the select all checkbox of the header.

Your Minimal, Reproducible Example - Sandbox (Recommended) or code snippets

https://codesandbox.io/s/material-react-table-sticky-header-with-row-selection-pe4zx2?file=/src/App.js:1039-1093

Screenshots or Videos (Optional)

No response

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

No, because I don't know how

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.

[KevinVandy]

This only popped up recently. My quick experiment with opacity and z-index didn't seem to fix it. Will have to look into it more in depth.

[KevinVandy]

I think this is fixed in v1.0.3

[KevinVandy]

Confirmed fixed as of v1.0.3 in this sandbox https://codesandbox.io/s/material-react-table-sticky-header-with-row-selection-forked-0x03d6?file=/package.json