mui / material-ui

Material UI: Comprehensive React component library that implements Google's Material Design. Free forever.
https://mui.com/material-ui/
MIT License
93.8k stars 32.25k forks source link

[material-ui][Table] Scrollbar extends into header when using stickyHeader on Table component #34416

Open ffanizzanvisia opened 2 years ago

ffanizzanvisia commented 2 years ago

Duplicates

Latest version

Steps to reproduce 🕹

Steps:

  1. Have an implementation of a Table using the stickyHeader prop, and sufficient rows to make a scrollbar appear (ex: https://mui.com/material-ui/react-table/#sticky-header)
  2. Note that the scrollbar extends into the header:

image

Current behavior 😯

The scrollbar extends into the header

Expected behavior 🤔

The scrollbar should stop at the top edge of the top row of the table

Context 🔦

Have a UX that is consistent for end users

Your environment 🌎

npx @mui/envinfo ``` System: OS: Windows 10 10.0.22000 Binaries: Node: 16.14.2 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.18 - C:\Program Files\nodejs\yarn.CMD npm: 8.5.0 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: Not Found Edge: Spartan (44.22000.120.0), Chromium (105.0.1343.42) npmPackages: @emotion/react: ^11.7.1 => 11.8.2 @emotion/styled: ^11.6.0 => 11.8.1 @mui/base: 5.0.0-alpha.72 @mui/icons-material: ^5.8.4 => 5.8.4 @mui/lab: ^5.0.0-alpha.69 => 5.0.0-alpha.73 @mui/material: ^5.2.5 => 5.5.1 @mui/private-theming: 5.4.4 @mui/styled-engine: 5.4.4 @mui/system: 5.5.1 @mui/types: 7.1.4 @mui/utils: 5.4.4 @mui/x-data-grid: 5.6.1 @mui/x-data-grid-pro: ^5.5.1 => 5.6.1 @mui/x-license-pro: 5.6.1 @types/react: ^17.0.24 => 17.0.40 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ~4.4.3 => 4.4.4 ```

I tested this in Chrome and Firefox with the same results

ZeeshanTamboli commented 8 months ago

Tagging @danilo-leal and @zanivan since it is a UI/UX decision-related issue. Also, there was a recent duplicate issue: #40770.

zanivan commented 8 months ago

Even though there's a technical reason behind why the scroll bar shows up over the sticky header, it doesn't really make sense for it to be like that from a UX standpoint. The scroll bar should only pop up in parts that actually scroll. Having it everywhere can confuse users, making them think they can scroll where they can't.

Tagging @siriwatknp since you're this component's owner.

tinoue commented 7 months ago

Is there any workaround for this issue ?

ewarrenG commented 6 months ago

+1

zanivan commented 6 months ago

@DiegoAndai should we include this for v6?

DiegoAndai commented 6 months ago

@zanivan I don't think this would need braking changes, so I wouldn't "pin it" to v6. I'll add the ready to take label to see if we get any interested contributors.

For anyone interested in taking this, we should investigate the cause and propose a solution. Feel free to open a PR and add me as a reviewer. The expected outcome is that the scroll bar should only pop up in parts that actually scroll.

umarmunirpl commented 3 weeks ago

Are there any updates on this?

DiegoAndai commented 3 weeks ago

Hey @umarmunirpl, thanks for reaching out. I have no updates, but the issue is ready to take in case you wish to work on it. I would be happy to guide you.