Skip to content Skip to sidebar Skip to footer
Home / Angular / Html / Html Table

Display Data In Html Table With Multi Level Grouping

Post a Comment
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:

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

Menu Halaman Statis

© 2022 - Html5 Manual