0

I initially thought that I had broken something, but after performing multiple tests on simpler models, I now realize that it is not me, but MUI v6 that has, in fact, changed something about the display of DataGrids Pro that include columns with a minWidth property.

I work at a company where we use multiple DataGrids that include many columns with a minWidth property. The columns are so numerous that they would easily push outside the viewport, but this did not happen because they were inside containers. As a result, the DataGrids had horizontal scroll bars.

However, when I upgraded to MUI DataGrids Pro v6, all of these DataGrids suddenly stretched their parents to fit them in full capacity without the horizontal scrollbar. These data grids were children of containers with "width: "100%"".

I have created a simplified model that you can easily check out and compare. Just make sure that there are many columns, all with the minWidth property, and that @mui/material is at version 5.11.15.

     <Box
      sx={{
        display: "flex",
        flexDirection: "row",
        height: 520,
        width: "100%",
      }}
    >
      <Box
        sx={{
          width: "100%",
          backgroundColor: "#fff",
        }}
      >
        <DataGridPro rows={rows} columns={columns} />
      </Box>
      <Box
        sx={{
          width: "100%",
          backgroundColor: "#fff",
        }}
      >
        <DataGridPro rows={rows} columns={columns} />
      </Box>
    </Box>

With Data Grid Pro in version 5.15.0 it will look like this: V5

With Data Grid Pro in version 6.0.3 it will look like this: V6

In v6, since there are two data grids next to each other, they fill the equivalent of two screens because of their parents being width: 100%.

Also,

I know that there are some workarounds, but they are not quite the same:

  1. Use flex instead of minWidth. Yes, they will fit then, but it does not look the same, especially when there are 20+ columns.

  2. Limit the width by using vw or px values. That works on the surface, but it loses some flexibility of resizing and placing data grids in other components like accordions. There is also another issue with some sort of flickering when a column is initially pinned: when the user changes the width of one of the columns and sets it to a particular value, the data grid starts to oscillate between two widths, creating a sort of flicker effect.

I feel like the issue is simple, but I just feel dumb at this point, and don't know why there is a difference between DataGrid v6 and v5. Thank you to everyone for your help!

Olivier Tassinari
  • 8,238
  • 4
  • 23
  • 23
AdamJJ
  • 1
  • 1

1 Answers1

0

I used overflow: 'hidden' for the parent to make it work for v6. I ran into the same issue.

e.g.

<Box sx={{overflow: 'hidden'}}>
   <DataGridPro rows={rows} columns={columns} />
</Box>
Luan Dang
  • 9
  • 1