Как разместить миниатюры изображений, дату (гггг-мм-дд) и ссылки <a>в ag-сетке в angular?

Question

Я пытаюсь создать таблицу данных, используя angular пользовательский интерфейс ag-grid, но поскольку я новичок в этом, я застрял / не знаю, как иметь дату, изображения / миниатюры, ссылки в спецификациях c клетки. Это то, что я пробовал:

portal.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-portfolio',
  templateUrl: './portfolio.component.html',
  styleUrls: ['./portfolio.component.css']
})
export class PortfolioComponent implements OnInit {

  gridOptions: {
    defaultColDef: {
        resizable: true
    },
    columnDefs: [
        {field: 'name'},
        {field: 'age'},
        {field: 'address', resizable: false},
    ]
}

{headerName: 'URL', field: 'url', cellRenderer: function(params) {
  return '<a href="https://www.ClientName-1.com/" target="_blank">'+ params.value+'</a>' }},
{headerName: 'Last Used Date', field: 'date'}, 
];

rowData = [
{ sno: 1, cat: 'UX Design', client: 'ClientName-1', role: 'UX & UI Architect', duration: 2, sample:'', url: 'ClientName-1', date: '2019-09-12'},
{ sno: 2, cat: 'UI Design', client: 'ClientName-2', role: 'UX & UI Architect', duration: 4, sample:'NA', url: 'ClientName-2', date: '2019-04-22' }
];

  constructor() { }

  ngOnInit() {
  }


  
  onGridReady(params) {
    params.api.sizeColumnsToFit();
  }

}

Мой html компонент содержит

<section class="sections">
<div class="container">
    <div class="row">
        <div class="col-12 text-center">
            <h2 class="section-title">Portfolio</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-12">
        <ag-grid-angular
            style="height: 300px;"
            class="ag-theme-balham"
            [gridOptions]="gridOptions"
            (gridReady)="onGridReady($event)"
            [rowData]="rowData"
            [columnDefs]="columnDefs">
        </ag-grid-angular>
    </div>
    </div>
</div>
</section>

И на выходе я получил