mat table paginator and sorting issue for dynamic data

Question

I am trying to implement mat table , problem is its sorting and paginator is not working , i have gone through all questions related same but unable to fix it . If I am getting 10 records it shows only first five and if i change some code and try then it either shows all 10 , but not working as expected

HTML File

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

      <table mat-table [dataSource]="dataSource" matSort>
                          <ng-container matColumnDef="cola">
                            <th mat-header-cell *matHeaderCellDef mat-sort-header> col a </th>
                            <td mat-cell *matCellDef="let row"> {{row.colvala}} </td>
                          </ng-container>
    
                          <ng-container matColumnDef="colb">
                            <th class="headerCell w-17" mat-header-cell *matHeaderCellDef>colb</th>
                           <td mat-cell *matCellDef="let row"> {{row.colvalb}} </td>
                          </ng-container>
     
                          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
                          <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
    
    
                          <tr class="mat-row" *matNoDataRow>
                            <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
                          </tr>
                        </table>
    
      <mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"></mat-paginator>
</div>

My TS file

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.dataSource  = new MatTableDataSource(this.resultdata);
      this.dataSource.paginator = this.paginator;
      this.dataSource.sort = this.sort;

}  
  })

}
}

like this one div I have more 8 div and all have mat able in it , and every mat table paginator and sorting having issue like this

Dicekey · Answer 1 · 2020-10-26T13:27:36.957

1

it's render timing issue, wrap your paginate and sort logic in a setTimeOut ()

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

  this.displayedColumns  = ['col1','col2']
  this.dataSource  = new MatTableDataSource(this.resultdata);
      setTimeout(
      () => {
          this.dataSource.paginator = this.paginator;
          this.dataSource.sort = this.sort;
       });
   }
 })

for more details refer to MatSort and MatPaginator does not work without setTimeOut

edited Oct 26 '20 at 13:27

answered Oct 26 '20 at 13:22

Dicekey

405
4
12

i tried solution given , but it is not working.also on given link there another solution that too i have tried but it is not working – nhi Oct 26 '20 at 13:59
can you provide a stackbliz demo? – Dicekey Oct 26 '20 at 15:56

score 0 · Answer 2 · answered May 21 '21 at 06:14

Check this, this worked like a charm for me

you got to set the MatTableDataSource to some initial value

//create data source

this.myDataSource = new MatTableDataSource(initialData);

// update data in data source when available

this.streamOfDataUpdates.subscribe(newData => this.myDataSource.data = newData)

ref: https://github.com/angular/components/issues/8381#issuecomment-344020159

mat table paginator and sorting issue for dynamic data

2 Answers2