How to render images from a url in the data stream in material-table cell using React

Question

I am trying to render images from a URL in material-table's cell, i was able to achieve this behavior using react-table but did not find enough documentation around it for material-table

Any help is appreciated, Thanks

<MaterialTable
        icons= {{Icons}}
        columns={props.columns}
        data={props.data}
        title="My List"
        style={{ height: props.height }}
        options={{
          paging: true,
          pageSize:20,
          search: false,
          pageSizeOptions: [20],
          doubleHorizontalScroll: true,
          maxBodyHeight: '450px'
        }}
        localization={{
          pagination: {
            labelDisplayedRows: `{from}-{to} of ${total}`,
          }
        }}
        onChangePage={()=>requestNewData()}

      />

Here is the Columns i defined

export const MyListColumns = [
{
  title: 'Name',
  field: 'name',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Location',
  field: 'address',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Zip Code',
  field: 'zipCode',
  minWidth: 100,
  maxWidth: 400,
},
];

Previously when I used react-table i did the following to make it work and trying to look for a similar implementation

export const MyListColumns = [
{
  title: 'My Image',
  field: 'myIconUrl',
  minWidth: 100,
  maxWidth: 150,
  Cell: (myIconUrl) => (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '80px'
      }}
    >
      <img
        style={{ height: 'auto', maxWidth: '100px' }}
        alt="my image"
        src={
          removeModifiersFromUrl(
            `${myIconUrl}`
          )
        }
      ></img>
    </div>
  )
},
{
  title: 'Name',
  field: 'name',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Location',
  field: 'address',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Zip Code',
  field: 'zipCode',
  minWidth: 100,
  maxWidth: 400,
},
];

I know this function is not related to the question but posting it anyway for anyone else to use it in react-table

const removeModifiersFromUrl = (url) => url.substring(0, url.indexOf('?'));

Answer 1

i figured out the solution when I was referring to a different question whose question had my solution

export const MyListColumns = [
{
  title: 'My Image',
  field: 'myIconUrl',
  minWidth: 100,
  maxWidth: 150,
  render: (row) => (
    <div
      style={{
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        height: '80px'
      }}
    >
      <img
        style={{ height: 'auto', maxWidth: '100px' }}
        alt="my image"
        src={
          removeModifiersFromUrl(
            row.myIconUrl
          )
        }
      ></img>
    </div>
  )
},
{
  title: 'Name',
  field: 'name',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Location',
  field: 'address',
  minWidth: 100,
  maxWidth: 400,
},
{
  title: 'Zip Code',
  field: 'zipCode',
  minWidth: 100,
  maxWidth: 400,
},
];

credits to This Question