[data grid] Misaligned header and cells for pinned columns

[filipneculciu]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

You can find a sandbox that reproduces the issue here: https://codesandbox.io/s/musing-driscoll-c4f953

Note: I tried reproducing this with a simpler example, but couldn't, so I anonymized and simplified my real component.

Current behavior 😯

The line that separates fields 21 from the rest of the table is misaligned between the header and the body of the table.

Expected behavior 🤔

The line in the header and the one in the body should be aligned (it should look like a single line visually).

Context 🔦

I'm trying to pin a column to the right that allows the user to take actions on the current row. Right now it's only one action, so one button. The functionality works fine, but there is the visual bug I just reported.

Note: I found a similar sounding bug (#9495), but it doesn't seem to be the same issue.

Your environment 🌎

Getting an error:

npm ERR! code ENOENT
npm ERR! syscall lstat
npm ERR! path C:\Users<redacted>\AppData\Roaming\npm
npm ERR! errno -4058
npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users<redacted>\AppData\Roaming\npm'
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent

Order ID or Support key 💳 (optional)

70895

[MBilalShafi]

Thank you for reporting the issue.

It seems like the actions column type (as used in this demo) could provide a better buttons' experience in your specific use case, I am just curious if there's a specific limitation due to which you opted for adding the buttons using renderCell instead?

[filipneculciu]

@MBilalShafi I wasn't aware of the actions column type, it does seem like a cleaner solution than renderCell. However, switching to the action column type doesn't fix the visual issue I reported, so it's still relevant for my use case.

[DanailH]

I tried the demo provided but I wasn't able to reproduce the issue. Either way as @MBilalShafi suggested using the actions column is the way to go in this case.

[filipneculciu]

@DanailH I have the same visual issue when using the actions column type: https://codesandbox.io/s/hungry-johnson-3qzk4k

However, I think it depends on the OS the browser is running on. I asked a colleague who uses a Mac and it looked fine for him (both in Safari and Chrome). It also looks fine in Chrome on my Android phone. However, on Windows, it's misaligned in all my browsers (Chrome, Firefox, Edge).

For Chrome I used: Version 116.0.5845.180 (Official Build) (64-bit); running on Windows 10 Enterprise, Version 21H2, OS Build 19044.3324.

[MBilalShafi]

@mui/xgrid team, could somebody with a Windows PC at hand check what might be the issue?

[cherniavskii]

Hi @filipneculciu
While this looks like a bug, I wonder why you don't have a fixed size set for the data grid, like in this forked demo: https://codesandbox.io/s/twilight-worker-97hqcv?file=/src/App.js
This seems to fix the issue in your demo.

If you didn't set the height intentionally to make the data grid height expand automatically - there's the autoHeight prop for this use case.

[filipneculciu]

@cherniavskii I didn't set it because I wanted it to expand automatically and that seems to be the default if you don't set anything. Using autoHeight fixed the issue, at least when testing locally on my laptop. Thank you for the hint.

[TroyMader]

I think the reason this bug may not be appearing in some cases is that if there is a horizontal scroll bar present on the table then the bug will not occur. As soon as the horizontal scroll bar is not present, this bug will be visible. Reason being is when the scroll bar appears it pushes the content into place. I have tested this across multiple browsers and it has been the case for me

[cherniavskii]

@TroyMader Does setting the dimensions for the data grid parent or using autoHeight solve the issue for you?

[github-actions]

The issue has been inactive for 7 days and has been automatically closed. If you think that it has been incorrectly closed, please reopen it and provide missing information (if any) or continue the last discussion.

[sjobergjim]

Somehow didn't find this issue while searching and submitting my own (sorry about that).
Thanks for pointing me here, @DanailH !

Setting autoHeight resolved my problems as well and as others have hinted above, the bug is related to padding reserved by the width of a potential vertical scrollbar. I did elaborate a bit on this in my issue, maybe some info there could be of help with debugging further.

As @filipneculciu mentioned, the auto-scaling height seemed to be default behaviour so I didn't think about setting that property either. A change to this default could of course address the problem but it seems like doing so could harm optimization for larger data sets according to the disclaimer in the docs for auto-height.

TL/DR: Setting the autoHeight-prop resolves the issue but if you have large data sets, it might have an impact on performance as of the time of writing this.

Additionally, we do have other, larger tables in our application where we render tables containing sub-tables utilizing the treeData and these do not display the discussed undesired behaviour - hope this helps!

[cherniavskii]

Closed by #10059

[TroyMader]

I think the reason this bug may not be appearing in some cases is that if there is a horizontal scroll bar present on the table then the bug will not occur. As soon as the horizontal scroll bar is not present, this bug will be visible. Reason being is when the scroll bar appears it pushes the content into place. I have tested this across multiple browsers and it has been the case for me

It did fix it 👍

[TroyMader]

I think the reason this bug may not be appearing in some cases is that if there is a horizontal scroll bar present on the table then the bug will not occur. As soon as the horizontal scroll bar is not present, this bug will be visible. Reason being is when the scroll bar appears it pushes the content into place. I have tested this across multiple browsers and it has been the case for me

It did fix it cherniavskii 👍