CODEWITHSUNDEEP
angularprimeng-datatable
Drew13
Drew13

Reputation: 1371

Select all rows on button click

I have a primeng table. When I click a button, I want all rows to be selected.

html:

<p-table [columns]="columns" [value]="values"
         selectionMode="multiple" [(selection)]="selectedValues"
         (onRowSelect)=selectRow(selectedValues)
         (onRowUnselect)="unselectRow($event)" #table>
  <ng-template pTemplate="header" let-columns>
    <tr>
      <th *ngFor="let col of columns">
        {{col.header}}
      </th>
    </tr>
  </ng-template>
  <ng-template pTemplate="body" let-val>
    <tr [pSelectableRow]="val">
      <td *ngFor="let col of columns">
        {{val[col.field]}}
      </td>
    </tr>
  </ng-template>
</p-table>

<div class="table-button">
  <p-button (onClick)="selectAll()">Select All</p-button>
  <p-button>Remove</p-button>
</div>

typescript:

import {Component, OnInit, ViewChild} from '@angular/core';
import {Model} from "../../models/model.model";

@Component({
  selector: 'app-comp',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.scss']
})
export class MyComponent implements OnInit {
  @ViewChild('table', {static: false}) table;

  //left out for now
  //values: Model[];

  columns: any[];

  selectedValues: Model[] = [];

  constructor() { }

  ngOnInit() {
    this.columns = [
      { field: 'Id', header: 'ID' },
      { field: 'startTime', header: 'Start Time' },
      { field: 'endTime', header: 'End Time' },
      { field: 'description', header: 'Description' },
      { field: 'insertUser', header: 'Create User' },
      { field: 'insertTime', header: 'Create Eastern Time' },
    ]
  }

  selectRow(event){
    console.log("selected row!");
  }

  unselectRow(event){
    console.log("unselected a row!")
  }

  selectAll(){
    console.log("select all is clicked");
    for (var i = 0; i < this.values.length; i++){
      this.selectedValues[i] = this.values[i];
    }
    console.log(this.table);
  }

}

When I click the button and check the console to view it's _selection value, I can see that the whole table is selected. This is because I have the for loop adding the array of data to the array of table selections. After doing this, if I click on any row, the clicked row shows as unclicked (not highlighted) and all other rows show as clicked (highlighted). So from that behavior, it appears my method of selecting all rows is working aside from the highlighting.

So my questions are:

Is there a better way, less 'hacky' way to select all rows and show they are selected (highlighted) instead using a for loop to add them to my selection array?

If this method is the most logical way to select all rows, how can I represent all rows as selected (highlighted) when I click the button?

Upvotes: 3

Views: 6482

Answers (1)

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24474

primeng table check if the row Item is inside the list(selectedValues) and base of that will add the class to highlight the selected row to do this simply just set the data item inside the list just like this this.selectedValues = [...this.values]; will do the work ,in case you use checkbox to select the row you can use this component <p-tableHeaderCheckbox></p-tableHeaderCheckbox> but it 's do the same logic

`

  selectAll(){
    this.selectedValues = [...this.dataSet];
  }

demo 🚀

Upvotes: 5

Related Questions