Customizing data structure as table

Question

I have a question about tree component. Is it possible to make my tree component like a table ? Here is what i exactly want:

Here is some snippet from example of documentation:

nodes = [
    {
      id: 1,
      name: "Санхүү",
      children: [{ id: 2, name: "child1" }, { id: 3, name: "child2" }]
    },
    {
      id: 4,
      name: "Санхүүгийн бус",
      children: [
        { id: 5, name: "Данс нээх харилцах" },
        {
          id: 6,
          name: "Карт захиалах",
          children: [{ id: 7, name: "subsub" }]
        }
      ]
    }
  ];

Answer 1

I think that the best aproach is create a table with the nodes. For this we use the variable "data" and a recursive function.

data:any[]=[]
  getData(data:any[],index,nodes)
  {
    nodes.forEach(x=>{
      x.level=index
      data.push(x)
      if (x.children && x.open)
        this.getData(data,index+1,x.children)
    })
    return data;
  }

See that in "data" we has the nodes and a "level" to allow us to know in wich level are our node. If we has an .html like

<table>
  <tr *ngFor="let item of data">
    <td [style.padding-left]="(2*item.level)+'rem'">
      <button *ngIf="item.children" (click)="click(item)">+</button>
      {{item.name}}</td>
  </tr>
</table>

When we make a click we call to the function

click(item)
  {
    item.open=!item.open;
    this.data=[];
    this.getData(this.data,0,this.nodes)
  }

Really is an ugly example, but this stackblitz show the table