Search code examples
angularprimengprimeng-datatable

Default DataTable PrimeNG - Column Toggler

I have a datatable with 11 columns. I'm using the toggleable columns feature. I would like to show the 11 column selection options, but initially want to display 4 selected. I studied several options of the MultiSelect component, but I did not find an answer to my question

Typescript:

this.columnOptions = [];

    for(let i = 0; i < this.cols.length; i++) {
     if(!(this.cols.header === this.fields.BULKACTIONS.header || this.cols.header === this.fields.TASKID.header || this.cols.header === this.fields.ACTIONS.header)){
      this.columnOptions.push({label: this.cols.header, value: this.cols});
     }
    }

HTML:

<p-header>
  <div style="text-align:left">
    <p-multiSelect [options]="columnOptions" [(ngModel)]="cols"></p-multiSelect>
  </div>
 </p-header>
Solution

  • If I have well understood your need, what you can do is to slice your cols array after having filled the columnOptions array :

        this.columnOptions = [];
    for (let i = 0; i < this.cols.length; i++) {
      this.columnOptions.push({ label: this.cols[i].header, value: this.cols[i] });
    }

    this.cols = this.cols.slice(0, 4);

    See StackBlitz