DisplayedColumns are not correctly set when loading settings

[Catscratch]

I tried the following TableData initialization.

const columns = [{ id: 'C1', name: 'Name1' }, { id:'C2', name: 'Name2' }]; 
const table = new TableData(columns, { localStorageKey: 'myKey' });
console.log(table.columns, table.displayedColumns);

On the initial call the output looks like this. For columns:

[{ id: 'C1', name: 'Name1', isActive: true }, { id:'C2', name: 'Name2', isActive: true }]

For displayedColumns:

[ 'C1', 'C2' ]

Then I hide column 'C2' in the UI and the settings are stored to the local storage:

MyKey._columns: [{ id: 'C1', name: 'Name1', isActive: true }, { id:'C2', name: 'Name2', isActive: false }]

Looks good. Now when the constructor is called again, the column is still in the displayedColumns. Same constructor call (without any 'isActive').

For columns:

[{ id: 'C1', name: 'Name1', isActive: true }, { id:'C2', name: 'Name2', isActive: false }]

For displayedColumns:

[ 'C1', 'C2' ]

So, the right data is loaded into columns, but somehow overridden in displayedColumns. Seems like this could be a timing issue with the BehaviorSubject in the init function.

My temporary workaround is, to set the displayedColumns manually, directly after calling the constructor of TableData.

const columns = [{ id: 'C1', name: 'Name1' }, { id:'C2', name: 'Name2' }]; 
const table = new TableData(columns, { localStorageKey: 'myKey' });
table.displayedColumns = table.columns
      .filter(column => column.isActive)
      .map(column => column.id);