Angular virtual scrolling table : ERROR Error: Could not find column with id "isActive"

Question

I am trying to implement virtual scrolling in an Angular table where the columns are dynamically fetched based on a function call. The table works fine without virtual scrolling, but when I try to incorporate virtual scrolling using cdk-virtual-scroll-viewport, I encounter an error.

Here's a snippet of my code:

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
    <table #internalTable mat-table [dataSource]="filteredList" matSort (matSortChange)="onToggleSort($event)">
        <ng-container *cdkVirtualFor="let col of columnConfig; let i = index;" [matColumnDef]="col.name">
            ....
        </ng-container>

        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr
            mat-row
            [class.active]="isActiveRow(index)"
            (mouseenter)="onMouseEnter(index)"
            (mouseleave)="onMouseLeave(index)"
            (click)="setClickedRow(index, row)"
            *matRowDef="let row; let index = index, columns: displayedColumns;"
            [ngStyle]="{'background-color': upKey === 'todoOverview' && row?.colorCode ? row.colorCode : '' }"
        ></tr>
    </table>
</cdk-virtual-scroll-viewport>

And my displayedColumns function:

  public get displayedColumns(): Array<string> {
    if (this.columnConfig) {
      return this.columnConfig.filter(column => column.enabled).map(column => column.name);
    } else {
      return [];
    }
  }

I'd appreciate guidance on resolving the error and successfully implementing virtual scrolling with dynamic columns