Lag when scrolling a table with 1000 itens


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.


Have you tried virtualScroll?


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">        
        <tr [virtualScrool]="provider.rows">                

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

            <td nx-actions *ngIf="provider.actions && provider.actions.length > 0" >
                    <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>


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


Thanks, guy! Now I have another problem.

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