I am having some performance issue when using p-table with p-checkbox in it. Table have something around 1000 rows and 15 columns, where 10 of that contain only checkboxes.
So at the end table contain 10000 checkboxes. When I remove checkboxes from the table the time that table needs to generate equals around 5s. When checkboxes are visible time increases to something around 20s!
This table contains only 1000 rows, of course there is sorting, filtering included, but as I wrote before , when I remove checkboxes time of generating the table equals around 5s.
So where is the problem? Even when I left completely empty checkbox declaration , like that:
<p-checkbox binary="true">
</p-checkbox>
time is still very big. Here is the structure of my table:
<p-table
[value]="data">
<ng-template pTemplate="caption">
</ng-template>
<ng-template pTemplate="header">
<tr>
<th class="toggle-column"></th>
<!-- LAST NAME COLUMN -->
<th class="lastname-column" [pSortableColumn]="'lastName'">
</th>
</ng-template>
// BODY DEFINITION - CHECKBOXES
<ng-template pTemplate="body" let-row let-expanded="expanded"
let-rowIndex="rowIndex">
<tr>
<td class="toggle-column"></td>
<td *ngFor="let col of columns" class="">
<span class="ui-column-title"></span>
<p-checkbox
binary="true"
[disabled]="!isEditable"
[(ngModel)]="row[col.field]"
(onChange)="toggle($event, col.field, rowIndex)">
</p-checkbox>
</td>
</tr>
</ng-template>
<ng-template let-row pTemplate="rowexpansion">
<tr>
<td>
<table class="expanded-table">
<tr *ngFor="let user of row.userGroup.members" class="expanded-row">
...
</tr>
</table>
</td>
</tr>
</ng-template>
<ng-template pTemplate="emptymessage">
<tr>
<td [attr.colspan]="tableConfig.colspan">
ui.noRecordsFound
</td>
</tr>
</ng-template>
</p-table>
Pagination and lazy loading on scroll are out of the question - my client does not want this. He wants to see the hole table at once.
I also thought about using ChangeDetectionStrategy.OnPush but each time new checkbox is added the ngOnChanges and ngDoCheck (I divided body template into 3 components to test this hole change detection stuff - in example you see above everything is in one component).
I can I guess use native checkbox, I have already checked that, and time is also very nice around 8s. But I am using primeNg framework for a reason, right ?!
Main problem is with p-checkbox component, it works very slow, and I know the problem is not with rendering, because I checked profiler - there is a massive time needed for something that is going on 'behind the hood' - problem is with change detection I think, not with the rendering itself for sure.
So do you have any idea how I can improve my table ?
Aucun commentaire:
Enregistrer un commentaire