Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

p-table not show when data over 300 rows - Error code: RESULT_CODE_HUNG #13782

Closed
khanh9x6 opened this issue Sep 30, 2023 · 4 comments
Closed
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible

Comments

@khanh9x6
Copy link

Describe the bug

Code using p-table. Please help me. My website down when records over 300 => Error: RESULT_CODE_HUNG

<p-table *ngIf="searchForm.value.TypeRequestId == 1" [value]="list_request_ot" [scrollable]="true" scrollHeight="600px" [rowHover]="true" styleClass="p-datatable-gridlines p-datatable-center p-datatable-xs table-header-pana" responsiveLayout="scroll" (onPage)="changePage($event)"> <ng-template pTemplate="header"> <tr> <th class="text-center"> <input [(ngModel)]="isChecked" (change)="changeSelectAll()" class="form-check-input" type="checkbox" /> </th> <th>Ngày làm thêm</th> <th>Số đăng ký</th> <th>Người đăng ký</th> <th>Chức vụ</th> <th>Công đoạn</th> <th>Ca VnR</th> <th>Ca TAS</th> <th>Loại làm thêm</th> <th>Làm thêm vào</th> <th>Là ca gãy</th> <th> Giờ bắt đầu <br /> ot đăng ký </th> <th> Giờ kết thúc <br /> ot đăng ký </th> <th> Tổng thời gian <br /> làm thêm </th> <th>Giờ vào thực tế</th> <th>Giờ ra thực tế</th> <th> Tổng thời gian <br /> thực tế </th> <th>Đăng ký theo nhóm</th> <th>Cấp phê duyệt<br />cuối cùng</th> <th>Chi tiết</th> <th>HR xác nhận</th> <th>Hành động</th> </tr> </ng-template> <ng-template pTemplate="body" let-item> <ng-container *ngIf="users.get(item.EmployeeCode) as employee"> <tr [ngClass]="{ 'bg-differ-pana': item.TotalOtTime != item.TotalTime }"> <td class="text-center"> <input *ngIf=" item.IsHrApproval == null && item.InTime1 != null && item.OutTime1 != null " value="{{ item.Id }}" (change)="onCheckChange($event)" class="form-check-input select-item" type="checkbox" /> </td> <td> {{ item.WorkDate | date : 'dd/MM/yy' }} </td> <td> {{ item.RequestNo }} </td> <td>{{ item.EmployeeCode }} - {{ employee?.FullName }}</td> <td> {{ positions_.get(employee?.PositionId ?? 27)?.TitleCode }} </td> <td>{{ sections_.get(employee?.SectionId ?? 33)?.NameVi }}</td> <td>{{ item.Ca }}</td> <td>{{ shifts_.has(item.ShiftId) ? shifts_.get(item.ShiftId)?.KeyHrm : '' }}</td> <td>{{ typeOts_.get(item.TypeOverTimeId)?.NameVi }}</td> <td>{{ typeDayOts_.get(item.TypeDayOtId)?.NameVi }}</td> <td>{{ item.IsBrokenShift ? 'Có' : 'Không' }}</td> <td>{{ item.StartTime | date : 'dd/MM/yy HH:mm' }}</td> <td>{{ item.EndTime | date : 'dd/MM/yy HH:mm' }}</td> <td>{{ item.TotalTime }}</td> <td>{{ item.InTime1 | date : 'dd/MM/yy HH:mm' }}</td> <td>{{ item.OutTime1 | date : 'dd/MM/yy HH:mm' }}</td> <td>{{ item.TotalOtTime }}</td> <td>{{ item.RequestGroupNo }}</td> <td> {{ item.EmployeeCode }} - {{ users.get(item.EmployeeCodeApproval)?.FullName }} </td> <td> <a target="_blank" [routerLink]="['/ot/view_register/' + item.RequestNo]"><i class="fa-solid fa-eye"></i> </a> <br /> <a *ngIf="item.IsRequestGroup == true" target="_blank" [routerLink]="['/ot/view_register_group/' + item.RequestGroupNo]">Link request nhóm</a> </td> <td> <span *ngIf="item.IsHrApproval == true"> {{ users.get(item.HrConfirmBy)?.Info }} <br /> vào lúc {{ item.HrConfirmAt | date : 'dd/MM/yy HH:mm' }} </span> <span *ngIf="item.IsHrApproval == null">Chưa xác nhận</span> <span *ngIf="item.IsHrApproval == false">Đã từ chối bởi {{ users.get(item.HrConfirmBy)?.Info }} <br /> vào lúc {{ item.HrConfirmAt | date : 'dd/MM/yy HH:mm' }}</span> </td> <td> <span *ngIf=" (item.IsHrApproval == null && item.InTime1 != null && item.OutTime1 != null) || item.IsBrokenShift "> <button class="btn btn-primary font_14" (click)="approval(item.Id)"> {{ 'common.approval' | translate }} </button> </span> <button *ngIf="item.IsHrApproval == null" class="btn btn-danger font_14" (click)="reject(item.Id)"> {{ 'common.reject' | translate }} </button> <span *ngIf="item.IsHrApproval != null"> <button (click)="redo(item.Id, item.IsHrApproval)" class="btn btn-danger font_14"> Redo </button> </span> </td> </tr> </ng-container> </ng-template> </p-table>

