Load 7000 lines using mat table at once

Question

I have this code :

@Input() data: Array<Users>;
@ViewChild(MatSort, { static: false }) sort: MatSort;
@ViewChild(MatPaginator, { static: false }) paginator: MatPaginator;
dataSource: MatTableDataSource<Users> = new MatTableDataSource();

ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    this.dataSource.data = this.data;
}

The paginator and sort is not working, I have all 7000 lines and is very slow. Can you help me please ?

try to use `virtual Scroll` in your mat-table instead of pagination. it will render your data much faster. — Farhat Zaman, May 26 '21 at 11:24
https://diprokon.github.io/ng-table-virtual-scroll/#/overview — Farhat Zaman, May 26 '21 at 11:25
or you can use this proper example https://stackblitz.com/edit/mat-vs-table-26nq3g?file=src/app/table/table-demo.ts — Farhat Zaman, May 26 '21 at 11:31
i mean to say, i wanna know the issues after integration of virtual-scroll with mat-table. — Farhat Zaman, May 26 '21 at 11:48
@FarhatZaman I take a look now and seems I can't install mat-vs-table for angular 8, I have the error `export 'CDK_TABLE' was not found in '@angular/cdk/table` even after `npm install @angular/cdk --save` — GPiter, May 26 '21 at 12:52

score 1 · Answer 1 · answered May 26 '21 at 10:51

1

You have to overwrite the dataSource and keep the right order of steps.

ngAfterViewInit() {
    this.dataSource = new MatTableDataSource<Users>(this.data);
    this.dataSource.sort = this.sort;
    this.dataSource.paginator = this.paginator;
}

answered May 26 '21 at 10:51

thank you for you answer, but didn't work, to work I put in `ngOnInit` : `ngOnInit() { this.dataSource.data = this.data; }` But is very,very,very slow for 7000 lines. I found a post on stackoverflow : https://stackoverflow.com/questions/50283659/angular-6-mattable-performance-in-1000-rows – GPiter May 26 '21 at 10:56
no, I think because with a lot of data, there no callback in order to know when `this.dataSource = new MatTableDataSource(this.data);` is finished – GPiter May 26 '21 at 10:58
Actually, this shouldn't be that much of a problem. Strange. – May 26 '21 at 11:00
In order to works faster I saw that first should be called : `set paginator, set sort, set data`. but is not working in my case – GPiter May 26 '21 at 11:01
I tested it once with 3000 entries and it worked properly. Sorry for being of no help here. – May 26 '21 at 11:38
what about 7000 lines ? :) – GPiter May 26 '21 at 11:44
If you really want to know the result, I can do this test. I just have to prepare an appropriate file. I could give you the answer tonight at around 10 p.m. CEST. – May 26 '21 at 12:09
I checked with 7500 entries. 6,5 MB of JSON. No problems detected. Paginator works as expected. – May 26 '21 at 19:06

Load 7000 lines using mat table at once

1 Answers1