How to create a nested table in Angular?-CodePudding

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
}

CodePudding user response：

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> ```

CodePudding user response：

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