[data grid] Autosizing does not work with custom cell renderer

[sheuertz]

Steps to reproduce

Link to live example: (required)
https://codesandbox.io/p/sandbox/frosty-fire-xwkyc6

Steps:

1. Add column template with custom cell renderer.
2. autosizeOnMount=true, or manually autosizeColumns call
3. Columns are only sized to the width of the header text or the minWidth
4. Removing the custom renderer works as expected.

Current behavior

Cells are sized to the minWidth or the column header text width.

Expected behavior

Cells should be autosized to the maxWidth and wrap appropriately.

Context

We have data that is determined based on relational data, and they may link between objects. We don't know until it's served to us whether there will be a link or just text in the results, so we have a custom renderer to render the appropriate elements. So for example, in some result sets, Field A with value 123 will be a link to Object A, but in other result sets, the same field and value will not be linked to anything.

Your environment

npx @mui/envinfo

  System:
    OS: Windows 11 10.0.22621
  Binaries:
    Node: 16.19.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.19.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (121.0.2277.128)
  npmPackages:
    @emotion/react: ^11.11.3 => 11.11.3
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.33
    @mui/core-downloads-tracker:  5.15.10
    @mui/icons-material:  5.15.6
    @mui/material: ^5.15.10 => 5.15.10
    @mui/private-theming:  5.15.6
    @mui/styled-engine:  5.15.6
    @mui/system: ^5.15.6 => 5.15.6
    @mui/types:  7.2.13
    @mui/utils:  5.15.6
    @mui/x-data-grid:  6.19.1
    @mui/x-data-grid-pro: ^6.18.7 => 6.19.1
    @mui/x-license-pro: ^6.10.2 => 6.10.2
    @types/react:  16.9.35
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript:  5.2.2

Search keywords: datagrid autosize custom renderer
Order ID: 80182

[romgrk]

For which column in particular is it not working? Would you be able to simplify the reproduction case as much as possible?

And is it possible for you to use v7? It contains bugfixes for that feature.

[sheuertz]

I've simplified the codesandbox, limiting it to 2 long columns, one with a custom cell renderer and one without. I'm using the autosize asynchronous example from the docs to fire off the autosize after the rows are updated. It is affecting all columns in my local code. When I was debugging, this line:

mui-x/packages/grid/x-data-grid-pro/src/hooks/features/columnResize/useGridColumnResize.tsx

Line 215 in b4f0545

const contentWidth = cell.firstElementChild?.getBoundingClientRect().width ?? 0;

was returning 0. cell.firstElementChild is null.

I will try and use the latest beta, but I'm unsure if we'd be able to use it in production. What is the timeline on v7? BTW thanks for all the help :)

[sheuertz]

Also, I wonder if value formatter would be a better solution here? The issue the custom renderer is solving is the links in the result data. Can the valueFormatter return an element?

[romgrk]

This should be fixed in the v7 branch. "Beta" doesn't mean unstable in the "has bugs" sense, it means unstable as in we might still do a few minor breaking changes, but most breaking changes have been completed by now and we would advise to switch to v7 if you can. If you can't, we can try to backport bugfixes in the v6 branch, but that's not our prefered solution. The official v7 release would be early March I think. Let us know if that works for you.

valueFormatter must only return string values so it can't be used for that.

[sheuertz]

Thanks for the info. I've bumped to the latest beta locally and am still seeing the same behavior. I've also updated the above codesandbox to use the beta and it's showing up there still. The firstElementChild is still returning null, so that made me think to try wrapping the value in a <span>, and that made it work as expected. You can see that in the updated codesandbox. As a workaround I think this works, but I don't know the thought process that went into using firstElementChild vs firstChild, so there is likely a reason for that.

[romgrk]

Forgot that the PR for the bugfixes got delayed, it should be released in the next days, let's test again early next week.

[romgrk]

This is with the latest release: https://codesandbox.io/p/sandbox/muddy-dust-yrvy79

Can you reproduce the issue? I'm reading the issue description above and I'm not sure if I'm reading right but I can't reproduce with this version or the last.

[sheuertz]

I'm able to reproduce it with latest, starting from the Autosizing Asynchronously example in the docs: https://codesandbox.io/p/sandbox/delicate-fire-6rprth

It is working in @next, starting from the same example: https://codesandbox.io/p/sandbox/beautiful-tess-4pxtcm

The only thing I noticed in the @next version was if the long column data wasn't in the viewable window, it wouldn't be autosized appropriately, which makes sense since it's virtualized.

[romgrk]

So it's working on v7 for you? We are about to release v7 and we prefer to stop fixing bugs on v6 except for critical ones, would it be possible for you to use v7?

The only thing I noticed in the @next version was if the long column data wasn't in the viewable window, it wouldn't be autosized appropriately, which makes sense since it's virtualized.

We only autosize according to the currently rendered cells. It would be possible to expand the range, but then the cost of the operation might be higher. We have discussed adding parameters for that, but it hasn't been implemented. If you're interested in that feature, you can open a new issue to discuss the specifics.

[sheuertz]

Yes, we are fine using v7. Thanks for your help! Also, re: the autosizing, since our data is so variable from page to page and client to client, and we are using server side paging, we are limiting to 25/50/100 records at once. Because of this we've turned off the virtualization which solves the autosize thing, though I know it's less than optimal, but our rendered record count is low enough that it's not really a big issue. I will go ahead and close this ticket now.

[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 @sheuertz?
Your experience with our support team matters to us. If you have a moment, please share your thoughts through our brief survey.