I am new to ag-grid
and planning to implement that for our Angular project. It looks great except it's support for cell templating . Unlike PrimeNG
or Devextreme
I don't see a "templating" feature for the column.
Most of the documentation of ag-grid explains how to customize the cell via "cellrenderer" in component.ts class. I want to customize the cell via html instead of.ts
Below code is part of PrimeNG
to customize the cell via template. Can someone help me to implement the same in ag-grid
via html
<ng-template pTemplate="body" let-product>
<tr>
<td>{{product.name}}</td>
<td><img [src]="'assets/showcase/images/demo/product/' + product.image" [alt]="product.name" width="100" class="p-shadow-4" /></td>
<td>{{product.price | currency:'USD'}}</td>
<td>{{product.category}}</td>
<td><p-rating [ngModel]="product.rating" [readonly]="true" [cancel]="false"></p-rating></td>
<td><span [class]="'product-badge status-' + product.inventoryStatus.toLowerCase()">{{product.inventoryStatus}}</span></td>
</tr>
</ng-template>
Thanks for your help on this.
You can return an angular component instead of just plain text. You can do this using cellRendererFramework
that you can access from the column definition.
{
headerName: "CLIENT",
field: "client",
cellRendererFramework: (params) => {
return <AgGridCellRenderer>
</AgGridCellRenderer>
},
},
the params
argument has all the agRid stuff like ´api and
columApi` as well as the original cell value as well as the entire row data.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.