teradata-covalent Data Table rerender data on scroll and page works slowly angular 2+

Question

I'm using Angular 2+ and Teradata covalent Data Table in my project. I have table that has a lot of columns and 50 rows. For some reasons in html code I see only about 12 rows and scroll. When I scroll it's rerender data and show other 12 rows, so page works slowly.

There is some html:

<td-data-table
        #dataTable
        [(ngModel)]="selectedRows"
        [data]="filteredData"
        [columns]="columns"
        [selectable]="true"
        [multiple]="true"
        [sortable]="true"
        [sortBy]="sortBy"
        [sortOrder]="sortOrder"
        (sortChange)="sort($event)"
        (rowSelect)="rowSelect($event)"
        (selectAll)="selectAllEvent($event)"
        class="fixed-header">

      <ng-template tdDataTableTemplate="Id"
            let-value="value"
            let-row="row"
            let-column="column">
        <ng-container *ngIf="row['Source'] == 1; else elseTemplate">
          ...
        </ng-container>
        <ng-template #elseTemplate>
          ...
        </ng-template>
      </ng-template>

      <ng-template tdDataTableTemplate="Rate"
            let-value="value"
            let-row="row"
            let-column="column">
      ...
      </ng-template>

How can I resolve this issue?

Maybe covalent has some flag to render all 50 rows at once without rerendering?

Are you using angular material or basic table ? – Mehdi Benmoha Jun 20 '19 at 14:54 — Mehdi Benmoha, Jun 20 '19 at 14:54

score 2 · Accepted Answer · answered Jun 20 '19 at 15:02

I had the same problem with an angular material component (the stepper), and it was the animations that were the cause. So, I've got 3 solutions for you :

Solution 1, if you don't care about animations:

Try using the NoopAnimationsModuleinstead of the BrowserAnimationsModule.

Solution 2, if you like adventure and are optimistic:

Try updating your Angular to the latest version. I noticed a huge animations difference when upgrading from 5 to 7. There is the Angular upgrade tool that can help you on this.

Solution 3, if animations and speed are mandatory or you have a lot of time:

You can try using another table library or build your own.

teradata-covalent Data Table rerender data on scroll and page works slowly angular 2+

1 Answers1