title: How to display image in a @mui/x-data-grid table?
body: <p>I'm a react.js beginner. when I'm trying to add an image avatar to my MUI table, I got the following error. &quot;TypeError: params.rows is undefined&quot;
  I'll put my code below.</p>
  <pre><code>import React from 'react'
  </code></pre>
  <p>import &quot;./userList.css&quot;
  import { DataGrid } from '@mui/x-data-grid';</p>
  <p>export default function UserList() {</p>
  <pre><code>const columns = [
      { field: 'id', headerName: 'ID', width: 70 },
      { field: 'user', headerName: 'User', width: 200, renderCell: (params)=&gt;{
        return (
          &lt;div&gt;
            &lt;img src={params.rows.avatar} alt='' /&gt;
            {params.rows.username}
          &lt;/div&gt;
        )
      } },
      { field: 'email', headerName: 'E-mail', width: 130 },
      {
        field: 'status',
        headerName: 'Status',
        width: 90,
      },
      {
        field: 'transaction',
        headerName: 'Transaction',
        width: 100,
      },
      
    ];
    
    const rows = [
      { id: 1, 
      username: 'Harry Potter', avatar:&quot;https://assets.materialup.com/uploads/bebad102-7f40-4941-99cd-54366113003e/avatar-08.png&quot;, 
      email:&quot;Harry@gmail.com&quot;, 
      status:&quot;Active&quot;,
      transaction:&quot;$120&quot; 
      },];
  
  return (
      &lt;div className=&quot;userList&quot;&gt;
          &lt;DataGrid rows={rows} columns={columns} pageSize={5} rowsPerPageOptions={[5]} checkboxSelection /&gt;
      &lt;/div&gt;
  )
  </code></pre>
  <p>}</p>
  <p><a href="https://i.stack.imgur.com/ghb1e.png" rel="nofollow noreferrer">Code</a></p>