Lag when scrolling a table with 1000 itens


#1

I’ve created a table which should contains up to 1000 rows,

But when I scroll the page it get lagged. If I scrol to many the page will keep scroling for more than one second ater I stopped to use scroll the mouse well.

It’s happenning while running on Chrome in a notebook with Windows.

How could I show a huge number of elements without this lag?

Obs.: Pagination is not a choice at this case.


#2

Have you tried virtualScroll?


#3

Yes, but it seems not work in html tables.

When I try it I get this exception:

Can't bind to 'virtualScrool' since it isn't a known property of 'tr'. ("...

This is my code:

 <table separators style="width:100%" *ngIf="provider">        
    <tbody>
        <tr [virtualScrool]="provider.rows">                

            <td *virtualItem="column" absorbing-column>                      
                {{ row[column.field] }}            
            </td>

            <td nx-actions *ngIf="provider.actions && provider.actions.length > 0" >
                <span>
                    <button ion-button clear small *ngFor="let action of provider.actions" [title]="action.label" (click)="action.callback(row)">
                        <ion-icon [name]="action.icon"></ion-icon>
                    </button>
                </span>
            </td>
        </tr>
    </tbody>
    <tbody>
</table>

#4

try virtualScroll instead of virtualScrool :wink: I’d also suggest that you use the ion-list


#5

Thanks, guy! Now I have another problem.

virtualScroll is not working inside a component. It does not renders the virtualItens: