I am trying for a tree table using normal html table.
{
"policy": [
{
"id": "a1",
"name": "policy 1.1",
"categories": [
{
"id": "c1",
"name": "category 1.1",
"subCategories": [
{
"id": "s1",
"name": "subCategory 1.1"
},
{
"id": "s2",
"name": "subCategory 1.2"
}
]
},
{
"id": "c2",
"name": "category 1.2",
"subCategories": [
{
"id": "s5",
"name": "subCategory 2.1"
},
{
"id": "s6",
"name": "subCategory 2.2"
}
]
}
]
},
{
"id": "a2",
"name": "policy 1.2",
"categories": [
{
"id": "c4",
"name": "category 1.1",
"subCategories": [
{
"id": "s13",
"name": "subCategory 1.1"
}
]
},
{
"id": "c5",
"name": "category 1.2",
"subCategories": [
{
"id": "s17",
"name": "subCategory 2.1"
},
{
"id": "s18",
"name": "subCategory 2.2"
}
]
},
{
"id": "c6",
"name": "category 1.3",
"subCategories": [
{
"id": "s21",
"name": "subCategory 3.1"
}
]
}
]
}
]
}
I dont want to use any library.
ts file:
getAllAuditPolicies() {
this.policyService
.getAllPolicies()
.subscribe(data => {
this.dropdownData = data;
});
}
to open the category
open(i){
this.dropdownData1 = this.dropdownData[i].categories;
console.log("dataas1", this.dropdownData1);
}
to open the subcategory
subOpen(j){
this.dropdownData2 = this.dropdownData1[j].subCategories;
console.log("dataas2", this.dropdownData2);
}
HTML file:
<div class="container">
<div class="row">
<table class="table">
<tr class="panel-heading bgOrg">
<th class="th-font"> </th>
<th class="th-font">Name</th>
</tr>
<tr *ngFor='let data of dropdownData; let i=index' (click)="open(i)" >
<td >+</td>
<td>{{data.name}}</td>
</tr>
<tr *ngFor='let group of dropdownData1; let j=index' (click)="subOpen(j)">
<td>+</td>
<td>{{group.name}}</td>
</tr>
<tr *ngFor='let subgroup of dropdownData2; let k=index' >
<td>+</td>
<td>{{subgroup.name}}</td>
</tr >
<tr></tr>
</table>
</div>
</div>
Using this method, the table is showing details.
Problem:
but,The categories of policy1.1 is category1.1 and category1.2.it should show below the policy1.1 as nested. But if I click on policy1.1,Table is showing values below policy1.2(Expanding the values of policy1.1 below all policies).
Same problem is affecting for subcategories For reference stackblitz implementation is attaching,
What I want to do for solving this problem.
Can anybody help me??
Thanks in Advance
Check if this will work for you
https://stackblitz.com/edit/angular-gxeins?file=src%2Fapp%2Fapp.component.html
<table class="table">
<thead>
<tr>
<th></th>
<th>Id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<ng-container *ngFor='let policy of data.policy'>
<tr>
<td (click)="policy.expand=!policy.expand">+</td>
<td>{{policy.id}}</td>
<td>{{policy.name}}</td>
</tr>
<ng-container *ngIf="policy.expand && policy.categories && policy.categories.length>0">
<ng-container *ngFor='let category of policy.categories'>
<tr>
<td></td>
<td (click)="category.expand=!category.expand"> +</td>
<td>{{category.id}}</td>
<td>{{category.name}}</td>
</tr>
<ng-container *ngIf="category.expand && category.subCategories && category.subCategories.length>0">
<ng-container *ngFor='let subcategory of category.subCategories'>
<tr>
<td></td>
<td></td>
<td> +</td>
<td>{{subcategory.id}}</td>
<td>{{subcategory.name}}</td>
</tr>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</ng-container>
</tbody>
</table>
data = {
policy: [
{
id: "a1",
name: "policy 1.1",
expand:false,
categories: [
{
id: "c1",
name: "category 1.1",
expand:false,
subCategories: [
{
id: "s1",
name: "subCategory 1.1"
},
{
id: "s2",
name: "subCategory 1.2"
}
]
},
{
id: "c2",
name: "category 1.2",
expand:false,
subCategories: [
{
id: "s5",
name: "subCategory 2.1"
},
{
id: "s6",
name: "subCategory 2.2"
}
]
}
]
},
{
id: "a2",
name: "policy 1.2",
expand:false,
categories: [
{
id: "c4",
name: "category 1.1",
expand:false,
subCategories: [
{
id: "s13",
name: "subCategory 1.1"
}
]
},
{
id: "c5",
name: "category 1.2",
expand:false,
subCategories: [
{
id: "s17",
name: "subCategory 2.1"
},
{
id: "s18",
name: "subCategory 2.2"
}
]
},
{
id: "c6",
name: "category 1.3",
expand:false,
subCategories: [
{
id: "s21",
name: "subCategory 3.1"
}
]
}
]
}
]
};