export class TableRowExpansionDemo implements OnInit {

    cars: Car[];

    cols: any[];

    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' }
        ];
    }
}

<p-table [columns]="cols" [value]="cars" dataKey="vin">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width: 2.25em"></th>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-expanded="expanded" let-columns="columns">
        <tr>
            <td>
                <a href="#" [pRowToggler]="rowData">
                    <i [ngClass]="expanded ? 'fa fa-fw fa-chevron-circle-down' : 'fa fa-fw fa-chevron-circle-right'"></i>
                </a>
            </td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="rowexpansion" let-rowData let-columns="columns">
        <tr>
            <td [attr.colspan]="columns.length + 1">
                <div class="ui-g ui-fluid" style="font-size:16px;padding:20px">
                    <div class="ui-g-12 ui-md-3" style="text-align:center">
                        <img [attr.alt]="rowData.brand" src="assets/showcase/images/demo/car/{{rowData.brand}}.png">
                    </div>
                    <div class="ui-g-12 ui-md-9">
                        <div class="ui-g">
                            <div class="ui-g-12">
                                <b>Vin:</b> {{rowData.vin}}
                            </div>
                            <div class="ui-g-12">
                                <b>Vin:</b> {{rowData.color}}
                            </div>
                            <div class="ui-g-12">
                                <b>Brand:</b> {{rowData.brand}}
                            </div>
                            <div class="ui-g-12">
                                <b>Color:</b> {{rowData.color}}
                            </div>
                        </div>
                    </div>
                </div>
            </td>
        </tr>
    </ng-template>
</p-table>