Connect method DataSource is not emitting all paginated rows for MatTable
Solution 1:
Your VulnerabilityDataSource, has not property data
nor filter
nor sort
...
Really I can't imagine what do you want to reach with your code. If the only you want a mat-table with filter, sort and pagination in server, you can get it only subscribing to filter.valuesChange, paginator.page and sort.sortChange
Imagine you has a service with two functions
//return and observable with the length of the data
getLength(filter:string)
//return an observable of an array with the data filtered, ordered and take account
//page and pageSize
getData(page:number,
pageSize:number,
filter:string,
sortField:string,
sortDirection:string)
In ngAfterViewInit you can has some like
ngAfterViewInit() {
const getLength = this.filter.valueChanges.pipe(
startWith(null),
debounceTime(200),
switchMap((res: string) => this.dataService.getLength(res)),
tap((res: number) => {
this.paginator.firstPage();
this.total = res;
})
);
const sort = this.sort.sortChange.pipe(
tap(() => this.paginator.firstPage())
);
merge(getLength, sort, this.paginator.page)
.pipe(
distinctUntilChanged(),
tap(_ => (this.isLoadingResults = true)),
switchMap(res => {
return this.dataService.getData(
this.paginator.pageIndex,
this.paginator.pageSize,
this.filter.value,
this.sort.active,
this.sort.direction
);
}),
tap(_ => (this.isLoadingResults = false))
)
.subscribe((res: any[]) => {
this.dataSource = res;
});
}
where
filter = new FormControl();
isLoadingResults = false;
@ViewChild(MatPaginator) paginator: MatPaginator;
@ViewChild(MatSort) sort: MatSort;
See that we merge trhee observables: when the formControl that make of "filter" change the value, when change the pagine in paginator and when sort the data
We use pipe(tap)
to send to the first page in the last two cases. This is the stackblitz, I hope this can help you