Dynamic Clarity DataGrid with Unknown Data Set - datagrid

Question

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:
Get a neatly formatted datagrid as would if I had knowledge of my data columns
The clarity datagrid to automatically hide data cells corresponding to hidden columns
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.