DataTable - Selection DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the selection property and onRowSelect-onRowUnselect events are provided as optional callbacks.

Single

In single mode, a row is selected on click event of a row, if the metaKey is on and row is already selected then the row gets unselected.

Single Selection
Selected Car: {{selectedCar1 ? selectedCar1.vin + ' - ' + selectedCar1.brand + ' - ' + selectedCar1.year + ' - ' + selectedCar1.color: 'none'}}

Multiple

Multiple Selection
  • {{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}

Events

DataTable provides onRowSelect and onRowUnselect as optional callbacks.

Selection with Events

export class DataTableSelectionDemo implements OnInit {

    msgs: Message[];

    cars: Car[];

    selectedCar1: Car;

    selectedCar2: Car;

    selectedCars: Car[];

    constructor(private carService: CarService) { }

    ngOnInit() {
        this.carService.getCarsSmall().then(cars => this.cars = cars);
    }

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

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


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

<h3 class="first">Single</h3>
<p>In single mode, a row is selected on click event of a row, if the metaKey is on and row is already selected then the row gets unselected.</p>
<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar1">
    <header>Single Selection</header>
    <footer><div style="text-align: left">Selected Car: {{selectedCar1 ? selectedCar1.vin + ' - ' + selectedCar1.brand + ' - ' + selectedCar1.year + ' - ' + selectedCar1.color: 'none'}}</div></footer>
    <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>
</p-dataTable>

<h3>Multiple</h3>
<p></p>
<p-dataTable [value]="cars" selectionMode="multiple" [(selection)]="selectedCars">
    <header>Multiple Selection</header>
    <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>
    <footer>
        <ul>
            <li *ngFor="let car of selectedCars" style="text-align: left">{{car.vin + ' - ' + car.brand + ' - ' + car.year + ' - ' + car.color}}</li>
        </ul>
    </footer>
</p-dataTable>

<h3>Events</h3>
<p>DataTable provides onRowSelect and onRowUnselect as optional callbacks.</p>
<p-dataTable [value]="cars" selectionMode="single" [(selection)]="selectedCar2" (onRowSelect)="onRowSelect($event)" (onRowUnselect)="onRowUnselect($event)">
    <header>Selection with Events</header>
    <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>
</p-dataTable>