Table with sticky header is incompatible with Table.ScrollContainer

[nabby27]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.13.2

What package has an issue?

@mantine/core

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

I've recently been making a comparison table of features for different pricing plans. With this case and to be responsive I wanted both the header and the first column to be sticky.

For that I put the parameters stickyHeader and stickyHeaderOffset={0} to the table and wrapped the table with the Table.ScrollContainer component as indicated in the documentation. But the combination of both makes the stickyHeader stop working.

If possible, include a link to a codesandbox with a minimal reproduction

https://stackblitz.com/edit/mantine-bug-table-sticky-header-with-scrollcontainer?file=src%2FTableDemo.tsx

Possible fix

I've been investigating and it seems that the sticky header doesn't get along well with having overflows above it. Ideally, this result could be achieved: https://codepen.io/chriscoyier/pen/yLVNErX

Self-service

• I would be willing to implement a fix for this issue

[nabby27]

I have created a $100 bounty because I am very interested in seeing this solved.

[RohanMishra315]

Hey @rtivital @nabby27 check this out https://stackblitz.com/edit/mantine-bug-table-sticky-header-with-scrollcontai-vxo6an?file=src%2FTableDemo.tsx
/try

[nabby27]

Hi @RohanMishra315, Thanks for the stackblitz, I'm sure it can be helpful to the Mantine team. I want this to be integrated into Mantine and have the team support it. Also, the horizontal scrolling in your example is for the entire page, not just the table content.

[nicojav]

@nabby27 added a fix with a demo in the PR

[nabby27]

Hi @nicojav! Thanks for your PR and the stackblitz to see how it works, it's very helpful.

Personally I think the solution doesn't seem the most appropriate, it seems more like a patch than a solution in itself. Why does the scroll container have to have a height of 95vh and not 90vh or 99vh? It seems random.

I would expect the solution to be in the table and not in the scroll container as this can be used in cases where that 95vh breaks with what is expected.

Anyway, I will wait for the Mantine team to decide if the solution is valid or not.

PS: I'm speaking without having worked on the Mantine codebase so I could be wrong.

[nicojav]

Hi @nabby27 i understand, was trying to applying a quickfix using only CSS.
Here its an updated solution using another approach #7004 with a working demo too if you want to check it out.

[rtivital]

@nabby27 Your "bounty" just generates spam PRs that cannot be merged. Please remove it to save me time for maintenance. I'm not ready to spend time reviewing PRs from someone who does not use the library and does not understand the code, considering that none of the above fixes the issue reasonably.

[nabby27]

Hi @rtivital, sure, if you think it doesn't help, I'll remove the bounty. I appreciate your understanding. I just wanted to make things easier and save you time. I see that in this case, it's not like that. Sorry for the inconvenience.