How to render image in the MUI X Data Grid?

Question

I'm trying to insert image to table field but it's only displaying url. I used renderCell to inject image component but doesn't works. The problem is same as from this question but the solution provided didn't work. I have all the answers provided but couldn't find the solution. Is there anything wrong i'm doing wrong? Please help me with resources.

 const columns = [
{
  field: "market_cap_rank",
  headerName: "Rank",
  width: 40,
  type: "number",
},

{
  field: "image",
  headerName: "Image",
  width: 150,
  rendercell: (params) => (
    <Avatar alt="Image" src={params.value} sx={{ width: 50, height: 50 }} />
  ),
},

{ field: "name", headerName: "Coins", width: 130 },
{
  field: "current_price",
  headerName: "Price",
  width: 100,
  valueGetter: (params) => {
    if (!params.value) {
      return params.value;
    }
    // Convert the decimal value to a percentage
    return `$${params.value}`;
  },
},

{
  field: "price_change_24h",
  headerName: "24 Hr",
  width: 100,
  rendercell: (params) => {
    return (
      <Typography variant="body1" sx={{ color: "green" }}>
        {params.value.toFixed(1)} %
      </Typography>
    );
  },
}];



 <DataGrid
      rows={cryptoData}
      columns={columns}
      initialState={{
        pagination: {
          paginationModel: { page: 0, pageSize: 50 },
        },
      }}
      pageSizeOptions={[50, 100, 200]}
      checkboxSelection
    />

Answer 1

'C' in the renderCell should be capital letter.

Also try removing the sx prop from the Avatar component. It worked for me.

Answer 2

The error was with rendercell spelling, it should have been renderCell.