How to create a nested table in Angular? - html

Question

So i want to create a nested table like in this picture ( where a table row can have a tree structure ) , but i'm lost and I have no idea how to do it.
what's the idea and how can i accomplish it?
for example i have this recursive tree and i want to put it inside an expandable table :
{
"id": 1,
"depth": 0,
"value": 3.5,
"name": "root",
"children": [
{
"id": 2,
"depth": 1,
"value": 2.5,
"name": "a",
"children": [
{
"id": 6,
"depth": 2,
"value": 2.0,
"name": "z",
"children": [],
"leafNode": true,
"rootNode": false
},
{
"id": 7,
"depth": 2,
"value": 2.3,
"name": "y",
"children": [],
"leafNode": true,
"rootNode": false
}
],
"leafNode": false,
"rootNode": false
},
{
"id": 4,
"depth": 1,
"value": 0.0,
"name": "c",
"children": [],
"leafNode": true,
"rootNode": false
},
{
"id": 3,
"depth": 1,
"value": 1.0,
"name": "b",
"children": [
{
"id": 5,
"depth": 2,
"value": 1.0,
"name": "d",
"children": [],
"leafNode": true,
"rootNode": false
}
],
"leafNode": false,
"rootNode": false
}
],
"leafNode": false,
"rootNode": true
}

Answer 1

you can use component recursion, you will create component take input object which is same type of children and in its template call it again and pass children of current object
ts file
#Input('obj') obj:any
template file
<tr>
<td>
{{obj.name}}
</td>
</tr>
<tr *ngFor="let child of obj.children , let i=index">
<td>
<app-children [obj]="child"></app-children>
</td>
</tr>
</table> ```

Answer 2

You can check third party components such as PrimeNg Tree table component
Tree table docs