Sorting primeng columns

Question

I am using a primeng table and was using their toggle method for the columns. The only issue is, with the columns when you toggle one off and back on it returns the column to the end of the table. I was wondering if anyone knew anyway to sort them so the column goes back to the original position

I tried to use various sorting methods in my component.ts file but had no luck.

Here is the example I am using from PrimeNG(Can test and see code there)

Answer 1

The sequence of columns in the example is determined by selectedColumns array. By default in the MultiSelect component, it will append any change to the end of the array. So you should sort it after each change event on the MultiSelect. Add an event handler modelChange()

<p-multiSelect [options]="cols" [ngModel]="selectedColumns" 
            (ngModelChange)='modelChange($event)'
                optionLabel="header"
                        selectedItemsLabel="{0} columns selected" [style]="{minWidth: '200px'}" defaultLabel="Choose Columns"></p-multiSelect>

And in your component ts file,

  modelChange(event) {
    console.log('change fired')
    this.selectedColumns = event;
    this.selectedColumns.sort(
      function compare(a, b) {
        if (a.field < b.field)
          return -1;
        if (a.field > b.field)
          return 1;
        return 0;
      }

    );
    console.log(this.selectedColumns);
  }
}

see a demo here: https://stackblitz.com/edit/angular7-template-fork-first-ow8wtw