Performance of mat-table with 30 000 rows

Question

I use Angular 6, Firebase and Angular Material.

I have 30,000 json objects stored in firebase that I want to load them into a mat-table. Only I get way below that I wish. I wait 30 seconds before I can click on my application, sometimes chrome is in error ...

Yet I load my data after pagination.

Can someone tell me if this is normal or if there is a strategy to overcome this problem? Thank you.

Maybe i can do this with angular 7 and infite scrolling ? Do you have an example pleas?

export class TableComponent implements OnInit {

    showSpinner = true;

    Data = {nom: '', finessgeo: '', cat1: '', commune: '', CP: '', departement: '', tel: ''}

    displayedColumns = ['nom', 'finessgeo', 'cat1', 'commune', 'CP', 'departement', 'tel'];

    dataSource = new MatTableDataSource();

    applyFilter(filterValue: string) {
        filterValue = filterValue.trim();
        filterValue = filterValue.toLowerCase();
        this.dataSource.filter = filterValue;
    }

    @ViewChild(MatPaginator) paginator: MatPaginator;

    @ViewChild(MatSort) sort: MatSort;

    ngAfterViewInit() {
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        return this.geoService.getGeos().subscribe(res => {
            this.dataSource.data =
                res;
            this.showSpinner = false;
        });
    }

    constructor(public authService: AuthService, private geoService:
        GeoService, private router: Router, private database: AngularFireDatabase) {
    }

    ngOnInit() {}
}

Answer 1

I have some proposals.

First: Do not to load all 30k rows to the client. Try to use server side pagination. This should fix it all. Also you have to implement all your filter and sort functions on the api. Use the client just to display that data.

If this is not an option:

• Sort the data on the server. As soon as possible. If you can, directly inside your database query.
• Check if your component adds all rows into the DOM. This would take very much cpu time.
• Use the performance tab from chrome dev tools, to check what is taking so long. And try to optimize it.
• Check your html template. Try to make the rows as simple as possible. Like less nested elements, additional classes and so on.