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

khanh9x6 commented 1 year ago

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ày làm thêm Số đăng ký Người đăng ký Chức vụ Công đoạn Ca VnR Ca TAS Loại làm thêm Làm thêm vào Là ca gãy Giờ bắt đầu
ot đăng ký Giờ kết thúc
ot đăng ký Tổng thời gian
làm thêm Giờ vào thực tế Giờ ra thực tế Tổng thời gian
thực tế Đăng ký theo nhóm Cấp phê duyệt
cuối cùng Chi tiết HR xác nhận Hành động

      <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

ashikjs commented 1 year ago

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

khanh9x6 commented 1 year ago

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

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

ashikjs commented 1 year ago

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

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

primefaces / primeng