add paging to the top of the table component
<div>
- <table mat-table [dataSource]="dataSource" class="table">
-
- <ng-container *ngFor="let element of displayedColumns" [cdkColumnDef]="element">
- <th mat-header-cell *matHeaderCellDef><label style="font-size: large">{{element}}</label></th>
- <td mat-cell *matCellDef="let row">{{row[element]}}</td>
- </ng-container>
-
- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
- <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-
- </table>
-
- <div fxLayout="row" fxLayoutAlign=" center">
+ <div fxLayout="row" fxLayoutAlign=" center" style="height: 40px;">
<div *ngIf="enablePaging">
<button mat-icon-button (click)="clickPreviousPage()">
<mat-icon>keyboard_arrow_left</mat-icon>
</mat-select>
</mat-form-field>
</div>
+ </div>
+
+ <table mat-table [dataSource]="dataSource" class="table">
+ <ng-container *ngFor="let element of displayedColumns" [cdkColumnDef]="element">
+ <th mat-header-cell *matHeaderCellDef><label style="font-size: large">{{element}}</label></th>
+ <td mat-cell *matCellDef="let row">{{row[element]}}</td>
+ </ng-container>
+
+ <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+ <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+
+ </table>
+
+
+ <div fxLayout="row" fxLayoutAlign=" center" style="height: 40px;">
+ <div *ngIf="enablePaging">
+ <button mat-icon-button (click)="clickPreviousPage()">
+ <mat-icon>keyboard_arrow_left</mat-icon>
+ </button>
+ Page: <label *ngIf="currentPage !== undefined">{{currentPage}}</label>
+ <label *ngIf="maxPage !== undefined"> - {{maxPage}}</label>
+ <button mat-icon-button (click)="clickNextPage()">
+ <mat-icon>keyboard_arrow_right</mat-icon>
+ </button>
</div>
</div>
+
+</div>
