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](https://stackblitz.com/edit/angular-mf5xyy?file=app%2Ftable-overview-example.html)

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?