mat-table with server side mat-pagination, table empty after page change

Question

I have a mat-table that I need to send a huge amount of data to, so I'm using server side pagination. I setup mat-paginator with the [length] attribute and watch for the (page) event to manage this.

<mat-table
  #table
  [dataSource]="dataSource"
  matSort
  matSortActive="id"
  matSortDirection="asc"
  matSortDisableClear
>
  <mat-paginator
    #paginator
    [length]="totalRowCount"
    [pageSize]="10"
    [pageSizeOptions]="pageSizeOptions"
    (page)="pageChange($event)"
  ></mat-paginator>

On initial load everything works great. My service calls my api which returns the 10 results I want, I setup the table's datasource, the grid shows as expected and shows 1-10 with my actual total amount of records of 23k as set in [length]="totalRowCount"

When I click next on the paginator my service calls the api which returns the next 10 results I want. I then expect the paginator to show the same total and show me as seeing records 11-20, but instead the grid is empty!

totalRowCount is still the correct number, so I'm not sure why the table isn't populating. I'm calling the same function to build my dataSource, and have tried a bunch of varieties.

Whether I wholesale create a new datasource with the below

this.dataSource = new MatTableDataSource();
this.dataSource.paginator = this.paginator;
this.dataSource.sort = this.sort;
this.columns = columns;
this.columnHeaders = columnHeaders;
this.dataSource.data = data;

or if I only use the last line and set

this.dataSource.data = data;

the grid stays empty after pagination!

I've tried a number of different ways to get the table to update, but no different results. For example

this.changeDetectorRefs.detectChanges();
this.table.renderRows();

So one weird this is that even though totalRowCount doesn't change, the total being displayed is correct at first but after going to the next page it's reset to 10

The other is that if I change the page size to 25, almost everything works! It calls my service, gets 25 records, and then correctly displays them. In this case, the total now shows as 25 instead of 10, but still not the correct 23k number.

What could be causing this? I've tried any other means I can to get the grid to force update with no change, so I don't think it's a data update problem. Hoping it's just some small error in how my table or paginator are setup.

I can't figure out why the total is being reset, and I can't figure out why no results are displayed if I paginate to next, even though the grid is getting passed the updated dataset.

I tried to navigate back to the index page after page change with the below, but that didn't help either but the results were interesting.

if (this.paginator.pageIndex !== 0) {
  this.paginator.page.next({
    pageIndex: 0,
    pageSize: 10,
    length: this.totalRowCount,
  });
}

On init my 10 records show up and the paginator says 1 - 10 of 23721, as expected. I hit next, server gets the next 10 results and set the dataSource.data to it.. but after my go back to index page above, the grid shows my original 10 results and the paginator is disabled and shows 1 - 10 of 10

I'm very hopeful it's just something silly I'm overlooking. I've tried copying other working examples but can't quite make it work in my scenario.

-- I also tried isolating the data update so when the page is changed all I do is get the new records and update the dataSource

const data = await myService.getNewRows();
this.dataSource.data = data;

I still get the same incorrect results. I also tried a few other ways to make sure the data got updated as below, with no change.

const data = await myService.getNewRows();
this.dataSource.data = data;
this.dataSource.data = this.dataSource.data;
this.changeDetectorRefs.detectChanges();
this.table.renderRows();

The paginator still says 1 - 10 of 10 after I change the page, even though I'm only change its data and not the length or anything else interesting

Answer 1

If you have your dataSource connected to your paginator, it will overwrite any values you set.

Remove this:

this.dataSource.paginator = this.paginator;