How to add Image in muidatatables?

Question

Note: Image is in the database named as "profileImage" I want to make image object that is dynamic as like other objects, whenever I add this code

{ label: "Image", name: "profileImage", } it simply display the image endpoint like 3704545668418.PNG and the url for profileImage is https://cloudclinicdevapi.azurewebsites.net/Profile/3704545668418.PNG

Now please tell me how can I add image column in this table

this.state = {
  columns: [
    {
      label: "National ID",
      name: "nationalID",
      sortable: true,

      filter: true,

      options: {
        customBodyRender: (val) => (
          <NavLink className="NavLink" to={`/EditPatient?Patient=${val}`}>
            {val}
          </NavLink>
        ),
      },
    },
    {
      label: "Patient Name",
      name: "name",
      filter: true,
    },
    {
      //want to add Image here
    },
    {
      label: "Phone Number",
      name: "phone",
      sortable: true,
      filter: true,
    },
    {
      label: "Address",
      name: "address",
      sortable: true,

      filter: true,
    },
    {
      label: "ID",
      hide: true,
      name: "nationalID",
      button: {
        show: true,
        value: "Make an Appointments",
        operation: (val) => this.needAppointment(val),
      },
    },
  ],
  rowSelection: "single",
  rowData: [],
}

Answer 1

basically we use customBodyRender for this case. You can use following code for this case.

{
  name: "profileimage",
  label: "Image",
  options: {
    customBodyRender: () => {
      return (
        <Avatar variant="rounded" src="xyz.PNG" >
        </Avatar>
      )
    }
  }
},

Answer 2

If you are using MUI-X Data Grid 5, then I think it can help.

// ...
const RenderProfileImage = ({ value }) => {
  return (
    <Avatar variant="rounded" src={value} />
  )
};

this.state = {
  columns: [
    {
      field: 'profileimage',
      headerName: 'Image',
      renderCell: RenderProfileImage,
    }
  ],
};
// ...