Angular material table paginator is not updating after filter

Question

I am filtering table data source using a multiselect selectbox value. Table records are getting updated when I select the options from select box. But paginator is not getting updated.

 @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator; ngOnInit() { this.dataSource.paginator = this.paginator; this.dataSource.filterPredicate = (tdata: Catalog, filter: string) => { return this.filters.length > 0? this.filters.some(e => e === tdata.type): true; }; } applyFilter() { this.tdataSource.filter = 'trigger filter'; }

 <mat-form-field> <mat-label>Filters</mat-label> <mat-select multiple [(value)]="filters"> <mat-option *ngFor="let item of options" [value]="item" (click)="applyFilter(item)"> {{item}} </mat-option> </mat-select> </mat-form-field>

In below image I am filtering only database. Table is getting updated based on filters. But paginator is showing all the records.

And also if I select all check box in table header its selecting all records instead of selecting 4 records which is shown in UI.

Answer 1

Have you tried initializing paginator again in your filter method:

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