template

<div class="container-fluid">
  <div class="row">
    <div class="col-md-6">
<!--Owner Table below-->
      <div class="panel panel-default panel-table">
        <div class="panel-heading">
          <div class="row">
            <div class="col col-xs-6">
              <h2 class="panel-title">Owner Packages</h2>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <table class="table table-striped table-bordered table-list" *ngIf="tree">
            <thead>
              <tr>
                <th><em class="glyphicon glyphicon-cog"></em></th>
                <th>Package Name</th>
                <th>Last Modified</th>
                <th>Projects</th>
              </tr>
            </thead>
            <tbody *ngFor="let part of tree.owners let i = index;">
              <tr>
                <td align="center">
                  <a data-toggle="tooltip" title="Unshare Package" class="btn btn-danger"><em class="glyphicon glyphicon-remove-sign"></em></a>
                </td>
                <td>{{part.name}}</td>
                <td>{{part.LastModified}}</td>
                <td>  <li *ngFor="let project of part.projects;let i = index ">{{project.name}} <br/>
                  <ng-contrinaer *ngFor="let objects of project.objects;let $index=index;">
                      <div (click)="expandRow($index)"><i class="glyphicon glyphicon-chevron-right"></i> Package Objects</div>
                      <li data-toggle="tooltip" title="Download Package" class="glyphicon glyphicon-download-alt" (click)="downloadFiles(objects.Key)" *ngIf="$index === expandedIndex"> {{objects.Key)}}</li>
                  </ng-contrinaer>
                </li>
                </td>
              </tr>
            </tbody>
          </table>

        </div>
        <div class="panel-footer"  *ngIf="tree">
          <div class="row">
            <div class="col col-xs-4">No. of Packages: {{ tree.owners.length}}
            </div>
          </div>
        </div>
      </div>
    </div>
<!--Partner Table below-->
<div class="col-md-6">
      <div class="panel panel-default panel-table">
        <div class="panel-heading">
          <div class="row">
            <div class="col col-xs-6">
              <h2 class="panel-title ">Partner Packages</h2>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <table class="table table-striped table-bordered table-list" *ngIf="tree">
            <thead>
              <tr>
                <th>Package Name</th>
                <th>Last Modified</th>
                <th>Projects</th>
              </tr>
            </thead>
            <tbody *ngFor="let part of tree.partners let i = index;">
              <tr>
                <td>{{part.name}}</td>
                <td>{{part.LastModified}}</td>
                <td>  <li *ngFor="let project of part.projects;let i = index ">{{project.name}} <br/>
                  <ng-contrinaer *ngFor="let objects of project.objects;let $index=index;">
                      <div (click)="expandRow($index)"><i class="glyphicon glyphicon-chevron-right"></i> Package Objects</div>
                      <li data-toggle="tooltip" title="Download Package" class="glyphicon glyphicon-download-alt"  (click)="downloadFiles(objects.Key)" *ngIf="$index === expandedIndex"> {{objects.Key)}}</li>
                  </ng-contrinaer>
                </li>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="panel-footer"  *ngIf="tree">
          <div class="row">
            <div class="col col-xs-4 ">No. of Packages: {{tree.partners.length}}
            </div>
          </div>
        </div>
      </div>
    </div>