Pinned Column gets shown twice when column header is dragged

[MichaelJakubec]

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

[ x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior -You have a pinned column (doesn't matter if left or right) -Drag the column header of the pinned column to the other not pinned column part (as if you like to change the order of the columns ) -Sometimes you have to do this twice because at the first time the table behaves correct -After the second time the column is duplicated

Expected behavior -The column should never get duplicated. -The expected behaviour is, that the column jumps back to the position where it was located before

Reproduction of the problem The problem can be reproduced on your example page by moving the "Name" column between the "Age" and "City" column. Doing this twice duplicates the name column. https://swimlane.github.io/ngx-datatable/#pinning

What is the motivation / use case for changing the behavior? It looks terrible and potential users gets confused.

Please tell us about your environment:

• Table version: 0.8.x ngx-datatable (11.2.0)

• Angular version: 2.0.x 5.2.6

• Browser: I think it is related to all I could test it my self in Opera, Chrome, Firefox and IE 11

• Language: [all | TypeScript X.X | ES6/7 | ES5] all

[runeabrahams1]

Probably related to this bug:

If you drop a draggable column on top of a (not draggable or draggable) pinned column, then the same as above happens. + The reorder output will emit an event saying that the draggable column changed place with the pinned column.

[MichaelJakubec]

Possible fix would be to change method onColumnReorderin file datatable.component.ts

/**
   * The header triggered a column re-order event.
   */
  onColumnReorder({ column, newValue, prevValue }: any): void {
    const cols = this._internalColumns.map(c => {
      return { ...c };
    });

    const prevCol = cols[newValue];
    cols[newValue] = column;
    cols[prevValue] = prevCol;

/*************************************** Fix for the bug **********************/
    if (
        (column.frozenLeft != prevCol.frozenLeft)||
        (column.frozenRight != prevCol.frozenRight)
    ){
        return; 
    }
/********************************** End of fix *****************/   
    this._internalColumns = cols;

    this.reorder.emit({
      column,
      newValue,
      prevValue
    });
  }

But I'm not sure if this covers all relevant cases.