Table not rendering cell contents when columns change

Question

I have a table with a bunch of columns and I only need to show a few of them by default. I have a mat-select where I can toggle the additional column groups on or off. It calls a function that just updates the string[] holding the columns in a nearly identical manner to the example in the documentation.

However, when I add the columns I either have data cells or header cells that do not render.

Sometimes toggling the columns off and back on fixes it, but most of the time it doesnt.

I have no idea why it'd be doint this. My buildColumns function is something along these lines:

private buildColumns() {
    let columns = clone(this.baseColumns);
    
    if (some condition) {
       ..add columns
    }

 
    this.columns = columns;
 
    setTimeout(() => {
      this.table.renderRows();
    }, 500);
  }

The call to this.table.renderRows() doesnt seem to make a difference but I gave it a try.

Any ideas?