p-table performance issue

UI Components for Angular
Post Reply
csonavale
Posts: 1
Joined: 31 May 2023, 07:14

31 May 2023, 07:28

Hi,
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>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 6 guests