[data grid] renderCell position offset in case of display:flex

[PunkFleet]

Steps to reproduce

Link to live example: (required)
Whether it's a <Box> or a <Stack>, as long as it's a component in the flex state, it will reach the top of the cell when it's custom rendered.

 { field: 'category', headerName: 'Categories', width: 480, editable: true,            
            renderCell: (params) => {
                return (
                    <Box display="flex">
                        {params.value.map((item:any)=> (
                        <Chip key={item.id} label={item.name} />
                    ))}                    
                </Box>
                )
            },
        },

Steps:
1.
2.
3.

Current behavior

No response

Expected behavior

No response

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: rendercell

[michelengelen]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷.

A live example would be perfect. You can find a examples and guides on how to find templates in our docs with which you can provide examples for your specific use-case: Support - Bug reproduction.

Thank you! 🙇🏼

[PunkFleet]

Please provide a minimal reproduction test case with the latest version. This would help a lot 👷.

A live example would be perfect. You can find a examples and guides on how to find templates in our docs with which you can provide examples for your specific use-case: Support - Bug reproduction.

Thank you! 🙇🏼

https://stackblitz.com/edit/react-x1ksay?file=Demo.tsx
I'm using this for now to achieve the same effect

<>
  {params.value.map((item:any)=> (
     <Chip sx={{mx:0.5}} key={item.id} label={item.name} />
  ))}                    
</>

[michelengelen]

You need to change the props on the rendered Stack for this to work. It did not take up the full cell height and did not align the items:

<Stack direction="row" spacing={1} alignItems={'center'} height={'100%'}>
  {params.value.map((item: any, index: number) => (
    <Chip key={index} label={item.name} />
  ))}
</Stack>

This will fix it!

[PunkFleet]

You need to change the props on the rendered Stack for this to work. It did not take up the full cell height and did not align the items:

<Stack direction="row" spacing={1} alignItems={'center'} height={'100%'}>
  {params.value.map((item: any, index: number) => (
    <Chip key={index} label={item.name} />
  ))}
</Stack>

This will fix it!

Thank you, it works fine. But what I mean is that for the method of renderCell, and every time you need to position the parent element first to be able to render to the correct position, which is inconsistent with v6, and will bring visual differences when migration exists.

[michelengelen]

Yes, I do agree that this might happen.
I will tag this as a regression and add it to the board.
Thanks for raising this! 🙇🏼

[michelengelen]

related issue #12642

[cherniavskii]

As per our migration guide:

The cell element isn't display: flex by default. You can add display: 'flex' on the column definition to restore the behavior. This also means cells aren't vertically centered by default anymore, so if you have dynamic row height, you might want to set the display: 'flex' for all non-dynamic columns.
Source: https://mui.com/x/migration/migration-data-grid-v6/#css-classes-and-styling

This should fix it:

{
  field: 'category',
  headerName: 'Category',
  width: 400,
+ display: 'flex',
  renderCell: (params) => {

Working demo: https://stackblitz.com/edit/react-x1ksay-ppjmgk?file=Demo.tsx

[github-actions]

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@Birddle: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

[michelengelen]

Thanks for pointing out the migration guiden @cherniavskii ... I must have overlooked this. :/