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?

Ploughboy

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.

Ettieettinger

doesn't it work if you have 10 columns with min-width: 10rem of each cell. – Archidiaconal

I needed this.dataSource.paginator = this.paginator; in the onResize(event) Method after setting this.pageSize to make it work. – Willey

Answer 2

If screen-size is less than 1440px, the most simplest way is following:

pageSize = window.innerWidth < 1440 ? 9 : 13; //show 9 records or 13 records as default

Riverhead