ekangularbase

<div *ngIf="tableType === ''"> <div> <p-table #dt [columns]="columns" [value]="value" [paginator]="paginator" [rows]="rows" [loading]="loading" [rowsPerPageOptions]="rowsPerPageOptions" [pageLinks]="pageLinks" [responsive]="responsive" [sortMode]="sortMode" [scrollable]="scrollable" [resizableColumns]="resizableColumns" [columnResizeMode]="columnResizeMode" styleClass="ui-etable" [selectionMode]="selectionMode" [(selection)]="selection" [scrollHeight]="scrollHeight" (onFilter)="onFilter($event)"> <ng-template pTemplate="caption"> <div class="ui-header-global-filter"> <i class="pi pi-bars show-menu-button" (click)="op1.show($event)"></i>  </div> </ng-template> <ng-template pTemplate="colgroup" let-columns> <colgroup> <ng-container *ngFor="let col of func"> <col *ngIf="col.visible" style="width:30px"> </ng-container> <ng-container *ngFor="let col of columns" [ngSwitch]="col.widthType"> <ng-container *ngSwitchCase="'%'"> <col *ngIf="col.visible" [style.width.%]="col.width"></ng-container> <ng-container *ngSwitchDefault> <col *ngIf="col.visible" [style.width.px]="col.width"></ng-container> </ng-container> </colgroup> </ng-template> <ng-template pTemplate="header" let-columns> <ng-container *ngFor="let colHeaderRow of colHeader"> <tr> <ng-container *ngFor="let col of func"> <th *ngIf="col.visible"> <span></span> </th> </ng-container> <ng-container *ngFor="let colH of colHeaderRow"> <th *ngIf="colH.colspan > 0" [attr.colspan]="colH.colspan"> <span>{{colH.display}}</span> </th> </ng-container> </tr> </ng-container> <tr> <ng-container *ngFor="let col of func" [ngSwitch]="col.function"> <ng-container *ngSwitchCase="'onRowSelect'"> <th *ngIf="col.visible" rowspan="2" class="{{'vertical-text-header ' + col.headerCssClass}}" pResizableColumn> <span class="vertical-text-header-span">Detail</span> </th> </ng-container> <ng-container *ngSwitchCase="'isSelected'"> <th *ngIf="col.visible" rowspan="2" class="{{col.headerCssClass}}" pResizableColumn> <p-checkbox binary="true" (click)="emitonSelectAllClickClick(col, 'onSelectAllClick')" class="{{col.class}}" [(ngModel)]="selectAll"></p-checkbox> </th> </ng-container> <ng-container *ngSwitchDefault> <th *ngIf="col.visible" rowspan="2" class="{{'vertical-text-header ' + col.headerCssClass}}" pResizableColumn> <span class="vertical-text-header-span">{{col.header}}</span> </th> </ng-container> </ng-container> <ng-container *ngFor="let col of columns"> <th *ngIf="col.visible && !col.isSubObject" [pSortableColumn]="col.field" pResizableColumn class="{{col.headerClass}}" [pSortableColumnDisabled]="col.sortableColumnDisabled === true"> {{col.header}} <p-sortIcon [field]="col.field"></p-sortIcon> </th> <th *ngIf="col.visible && col.isSubObject" [pSortableColumn]="col.sortFeild" pResizableColumn class="{{col.headerClass}}" [pSortableColumnDisabled]="col.sortableColumnDisabled === true"> {{col.header}} <p-sortIcon [field]="col.sortFeild"></p-sortIcon> </th> </ng-container> </tr> <tr *ngIf="!defaultHideFilter"> <ng-container *ngFor="let col of columns" [ngSwitch]="col.searchType"> <th *ngIf="col.visible && !col.isSubObject"> <input *ngSwitchCase="'text'" placeholder="Filter" pInputText type="text" [ngModel]="col.searchText" (input)="dt.filter($event.target.value, col.field, 'contains');seachTextChange($event);"> <p-multiSelect *ngSwitchCase="'multiSelect'" [options]="col.headerSearchOptions" [filter]="true" styleClass="ui-column-filter" [style]="{'width':'100%'}" defaultLabel="Select" (onChange)="dt.filter($event.value, col.field, 'in')" appendTo="body"></p-multiSelect> <p-dropdown *ngSwitchCase="'boolean'" [options]="boolHeaderOption" (onChange)="dt.filter($event.value, col.field, 'equals')" styleClass="header-bool-filter" placeholder="Filter" [showClear]="true" appendTo="body"> </p-dropdown> </th> <th *ngIf="col.visible && col.isSubObject"> <input *ngSwitchCase="'text'" placeholder="Filter" pInputText type="text" [ngModel]="col.searchText" (input)="dt.filter($event.target.value, col.sortFeild, 'contains');seachTextChange($event);"> <p-multiSelect *ngSwitchCase="'multiSelect'" [options]="col.headerSearchOptions" [filter]="true" styleClass="ui-column-filter" [style]="{'width':'100%'}" defaultLabel="Select" (onChange)="dt.filter($event.value, col.sortFeild, 'in')" appendTo="body"></p-multiSelect> <p-dropdown *ngSwitchCase="'boolean'" [options]="boolHeaderOption" (onChange)="dt.filter($event.value, col.sortFeild, 'equals')" styleClass="header-bool-filter" placeholder="Filter" [showClear]="true" appendTo="body"> </p-dropdown> </th> </ng-container> </tr> </ng-template> <ng-template pTemplate="body" let-rowData let-columns="columns"> <tr [pSelectableRow]="rowData"> <ng-container *ngFor="let col of func" [ngSwitch]="col.funcType"> <ng-container *ngSwitchCase="'fix'"> <td *ngIf="col.visible && col.function === 'onRowSelect'" class="ui-etable-func"> <span class="ui-column-title">{{col.header}}</span> <button class="{{emitClassChange(rowData, col) + ' ' + col.class}}" type="button" pButton *ngIf="emitFuncCondition(rowData, col)" (click)="emitOnRowClick(rowData, col.function)" icon="pi pi-external-link"></button> </td> <td *ngIf="col.visible && col.function !== 'onRowSelect'" class="ui-etable-func"> <span class="ui-column-title">{{col.header}}</span> <button class="{{emitClassChange(rowData, col) + ' ' + col.class}}" type="button" pButton *ngIf="emitFuncCondition(rowData, col)" (click)="emitOnRowClick(rowData, col.function)" icon="{{emitIconChange(rowData, col)}}"></button> </td> </ng-container> <ng-container *ngSwitchCase="'checkbox'"> <td *ngIf="col.visible" class="ui-etable-func"> <span class="ui-column-title">{{col.header}}</span> <p-checkbox binary="true" (click)="emitOnRowClick(rowData, col.function)" class="{{col.class}}" [(ngModel)]="rowData['isSelected']"></p-checkbox> </td> </ng-container> <ng-container *ngSwitchCase="'hasChanges'"> <td *ngIf="col.visible" class="ui-etable-func"> <app-audit-trail-list [rowID]="rowData['id']" [entityName]="strTableName" [columns]="columns" *ngIf="rowData['hasChanges']" [columnList]="logColumnList"> </app-audit-trail-list> </td> </ng-container> <ng-container *ngSwitchCase="'ProgressSpinner'"> <td *ngIf="col.visible" class="ui-etable-func"> <p-progressSpinner styleClass="etable-custom-spinner" *ngIf="emitFuncCondition(rowData, col)" strokeWidth="4" animationDuration=".5s"></p-progressSpinner> </td> </ng-container> </ng-container> <ng-container *ngFor="let col of columns"> <ng-container *ngIf="col.editable; else notEditable"> <ng-container [ngSwitch]="col.dataType"> <ng-container *ngSwitchCase="'dropdown'"> <td *ngIf="col.visible" class="{{col.class}}"> <p-dropdown [options]="col.dropdownOptions" placeholder="Please Select" [baseZIndex]="10003" [showClear]="col.dropdownShowClear" [(ngModel)]="rowData[col.field]" filter="true" appendTo="body"> </p-dropdown> </td> </ng-container> <ng-container *ngSwitchCase="'number_General'"> <ng-container *ngIf="emitTextBoxCondition(rowData, col, value)"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <input pInputText type="text" [(ngModel)]="rowData[col.field]" placeholder="{{col.placeholder}}" currencyMask [options]="{ prefix: '', thousands: ',', precision: col.decimalPlace, allowNegative: col.allowNegative }" class="{{'ui-inputtext currency-mask ' + col.class}}" maxlength="{{col.maxlength}}" (focusout)="emitOnCellChanged($event, rowData, col.field)" (focus)="emitOnCellFocus($event, rowData, col.field)" (keypress)="emitOnCellKeyPress($event, rowData, col.field)"> </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <input pInputText type="text" [ngModel]="rowData[col.field][col.subField]" placeholder="{{col.placeholder}}" currencyMask [options]="{ prefix: '', thousands: ',', precision: col.decimalPlace, allowNegative: col.allowNegative }" class="{{'ui-inputtext currency-mask ' + col.class}}" maxlength="{{col.maxlength}}" (focusout)="emitOnCellChanged($event, rowData, col.field + '.' + col.subField)" (focus)="emitOnCellFocus($event, rowData, col.field + '.' + col.subField)" (keypress)="emitOnCellKeyPress($event, rowData, col.field)"> </td> </ng-container> <ng-container *ngIf="!emitTextBoxCondition(rowData, col, value)"> <td *ngIf="col.visible && !col.isSubObject" class="etable-amount-general"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] | number: '1.0-5'}} </td> <td *ngIf="col.visible && col.isSubObject" class="etable-amount-general"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField] | number: '1.0-5') : ''}} </td> </ng-container> </ng-container> <ng-container *ngSwitchCase="'amount_General'"> <ng-container *ngIf="emitTextBoxCondition(rowData, col, value)"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <input pInputText type="text" [(ngModel)]="rowData[col.field]" placeholder="{{col.placeholder}}" currencyMask [options]="{ prefix: '', thousands: ',', precision: '2', allowNegative: col.allowNegative }" class="{{'ui-inputtext currency-mask ' + col.class}}" maxlength="{{col.maxlength}}" (focusout)="emitOnCellChanged($event, rowData, col.field)" (focus)="emitOnCellFocus($event, rowData, col.field)" (keypress)="emitOnCellKeyPress($event, rowData, col.field)"> </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <input pInputText type="text" [ngModel]="rowData[col.field][col.subField]" placeholder="{{col.placeholder}}" currencyMask [options]="{ prefix: '', thousands: ',', precision: '2', allowNegative: col.allowNegative }" class="{{'ui-inputtext currency-mask ' + col.class}}" maxlength="{{col.maxlength}}" (focusout)="emitOnCellChanged($event, rowData, col.field + '.' + col.subField)" (focus)="emitOnCellFocus($event, rowData, col.field + '.' + col.subField)" (keypress)="emitOnCellKeyPress($event, rowData, col.field)"> </td> </ng-container> <ng-container *ngIf="!emitTextBoxCondition(rowData, col, value)"> <td *ngIf="col.visible && !col.isSubObject" class="etable-amount-general"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] | number: '1.2-2'}} </td> <td *ngIf="col.visible && col.isSubObject" class="etable-amount-general"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField] | number: '1.2-2') : ''}} </td> </ng-container> </ng-container> <ng-container *ngSwitchDefault> <ng-container *ngIf="emitTextBoxCondition(rowData, col, value)"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <input pInputText type="text" [(ngModel)]="rowData[col.field]" placeholder="{{col.placeholder}}" class="{{col.class}}" (focusout)="emitOnCellChanged($event, rowData, col.field)" (focus)="emitOnCellFocus($event, rowData, col.field)" maxlength="{{col.maxlength}}" (keypress)="emitOnCellKeyPress($event, rowData, col.field)"> </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <input pInputText type="text" [(ngModel)]="rowData[col.field][col.subField]" placeholder="{{col.placeholder}}" class="{{col.class}}" (focusout)="emitOnCellChanged($event, rowData, col.field + '.' + col.subField)" (focus)="emitOnCellFocus($event, rowData, col.field + '.' + col.subField)" maxlength="{{col.maxlength}}" (keypress)="emitOnCellKeyPress($event, rowData, col.field)"> </td> </ng-container> <ng-container *ngIf="!emitTextBoxCondition(rowData, col, value)"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <span class="{{col.customizeFormat}}">{{rowData[col.field]}}</span> </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <span class="{{col.customizeFormat}}">{{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField]) : ''}}</span> </td> </ng-container> </ng-container> </ng-container> </ng-container> <ng-template #notEditable> <ng-container [ngSwitch]="col.dataType"> <ng-container *ngSwitchCase="'boolean'"> <td *ngIf="col.visible && !col.isSubObject" class="{{'etable-td-checkmark ' + emitClassChange(rowData, col) + ' ' + col.class}}"> <span class="ui-column-title">{{col.header}}</span> <i *ngIf="rowData[col.field] === 'True' || rowData[col.field] === true" class="fa fa-check etable-checkmark-icon"></i> </td> <td *ngIf="col.visible && col.isSubObject" class="{{'etable-td-checkmark ' + emitClassChange(rowData, col) + ' ' + col.class}}"> <span class="ui-column-title">{{col.header}}</span> <span *ngIf="rowData[col.field]"> <i *ngIf="rowData[col.field][col.subFeild] === 'True' || rowData[col.field][col.subFeild] === true" class="fa fa-check etable-checkmark-icon"></i> </span> </td> </ng-container> <ng-container *ngSwitchCase="'percent'"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] | percent}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField] | percent) : ''}} </td> </ng-container> <ng-container *ngSwitchCase="'json'"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] | json: col.customizeFormat}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField] | json: col.customizeFormat) : ''}} </td> </ng-container> <ng-container *ngSwitchCase="'number'"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] | number: col.customizeFormat}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField] | number: col.customizeFormat) : ''}} </td> </ng-container> <ng-container *ngSwitchCase="'number_General'"> <td *ngIf="col.visible && !col.isSubObject" class="{{'etable-number-general ' + emitClassChange(rowData, col) + ' ' + (col.class || '')}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] !== null ? (rowData[col.field] | number: (col.customizeFormat || '1.0-5')) : (0 | number: (col.customizeFormat || '1.0-5'))}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{'etable-number-general ' + emitClassChange(rowData, col) + ' ' + (col.class || '')}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null && rowData[col.field][col.subField] !== null) ? (rowData[col.field][col.subField] | number: (col.customizeFormat || '1.0-5')) : (0 | number: (col.customizeFormat || '1.0-5'))}} </td> </ng-container> <ng-container *ngSwitchCase="'amount_General'"> <td *ngIf="col.visible && !col.isSubObject" class="{{'etable-amount-general ' + emitClassChange(rowData, col) + ' ' + (col.class || '')}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] !== null ? (rowData[col.field] | number: '1.2-2') : '0.00'}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{'etable-amount-general ' + emitClassChange(rowData, col) + ' ' + (col.class || '')}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null && rowData[col.field][col.subField] !== null) ? (rowData[col.field][col.subField] | number: '1.2-2') : '0.00'}} </td> </ng-container> <ng-container *ngSwitchCase="'int_General'"> <td *ngIf="col.visible && !col.isSubObject" class="{{'etable-int-general ' + emitClassChange(rowData, col) + ' ' + (col.class || '')}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] !== null ? (rowData[col.field] | number: '1.0-0') : ''}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{'etable-int-general ' + emitClassChange(rowData, col) + ' ' + (col.class || '')}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null && rowData[col.field][col.subField] !== null) ? (rowData[col.field][col.subField] | number: '1.0-0') : ''}} </td> </ng-container> <ng-container *ngSwitchCase="'currency'"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] | currency: col.customizeFormat}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField] | currency: col.customizeFormat) : ''}} </td> </ng-container> <ng-container *ngSwitchCase="'uppercase'"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] | uppercase}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField] | uppercase) : ''}} </td> </ng-container> <ng-container *ngSwitchCase="'lowercase'"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] | lowercase}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField] | lowercase) : ''}} </td> </ng-container> <ng-container *ngSwitchCase="'DateTime'"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] === null ? '' : (rowData[col.field].substring(0,4) === '0001' ? '' : rowData[col.field] | date: col.customizeFormat)}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] === null || rowData[col.field][col.subField] === null ? '' : (rowData[col.field][col.subField].substring(0,4) === '0001' ? '' : rowData[col.field][col.subField] | date: col.customizeFormat)}} </td> </ng-container> <ng-container *ngSwitchCase="'Date_General'"> <td *ngIf="col.visible && !col.isSubObject" class="{{emitClassChange(rowData, col) + ' ' + (col.class || '') + ' etable-datetime-general'}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] === null ? '' : (rowData[col.field].substring(0,4) === '0001' ? '' : rowData[col.field] | date: 'yyyy-MM-dd')}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{emitClassChange(rowData, col) + ' ' + (col.class || '') + ' etable-datetime-general'}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] === null || rowData[col.field][col.subField] === null ? '' : (rowData[col.field][col.subField].substring(0,4) === '0001' ? '' : rowData[col.field][col.subField] | date: 'yyyy-MM-dd')}} </td> </ng-container> <ng-container *ngSwitchCase="'Date_ToLocal_General'"> <td *ngIf="col.visible && !col.isSubObject" class="{{emitClassChange(rowData, col) + ' ' + (col.class || '') + ' etable-datetime-general'}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] === null ? '' : (rowData[col.field].substring(0,4) === '0001' ? '' : rowData[col.field] + 'Z' | date: 'yyyy-MM-dd')}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{emitClassChange(rowData, col) + ' ' + (col.class || '') + ' etable-datetime-general'}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] === null || rowData[col.field][col.subField] === null ? '' : (rowData[col.field][col.subField].substring(0,4) === '0001' ? '' : rowData[col.field][col.subField] + 'Z' | date: 'yyyy-MM-dd')}} </td> </ng-container> <ng-container *ngSwitchCase="'DateTime_ToLocal_General'"> <td *ngIf="col.visible && !col.isSubObject" class="{{emitClassChange(rowData, col) + ' ' + (col.class || '') + ' etable-datetime-general'}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] === null ? '' : (rowData[col.field].substring(0,4) === '0001' ? '' : rowData[col.field] + 'Z' | date: 'yyyy-MM-dd HH:mm:ss')}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{emitClassChange(rowData, col) + ' ' + (col.class || '') + ' etable-datetime-general'}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field] === null || rowData[col.field][col.subField] === null ? '' : (rowData[col.field][col.subField].substring(0,4) === '0001' ? '' : rowData[col.field][col.subField] + 'Z' | date: 'yyyy-MM-dd HH:mm:ss')}} </td> </ng-container> <ng-container *ngSwitchCase="'customType'"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <span class="{{col.customizeFormat}}">{{rowData[col.field]}}</span> </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <span class="{{col.customizeFormat}}">{{(rowData[col.field] && rowData[col.field] !== null) ? (rowData[col.field][col.subField]) : ''}}</span> </td> </ng-container> <ng-container *ngSwitchCase="'array'"> <td *ngIf="col.visible && !col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <span class="{{col.customizeFormat}}" *ngFor="let item of rowData[col.field]"> {{item}}</span> </td> <td *ngIf="col.visible && col.isSubObject" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <ng-container *ngIf="rowData[col.field]"> <span class="{{col.customizeFormat}}" *ngFor="let item of rowData[col.field][col.subField]"> {{item}}</span> </ng-container> </td> </ng-container> <ng-container *ngSwitchDefault> <td *ngIf="col.visible && !col.isSubObject" class="{{emitClassChange(rowData, col) + ' ' + col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData[col.field]}} </td> <td *ngIf="col.visible && col.isSubObject" class="{{emitClassChange(rowData, col) + ' ' + col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{(rowData[col.field] && rowData[col.field] !== null) ? rowData[col.field][col.subField] : ''}} </td> </ng-container> </ng-container> </ng-template> </ng-container> </tr> </ng-template> <ng-template pTemplate="footer"> <tr *ngFor="let rowData of footerObjectlist"> <ng-container *ngFor="let col of func" [ngSwitch]="col.funcType"> <td *ngIf="col.visible" class="ui-etable-func"></td> </ng-container> <ng-container *ngFor="let col of rowData.config" [ngSwitch]="col.dataType"> <ng-container *ngSwitchCase="'percent'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] | percent}} </td> </ng-container> <ng-container *ngSwitchCase="'json'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] | json: col.customizeFormat}} </td> </ng-container> <ng-container *ngSwitchCase="'number'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] | number: col.customizeFormat}} </td> </ng-container> <ng-container *ngSwitchCase="'number_General'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{'etable-number-general-footer ' + (col.class || '') + ' ' + emitClassChange(rowData.data, col)}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] !== null ? (rowData.data[col.field] | number: (col.customizeFormat || '1.0-5')) : (0 | number: (col.customizeFormat || '1.0-5'))}} </td> </ng-container> <ng-container *ngSwitchCase="'amount_General'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{'etable-amount-general-footer ' + (col.class || '') + ' ' + emitClassChange(rowData.data, col)}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] !== null ? (rowData.data[col.field] | number: '1.2-2') : '0.00'}} </td> </ng-container> <ng-container *ngSwitchCase="'int_General'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{'etable-int-general-footer ' + (col.class || '') + ' ' + emitClassChange(rowData.data, col)}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] !== null ? (rowData.data[col.field] | number: '1.0-0') : '0'}} </td> </ng-container> <ng-container *ngSwitchCase="'currency'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] | currency: col.customizeFormat}} </td> </ng-container> <ng-container *ngSwitchCase="'uppercase'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] | uppercase}} </td> </ng-container> <ng-container *ngSwitchCase="'lowercase'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] | lowercase}} </td> </ng-container> <ng-container *ngSwitchCase="'DateTime'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] | date: col.customizeFormat}} </td> </ng-container> <ng-container *ngSwitchCase="'Date_General'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class + ' etable-datetime-general-footer'}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field] | date: 'yyyy-MM-dd'}} </td> </ng-container> <ng-container *ngSwitchCase="'customType'"> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> <span class="{{col.customizeFormat}}">{{rowData.data[col.field]}}</span> </td> </ng-container> <ng-container *ngSwitchDefault> <td *ngIf="col.colspan > 0" [attr.colspan]="col.colspan" class="{{col.class}}"> <span class="ui-column-title">{{col.header}}</span> {{rowData.data[col.field]}} </td> </ng-container> </ng-container> </tr> </ng-template> <ng-template pTemplate="emptymessage" let-columns> <tr> <td [attr.colspan]="headerCount" *ngIf="headerCount !== 0" style="text-align: center;"> No records found </td> </tr> </ng-template> </p-table> </div> <div class="ui-widget ipms-ptable-total-record" *ngIf="showTotalRecord"> Total Records: {{value?.length}} || Filter Records: {{ filteredValueCount }} </div> <p-overlayPanel #op1 appendTo="body" [baseZIndex]="10002"> <div class="popup-menu-container"> <div class="popup-menu-header">Commands</div> <hr class="popup-menu-item-row popup-menu-hr"> <a href="javascript:void(0)" (click)="onHideFilter()" title="Refresh table"> <div class="popup-menu-item-row popup-menu-item-row-top"> <div class="popup-menu-item-left"><i class="fa fa-random"></i></div> <div class="popup-menu-item-right">Toggle Filter Row</div> </div> </a> <a href="javascript:void(0)" (click)="emitList()" title="Refresh table"> <div class="popup-menu-item-row popup-menu-item-row-top"> <div class="popup-menu-item-left"><i class="pi pi-refresh"></i></div> <div class="popup-menu-item-right">Refresh</div> </div> </a> <a *ngIf="allowExportToExcel" href="javascript:void(0)" (click)="exportToExcelPtable()" title="Export To Excel"> <div class="popup-menu-item-row popup-menu-item-last popup-menu-item-row-top"> <div class="popup-menu-item-left"><i class="pi pi-file-excel"></i></div> <div class="popup-menu-item-right">Export To Excel</div> </div> </a> <div class="popup-menu-header">Columns</div> <hr class="popup-menu-item-row popup-menu-hr"> <!-- <div *ngFor="let row of columns">