Column Toggle makes the column order and column width go haywire

[alvinaraujo]

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

Toggling between Column makes the column order and column width go haywire

Expected behavior

The order should the same as the original order, while it is rendered.

Reproduction of the problem

Check the "column toggle demo" example; try unchecking all the columns and then select gender,company and name(or any other randomcombination).

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

WAMP, Visual studio, node

• Table version: 0.8.x

  Yes issue remains

• Angular version: 2.0.x

  Issue faced in angular 4

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

  all

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

[hatung]

I've updated toogle function in demo file column-toggle.component.ts and it works like expectation.

if(isChecked) {
  this.columns = this.columns.filter(c => { 
    return c.name !== col.name; 
  });
} else {
  const newColumns = [...this.columns, col];
  this.columns = this.allColumns.filter(
        f => newColumns.filter(
          s => s.name === f.name)
        ).map(x => Object.assign({}, x));
}

https://github.com/hatung/ngx-datatable/commit/6b2f0ff7feb4fbed428c64f829d62e89375aacd7

[superdioz]

the solution proposed by @hatung works for the order but if you hide multiple columns and then toggle back any of them, all the columns get visible again.

[prof-jagpreet]

i used this one

    if (isChecked) {
      this.columns = this.columns.filter(c => { 
        return c.name !== col.name; 
      });
    } else {
      const newColumns = [...this.columns, col];
      this.columns = [];
      this.allColumns.forEach((f) => {
        newColumns.forEach((s) => {
          if ( s.name === f.name){
            this.columns.push(f);
          }
        });
     });
    }