[datagrid] autosizeColumns does not work

[andymanitara]

The problem in depth 🔍

Hi,

I'm using the latest version of the DataGrid to test out the new autosize feature. The way I use the grid, is once the data comes back from an endpoint we populate the grid. So I was looking to use the apiRef to call apiRef.current.autosizeColumns()

However, it tells me that autosizeColumns doesn't exist and when I log out the entirety of apiRef.current it doesn't exist as a property on the object.

From the documentation, I've tried to understand why it doesn't show or why the autosize doesn't work but I couldn't find an answer. We currently give our columns a set width, would that impact it in any way? Or are there any other props that we could be using in our grid that could stop the autosize from working outside of the dynamic row height which we aren't using?

I'm not sure if I just haven't fully installed something, or was supposed to update another package too but I've only upgraded from 6.14.0 to 6.15.0

Thanks for your help,

Andy

Your environment 🌎

npx @mui/envinfo

Search keywords: autosizeColumns

[romgrk]

@cherniavskii Why did you reopen this one? Did you notice the issue?

@andymanitara Was this issue resolved for you? Were you using the right package?

[cherniavskii]

I wanted to check if it's reproducible and also see how column autosizing works with asynchronously loaded rows.

[cherniavskii]

@andymanitara I cannot reproduce the issue with this demo: https://codesandbox.io/s/lucid-roentgen-ynchfy?file=/Demo.tsx
Are you sure you're passing the apiRef prop to the data grid?

[cherniavskii]

@romgrk One thing I noticed in the example above is that calling apiRef.current.autosizeColumns after updating the rows state doesn't work.
It makes sense - autosizeColumns is being called before the grid renders the rows.

One workaround is to wrap autosizeColumns with setTimeout: https://codesandbox.io/s/sad-pasteur-cdyscq?file=/Demo.tsx
This works, but it's jumpy.

Another option is to use apiRef.current.updateRows + ReactDOM.flushSync: https://codesandbox.io/s/interesting-ben-vh9ndk?file=/Demo.tsx
This works better than setTimeout.

How would you approach this use case?
I think we should document a recommended approach since the use case is common and the solution is not obvious.

[romgrk]

Sure but maybe open a new issue just for that concern?

However, it tells me that autosizeColumns doesn't exist and when I log out the entirety of apiRef.current it doesn't exist as a property on the object.

My impression from this issue is that the author might have used the community package on which the autosizeColumns API doesn't exist.

[andymanitara]

Hey guys, yes I'm using the apiRef from the data grid, and I'm not using the community package. I'm using the DataGridPremium also if that helps. I'm using a lot of the premium features, including the aggregation etc and that's working fine. For some reason though the apiRef doesn't have the autosizeColumns property still. Perhaps I should try with the DataGridPro version instead and see if its happening there but not the Premium one for some reason?

I can't see how else I'm not getting that. I closed the issue because I ended up ignoring the autosizing feature for now, but it would be good to know. I see the autosize properties on the actual DataGridPremium component itself, just not in the apiRef & I'm definitely getting the useGridApiRef from the premium package.

[cherniavskii]

@romgrk Opened #10578

[romgrk]

@andymanitara That sounds really weird. Are you able to reproduce the issue in a live example? This codesandbox.io template may be a good starting point.

[andymanitara]

@andymanitara That sounds really weird. Are you able to reproduce the issue in a live example? This codesandbox.io template may be a good starting point.

https://codesandbox.io/s/distracted-ishizaka-mh8sv6?file=/demo.tsx

I'd expect to see the autosizeColumns property on click, in the console I assume? Or does it require something else? The type doesn't even exist on the GridApiPremium it says for me too. I had issues using the DEFAULT_GRID_AUTOSIZE_OPTIONS too

[charisseysabel]

I noticed this as well after our package-lock lockfileVersion changed from 2 -> 3. autosizeColumns is visible on v2, but not 3 🤔

[cherniavskii]

Are you able to reproduce the issue in a live example? This codesandbox.io template may be a good starting point.

I think I just reproduced it.
EDIT: I just noticed the version "@mui/x-data-grid-premium": "6.0.3", so it's expected.

[cherniavskii]

@andymanitara @charisseysabel Is this the same error you are experiencing?
Could you double-check which version of @mui/x-data-grid-premium you are using?

[andymanitara]

@andymanitara @charisseysabel Is this the same error you are experiencing?

Could you double-check which version of @mui/x-data-grid-premium you are using?

I'm using 6.0.15 of the @mui/x-data-grid-premium

[charisseysabel]

@cherniavskii

Is #10510 (comment) the same error you are experiencing?
Could you double-check which version of @mui/x-data-grid-premium you are using?

Yep, that's the error for me.
We're using the latest (v6.16.0) using data-grid-pro

[romgrk]

@andymanitara You need to use a version of the grid after the autosize feature was released. Can you test again with the latest version? Modifying your codesandbox to use @mui/x-data-grid-premium@6.16.0 fixes the issue for me.

[cherniavskii]

@romgrk 6.0.15 looks good, that was the first release to include column autosizing https://github.com/mui/mui-x/releases/tag/v6.15.0

[romgrk]

6.15.0 yes. 6.0.15 no.

[andymanitara]

@romgrk 6.0.15 looks good, that was the first release to include column autosizing https://github.com/mui/mui-x/releases/tag/v6.15.0

That's a typo on my end here, I was using 6.15.0 sorry (as per my opening post) - I have the autosizing props working on the actual DataGrid itself it's just that apiRef.autosizeColumns that doesn't exist for some reason. I can try on 6.16.1 to see if it makes a difference but it should be fine on 6.15.0 and for some reason doesn't work for me still on that version

[romgrk]

I've tried with the pro & premium packages, versions 6.15.0 and 6.16.1, and it's defined in both of them:
https://codesandbox.io/s/unruffled-snow-gvp55k?file=/src/demo.tsx

@andymanitara Can you provide a reproducible codesandbox example? It's not possible for us to understand what's wrong otherwise.

[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.