-
Koolapong Kongpitak authored0201e7b8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<div class="mat-elevation-z2">
<div class="table-container" [ngStyle]="{'max-height': maxHeight}">
<mat-table #table [dataSource]="dataList" matSort>
<ng-container [matColumnDef]="header.FIELD_NAME" *ngFor="let header of headerList">
<mat-header-cell *matHeaderCellDef mat-sort-header [ngClass]="{'tblHeader': true}" [disabled]="!sortTable"
[ngStyle]="{'flex-basis': header.WIDTH}">
{{header.TITLE}}</mat-header-cell>
<mat-cell *matCellDef="let row" [ngStyle]="{
'text-align': header.ALIGN,
'justify-content': (header.ALIGN.toUpperCase() === 'RIGHT' ? 'flex-end' :
header.ALIGN.toUpperCase() === 'LEFT' ? 'flex-start' : header.ALIGN),
'flex-basis': header.WIDTH
}">
<ng-template [ngIf]="isCustomContent">
<ng-template *ngTemplateOutlet="templateRef; context: {header: header, data: row}"></ng-template>
</ng-template>
<ng-template [ngIf]="!isCustomContent">
<div *ngIf="header.FIELD_NAME == 'EDIT'; then showEdit; else showData"></div>
<ng-template #showEdit>
<button type="button" (click)="editBtnClick(row)">Edit</button>
</ng-template>
<ng-template #showData>
<div *ngIf="header.DATA_TYPE == 'number'; then showNumber; else showNormal"></div>
<ng-template #showNumber>
{{row[header.FIELD_NAME] | number: '1.0-2'}}
</ng-template>
<ng-template #showNormal>
<div *ngIf="header.DATA_TYPE == 'date'; then showDate; else showNormal"></div>
<ng-template #showDate>
{{row[header.FIELD_NAME] | dateFormat}}
</ng-template>
<ng-template #showNormal>
{{row[header.FIELD_NAME]}}
</ng-template>
</ng-template>
</ng-template>
</ng-template>
</mat-cell>
</ng-container>
<mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
<mat-row matRipple *matRowDef="let row; columns: displayedColumns;" (click)="rowClick ? setRowClick(row) : null"
[ngClass]="{'row-highlight': setHighlight && compareRow(row, clickedRow)}"></mat-row>
</mat-table>
</div>
<mat-progress-bar mode="indeterminate" *ngIf="showProgressBar"></mat-progress-bar>
<div class="norecfound" *ngIf="showNoRecord">No record found</div>
<mat-paginator [hidden]="!showPagination" [pageSizeOptions]="[10, 20, 50, 100]" showFirstLastButtons></mat-paginator>
</div>