export class DataTableRowGroupDemo implements OnInit {

    cars1: Car[];

    cars2: Car[];

    cars3: Car[];

    constructor(private carService: CarService) {}

    ngOnInit() {
        this.carService.getCarsMedium().then(cars => this.cars1 = cars);
        this.carService.getCarsMedium().then(cars => this.cars2 = cars);
        this.carService.getCarsMedium().then(cars => this.cars3 = cars);
    }

    calculateGroupTotal(brand: string) {
        let total = 0;

        if(this.cars1) {
            for(let car of this.cars1) {
                if(car.brand === brand) {
                    total += car.price;
                }
            }
        }

        return total;
    }
}

<p-dataTable [value]="cars1" sortField="brand" rowGroupMode="subheader" groupField="brand" expandableRowGroups="true"
        [sortableRowGroup]="false">
    <p-header>Toggleable Row Groups with Footers</p-header>
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
    <p-column field="color" header="Color"></p-column>
    <p-column field="year" header="Year"></p-column>
    <p-column field="vin" header="Vin"></p-column>
    <p-column field="price" header="Price">
        <ng-template let-col let-car="rowData" pTemplate="body">
            <span>{{car[col.field] | currency:'USD':'symbol':'.0-0'}}</span>
        </ng-template>
    </p-column>
    <ng-template pTemplate="rowgroupfooter" let-car>
        <td colspan="3" style="text-align:right">Total Price</td>
        <td>{{calculateGroupTotal(car['brand']) | currency:'USD':'symbol':'.0-0' }}</td>
    </ng-template>
</p-dataTable>

<p-dataTable [value]="cars2" sortField="brand" rowGroupMode="subheader" groupField="brand" [style]="{'margin-top':'50px'}">
    <p-header>Subheader</p-header>
    <ng-template pTemplate="rowgroupheader" let-rowData>{{rowData['brand']}}</ng-template>
    <p-column field="color" header="Color" sortable="true"></p-column>
    <p-column field="year" header="Year" sortable="true"></p-column>
    <p-column field="vin" header="Vin" sortable="true"></p-column>
</p-dataTable>

<p-dataTable [value]="cars3" sortField="brand" rowGroupMode="rowspan" [style]="{'margin-top':'50px'}">
    <p-header>RowSpan</p-header>
    <p-column field="brand" header="Brand" sortable="true"></p-column>
    <p-column field="color" header="Color" sortable="true"></p-column>
    <p-column field="year" header="Year" sortable="true"></p-column>
    <p-column field="vin" header="Vin" sortable="true"></p-column>
</p-dataTable>