Can I change the default mat-paginator size depending on screensize?

Question

I have a angular project with a mat-table and a mat-paginator, similar to the following:

<div class="mat-elevation-z8">
  <table mat-table [dataSource]="dataSource" matSort>
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>
    <ng-container matColumnDef="progress">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Progress </th>
      <td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
    </ng-container>
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
    </ng-container>
    <ng-container matColumnDef="color">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
      <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>
    </ng-container>

    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;">
    </tr>
  </table>
  <mat-paginator [pageSizeOptions]="[5, 10, 15, 20, 25, dataSource.data.length]"></mat-paginator>
</div>

Also available here: Stackblitz Example

As you can see the pageSizeOptions are set to [5, 10, 15, 20, 25, dataSource.data.length]

I would like to be able to set the first value in this array (the default value) to be different depending on the screensize. So on smaller screens I'd have 10 as the default value, and larger screens I'd have 15.

Is this even a good idea/practice to do this?

Answer 1

You can use onresize event : (window:resize)="onResize($event)"

<div class="mat-elevation-z8" (window:resize)="onResize($event)">
  <table mat-table [dataSource]="dataSource" matSort>

    <!-- ID Column -->
    <ng-container matColumnDef="id">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> ID </th>
      <td mat-cell *matCellDef="let row"> {{row.id}} </td>
    </ng-container>

    <!-- Progress Column -->
    <ng-container matColumnDef="progress">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Progress </th>
      <td mat-cell *matCellDef="let row"> {{row.progress}}% </td>
    </ng-container>

    <!-- Name Column -->
    <ng-container matColumnDef="name">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Name </th>
      <td mat-cell *matCellDef="let row"> {{row.name}} </td>
    </ng-container>

    <!-- Color Column -->
    <ng-container matColumnDef="color">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Color </th>
      <td mat-cell *matCellDef="let row" [style.color]="row.color"> {{row.color}} </td>
    </ng-container>

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

  <mat-paginator [pageSize]="pageSize" [pageSizeOptions]="[5, 10, 15, 20, 25, dataSource.data.length]"></mat-paginator>
</div>

//your component

  onResize(event) {

    console.log(event.target.innerWidth);
    if (event.target.innerWidth > 600 && event.target.innerWidth < 800) {
      this.pageSize = 10;
    }
    else if (event.target.innerWidth > 800 && event.target.innerWidth < 1000) {
      this.pageSize = 15;
    } else {
      this.pageSize = 5;
    }

  }

Default page size should be 5

pageSize = 5;

You can check demo here and bind it according to your requirement of screen.