tree table using normal html tree table- angular 2+

Question

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">&nbsp;</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,

stackblitz

What I want to do for solving this problem.

Can anybody help me??

Thanks in Advance

hi @AngelReji, i have developed an angular plugin angular-tree-table for this, here is the demo anjnkmr.github.io/angular-tree-table — anjnkmr
– anjnkmr, Commented Apr 27, 2020 at 6:45

Ravin Singh D · Accepted Answer · 2020-02-03 13:40:33Z

1

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"
              }
            ]
          }
        ]
      }
    ]
  };

answered Feb 3, 2020 at 13:40

Ravin Singh D

95310 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Angel Reji Over a year ago

table row end is not correctly aligned... What I will do for<tr-row-end>

Ravin Singh D Over a year ago

@AngelReji how you expect to align? add some images. But the alignment we can fix using colspan & CSS. should not be a problem

Angel Reji Over a year ago

Can I use this by the method which I used?? which means by using values from three different method(dropdownData ,dropdownData1,dropdownData2). Instead of taking category from policy(policy.categories), I need to pass index and want to get value and wanna display variables below each policies.

Angel Reji Over a year ago

You get me, what I am trying to convey??

Ravin Singh D Over a year ago

You can. after clicking policy set flag for loading and when data came, keep the data as an array (dropdownData1). then in ngFor you can filter the item which belong to the clicked policy.

|

Collectives™ on Stack Overflow

tree table using normal html tree table- angular 2+

1 Answer 1

10 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related