Environment

Win 11 pro
Package.json
"dependencies": { "@angular/animations": "^16.2.7", "@angular/cdk": "^16.2.6", "@angular/common": "^16.2.7", "@angular/compiler": "^16.2.7", "@angular/core": "^16.2.7", "@angular/forms": "^16.2.7", "@angular/localize": "^16.2.7", "@angular/platform-browser": "^16.2.7", "@angular/platform-browser-dynamic": "^16.2.7", "@angular/router": "^16.2.7", "@ng-select/ng-select": "^11.1.1", "@ngx-translate/core": "^15.0.0", "@ngx-translate/http-loader": "^8.0.0", "@popperjs/core": "^2.11.8", "bootstrap": "^5.3.2", "buffer": "^6.0.3", "chart.js": "^4.4.0", "chartjs-plugin-datalabels": "^2.2.0", "file-saver": "^2.0.5", "globby": "^13.2.2", "ng2-charts": "^5.0.3", "ng2-pdf-viewer": "^10.0.0", "ngx-toastr": "^17.0.2", "primeicons": "^6.0.1", "primeng": "^16.4.1", "rxjs": "~7.8.1", "sweetalert2": "^11.7.31", "tslib": "^2.6.2", "uuid": "^9.0.1", "zone.js": "~0.14.0" }

Reproducer

No response

Angular version

16.2.7

PrimeNG version

16.4.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18

Browser(s)

Edge lastest

Steps to reproduce the behavior

No response

Expected behavior

Can load smothly

@khanh9x6 khanh9x6 added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 30, 2023
@ashikjs
Copy link
Contributor

ashikjs commented Oct 1, 2023

@khanh9x6 hi can you share a reproducible path or stackblitz link.

@khanh9x6
Copy link
Author

khanh9x6 commented Oct 1, 2023

@khanh9x6 hi can you share a reproducible path or stackblitz link.

sorry. this is internal system. i can publish to internet

@ashikjs
Copy link
Contributor

ashikjs commented Oct 1, 2023

https://stackblitz.com/run?file=src%2Fapp%2Fapp.module.ts

here have more then 300 data and it's working can you check it.

@mertsincan
Copy link
Member

Hi,

So sorry for the delayed response! Improvements have been made to many components recently, both in terms of performance and enhancement. Therefore, this improvement may have been developed in another issue ticket without realizing it. You can check this in the documentation. If there is no improvement on this, can you open a new issue so we can include it in our roadmap?

Thanks a lot for your understanding!
Best Regards,

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible
Projects
None yet
Development

No branches or pull requests

3 participants