Basic Cell Renderers

We just learned how value getters can render calculated values. They need to be either strings or numbers, though. What if we need to do something more complicated, like render an image based on a URL?

For that, we'll use a Cell Renderer. Our data is returning an image URL for the customer's avatar. We can add a column definition for Avatar to use a cell renderer to display an img tag in HTML:

// src/App.js
columnDefs: [
  // rest unchanged
    {
     headerName: "Avatar",
     field: "avatar",
     width: 100,
     cellRenderer: ({ value }) => `<img style="height: 14px; width: 14px" src=${value} />`
    },
]

We can take this even further, though. It turns out ag-Grid can use React components as cell renderers. Let's learn about this awesome feature in the next video!