Skip to content
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.

Sign up for GitHub

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

Jump to bottom

[material-ui][Table] Scrollbar shouldn't be visible on top of the header when it is sticky #40770

Closed
Wissperwind opened this issue Jan 24, 2024 · 3 comments
Closed

[material-ui][Table] Scrollbar shouldn't be visible on top of the header when it is sticky #40770

Wissperwind opened this issue Jan 24, 2024 · 3 comments
Assignees
@siriwatknp
Labels
component: table This is the name of the generic UI component, not the React module! duplicate This issue or pull request already exists package: material-ui Specific to @mui/material

Comments

@Wissperwind
Copy link

Wissperwind commented Jan 24, 2024 •
edited by github-actions bot
Loading

Summary

I expect the scrollbar to be only as high as the rows of the table. It looks ugly if it reaches into the header.

Examples

Unbenannt

Motivation

I try to use a nice table at my website.

Search keywords: table sticky header scrollbar
@Wissperwind Wissperwind added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jan 24, 2024
@zannager zannager added the component: table This is the name of the generic UI component, not the React module! label Jan 24, 2024
@danilo-leal danilo-leal changed the title Sticky header table scrollbar should be only at the table rows. [material-ui][Table] Scrollbar shouldn't be visible on top of the header when it is sticky Jan 24, 2024
@danilo-leal danilo-leal added the package: material-ui Specific to @mui/material label Jan 24, 2024
@KumarNitin19
Copy link
Contributor

@Wissperwind The reason behind the scrollbar is that Table Head component is sticky with Table Container as a relative component to it. So here the whole Table is scrolling with respect to its container which is Table Container that's why the scrollbar is visible all over the Table component

@Wissperwind
Copy link
Author

Okay, that is why it is visible. But techniacal aspects aside, is it pretty that way?
I don't think so! I would prefer, that the scrollbar is only on the side if the area that actually scrolls. If the header is sticky, the scrollbar does not neet to be aside the header. What is your optinion from the design aspect?

@ZeeshanTamboli
Copy link
Member

Duplicate of #34416

@ZeeshanTamboli ZeeshanTamboli marked this as a duplicate of #34416 Feb 6, 2024
@github-actions github-actions bot added duplicate This issue or pull request already exists and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Feb 6, 2024
@github-actions github-actions bot closed this as not planned Won't fix, can't repro, duplicate, stale Feb 6, 2024
@ZeeshanTamboli ZeeshanTamboli mentioned this issue Feb 6, 2024
Open
2 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@siriwatknp siriwatknp

Labels
component: table This is the name of the generic UI component, not the React module! duplicate This issue or pull request already exists package: material-ui Specific to @mui/material
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@siriwatknp @Wissperwind @ZeeshanTamboli @danilo-leal @KumarNitin19 @zannager