Html table scroll very slow

@sroby wrote:

Hello,

we’ve an html table in a page created using a ngFor. The scroll of this table it’s very slow in ipad mini 2/4 (no problems with android and iphone 6/7/7 plus) also with only 50 rows. Also the selection of the rows is very slow (we’ve a checkbox for each row, with or without click event).

We’ve removed all unecessary code in order to exclude some our slow business logic and we’re trying with just one column.

Page HTML

<div style="overflow:scroll; -webkit-overflow-scrolling:touch">
  <table cellpadding="2" cellspacing="2" *ngIf="isDataLoaded">

    <thead>
      <tr>
        <th>{{ 'general.sel' | translate }}</th>
        <th style="text-align:left" *ngFor="let column of visibleColumns">{{column.description}}</th>
      </tr>
    </thead>


    <tbody [style.height]="tableHeight">

      <tr  *ngFor="let row of gridData.data;  let rowIndex = index">

        <td tappable (click)="selectRow(row, rowIndex)">
          <input  type="checkbox" [checked]="row.selected">
        </td>

        <td style="text-align:left" *ngFor="let column of visibleColumns">
          <span [class.required]="row[column.code].required">{{row[column.code].valueLabel}}</span>
        </td>

      </tr>

    </tbody>

  </table>
</div>

ionic info output

cli packages:

    @ionic/cli-utils  : 1.18.0
    ionic (Ionic CLI) : 3.18.0

global packages:

    cordova (Cordova CLI) : 7.0.0

local packages:

    @ionic/app-scripts : 3.0.0
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.7.1

System:

    ios-deploy : 1.9.1
    ios-sim    : 5.0.4
    Node       : v6.11.3
    npm        : 3.10.10
    OS         : macOS High Sierra
    Xcode      : Xcode 9.1 Build version 9B55

What could be the problem? Is there a workaround to solve it?

Thanks for your attention.

Posts: 1

Participants: 1

Read full topic