PrimeNG datatable checkbox

Question

I am trying to give a layout of a data table with a pagination that has a check box for the data in it. I can select the page data, and when I go to another page and select a different data set, the selection of the first page will be lost.

demo.html:   

    <p-dataTable [value]="cars" [rows]="10" [paginator]="true" [pageLinks]="3" [rowsPerPageOptions]="[5,10,20]" sortMode="multiple" [(selection)]="selectedCars2">
        <p-column [style]="{'width':'38px'}" selectionMode="multiple" ></p-column>
        <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">
            <template let-col let-car="rowData" pTemplate type="body">
                <span [style.color]="car[col.field]">{{car[col.field]}}</span>
            </template>
        </p-column>

        <!--<p-column styleClass="col-button">
            <template pTemplate type="header">
                <input type="checkbox" [(ngModel)]="checkUncheckAll" />
            </template>
            <template let-car="rowData" pTemplate type="body">
                <input type="checkbox" [(ngModel)]="checkValue[car.vin]" (click)="selectCar(car, checkValue[car.vin])"/>
            </template>
        </p-column>-->
    </p-dataTable>

    <div class="table-controls-top"><div class="pager"><input type="button" class="button_tablecontrol" (click)="selectCar(selectedCars2)" value="Delete"></div></div>

demo.ts:

import {Component,OnInit} from '@angular/core';
import {Car} from '../domain/car';
import {CarService} from '../service/carservice';
import {Message} from '../common/api';

@Component({
    templateUrl: 'app/showcase/demo/datatable/datatabledemo.html'
})
export class DataTableDemo implements OnInit {

    cars: Car[];

    cols: any[];

    msgs: Message[] = [];

    checkValue: any;

    selectedCars2: any[];

    constructor(private carService: CarService) { 

        this.checkValue = {};

        this.selectedCars2 = [];

    }

    ngOnInit() {
        this.carService.getCarsCustom().then(
        cars => {
            this.cars = cars;
            for (var car of this.cars) {
            console.log(car.vin)
                this.checkValue[car.vin] = false;
            }
        });

        this.cols = [
            {field: 'vin', header: 'Vin'},
            {field: 'year', header: 'Year'},
            {field: 'brand', header: 'Brand'},
            {field: 'color', header: 'Color'}
        ];
    }

    selectCar(selectedCars) {

        console.log(selectedCars)
        console.log(this.selectedCars2)
    }

}

I believe that the team has not yet implemented the functionality. Any idea / idea on how to keep the row selection (in the "selectedCars2" model) paginated?

Thanks in advance.

Answer 1

The issue is discussed on github:

Paginated DataTable Selection

To help you now:

<p-dataTable [value]="data" [rows]="PageSize" [paginator]="ShowPaginator" [pageLinks]="3" [(selection)]="selectedData" (onHeaderCheckboxToggle)="onTableHeaderCheckboxToggle($event)">
     <p-column [style]="{'width':'38px'}" selectionMode="multiple"></p-column>
  </p-dataTable>

class Test {
 private data: MyData[]; 
 selectedData: MyData[];

 onTableHeaderCheckboxToggle(event: any) {
  if (event.checked === true) {
     for (let m of this.data) {
        if (/* Make your test here if the array does not contain the element*/) {
           this.selectedData.push(m);
        }
     }
  } else {
     this.selectedData.length = 0;
  }

}}