[data grid] Excessive cell in the Grid Pro

[RobinTail]

Order ID or Support key 💳 (optional)

42574

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

The problem in depth 🔍

What could be the reason for excessive cell in the Grid Pro ? It's not associated with any column. It appears both to grids with and without master details panel.

UPDATE: The issue seems to be caused by the mix width and flex properties across the grid columns, which leads to some rounding problem.

It appears in the latest version of 5.x, but we didn't experience this in previous versions.

Your environment 🌎

`npx @mui/envinfo`

``` System: OS: macOS 12.6 Binaries: Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node Yarn: 1.22.19 - ~/.nvm/versions/node/v18.15.0/bin/yarn npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm Browsers: Chrome: 112.0.5615.137 Edge: Not Found Firefox: 112.0.1 Safari: 15.6.1 npmPackages: @emotion/react: ^11.10.6 => 11.10.6 @emotion/styled: ^11.10.6 => 11.10.6 @mui/base: 5.0.0-alpha.126 @mui/core-downloads-tracker: 5.12.1 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/lab: ^5.0.0-alpha.127 => 5.0.0-alpha.127 @mui/material: ^5.12.1 => 5.12.1 @mui/private-theming: 5.12.0 @mui/styled-engine: 5.12.0 @mui/styles: 5.12.0 @mui/system: ^5.12.1 => 5.12.1 @mui/types: 7.2.4 @mui/utils: 5.12.0 @mui/x-data-grid: 5.17.26 @mui/x-data-grid-pro: ^5.17.26 => 5.17.26 @mui/x-date-pickers: 5.0.20 @mui/x-date-pickers-pro: 5.0.20 @mui/x-license-pro: ^5.17.12 => 5.17.12 @types/react: ^17.0.58 => 17.0.58 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 typescript: ^4.9.5 => 4.9.5 ```

Browser used: Chrome

[RobinTail]

I found out that the issue depends on presence of getDetailPanelContent property

[RobinTail]

We're using this approach for a custom detail panel toggler:

<DataGridPro
  columns={[
    {
      ...GRID_DETAIL_PANEL_TOGGLE_COL_DEF, // Already contains the right field
      renderCell: (params) => <CustomDetailPanelToggle {...params}>
    },
  ]}
/>

I presume that the width: 40 defined in GRID_DETAIL_PANEL_TOGGLE_COL_DEF does not work well together with the flex sizes that we have for other columns. There is some fraction in the end, represented by the weird width: 2.27374e-13px; of that excessive mysterious cell.

[RobinTail]

It turned out that the issue also depends on window width. I guess I was just lucky to catch it.

For instance:

• it happens when the window.innerWidth is 840,
• but it does not when it's 842.

I believe it comes from some rounding issue. However, I think the Grid should not add more cells to the row than the number of columns in the grid.

[m4theushw]

This div is responsible for adding the border in the space between the last column and the right edge. It appears when the sum of the widths of all columns is smaller than the grid itself.

Could you share a CodeSandbox with a minimal reproduction, including the other columns you have?

[RobinTail]

Here is it, @m4theushw

https://codesandbox.io/s/stoic-hawking-rttvpn?file=/src/demo.js

[RobinTail]

The key concept of the reproduction:

1. Having the width of 840px
2. Having 8 columns:
   • GRID_DETAIL_PANEL_TOGGLE_COL_DEF
   • 6 columns of flex: 1
   • 1 column of flex: 1.5

@m4theushw

[RobinTail]

It may be not so critical for the default styling, but when you have, for instance, rounded corners and background color, the issue with the excessive cell becomes visible.

[nstorchak-reon]

Try to wrap grid component in container with property max-width: max-content

[flaviendelangle]

@michelengelen found a lost issue without outside of the Grid project :+1:

[yehudamakarov]

this is contributing to the problems of #7956 and #4200 etc.

I have a ui requirement to add row borders and the border on the right won't show despite many types of workarounds.

What can we do to add the right border????

[michelengelen]

this is contributing to the problems of #7956 and #4200 etc.

I have a ui requirement to add row borders and the border on the right won't show despite many types of workarounds.

What can we do to add the right border????

I have added a reply on your issue (#12340)