p-tablecheckbox and p-tableheadercheckbox

user_9174956 0
Viewed 20663

I have a table which checkbox header and on checking the checkbox only few rows base on the condition need to be checked and on unchecking the box selected checks need to be disappear.

HTML

<p-table [value]="_rows" [columns]="columns" [(selection)]="selectedRows">
    <p-tableHeaderCheckbox id="selectAllRows" (click)="selectRow()"></p-tableHeaderCheckbox>
    <p-tableCheckbox [value]="row" (click)="selectRow()" [disabled]="row.userDefined==='N'">
        </p-tableCheckbox
></p-table>

JS

selectRow() {
    this.selectedRows = this.selectedRows.filter(value => value.flag === 'Y');
    this.selectedEvent.emit(this.selectedRows);
}
primeng angular
1 Answers

p-tableheadercheckbox component has it one logic to set all rows to the selectedRows then this mean all items is selected you can check it logic here

you can use a p-checkbox a bind selectRow to click event will do the job you desire

component 

  selectRow(checkValue) {
    if (checkValue) {
      this.selectedRows = this.cars.filter(value => value.year < 2000);
    } else {
      this.selectedRows = [];
    }
  }

template 

<p-table [value]="cars" [columns]="cols" [(selection)]="selectedRows">
    <ng-template pTemplate="header" let-columns>
        <tr>
      <th>
        <p-checkbox (click)="selectRow(e.checked)" #e></p-checkbox>
      </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" [disabled]="rowData.year > 2000">
        </p-tableCheckbox>

      </td>
            <td *ngFor="let col of columns">
                {{rowData[col.field]}}
            </td>

        </tr>
    </ng-template>
</p-table>

demo

user_39806210
Related