Multiple mat table in single component loading slow

Question

I have 3 mat table in single component and i am loading its data on page load. Issue is with less that 500(for all 3 tables) records also it is taking 8-10 seconds of time to load data

<div   id="div1"
                  [hidden]="!(  div1===1 && div2===0 && div3===0)">

      <table mat-table [dataSource]="dataSource1" matSort>
              /////table 1
                        </table>
    
      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
<div   id="div2"
                  [hidden]="!(  div1===0 && div2===1 && div3===0)">

      <table mat-table [dataSource]="dataSource2" matSort>
              /////table 2
                        </table>
    
      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>
<div   id="div3"
                  [hidden]="!(  div1===0 && div2===0 && div3===1)">

      <table mat-table [dataSource]="dataSource3" matSort>
              /////table 3
                        </table>
    
      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

My TS file is

export class mycomponent implements OnInit {
 
  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  constructor(private _servcall: AppService) { 
  }

ngOnInit() {
    this._servcall.getdatafromapi().subscribe(result => {
      this.resultdata = result;

      this.displayedColumns  = ['col1','col2']
      this.dataSource1  = new MatTableDataSource(this.resultdata);
      this.dataSource1.paginator = this.paginator;
      this.dataSource1.sort = this.sort;


      this.displayedColumns  = ['col1','col2']
      this.dataSource2  = new MatTableDataSource(this.resultdata);
      this.dataSource2.paginator = this.paginator;
      this.dataSource2.sort = this.sort;


      this.displayedColumns  = ['col1','col2']
      this.dataSource2  = new MatTableDataSource(this.resultdata);
      this.dataSource2.paginator = this.paginator;
      this.dataSource2.sort = this.sort;

}  
  })

}
}

I have tried solution from link but still issue is same. Code which is there on page load I call same during some tab change , during that time also it is slow

Why you used the 3 mat table?. you can able to do it in a single mat table. just change the this.displayedColumns values — Murugan, Oct 30 '20 at 11:38
because apart from column there were couple of different logic....so decided to go with different different tables — nhi, Oct 30 '20 at 15:06
Where exactly is the performance issue? From my feeling 500 records with 2 columns should not be a problem. I guess the problem is that your API is quite slow. Could you inspect your network? How long does it take that the HTTP-request is resolved? I could then suggest you further improvements. — Mikelgo, Dec 21 '20 at 12:09

score 0 · Answer 1 · answered Oct 30 '20 at 11:37

0

try *ngIf directive instead of hidden.

answered Oct 30 '20 at 11:37

Murugan

615
5
19

no this is not helping. And initially i was using *ngIf only , but due to multiple tables in same component , paginator was having issue so it was changed to hidden – nhi Oct 30 '20 at 12:43

Multiple mat table in single component loading slow

1 Answers1