I am using p-table without pagination, and I have 6 frozenColumns and in few columns I have p-dropdown. So when I tried to bind large data(more than 500 rows) then it takes time to bind or load the data into p-table. sometimes my browser also getting in hang.
for your reference below is my p-table html code.
Code: Select all
<p-table #dt1 [value]="resultDto.rows" [columns]="resultDto.columns"
[scrollable]="true" scrollHeight="calc(100vh - 547px)"
[style.z-index]="1" id="tableGrid" #tableGrid
[(selection)]="selectedRows" selectionMode="multiple"
[metaKeySelection]="true" (onRowSelect)="onRowSelect($event)"
(onRowUnselect)="onRowUnselect($event)"
(onHeaderCheckboxToggle)="onSelectAll($event)"
[globalFilterFields]="['values.Description']"
[reorderableColumns]="true" [resizableColumns]="true">
<ng-template pTemplate="caption">
<div class="flex" style="height: 14px;">
<span class="p-input-icon-left ml-auto" style="position: absolute;
right: 15px;
left: 15px;
top: 5px;
width: calc(100% - 30px);">
<i class="pi pi-search"></i>
<input pInputText type="text" style="padding-left: 25px;"
(input)="dt1.filterGlobal($event.target.value, 'contains')"
placeholder="Search Descriptions by Keyword" />
</span>
</div>
</ng-template>
<ng-template pTemplate="header" let-columns>
<tr id='hpmDropdown'>
<th pFrozenColumn
style="width: 56px; padding: 9px 16px 9px 16px;">
<p-tableHeaderCheckbox></p-tableHeaderCheckbox>
</th>
<th pFrozenColumn
style="width: 50px; flex: none;font-family: 'Barlow-regular';font-weight: 700;font-size: 12px;flex: none;padding-left: 8px;padding-right: 8px;">
Action
</th>
<th pFrozenColumn
style="width: 50px; flex: none;font-family: 'Barlow-regular';font-weight: 700;font-size: 12px;flex: none;">
Info
</th>
<th pFrozenColumn class="hpmColumn" pReorderableColumn
pResizableColumn
style="font-family: 'Barlow-regular';font-weight: 700;font-size: 12px;flex: none;">
HPMPhase
<p-columnFilter field="values.HPMPhase" matchMode="in"
display="menu" [showMatchModes]="false"
[showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="header">
<div class="px-3 pt-3 pb-0">
<span class="font-bold">Phase Picker</span>
</div>
</ng-template>
<ng-template pTemplate="filter" let-value
let-filter="filterCallback">
<p-multiSelect [ngModel]="value"
[options]="getHPMPhasesForFilter()" placeholder="Any"
(onChange)="filter($event.value)"
optionLabel="name">
<ng-template let-option pTemplate="item">
<div
class="inline-block vertical-align-middle">
<span class="ml-1 mt-1">{{ option
}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</th>
<th pFrozenColumn class="hpmColumn" pReorderableColumn
pResizableColumn
style="font-family: 'Barlow-regular';font-weight: 700;font-size: 12px;flex: none;">
HPMCode
<p-columnFilter field="values.HPMCode" matchMode="in"
display="menu" [showMatchModes]="false"
[showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="header">
<div class="px-3 pt-3 pb-0">
<span class="font-bold">Codes Picker</span>
</div>
</ng-template>
<ng-template pTemplate="filter" let-value
let-filter="filterCallback">
<p-multiSelect [ngModel]="value"
[options]="getHPMCodesForFilter()" placeholder="Any"
(onChange)="filter($event.value)"
optionLabel="name">
<ng-template let-option pTemplate="item">
<div
class="inline-block vertical-align-middle">
<span class="ml-1 mt-1">{{ option
}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</th>
<th pFrozenColumn class="hpmColumn" pReorderableColumn
pResizableColumn
style="font-family: 'Barlow-regular';font-weight: 700;font-size: 12px;flex: none;">
HPMSubCode
<p-columnFilter field="values.HPMSubcode" matchMode="in"
display="menu" [showMatchModes]="false"
[showOperator]="false" [showAddButton]="false">
<ng-template pTemplate="header">
<div class="px-3 pt-3 pb-0">
<span class="font-bold">SubCode Picker</span>
</div>
</ng-template>
<ng-template pTemplate="filter" let-value
let-filter="filterCallback">
<p-multiSelect [ngModel]="value"
[options]="getHPMSubCodesForFilter()" placeholder="Any"
(onChange)="filter($event.value)"
optionLabel="name">
<ng-template let-option pTemplate="item">
<div
class="inline-block vertical-align-middle">
<span class="ml-1 mt-1">{{ option
}}</span>
</div>
</ng-template>
</p-multiSelect>
</ng-template>
</p-columnFilter>
</th>
<th *ngFor="let col of getNonHPMColumns(columns)"
pReorderableColumn pResizableColumn
[ngClass]="getColumnclass(col,true)"
[hidden]="!col.isColumnSelected"
style="font-family: 'Barlow-regular';font-weight: 700;font-size: 12px;flex: none;">
{{col.name}}
<p-columnFilter
*ngIf="col.name=='Description' || col.name=='Phase' || col.name=='ActCode' || col.name=='SubCode'"
type="text" field="values.{{col.name}}"
display="menu"></p-columnFilter>
</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-rowData let-columns="columns"
let-index="rowIndex">
<tr id='hpmDataDropdown' [pSelectableRow]="rowData"
[pSelectableRowIndex]="index"
*ngIf="rowData['isRowSelected'] && rowData['isFilteredRow']"
[ngClass]="rowData.status??rowData.status">
<td pFrozenColumn
style="width: 56px; background: white; padding: 16px;">
<p-tableCheckbox style="pointer-events: none;"
[value]="rowData"></p-tableCheckbox>
</td>
<td pFrozenColumn (click)="$event.stopPropagation();"
style="width: 50px;background: white;padding: 11px;flex: 0 0 auto;z-index: 0;padding-left: 8px;padding-right: 8px;">
<div class="btn-group dropdown" dropdown
[style.z-index]="9999">
<div ngbDropdown class="d-inline-block"
container="body">
<button type="button"
class="btn btn-outline-primary"
id="dropdownBasic1"
style=" border: none; padding: 0px; --bs-btn-hover-bg:none;"
ngbDropdownToggle
(click)="actionClick(rowData,i,j)">
<img src="../../../assets/Icons/menuMore.svg"
alt="img" /><span class="caret"></span>
</button>
<div ngbDropdownMenu
aria-labelledby="dropdownBasic1">
<button ngbDropdownItem
(click)="saveThisRow(rowData,i,j)">Save</button>
<button ngbDropdownItem
(click)="saveAndPropogate(rowData,i,j)">Save
and
Propagate</button>
<button ngbDropdownItem
(click)="editThisRow(rowData,i,j)">Edit</button>
<button ngbDropdownItem
(click)="clearThisRow(rowData,i,j)">Clear</button>
<button ngbDropdownItem
(click)="clearAndPropogate(rowData,i,j)">Clear
and
Propagate</button>
<button ngbDropdownItem
(click)="viewMatchingRows(rowData,i,j)">{{viewMatchingRowsAction?'View
all rows':'View matching
rows'}}</button>
</div>
</div>
</div>
</td>
<td pFrozenColumn (click)="$event.stopPropagation();"
style="width: 50px; background: white; flex: none; padding: 0px 5px 5px 5px;">
<div *ngIf="rowData['status']=='Conflict'"
class="dvConflictaction" id='ConflictOption'>
<i (click)="op.toggle($event)" icon="pi pi-search"><img
class="help-most-relavant-icon"
src="../../../assets/Icons/InfoIcon2.svg"
alt="done" /></i>
<p-overlayPanel #op [style]="{'width': '450px' }"
[showCloseIcon]="true">
<ng-template pTemplate="content">
<table class="optable">
<thead>
<tr>
<th>HPM Phase</th>
<th>HPM Code</th>
<th>HPM Subcode</th>
<th></th>
<th *ngIf="!rowData.isRowChecked">
</th>
</tr>
</thead>
<tbody>
<tr
*ngFor="let crow of rowData.conflictValues">
<td>{{crow.hpmPhase?.code}}
</td>
<td>{{crow.hpmCode?.code}}
</td>
<td>{{crow.hpmSubCode?.code}}
</td>
<td><button type="button"
ptooltip="Save" style="border: none;
background: white;"
(click)="op.hide(); conflictRowSave(rowData,i,j,crow,false)">
<span style=" filter: brightness(0.5);
margin: 0px;">
<img src="../../../assets/Icons/Save.svg"
alt="img" />
</span>
</button></td>
<td *ngIf="!rowData.isRowChecked">
<button type="button"
ptooltip="Save And Propogate"
style="border: none;background: white;"
(click)="op.hide(); conflictRowSave(rowData,i,j,crow,true)">
<span style=" filter: brightness(0.5);
margin: 0px;"><img
src="../../../assets/Icons/Save.svg"
alt="img" /></span></button>
</td>
</tr>
</tbody>
</table>
</ng-template>
</p-overlayPanel>
</div>
</td>
<td pFrozenColumn
(click)="(isTableInEditMode) == true ? $event.stopPropagation() : null"
style="white-space: nowrap;font-family: 'Barlow-regular';font-weight: 500;font-size: 12px;flex: none;"
class="tableTd hpmColumn">
<p-dropdown [style]="{'width': '142px'}" appendTo="body"
[options]="hpmTypes.hpmPhases"
placeholder="Select value" optionLabel="displayName"
[(ngModel)]="rowData['hpmPhase']" [showClear]="true"
filter="true"
[tooltip]="rowData['hpmPhase']?.displayName"
autoZIndex="false" styleClass="my-dropdown"
(onChange)="onPhaseChange($event,rowData,i,j)">
</p-dropdown>
</td>
<td pFrozenColumn
(click)="(isTableInEditMode) == true ? $event.stopPropagation() : null"
style="white-space: nowrap;font-family: 'Barlow-regular';font-weight: 500;font-size: 12px;flex: none;"
class="tableTd hpmColumn">
<p-dropdown [style]="{'width': '142px'}" appendTo="body"
[options]="hpmTypes.hpmCodes" placeholder="Select value"
optionLabel="displayName"
[(ngModel)]="rowData['hpmCode']" [showClear]="true"
filter="true" styleClass="my-dropdown"
(onChange)="onCodeChange($event,rowData,i,j)">
</p-dropdown>
</td>
<td pFrozenColumn
(click)="(isTableInEditMode) == true ? $event.stopPropagation() : null"
style="white-space: nowrap;font-family: 'Barlow-regular';font-weight: 500;font-size: 12px;flex: none;"
class="tableTd hpmColumn">
<p-dropdown [style]="{'width': '142px'}" appendTo="body"
[options]="rowData['hpmCode']?getHPMSubCodes(rowData['hpmCode'].code):getHPMSubCodes(undefined)"
placeholder="Select value" optionLabel="displayName"
[(ngModel)]="rowData['hpmSubcode']"
(onChange)="onSubCodeChange($event,rowData['hpmCode'],index)"
[showClear]="true" filter="true"
styleClass="my-dropdown"
(onChange)="onHPMSubCodeChange($event,rowData,i,j)">
</p-dropdown>
</td>
<td (click)="(isTableInEditMode && (col.name=='HPMPhase' || col.name=='HPMCode' || col.name=='HPMSubcode')) == true ? $event.stopPropagation() : null"
style="white-space: nowrap;font-family: 'Barlow-regular';font-weight: 500;font-size: 12px;flex: none;"
*ngFor="let col of getNonHPMColumns(resultDto.columns)"
class="tableTd" [ngClass]="getColumnclass(col)"
[hidden]="!col.isColumnSelected">
<span isEllipsisActive
style="max-width: 383px;word-wrap: normal;text-align: justify;white-space: break-spaces;padding-top: 7px;"
*ngIf="!(isTableInEditMode && (col.name=='HPMPhase' || col.name=='HPMCode' || col.name=='HPMSubcode'))">
{{col.name=='ReportDate'?
rowData.values[(col.name)].substr(0,10) :
rowData.values[(col.name)]}}
</span>
</td>
</tr>
</ng-template>
</p-table>