How to call "renderRows" on CdkTable from Angular Material CDK in Angular 11

This is probably just an understanding problem, but I can't figure out how to call renderRows() on my CdkTable.

If I were instead using MatTable, it appears that I could use ViewChild() to access the MatTable and call renderRows() on it this way:

@ViewChild(MatTable) table: MatTable<string>;

and to call renderRows on it

this.table.renderRows();

ViewChild seems to work well when using an existing class or when you want to use a Directive with a selector for cdk-table

However if my CDKTable is used like this:

<table cdk-table [dataSource]="dataSource">
  ...
</table>

How can I access it in order to call renderRows() on it?

I've included my component below for reference

import { Component, Input, Directive } from '@angular/core';
import { BehaviorSubject, Observable } from 'rxjs';
import { DataSource } from '@angular/cdk/collections';

@Component({
  selector: 'app-editable-dynamic-table',
  templateUrl: './editable-dynamic-table.component.html',
  styleUrls: ['./editable-dynamic-table.component.scss']
})

@Directive(
  { selector: '[cdk-table]' }
)

export class EditableDynamicTableComponent {
  @Input() tableData: any[] = [];
  @Input() displayedColumns;
  @Input() dataSchema;

  dataSource: TableDataSource | [] = [];

  ngOnInit() {
    this.dataSource = new TableDataSource(this.tableData);
  }

  addRow(): void {
    this.tableData.push(
      {
        exampleElement: null,
        exampleElement2: null
      }
    )
    // this is where I want to call renderRows();
  }
}

export class TableDataSource extends DataSource<any> {
  constructor(private tableData: any[]) {
    super();
  }
  data = new BehaviorSubject<any[]>(this.tableData);

  connect(): Observable<any[]> {
    return this.data;
  }

  disconnect() { }
}

And This is my template

<app-button [reversePrimary]="true" (click)="addRow()" content="Add New Row"></app-button>


<table cdk-table [dataSource]="dataSource">
  <ng-container cdkColumnDef="" *ngFor="let col of displayedColumns">
    <th cdk-header-cell *cdkHeaderCellDef>
      
    </th>
    <td cdk-cell *cdkCellDef="let element">
      <input type="" value="">
    </td>
  </ng-container>

  <tr cdk-header-row *cdkHeaderRowDef="displayedColumns"></tr>
  <tr cdk-row *cdkRowDef="let row; columns: displayedColumns;"></tr>
</table>