Dynamic Clarity DataGrid with Unknown Data Set

I am working with variable data sets and I can barely predetermine the data columns until the data is fetched from the API service. I have worked out a way to render the clarity datagrid ("@clr/angular": "4.0.8") dynamically as follows:

private fetchSiloData(uuid: string) {
    const sub = this.siloService.getSiloData(uuid).subscribe({
      next: resp => {
        this.siloData = resp;
         
        // extract columns from the data and mark the first 5 columns as visible for datagrid columns
        if (resp.length) {
          this.columns = Object.keys(resp[0]).map((key, index) => {
            if (index < 5) {
              return { name: key, hidden: false };
            }
            return { name: key, hidden: true };
          });
        }
      },

      complete: () => {
        if (sub) {
          sub.unsubscribe();
        }
      },
    });
  }

In my component html, I have the following:

<clr-datagrid>
  <clr-dg-column *ngFor="let col of columns" [clrDgField]="col.name">
    <ng-container *clrDgHideableColumn="{ hidden: col.hidden }">
      {{ col.name }}
    </ng-container>
  </clr-dg-column>

  <clr-dg-row *clrDgItems="let row of siloData" [clrDgItem]="row">
    <clr-dg-cell *ngFor="let col of columns">{{ row[col.name] }}</clr-dg-cell>
  </clr-dg-row>

  <clr-dg-footer>
    {{ pagination.firstItem + 1 }} - {{ pagination.lastItem + 1 }} of
    {{ pagination.totalItems }} rows
    <clr-dg-pagination #pagination [clrDgPageSize]="20"></clr-dg-pagination>
  </clr-dg-footer>
</clr-datagrid>

With the above, my expectation was to:

1. Get a neatly formatted datagrid as would if I had knowledge of my data columns
2. The clarity datagrid to automatically hide data cells corresponding to hidden columns
3. Selecting and unselecting columns to work.

However here is my result with a sample data source:

I even went ahead to create a pure pipe to filter out data cells with hidden columns and the effect of that is I now get a better initial view as far as cell count is concerned.

<clr-dg-row *clrDgItems="let row of siloData" [clrDgItem]="row">
    <clr-dg-cell *ngFor="let col of columns | visibleColumns">{{
      row[col.name]
    }}</clr-dg-cell>
</clr-dg-row>

How do I go about my need for a dynamically rendered datagrid but still be able to have the datagrid column selection functionality work as expected? Or rather, how do I go about extending the datagrid to cover my use case? Thank you in advance.