Display Data In HTML Table With Multi Level Grouping
I have to show some data in the HTML table by grouping using rowspan. Below is the expected GUI I have the JSON Data like below. JSON Data here Angular Code Copy
And then easily check if each Country, State and City is first in group like:
<tbody>
<tr *ngFor="let str in streets">
<td *ngIf="firstCountryInGroup(str)" [rowspan]="numberOfCountry(str)">
{{str.Country.CountryName}}
</td>
<td *ngIf="firstStateInGroup(str)" [rowspan]="numberOfStatse(str)">
{{str.State.CityName}}
</td>
<td *ngIf="firstCityInGroup(str)" [rowspan]="numberOfCities(str)">
{{str.City.CityName}}
</td>
<td>{{str.Street.Name}}<td>
<td>{{str.Street.Male}}<td>
<td>{{str.Street.Female}}<td>
<td>{{str.StreetOthers}}<td>
</tr>
</tbody>
Solution 2:
We need to have separate columns where we run a loop based on child or sibling - you will get the idea from the comments in the code below also
relevant TS:
<table class="table table-fixed" border="1">
<thead>
<tr>
<th>Country</th>
<th>State</th>
<th>City</th>
<th>Street</th>
<th>Male</th>
<th>Female</th>
<th>Others</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor="let country of Countries; let i = index">
<tr>
<!-- column 1 -->
<td>{{country.CountryName}}</td>
<!-- column 2 -->
<td>
<ng-container *ngFor="let state of country.States">
<tr>
<td> {{state.StateName}} </td>
</tr>
</ng-container>
</td>
<!-- column 3 -->
<td>
<ng-container *ngFor="let state of country.States">
<tr>
<td>
<ng-container *ngFor="let city of state.Cities">
<tr>
<td> {{city.CityName}} </td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</td>
<!-- column 4 -->
<td>
<ng-container *ngFor="let state of country.States">
<tr>
<td>
<ng-container *ngFor="let city of state.Cities">
<tr>
<td>
<ng-container *ngFor="let street of city.Streets">
<tr>
<td>
{{street.StreetName}}
</td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</td>
<!-- column 5 -->
<td>
<ng-container *ngFor="let state of country.States">
<tr>
<td>
<ng-container *ngFor="let city of state.Cities">
<tr>
<td>
<ng-container *ngFor="let street of city.Streets">
<tr>
<td>
{{street.Male}}
</td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</td>
<!-- column 6 -->
<td>
<ng-container *ngFor="let state of country.States">
<tr>
<td>
<ng-container *ngFor="let city of state.Cities">
<tr>
<td>
<ng-container *ngFor="let street of city.Streets">
<tr>
<td>
{{street.Female}}
</td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</td>
<!-- column 7 -->
<td>
<ng-container *ngFor="let state of country.States">
<tr>
<td>
<ng-container *ngFor="let city of state.Cities">
<tr>
<td>
<ng-container *ngFor="let street of city.Streets">
<tr>
<td>
{{street.Others}}
</td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</td>
</tr>
</ng-container>
</tbody>
</table>
working stackblitz here
Solution 3:
With this solution
https://stackblitz.com/edit/angular-gbhcun?file=src/app/app.component.html
Add below style to meet exact output
table, th, td {
border: 1px solid black;
}
Post a Comment for "Display Data In HTML Table With Multi Level Grouping"