How to create a table in NativeScript with dynamic row and column count?

you can generate value dynamically and then bind it to GridLayout cloumns property something like this

<GridLayout [columns]="genCols(item)">

&

genCols(item){
    if(item.columns){
      return item.columns;
    }else{
      item.columns="*, auto";
      item.specifications.forEach((el)=>{
        item.columns+=",auto";
      })
      return item.columns
    }
}

if users can add specifications and specification count for each item is same then simpler way will be to use single variable and set its value on ngOnInit and update it on specification added like columns=genCol(items[0]) and then <GridLayout [columns]="columns">


For those looking for a solution strictly in the template, I used String​.prototype​.repeat() within the [columns] attribute:

[colums]="'*, auto' + ', auto'.repeat(parts.specifications.length)"

Full example:

<GridLayout [colums]="'*, auto, ' + 'auto, '.repeat(parts.specifications.length)">
    <Label col="0" [text]="parts.name"></Label>
    <Label col="1" [text]="parts.stockCount"></Label>
    <Label [col]="i" [text]="spec.value" *ngFor="let spec of parts.specifications; let i=index+2"></Label>
</GridLayout>