export class DataTableTemplatingDemo implements OnInit {
cars: Car[];
msgs: Message[] = [];
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
}
selectCar(car: Car) {
this.msgs = [];
this.msgs.push({severity:'info', summary:'Car Select', detail:'Vin: ' + car.vin});
}
}
<p-growl [value]="msgs"></p-growl>
<p-dataTable [value]="cars">
<p-column field="vin" header="Vin"></p-column>
<p-column field="year" header="Year"></p-column>
<p-column field="brand" header="Brand"></p-column>
<p-column field="color" header="Color">
<template let-col let-car="rowData">
<span [style.color]="car[col.field]">{{car[col.field]}}</span>
</template>
</p-column>
<p-column style="width:10%;text-align:center">
<template let-car="rowData">
<button type="button" pButton (click)="selectCar(car)" icon="fa-search"></button>
</template>
</p-column>
</p-dataTable>