CODEWITHSUNDEEP
htmlcssangular
Aakash Thakur
Aakash Thakur

Reputation: 3895

Vertical table with dynamic data

Seems to be the same requirement like AngularJS "Vertical" ng-repeat but solution doesn't work for *ngFor

I have this object array that I am trying to bind to an HTML table. Its format is something like below:

[
 {
   "Animal":"Dog",
   "Country":"France",
   "Food":"Tofu",
   "Car":"Nano",
   "Language":"TypeScript"
 }
]

Now this can simply be formatted in the default HTML horizontal table way like this:

<table>
  <tr>
    <th>Animal</th>
    <th>Country</th>
    <th>Food</th>
    <th>Car</th>
    <th>Language</th>
  </tr>
  <tr *ngFor="let data of datas">
    <td>{{data.Animal}}</td>
    <td>{{data.Country}}</td>
    <td>{{data.Food}}</td>
    <td>{{data.Car}}</td>
    <td>{{data.Language}}</td>
  </tr>
</table>

This would create table like below(Please ignore the data in the table;its just to give an idea.):

[1]: https://i.sstatic.net/VG

But how would I create a structure like this with dynamic data(kind of a vertical table): enter image description here

Upvotes: 3

Views: 6684

Answers (2)

Viktor Reinok
Viktor Reinok

Reputation: 130

Use ng-container if You have data structure similar to groups[].items[].name

So, if You want to add row

<table>
    <ng-container *ngFor="let group of groups">
        <tr>
            <td>{{group.name}}</td>
        </tr>
        <tr *ngFor="let item of group.items">
            <td>{{item.name}}</td>
        </tr>
    </ng-container>
</table>

Source: https://stackoverflow.com/a/44086855/1840185

Upvotes: 0

Ido Ganzer
Ido Ganzer

Reputation: 88

In Component:

this.arrayOfKeys = Object.keys(this.datas[0]);

html:

<table>
    <tr *ngFor="let key of arrayOfKeys">
        <th>{{key}}</th>
        <td *ngFor="let data of datas">
            {{data[key]}}
        </td>
    </tr>
</table>

Upvotes: 5

Related Questions