Material UI DataGridPro - No Rows Rendered - material-ui

Question

I have a number of DataGrids in our app.
Running tests with Playwright - Chromium - , sometimes prevents the rows from being rendered.
As can be seen in the screenshot, the rows exist, but just not being rendered.
More details, this mostly happens when running the tests from gitlab, but I have also seen it in the front end. Just rarely.
Anybody have any idea how to fix it?
All the affected Tables have a cell that renders like this:
renderCell: (params: any) => (
<div key={params.row.id} className="action_list_element">
{params.row.actionFile
.filter(
(af: ActionFile) =>
af?.actionFileType === ActionFileType.Output
)
.map((af: ActionFile, index: Number) => {
if (af?.file) {
return (
<div
className="no_line_hight"
key={params.row.id + index}
>
<b>
<FileIcon
fileName={af?.file.name}
isValid={af?.file.isValid}
fontSize={"small"}
/>{" "}
<a
href={
"/activity/" +
params.row.pmxActivity.id +
encodeURIComponent("/" + af?.file.absolutePath) +
encodeURIComponent(
"?versionId=" + af?.file.versionId
)
}
>
{af?.file.absolutePath}
</a>
</b>{" "}
({af?.file.revision}) -{" "}
{af?.file.isValid ? "valid" : "not valid"}
</div>
);
} else {
return "";
}
})}
</div>
),
Tried upgrading both Playwright and MUI to the lates version. Did not work.
Also tried to reproduce with my browser, but it went on fine.

Answer 1

It seams it appeared because we were running our test with a headless browser.
https://mui.com/x/react-data-grid/virtualization/
The Documentation explained what was happening, and how to fix it.