Sticky table header overlaps vertical scrollbar

[stefan-girlich]

I am using several mantine-datatable instances in a scrollable container (ScrollArea) and noticed that the table headers (thead) overlap the scrollbar:

A workaround is to remove position: fixed from thead when using the table inline in a scroll container:

<DataTable
        styles={{ header: { position: 'static' } }}
/* ... */
/>

Please let me know if you know a better solution or if you think this justifies creating an issue in the issue tracker.

Environment

• OS: MacOS 15.4.1 (24E263)
• Browsers: Brave 1.77.101 Chromium: 135.0.7049.115 (Official Build) (arm64), Firefox 137.0.2 (aarch64)