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.
DataTable provides onRowSelect and onRowUnselect as optional callbacks.
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="#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>