How I can add image in material table cell?

Question

I added image (maybe not correct) in detail Table. Now I wont edit data and have problem with image field (without image all work good) . enter image description here

           columns={[{ title: 'ID', field: 'id' },
                     { title: '', field: 'img'},
                     { title: 'Title', field: 'title' },
                     { title: 'Price', field: 'price' },
                     { title: 'Quantity', field: 'quantity' },
                     { title: 'Subtotal', field: 'subtotal' },
                     { title: 'Description', field: 'description', hidden: true}, ]}
          data={rowData.items.map((item)=>
                  ({id: item.id, title:item.title, 
                    price:item.price,
                    quantity:item.quantity,
                    subtotal:item.price*item.quantity, 
                    description:item.description,
                    img:<img src={item.img} alt="" border="3" height="100" width="100" />
                                                 }))}

        editable={{
                  onRowDelete: oldData =>
                       new Promise((resolve, reject) => {
                           console.log(oldData);   
                           setTimeout(() => {
                               const index = oldData.tableData.id;
                               rowData.items.splice(index, 1);                                                          
                               removeItemFromOrder(rowData.orderNumber,oldData);
                               resolve()
                                                         }, 1000)
                                                     }),
                                             }}

Answer 1

Try this:

 columns={[{ title: 'ID', field: 'id' },
                     { title: '', field: 'img', render: item => <img src={item.img} alt="" border="3" height="100" width="100" />},
                     { title: 'Title', field: 'title' },
                     { title: 'Price', field: 'price' },
                     { title: 'Quantity', field: 'quantity' },
                     { title: 'Subtotal', field: 'subtotal', render: (item) => item.price*item.quantity},
                     { title: 'Description', field: 'description', hidden: true}, ]}
          data={rowData.items}