Mat table pagination not loading correctly

Question

Currently all the results from the JSON object are appearing on the first page so the pagination isn't working. The mat table won't stop growing in height when it hits 10 rows and start paginating. I've been referencing the documentation and examples, but can't seem to get it to stop growing in height and start moving rows to the next page. Also the mat-sort isn't working. Not sure if it's related. I appreciate any help.

  <table mat-table class="full-width-table" [dataSource]="dataSource" matSort aria-label="Elements">
          <!-- Id Column -->
          <ng-container matColumnDef="title">
            <th class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Title</th>
            <td [ngStyle]="{'width': '20%'}" class="tableStyle" mat-cell *matCellDef="let row">
              {{row.title}}</td>
          </ng-container>


          <ng-container class="tableStyle" matColumnDef="lastBidderName">
            <th id="dateReceivedHeader" class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Last Bidder
            </th>
            <td [ngStyle]="{'width': '20%'}" id="dateReceived" class="tableStyle" mat-cell *matCellDef="let row">
              {{row.lastBidderName }}</td>
          </ng-container>

          <ng-container class="tableStyle" matColumnDef="currentBid">
            <th id="dateReceivedHeader" class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Last Bid
            </th>
            <td [ngStyle]="{'width': '15%'}" id="dateReceived" class="tableStyle" mat-cell *matCellDef="let row">
              ${{row.currentBid }}</td>
          </ng-container>

          <ng-container class="tableStyle" matColumnDef="auctionType">
            <th id="dateReceivedHeader" class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Auction
              Type</th>
            <td [ngStyle]="{'width': '20%'}" id="dateReceived" value="returnAuctionType(row.auctionType)"
              class="tableStyle" mat-cell *matCellDef="let row">
              {{returnAuctionType(row.auctionType)}}</td>
          </ng-container>

          <ng-container class="tableStyle" matColumnDef="auctionEndDateTime">
            <th id="dateReceivedHeader" class="tableStyle" mat-header-cell *matHeaderCellDef mat-sort-header>Auction End
              Date</th>
            <td [ngStyle]="{'width': '55%'}" id="dateReceived" class="tableStyle" mat-cell *matCellDef="let row">
              <span id="endDateTimeLabel" [ngClass]="{'activeAuction': row.auctionEndDateTime > this.today}">
                {{row.auctionEndDateTime * 1000 | date: 'medium'}}</span></td>
          </ng-container>


          <tr mat-header-row *matHeaderRowDef="displayedColumnAuctions"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumnAuctions;"></tr>

        </table>

        <mat-paginator id="paginator" #paginator [length]="dataSource?.data.length" [pageIndex]="0" [pageSize]="10">
        </mat-paginator>

mat-table.ts file

 dataSource: MatTableDataSource<Listing>;

  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;
  @ViewChild(MatSort, {static: true}) sort: MatSort;

  displayedColumnAuctions = [
    "title",
    "lastBidderName",
    "currentBid",
    "auctionType",
    "auctionEndDateTime"
  ];
  constructor(
    private mobileDetect: DeviceDetectorService,
    private submitListingService: SubmitListingService,
    private authService: AuthService
  ) {}

  ngOnInit() {


    this.userId = this.authService.getUserId();
    this.submitListingService.getArtistListings(this.userId).subscribe(res => {
      console.log("res");
      console.log(res);
      this.auctions = res.posts;
      this.auctions.sort((a, b) => b.auctionEndDateTime - a.auctionEndDateTime);
      this.dataSource = new MatTableDataSource(this.auctions);
      this.dataSource.sort = this.sort;
    });
  }
  ngViewAfterInit() {
    this.dataSource.paginator = this.paginator;
  }
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

Answer 1

You have the asyc problem, you are define the dataSource when you receive the response from the server but you define the pagination on the ngViewAfterInit lifecycle.

Please change your code something like this

dataSource: MatTableDataSource<Listing> = new MatTableDataSource();
itemsCount = 0;

ngOnInit() {
   this.dataSource.paginator = this.paginator;
   this.dataSource.sort = this.sort;
   this.submitListingService.getArtistListings(this.userId).subscribe(res => {
      console.log("res");
      console.log(res);
      this.auctions = res.posts;
      this.auctions.sort((a, b) => b.auctionEndDateTime - a.auctionEndDateTime);
      this.dataSource.data = this.auctions;
   });
}