Skip to content

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sticky header makes usage in layouts impossible #290

Closed
1 task done
lukasbash opened this issue Mar 18, 2024 · 3 comments
Closed
1 task done

Sticky header makes usage in layouts impossible #290

lukasbash opened this issue Mar 18, 2024 · 3 comments
Labels
question Further information is requested V2 Issue with MRT V2

Comments

@lukasbash
Copy link

mantine-react-table version

beta

react & react-dom versions

v18.2.0

Describe the bug and the steps to reproduce it

Given the table is inside some basic app shell layout with a global app bar, and maybe some nested menu bars, the table always sets 100vh as a height reference for calculations. I know that this is mentioned explicitly in the docs, but this makes the usage of a table with any container around it (above or below) impossible, doesn't it?
Also for the calculations, fixed values for e.g. the top toolbar height (80px) are used.
Is there a way to use the sticky header feature considering 100% height of the parent?

Minimal, Reproducible Example - (Optional, but Recommended)

Screenshots or Videos (Optional)

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

No, because I do not have time to dig into it

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.
@alessandrojcm alessandrojcm added question Further information is requested V2 Issue with MRT V2 labels Mar 18, 2024
@lukasbash
Copy link
Author

Interesting fact I discovered by accident: If I use an empty bottom toolbar, it suddenly just becomes usable.
Sticky header now works as expected without causing an oversized overflow (not using 100vh somehow?).
The only problem is that the bottom bar falls back to the minimum height of 3rem.

Thought it's worth to mention this.

@KevinVandy
Copy link
Owner

The default heights are just a default. Specify your own table heights to your heart's desire with CSS.

@lukasbash
Copy link
Author

The default heights are just a default. Specify your own table heights to your heart's desire with CSS.

Tried to do so in combination with the bottom toolbar, but I cannot really get it working without being visible (at some point this feels like a hack) and the sticky header.
It would be awesome if it just works without using the bottom toolbar at all. Just by using 100% height while overriding the vh default, it doesn't work.

Repository owner locked and limited conversation to collaborators Jun 10, 2024
@alessandrojcm alessandrojcm converted this issue into discussion #353 Jun 10, 2024

This issue was moved to a discussion.

You can continue the conversation there. Go to discussion →

Labels
question Further information is requested V2 Issue with MRT V2
Projects
None yet
Development

No branches or pull requests

3 participants