Dynamic column table in anguler js + Type scripts

I want to create following dynamic column table using anguler js.

According to the my requirement, column sets such as fruit, vegetables can change dynamically according to the data sets. I want to load data from json file.
ex:

[
{
"clusterID":"1",
"storeCode": "S2HK",
"storeName": "store 1",
"Vegetables":
{
"Ordered":"272",
"Delivery":"250",
"FR":"70%",
"Gap":"22"
},
"Fruit":
{
"Ordered":"300",
"Delivery":"250",
"FR":"60%",
"Gap":"50"
}
},
{
"clusterID":"1",
"storeCode": "SCCC",
"storeName": "store 2",
"Vegetables":
{
"Ordered":"500",
"Delivery":"500",
"FR":"100%",
"Gap":"0"
},
"Fruit":
{
"Ordered":"750",
"Delivery":"700",
"FR":"90%",
"Gap":"50"
}
}
]


I tried many ways, but unable to create dynamic table. How can I create this type of table ?

idownvotedbecau.se/nocode
– georgeawg
Jun 29 at 16:09

You need to show what you have tried and where you fail if you want someone to be able to reply to your question. Your question is a bit too large and you need to be a bit more specific if you want someone to spend time on an answering you, otherwise, no-one will know where to start really.
– Renaud Bompuis
Jun 29 at 21:08

1 Answer
1

You need to make the table structure like this:

<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th rowspan="2">Store</th>
<th rowspan="2">Store Name</th>
<th colspan="4">Vegetables</th>
<th colspan="4">Fruit</th>
</tr>
<tr>
<th>Ordered</th>
<th>Delivery</th>
<th>FR</th>
<th>Gap</th>
<th>Ordered</th>
<th>Delivery</th>
<th>FR</th>
<th>Gap</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let item of items">
<td>item.storeCode</td>
<td>item.storeName</td>
<td>item.Vegetables.Ordered</td>
<td>item.Vegetables.Delivery</td>
<td>item.Vegetables.FR</td>
<td>item.Vegetables.Gap</td>
<td>item.Fruit.Ordered</td>
<td>item.Fruit.Delivery</td>
<td>item.Fruit.FR</td>
<td>item.Fruit.Gap</td>
</tr>
</tbody>


You can see the working jsBin here

Thank you @Rohit Sharma. But what will happen when another category (like fruit) will available. According to the above structure we have to change the code.
– Prasad
Jun 29 at 11:16

Then you need to store the categories in an array and make the dynamic header accordingly.
– Rohit Sharma
Jun 29 at 11:48

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.