[datagrid] Autosize Columns - Headers being cut off

[DevPowers]

Steps to reproduce

Link to live example: (MUI Docs Example)

Steps:

1. Using autosize options:

    autosizeOnMount={true},
    autosizeOptions: { includeOutliers: true, includeHeaders: true }

2. On a mobile device or using dev tools mobile screen size - see the column header being cut off:

Current behavior

The column headers are unreadable on mobile using autosizing

Expected behavior

For the column headers to be readable

Context

No response

Your environment

npx @mui/envinfo

  System:
    OS: macOS 14.1
  Binaries:
    Node: 18.9.0 - ~/.nvm/versions/node/v18.9.0/bin/node
    npm: 8.19.1 - ~/.nvm/versions/node/v18.9.0/bin/npm
    pnpm: 8.15.4 - ~/Library/pnpm/pnpm
  Browsers:
    Chrome: 122.0.6261.94
    Edge: Not Found
    Safari: 17.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.0 => 11.11.0 
    @mui/base:  5.0.0-beta.38 
    @mui/core-downloads-tracker:  5.15.12 
    @mui/icons-material: ^5.15.12 => 5.15.12 
    @mui/lab: 5.0.0-alpha.167 => 5.0.0-alpha.167 
    @mui/material: ^5.15.12 => 5.15.12 
    @mui/private-theming:  5.15.12 
    @mui/styled-engine:  5.15.11 
    @mui/styles: ^5.15.12 => 5.15.12 
    @mui/system: ^5.15.12 => 5.15.12 
    @mui/types:  7.2.13 
    @mui/utils: ^5.15.12 => 5.15.12 
    @mui/x-data-grid:  7.0.0-beta.5 
    @mui/x-data-grid-premium: 7.0.0-beta.5 => 7.0.0-beta.5 
    @mui/x-data-grid-pro:  7.0.0-beta.5 
    @mui/x-license:  7.0.0-beta.2 
    @mui/x-license-pro: 7.0.0-beta.0 => 7.0.0-beta.0 
    @types/react: ^18.2.63 => 18.2.63 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.3.3 => 5.3.3 

Search keywords: datagrid column autosizing
Order ID: 56883

[DanailH]

I was able to reproduce it but for me, the first column is the one that breaks.

[romgrk]

Mobile has always-visible 3-dots menus. We'll need to add space to the headers to account for that.

[gitstart]

@DevPowers @zannager @DanailH we would like to pick this up

[DanailH]

@gitstart ok, we are happy for you to try it out, but because this bug is related to a Premium feature we would need you to sign a CLA before we are able to merge it. Once you open the PR we can send you the standard agreement.
You can check more about it here: https://mui-org.notion.site/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0
and here: https://drive.google.com/file/d/1muE5-mtJus_kwkSwn-d7biHsMTqQetd6/view

[gitstart]

@gitstart ok, we are happy for you to try it out, but because this bug is related to a Premium feature we would need you to sign a CLA before we are able to merge it. Once you open the PR we can send you the standard agreement. You can check more about it here: https://mui-org.notion.site/CLA-Contributor-License-Agreement-92ece655b1584b10b00e4de9e67eedb0 and here: https://drive.google.com/file/d/1muE5-mtJus_kwkSwn-d7biHsMTqQetd6/view

Thanks for the response @DanailH, we are fine with signing the CLA agreement.

[mauro-ni]

Please do also consider sorted columns: extra space for the sort direction arrow icon has to be added.
Many thanks,
Mauro

[DevPowers]

@gitstart Are you able to get eyes on the PR again ?? This is a priority fix I need for this feature to be production ready 🙏

[gitstart]

@gitstart Are you able to get eyes on the PR again ?? This is a priority fix I need for this feature to be production ready 🙏

@DevPowers We are sorry for the delay 🙏. The PR has been updated.

[DevPowers]

@zannager @DanailH @gitstart Is this really fixed and tested? The docs on MUI website are still not responsive when I test it in dev console ?

[DevPowers]

Is anybody able to pick this up? I see numerous other bugs opened against this new autosize feature, is it possible to make this a priority on fixing all the autosize bugs in upcoming v7 release?

[romgrk]

Autosizing has been reworked in the v7 branch, it seems to work fine there: https://next.mui.com/x/react-data-grid/column-dimensions
#12013 will also improve the autosizing approach.

Is it possible for you to use v7?

[DevPowers]

@romgrk Hi! Testing autosize for mobile with the page URL you sent looks to be working. I will close this ticket then, I can switch to V7 thanks!

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @DevPowers?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[DevPowers]

@romgrk Hi, I just completed V7 migration. Unfortunately autosize is still buggy.

• [Laptop view] - Pinned column on the left does not autosize and fit the column data
• [ Mobile view] - Same issue as laptop view, but also column header labels are not fitting

I can't say why it looks to work in the docs, vs in real life. When testing, I was using the button which may have something to do with it.

[romgrk]

Let's test again once #12013 is merged.

[github-actions]

⚠️ This issue has been closed.
If you have a similar problem, please open a new issue and provide details about your specific problem.
If you can provide additional information related to this topic that could help future readers, please feel free to leave a comment.

How did we do @DevPowers?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.

[romgrk]

We've fixed some issues with autosizing. Could you confirm which issues are still reproducible for you? Next branch: https://next.mui.com/x/react-data-grid

[DevPowers]

@romgrk Retested and still completely broken on mobile and desktop. Same issues:

[Laptop view] - Pinned column on the left does not autosize and fit the column data
[ Mobile view] - Same issue as laptop view, but also column header labels are not fitting

[romgrk]

Can you provide a clear reproduction case? I have tried modifying the docs example you link above to pin left one of the columns, and add the autosize options you list. The video below shows the result I observe. I get the same results in mobile emulation mode, let me know if you tested on a real mobile device.

You also haven't filled the environment section in your report. It's important because it also tells us which OS and browser versions you're using, which are important to reproduce a bug.

Kooha-2024-03-05-15-06-38.webm

[github-actions]

The issue has been inactive for 7 days and has been automatically closed.