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.

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

[Bug]: DataGrid (and possibly Table) doesn't reflow well when not given static minWidth stylings #33718

Open
2 tasks done
alton-browsing opened this issue Jan 23, 2025 · 2 comments

Comments

@alton-browsing
Copy link

alton-browsing commented Jan 23, 2025

Component

DataGrid

Package version

9.55.1

React version

17.0.2

Environment

System:
    OS: Windows 11 10.0.22631
    CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 37.16 GB / 63.95 GB
  Browsers:
    Edge: Chromium (127.0.2651.105)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @fluentui/react-components: 9.55.1 => 9.55.1
    @fluentui/react-icons: 2.0.239 => 2.0.239
    @fluentui/react-jsx-runtime: 9.0.42 => 9.0.42
    @fluentui/react-shared-contexts: 9.20.0 => 9.20.0
    @fluentui/react-utilities: 9.18.13 => 9.18.13
    @types/react: 17.0.83 => 17.0.83
    @types/react-dom: 17.0.25 => 17.0.25
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2

Current Behavior

When zooming in, the cells will start squishing together and the contents will overlap with one another. This happens when no static min-width is given to the DataGrid control (or to the columns themselves), both of these are optional so I wouldn't expect this behavior in any case since there isn't documentation about needing those stylings explicitly (or that I've seen). You can see the first two row items have cells with content overlapping.

Image

Expected Behavior

I wouldn't expect any of the cell contents to start spilling over. I would expect the contents to truncate and the cells to have some min width and maybe a horizontal scrollbar if applicable. You can add a style for minWidth for the container (like in the fluent storybook examples) but I don't think that is a good solution for various screen sizes.

Reproduction

https://stackblitz.com/edit/tx9pqbxi?file=src%2Fexample.tsx

Steps to reproduce

Go to stackblitz and zoom in to like 300% and you should be able to see that the cell contents overlap.

Are you reporting an Accessibility issue?

yes

Suggested severity

High - No workaround

Products/sites affected

SFE

Are you willing to submit a PR to fix?

Yes, if it is an easy fix but otherwise would prefer not to.

Validations

  • Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
  • The provided reproduction is a minimal reproducible example of the bug.
@mainframev
Copy link
Contributor

@alton-browsing hi 👋🏻

Did you try to use resizable columns and sizing options? Take a look on this example

@alton-browsing
Copy link
Author

alton-browsing commented Jan 24, 2025

@mainframev I did look at those but given that they're optional properties, I would not expect the behavior to result in bad reflow if those properties weren't provided by the consumer. Is it expected that a consumer provides those optional properties? If so, shouldn't they be required? And it looks like TableCellLayout is pretty much required to be used for truncation?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants