After conducting numerous tests on simpler models, I have come to realize that the display of DataGrids Pro has been altered in MUI v6, rather than being a result of something I had broken initially.
My workplace utilizes multiple DataGrids with columns having a minWidth property. These columns are plentiful, and if left unchecked, would extend beyond the viewport. However, they remain contained within specific containers to prevent this issue, resulting in horizontal scroll bars for the DataGrids.
Upon upgrading to MUI DataGrids Pro v6, all these DataGrids suddenly expanded their parent containers to accommodate them fully without requiring horizontal scroll bars. These data grids were children of containers styled with "width: 100%".
To facilitate comparison and inspection, I have devised a simplified model. Ensure that it features numerous columns 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>
The appearance of Data Grid Pro will differ between versions:
Version 5.15.0: V5
Version 6.0.3: V6
In the sixth version, due to the presence of two adjacent data grids filling the space equivalent to two screens because their parents have a width set to 100%.
Additionally,
I am aware of some potential solutions, but they do not yield the same results:
Using flex instead of minWidth may help them fit better, but the aesthetic appeal changes, especially when dealing with over 20 columns.
Restricting the width using vw or px values can superficially address the issue, yet it compromises the flexibility in resizing and relocating data grids within other components like accordions. Moreover, there seems to be an anomaly related to flickering when a column is initially pinned - adjusting its width causes the data grid to oscillate between two sizes, creating a flickering effect.
Although I perceive the problem as straightforward, I am perplexed by the discrepancy between DataGrid v6 and v5. I appreciate everyone's assistance in resolving this matter!