| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one or more |
| contributor license agreements. See the NOTICE file distributed with |
| this work for additional information regarding copyright ownership. |
| The ASF licenses this file to You under the Apache License, Version 2.0 |
| (the "License"); you may not use this file except in compliance with |
| the License. You may obtain a copy of the License at |
| |
| http://www.apache.org/licenses/LICENSE-2.0 |
| |
| Unless required by applicable law or agreed to in writing, software |
| distributed under the License is distributed on an "AS IS" BASIS, |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. |
| See the License for the specific language governing permissions and |
| limitations under the License. |
| --> |
| |
| <div class="mat-content"> |
| <table td-data-table> |
| <thead> |
| <tr td-data-table-column-row> |
| <th td-data-table-column |
| *ngFor="let column of _columns" |
| [numeric]="column.numeric" |
| [sortable]="sortable" |
| [name]="column.name" |
| [active]="currentSort.sortColumn === column.name" |
| [sortOrder]="currentSort.sortColumn === column.name ? currentSort.sortDirection : ''" |
| (sortChange)="sortChanged($event)"> |
| {{column.label}} |
| </th> |
| <th td-data-table-column *ngIf="actionColumn"></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr td-data-table-row *ngFor="let row of data?.data"> |
| <ng-container *ngFor="let column of _columns"> |
| <td td-data-table-cell [numeric]="column.numeric" *ngIf="!isBoolean(row[column.name])"> |
| {{column.format ? column.format(row[column.name]) : row[column.name]}} |
| </td> |
| <td td-data-table-cell *ngIf="isBoolean(row[column.name])"> |
| <mat-icon *ngIf="row[column.name]">check</mat-icon> |
| <mat-icon *ngIf="!row[column.name]">close</mat-icon> |
| </td> |
| </ng-container> |
| <td td-data-table-cell (click)="actionCellClick(row)" *ngIf="actionColumn"> |
| <button mat-button class="mat-accent">{{ actionColumnLabel | translate}}</button> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| |
| <div class="mat-padding" *ngIf="!hasData && !loading" layout="row" layout-align="center center"> |
| <h3 translate>No results to display.</h3> |
| </div> |
| |
| <div class="mat-padding" *ngIf="loading" layout="row" layout-align="center center"> |
| <h3 translate>Fetching results...</h3> |
| </div> |
| |
| <td-paging-bar #pagingBar |
| *ngIf="pageable" |
| [pageSize]="currentPage.size" |
| [total]="data?.totalElements" |
| (change)="page($event)"> |
| <span hide-xs translate>Rows per page</span> |
| <mat-select [style.width.px]="50" [(ngModel)]="currentPage.size"> |
| <mat-option *ngFor="let size of pageSizes" [value]="size"> |
| {{size}} |
| </mat-option> |
| </mat-select> |
| {{pagingBar.range}} <span hide-xs translate>of</span><span> {{pagingBar.total}}</span> |
| </td-paging-bar> |
| </div> |