uitableview - Angular column selectable table - column position

Question

I want to add column selectable table in my angular code. ( similar to : https://stackblitz.com/edit/poc-column-selector?file=app%2Ftable-basic-flex-example.ts ) But I want the sequence of the columns to be same. That means after deselect and select again, it should append the column to its original position only and not at the end or at any random position.

Can anyone please suggest, how to achieve this ?

question from:https://stackoverflow.com/questions/65626008/angular-column-selectable-table-column-position

Answer 1

the "key" is the lines

<mat-header-row *matHeaderRowDef="group.value"></mat-header-row>
<mat-row *matRowDef="let row; columns: group.value;"></mat-row>

Columns should be not group value else an fixed array filter if the value is in the group value. So,

<mat-button-toggle-group [multiple]="true" #group="matButtonToggleGroup" 
         (change)="setColumns()">

  @ViewChild('group') toggle: MatButtonToggle;
  columns:any[]
  setColumns(){
    this.columns=['position','name','weight','symbol'].filter(x=>this.toggle.value.indexOf(x)>=0)

  }

And change:

  <mat-header-row *matHeaderRowDef="columns"></mat-header-row>
  <mat-row *matRowDef="let row; columns: columns"></mat-row>

stackblitz

NOTE you can also use a getter like

  get columns()
  {
    return ['position','name','weight','symbol'].filter(x=>this.toggle.value.indexOf(x)>=0)
  }

And you needn't use the event (change)