<p-table [columns]="cols" [value]="cars" selectionMode="single" [(selection)]="selectedCar" (onRowSelect)="onRowSelect($event)" [paginator]="true" rows="10">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>

    <ng-template pTemplate="summary" let-rowData>
        <div style="text-align:left">
            <button type="button" pButton icon="fa-plus" (click)="showDialogToAdd()" label="Add"></button>
        </div>

        <div style="text-align:left">
            <p-slider [(ngModel)]="rangeValues"></p-slider>

        </div>


        <h3 class="first">Single</h3>
        <p-selectButton [options]="types" [(ngModel)]="selectedType"></p-selectButton>

        <p>Selected Type: {{selectedType}}</p>

        <h3>Multiple</h3>
        <p-selectButton [options]="types" [(ngModel)]="selectedTypes" multiple="multiple"></p-selectButton>
        <p>Selected Types: <span *ngFor="let type of selectedTypes">{{type}} </span></p>

        <hr />

        <button type="button" (click)="clear()" pButton icon="fa-close" label="Clear"></button>

    </ng-template>


</p-table>