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

Question

I'm trying to create a table or data grid with dynamic row and column count in my NativeScript application. I have some product categories and some products in these categories. Products have some specifications with respect to its belonging category. Here is an example JSON for products in graphic cards category:

{
  "parts": [
    {
      "id": 1,
      "name": "GTX 1080",
      "stockCount": 10,
      "specifications": [
        {
          "id": 1,
          "name": "Memory",
          "value": "11 GB"
        },
        {
          "id": 2,
          "name": "Core Clock",
          "value": "1500 MHz"
        }
      ]
    },
    {
      "id": 2,
      "name": "RX 580",
      "stockCount": 8,
      "specifications": [
        {
          "id": 1,
          "name": "Memory",
          "value": "8 GB"
        },
        {
          "id": 2,
          "name": "Core Clock",
          "value": "1366 MHz"
        }
      ]
    }
  ]
}

Here is another example in CPU category:

{
  "parts": [
    {
      "id": 3,
      "name": "i5 7600K",
      "stockCount": 8,
      "specifications": [
        {
          "id": 3,
          "name": "Socket",
          "value": "LGA 1151"
        },
        {
          "id": 4,
          "name": "Frequency",
          "value": "3.8 GHz"
        },
        {
          "id": 5,
          "name": "L3 Cache",
          "value": "6 MB"
        }
      ]
    },
    {
      "id": 4,
      "name": "Ryzen 7 1700",
      "stockCount": 15,
      "specifications": [
        {
          "id": 3,
          "name": "Socket",
          "value": "AM4"
        },
        {
          "id": 4,
          "name": "Frequency",
          "value": "3.0 GHz"
        },
        {
          "id": 5,
          "name": "L3 Cache",
          "value": "16MB"
        }
      ]
    }
  ]
}

I want to show graphic cards as a table like this:

  Name     Stock    Memory    Core Clock
GTX 1080     10      11 GB     1500 MHz
 RX 580       8       8 GB     1366 MHz

and CPUs like this:

    Name      Stock    Socket    Frequency    L3 Cache
i5 7600K         8    LGA 1151    3.8 GHz        6 MB
Ryzen 7 1700    15    AM4         3.0 GHz       16 MB

I have tried RadListView with GridLayout but cannot do this. If specification count for all categories would be constant, I could easily create GridLayout with constant number of columns like this:

<GridLayout columns="*, auto, auto, auto, auto">...</GridLayout>

But arbitrary number of specifications put me into a challenge here.

Is there some way in NativeScript Angular to achieve this? I'm using 4.1.0 version of NativeScript.

Answer 1

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">

Answer 2

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

[columns]="'*, 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>