ng2-encrm-components/components/bs4-table/bs4-table.component.html

angular 2 components

<div id="container">
  <div class="row row200percent" [ngClass]="{'showDetails': table.selectedRow}">
    <div class="col-xs-6">
        <table class="table table-hover">
          <thead>
          <tr>
            <th *ngFor="let head of table.headers" (click)="sortBy(head)"
                style="cursor:pointer;">
              {{head.name}}
              <i class="material-icons" *ngIf="head.sort ===  sortType.ASC">keyboard_arrow_up</i>
              <i class="material-icons"
                 *ngIf="head.sort === sortType.DESC">keyboard_arrow_down</i>
            </th>
            <th *ngIf="!table.headers">Name</th>
            <th *ngIf="!table.headers">Age</th>
          </tr>
          </thead>
          <tbody>
          <!--<bs4-table-row *ngIf="rowsContent.length === 0" *ngFor="let row of table.rows" [data]="row">
              <bs4-table-cell>{{row}}</bs4-table-cell>
          </bs4-table-row>-->
          <ng-content></ng-content>
          </tbody>
        </table>
        <!--<pagination [totalItems]="table.page.totalElements"
            [firstText]="firstText" [lastText]="lastText" [nextText]="nextText" [previousText]="prevText"
            [(ngModel)]="table.page.number" (pageChanged)="changePage($event)" [maxSize]="3" class="pagination-sm"
            [boundaryLinks]="true" [rotate]="false"></pagination>-->
        <!-- *ngIf="table.page.totalElements < table.page.numOfRows"-->
    </div>
    <div class="col-xs-6">
      <bs4-table-details (goBack)="table.selectedRow = undefined">
        <ng-content select="[details]"></ng-content>
      </bs4-table-details>
    </div>
  </div>
</div>