Primeng: Column toggle demo does not maintain column order

[NicholasJonesCode]

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Plunkr Case (Bug Reports)
Please demonstrate your case at stackblitz by using the issue template below. Issues without a test case have much less possibility to be reviewd in detail and assisted.

https://www.primefaces.org/primeng/#/table/coltoggle

Current behavior
Whenever columns are taken away and then added back, they do not keep their original order

Expected behavior
Columns should keep their original when de-selected and selected back

Minimal reproduction of the problem with instructions

1. go to the link above
2. unselect a column from the dropdown
3. reselect it, and you will see that the column appears at the right side of the table

What is the motivation / use case for changing the behavior?
Very large business value. Less confusion for the user. I'm not asking for a behavior change per se, but just for the demo to be modified to show how the column order can be kept. I've been trying to figure this out for 2 days, and my assignment at work requires this as part of the project I'm working on. I'm still an amateur at Angular, and I think the PrimeNG team, if they are going to put out a demo like this, should make it fully functional, especially for beginners who can't figure this out (or maybe experts as well).

Please tell us about your environment:
Macbook Pro, IntelliJ IDE

• Angular version: 4.3.6 (though I don't think version matters in this case)

• PrimeNG version: 4.3.0 (again, I don't think version matters as this is not a direct primeNg feature)

• Browser: Chrome

• Language: TS 2.3.3

• Node (for AoT issues): node --version = 10.14.2

[madhav5589]

Looks like this is dupe of #3401 which the author has closed already. But I can reproduce this issue in primeng 7.1.2 with p-table.

[vinothbabu]

Is this issue still open in 7.1.3 or fixed?

[madhav5589]

@vinothbabu Confirmed that this is still an issue with version 8.0.1.

[ivodest]

Does anyone has any workaround on that already?

[MassiveHiggsField]

I used the solution from here:

https://stackoverflow.com/questions/54952712/sorting-primeng-columns

And an explanation can be found here:

https://github.com/primefaces/primeng/issues/6643#issuecomment-428548085

"First of all there is no column toggler component, the demo just uses multiselect to implement column toggler sample. MultiSelect always adds new items to the end so this is expected, on your side you can implement it with an order by comparing the value with the options list."

[MassiveHiggsField]

PS: if you have a base columns array which serves as the order for the selected columns, you could use something like this:

modelChange(event) {
  this.selectedColumns = event.sort((a, b) => {
    return this.columns.findIndex(p => p.field === a.field) - this.columns.findIndex(p => p.field === b.field);
  });
}

[waratah]

I had an issue with the local storage state having all columns in the column order but with hidden columns. I wrote this to fix the null records in my table columns:

 if ( tableState) {
      const state = localStorage.getItem(tableState);
      if ( state ) {
        const ts: TableState = JSON.parse(state);
        if ( ts.columnOrder && ts.columnOrder.length) {
          ts.columnOrder = _.filter( ts.columnOrder, sort => {
            return Boolean( _.find(shownFields, column => column.field === sort ));
          });
          localStorage.setItem(tableState, JSON.stringify(ts));
        }
      }
    }

[cagataycivici]

We did it for PrimeReact lately and will do for PrimeNG as well.

https://primefaces.org/primereact/showcase/#/datatable/coltoggle