As someone new to React, I recently embarked on my journey by creating a test project utilizing MUI Table, and so far it's been a success:
https://i.stack.imgur.com/clb4p.png
However, I am now looking to incorporate pagination and sortable columns when presenting my data.
To tackle this, I decided to develop another test project using MUI X DataGrid:
https://i.stack.imgur.com/WV8ZI.png
While the functionality is there, I noticed that the last column displays my HTML img code as is.
In an attempt to address this issue, I implemented a custom solution within my TopGrid.jsx component:
const wrongImgHandler = (photo) => {
return photo && PHOTO_PATTERN.test(photo) ? photo : "female_sad.png";
};
const imgErrorHandler = ({ currentTarget }) => {
// prevents looping
currentTarget.onerror = null;
currentTarget.src = "male_sad.png";
};
const columns = [
{
field: "elo",
headerName: "Elo",
type: "number",
width: 90,
},
{
field: "given",
headerName: "First name",
width: 150,
},
{
field: "photo",
headerName: "Photo",
sortable: false,
width: 160,
valueGetter: (params) =>
`<img
src=${wrongImgHandler(params.row.photo)}
className="avatar"
onError=${imgErrorHandler}
/>`,
},
];
I would greatly appreciate any guidance on how to properly display an img element with an onError handler in the MUI X DataGrid.