Question: I am using multiselect PrimeNG to show or hide the columns of my ptable it's working fine for hiding columns but when i show them back they come and append to the last of the table so this is destroying the order of the table columns as i think multiselect creates a array of columns to show or hide it pops on hide and add back to the array hence it comes at last.

Answer: 
You can add a unique key to your columns and then on change of filter you can sort according to your unique key.

In ts:

```
cols = [
      { field: 'name', header: 'Name', key: 1 },
      { field: 'type', header: 'Type', key: 1 },
      { field: 'description', header: 'Description', key: 3 },
      { field: 'created_on', header: 'Created on', key: 4 }
    ]

private _selectedColumns: any;

@Input('selectedColumns')
set selectedColumns(selectedColumns: any) {
  this._selectedColumns = selectedColumns;
  this._selectedColumns.sort((a, b) => a.key- b.key)
}

get selectedColumns(): any { return this._selectedColumns; }

```

In html template:

```
<p-multiSelect [options]="cols" [(ngModel)]="selectedColumns" optionLabel="header"defaultLabel="Column Options">
</p-multiSelect>

```
You have to just maintain two arrays one selected columns list say "**selectedColumns**" and other array of all columns say "**columnsList**" now on multiselect **onChange** event create a function say toggle() now in this function traverse the array **columnsList** and check whether the **selectedColumns** have that column name in it, that's it you will be able to maintain the order of the table columns even if you hide the columns in between or undo it.

---

This is the correct approach just you have to understand it and implement.
Hope it helps.