export class TableSelectionDemo implements OnInit {

    msgs: Message[] = [];

    cars: Car[];

    cols: any[];

    selectedCar1: Car;

    selectedCar2: Car;

    selectedCar3: Car;

    selectedCar4: Car;

    selectedCars1: Car[];

    selectedCars2: Car[];

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

    selectCarWithButton(car: Car) {
        this.selectedCar2 = car;
        this.msgs = [{severity:'info', summary:'Car Selected', detail:'Vin: ' + car.vin}];
    }

    onRowSelect(event) {
        this.msgs = [{severity:'info', summary:'Car Selected', detail:'Vin: ' + event.data.vin}];
    }

    onRowUnselect(event) {
        this.msgs = [{severity:'info', summary:'Car Unselected', detail:'Vin: ' + event.data.vin}];
    }
}

<p-growl [(value)]="msgs"></p-growl>

<h3 class="first">Single Row Selection</h3>
<p-table [columns]="cols" [value]="cars" selectionMode="single" [(selection)]="selectedCar1" dataKey="vin">
    <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">
        <div style="text-align: left">
            Selected Car: {{selectedCar1 ? selectedCar.vin + ' - ' + selectedCar1.brand + ' - ' + selectedCar1.year + ' - ' + selectedCar1.color: 'none'}}
        </div>
    </ng-template>
</p-table>

<h3>Multiple Row Selection</h3>
<p-table [columns]="cols" [value]="cars" selectionMode="multiple" [(selection)]="selectedCars1">
    <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" let-rowIndex="rowIndex">
        <tr [pSelectableRow]="rowData" [pSelectableRowIndex]="rowIndex">
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
        <ul>
            <li *ngFor="let car of selectedCars1" style="text-align: left">
                {{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}
            </li>
        </ul>
    </ng-template>
</p-table>

<h3>Column Selection</h3>
<p-table [columns]="cols" [value]="cars">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th *ngFor="let col of columns">
                {{col.header}}
            </th>
            <th style="width:3em"></th>
        </tr>
    </ng-template>
    <ng-template pTemplate="body" let-rowData let-columns="columns">
        <tr>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
            <td>
                <button pButton icon="fa-search" (click)="selectCarWithButton(rowData)"></button>
            </td>
        </tr>
    </ng-template>
</p-table>

<h3>Events</h3>
<p-table [columns]="cols" [value]="cars" selectionMode="single" [(selection)]="selectedCar3" dataKey="vin"
    (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)">
    <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>
</p-table>

<h3>RadioButton</h3>
<p-table [columns]="cols" [value]="cars" [(selection)]="selectedCar4" 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-columns="columns">
        <tr [pSelectableRow]="rowData">
            <td>
                <p-tableRadioButton [value]="rowData"></p-tableRadioButton>
            </td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
            <div style="text-align: left">
                Selected Car: {{selectedCar4 ? selectedCar4.vin + ' - ' + selectedCar4.brand + ' - ' + selectedCar4.year + ' - ' + selectedCar4.color: 'none'}}
            </div>
        </ng-template>
</p-table>

<h3>Checkbox Selection</h3>
<p-table [columns]="cols" [value]="cars" [(selection)]="selectedCars2" dataKey="vin">
    <ng-template pTemplate="header" let-columns>
        <tr>
            <th style="width: 2.25em">
                <p-tableHeaderCheckbox></p-tableHeaderCheckbox>
            </th>
            <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>
                <p-tableCheckbox [value]="rowData"></p-tableCheckbox>
            </td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>
        </tr>
    </ng-template>
    <ng-template pTemplate="summary">
        <ul>
            <li *ngFor="let car of selectedCars2" style="text-align: left">
                {{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}
            </li>
        </ul>
    </ng-template>
</p-table>