export class DataTableRowExpansionDemo implements OnInit {
cars: Car[];
cols: any[];
selectedCar: Car;
dialogVisible: boolean;
constructor(private carService: CarService) { }
ngOnInit() {
this.carService.getCarsSmall().then(cars => this.cars = cars);
this.cols = [
{field: 'vin', header: 'Vin'},
{field: 'year', header: 'Year'},
{field: 'brand', header: 'Brand'},
{field: 'color', header: 'Color'}
];
}
showCar(car: Car) {
this.selectedCar = car;
this.dialogVisible = true;
}
}
<p-dataTable [value]="cars" expandableRows="true">
<p-column expander="true" style="width:22px"></p-column>
<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"></p-column>
<template #car>
<div class="ui-grid ui-grid-responsive ui-fluid" style="font-size:16px;padding:20px">
<div class="ui-grid-row">
<div class="ui-grid-col-3" style="text-align:center">
<i class="fa fa-search" (click)="showCar(car)" style="cursor:pointer;float:left;margin-top:40px"></i>
<img src="showcase/resources/demo/images/car/{{car.brand}}-big.gif">
</div>
<div class="ui-grid-col-9">
<div class="ui-grid ui-grid-responsive ui-grid-pad">
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Vin: </div>
<div class="ui-grid-col-10">{{car.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Year: </div>
<div class="ui-grid-col-10">{{car.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Brand: </div>
<div class="ui-grid-col-10">{{car.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-2 label">Color: </div>
<div class="ui-grid-col-10">{{car.color}}</div>
</div>
</div>
</div>
</div>
</div>
</template>
</p-dataTable>
<p-dialog header="Car Details" [(visible)]="dialogVisible" [responsive]="true" showEffect="fade" [modal]="true" width="250">
<div class="ui-grid ui-grid-responsive ui-grid-pad" *ngIf="selectedCar">
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="vin" class="label">Vin</label></div>
<div class="ui-grid-col-8">{{selectedCar.vin}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="brand" class="label">Year</label></div>
<div class="ui-grid-col-8">{{selectedCar.year}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="brand" class="label">Brand</label></div>
<div class="ui-grid-col-8">{{selectedCar.brand}}</div>
</div>
<div class="ui-grid-row">
<div class="ui-grid-col-4"><label for="color" class="label">Color</label></div>
<div class="ui-grid-col-8">{{selectedCar.color}}</div>
</div>
</div>
</p-dialog>