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. In addition built-in radio button and checkbox based selections are available as alternatives.

Single

In single mode, a row is selected on click event of a row. If the 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

RadioButton

Single selection can also be handled using radio buttons by enabling the selectionMode property of column as "single".

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

Checkbox

Multiple selection can also be handled using checkboxes by enabling the selectionMode property of column as "multiple".

Single Selection

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 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>