How to do pagination with angular material?

Question

I was following a tutorial by Muhi Masri Load, Add, Update and Delete Table Rows using API Services (Totally recommended tutorial by the way) to make an Editable Dynamic Table.

Use a dataSource that I render every time I filter a date. But I wanted to add an Angular Material Paginator to it, only it doesn't work. I don't quite understand why, I did it as mentioned in the documentation, but still nothing.

The this.dataSource._filterData.length returns me 1

// The columns
  displayedColumns: string[] = ActivityColumns.map((col) => col.key);
   columnsSchema: any = ActivityColumns;

// The date
   dataSource = new MatTableDataSource<ApidatumDisplay>();
   request: ApidatumDisplay[] = []

getDataIsSelected() {
     let dailydata = {
       startDate: this.selected.startDate.format("YYYY-MM-DD"),
       endDate: this.selected.endDate.format("YYYY-MM-DD")
     }

     const validStartSelected = dailydata.startDate;

     const validd = (validStartSelected === dayjs().format("YYYY-MM-DD")) ? this.editDateisNow = true : this.editDateisNow = false;

    // Request get this.reportesService.getDailyTracking(dataDaily).pipe(takeUntil(this.unsubscribe$)).subscribe((res) => {
       this.request = res.apidata;
       this.dataSource.data = this.request;
       console.log('length',this.dataSource._filterData.length); // returns 1
       this.averageTotal = res.adding_total_activity
       this.hourTimeTotal = this.convert(res.adding_total_hours);
       this.expectedBudget = 192 * 22;
       this.isReload = false;
     });
   }

HTML

<!--Table of content-->
<section class="rounded mt-2 border overflow-hidden">

  <table mat-table [dataSource]="dataSource">
    <ng-container class="text-uppercase border" [matColumnDef]="col.key" *ngFor="let col of columnsSchema">
      <th class="vertical-align-middle" mat-header-cell *matHeaderCellDef>
        <div class="d-flex align-items-center">
          <div class=" text-size-4 text-overflow mr-1">
            {{ col.label }}
          </div>
        </div>
      </th>
      <td class=" text-size-3 font-weight-regular " mat-cell *matCellDef="let element">
        <div class="text-overflow text-size-4 mr-1" [ngSwitch]="col.type" *ngIf="!element.isEdit">
          <div class="btn-edit" *ngSwitchCase="'isEdit'">
            <button mat-button (click)="element.isEdit=
                    !element.isEdit">
                    Editar
                  </button>
          </div>
          <span *ngSwitchCase="'text'">
                  {{ element[col.key] }}
                </span>
          <span *ngSwitchDefault>
                  {{ element[col.key] }}
                </span>
          <div class="text-overflow text-size-4" *ngSwitchCase="'indicator_hour_daily'">
            <img style="height: 12px;" src="https://ymlabqgbnnbvyybcyqjn.supabase.co/storage/v1/object/public/assets-ui/icons/status-{{element.indicator_hour_daily}}.svg" alt="status">
          </div>
          <div class="text-overflow text-size-4" *ngSwitchCase="'indicator_activity_daily'">
            <img style="height: 12px;" src="https://ymlabqgbnnbvyybcyqjn.supabase.co/storage/v1/object/public/assets-ui/icons/status-{{element.indicator_activity_daily}}.svg" alt="status">
          </div>
        </div>
        <div class="text-overflow text-size-4" [ngSwitch]="col.type" *ngIf="element.isEdit">
          <div *ngSwitchCase="'isSelected'"></div>
          <div class="btn-edit" *ngSwitchCase="'isEdit'">
            <button mat-button (click)="editRow(element)">Hecho</button>
            <button mat-button (click)="cancelEditActivity(element)">Cancelar</button>
          </div>
          <mat-form-field *ngSwitchCase="col.type ==='activity_daily' ?
                  col.type : col.type ==='text'">
            <input matInput [type]="col.type" [(ngModel)]="element[col.key]" />
          </mat-form-field>
          <mat-form-field *ngSwitchCase="col.type ==='text' ? col.type :
                  ''">
            <input [type]="col.type" matInput [(ngModel)]="element[col.key]" disabled/>
          </mat-form-field>
          <mat-form-field class="text-overflow text-size-4
                  resizeMatSelect" *ngSwitchCase="'indicator_hour_daily'" ng-disabled="'isEdit'">
            <img with="12" height="12" [src]="selectedLanguage">
            <mat-select [(value)]="selectedLanguage">
              <mat-select-trigger>
                {{selectedLanguage}}
              </mat-select-trigger>
              <mat-option *ngFor="let category of categories" [value]="category.image">
                <img with="12" height="12" [src]="category.image"> {{category.viewValue}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field class="text-overflow text-size-4
                  resizeMatSelect" *ngSwitchCase="'indicator_activity_daily'">
            <mat-select [(value)]="selectedActivity">
              <mat-select-trigger>
                <img with="12" height="12" [src]="selectedActivity"> {{selectedActivity}}
              </mat-select-trigger>
              <mat-option *ngFor="let activity of categories" [value]="activity.image">
                <img with="12" height="12" [src]="activity.image"> {{activity.viewValue}}
              </mat-option>
            </mat-select>
          </mat-form-field>
        </div>
      </td>
    </ng-container>
    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
  </table>
  <mat-paginator #paginator [length]="dataSource.filteredData.length" [pageIndex]="0" [pageSize]="5" [pageSizeOptions]="[5, 10, 20]">
  </mat-paginator>
</section>
</section>
</div>

Answer 1

There's a lot missing in your example so I'm going to explain this end-to-end with a code example. You declare the MatPaginator in your component. Since you are doing a search, you'll want to bind to the length, page size, page index, and handle the (page) event in your mat-paginator tag. Your API results should return the data plus the length. If you're not doing server-side paging, you an disregard that and just set it to the array length of the return results. The "getPagedData" function is where you'll setup your API call and handle the results

It looks like from your example those two things are the missing pieces, so compare with the below code and adjust and it will work for you.

Your HTML template:

<table mat-table [dataSource]="dataSource">
    <!-- columns here -->

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

<mat-paginator 
    #paginator
    (page)="pageChangeEvent($event)"
    [length]="totalRecords"
    [pageSize]="pageSize"
    [pageIndex]="pageIndex"
    [length]="totalRecords"
    [pageSizeOptions]="[5, 10, 20, 50, 100]"
    showFirstLastButtons>
</mat-paginator>

In your component TS:

@ViewChild('paginator', { static: true }) paginator: MatPaginator;
dataSource = new MatTableDataSource<ApidatumDisplay>([]);
displayedColumns: string[] = //... set columns here
totalRecords = 0;
pageSize = 10;
pageIndex = 0;


getPagedData() {
    const search = {
      // ... set filters here
    };

    this.searching = true;
    this.service.search(search).subscribe({
      next: ((results) => {
        this.totalRecords = results?.length ? results[0].totalRecords : 0;
        this.dataSource.data = results || [];
      }),
      complete: () => this.searching = false,
      error: () => this.searching = false,
    });
  }
    
    
pageChangeEvent(event: PageEvent) {
    this.pageIndex = event.pageIndex;
    this.pageSize = event.pageSize;
    this.getPagedData();
}

Answer 2

To add pagination to the Angular material table i.e., mat-table we can use mat-paginator component.

mat-paginator selector is part of Angular material module called MatPaginator.

Refer : https://www.angularjswiki.com/material/mat-table-pagination/#pagination-in-mat-table