DataTable - Row Expansion A row can be expanded to display extra content by enabling expandableRows property and providing a row template.
{{selectedCar.vin}}
{{selectedCar.year}}
{{selectedCar.brand}}
{{selectedCar.color}}

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" styleClass="col-icon"></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 let-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>