Angular mat-table pagination not working, entire data is loaded on First page of mat-table

Question

I have use Angular Material table, i have bind data source from ts file,but all the data is loaded on very first page, pagination is not working.I have two more table, which are on same page,same problem for other tables too.

I have tried

setTimeout(() => this.dataSource.paginator = this.paginator);

and

ngAfterViewInit() {
   this.dataSource.paginator = this.paginator
}

HTML:

    <mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers">
      <ng-container matColumnDef="checked">
        <mat-header-cell fxFlex="10" (click)="selectAllUsers()" *matHeaderCellDef>
          <mat-checkbox [(ngModel)]="checkedAllUsers"></mat-checkbox>
        </mat-header-cell>
        <mat-cell fxFlex="10" *matCellDef="let element">
          <mat-checkbox [(ngModel)]="element.checked"></mat-checkbox>
        </mat-cell>
      </ng-container>

      <ng-container matColumnDef="firstName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> First Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.firstName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="lastName">
        <mat-header-cell fxFlex="25" *matHeaderCellDef> Last Name </mat-header-cell>
        <mat-cell fxFlex="25" *matCellDef="let element"> {{element.lastName}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="email">
        <mat-header-cell fxFlex="30" *matHeaderCellDef> Email </mat-header-cell>
        <mat-cell fxFlex="30" *matCellDef="let element"> {{element.email}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="actions">
        <mat-header-cell fxFlex="10" *matHeaderCellDef> Action </mat-header-cell>
        <mat-cell fxFlex="10" *matCellDef="let row; let i=index;">
          <button mat-icon-button class="viewButton" (click)="view(i, row.id, row.title, row.state, row.url, row.created_at, row.updated_at)">
            <mat-icon aria-label="Delete">remove_red_eye</mat-icon>
          </button>
        </mat-cell>
      </ng-container>
      <mat-header-row *matHeaderRowDef="allUsersColumns"></mat-header-row>
      <mat-row *matRowDef="let row; columns: allUsersColumns;"></mat-row>
    </mat-table>
    <mat-paginator #allUsersPaginatorr [pageSizeOptions]="[10,20,30]" showFirstLastButtons></mat-paginator>

TS Code:

 @ViewChild(MatPaginator) paginator: MatPaginator;

 allUsersColumns: string[] = ['checked', 'firstName', 'lastName', 'email', 
'actions'];
allUsersDataSource = new MatTableDataSource<any>();
 allUsers: any[] = [
{ checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 'd@gmail.com' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
 'w@yahoo.in' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
 'randy@gmail.com' },
  { checked: true, firstName: 'Chad', lastName: 'Spongla', email: 
   'c@redif.com' },
   { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
  'd@gmail.com' },
  { checked: false, firstName: 'Jimmy', lastName: 'Williams', email: 
  'w@yahoo.in' },
  { checked: false, firstName: 'Randy', lastName: 'Waif', email: 
  'randy@gmail.com' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 'c@redif.com' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 'd@gmail.com' },
    { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 'w@yahoo.in' },
  { checked: false, firstName: 'Chad', lastName: 'Spongla', email: 
 'c@redif.com' },
  { checked: false, firstName: 'Debi', lastName: 'Austin', email: 
 'd@gmail.com' },
  { checked: true, firstName: 'Jimmy', lastName: 'Williams', email: 
 'w@yahoo.in' }
 ];
ngOnInit() {
 this.allUsersDataSource = new MatTableDataSource(this.allUsers);
  this.allUsersDataSource.paginator = this.paginator;
}

score 19 · Answer 1 · answered Aug 09 '20 at 16:28

If your mat-paginator is inside any ngIf conditioned block as shown in the below code, then the table shows all the data in the first page itself.

<div *ngIf="isDataLoaded">
   <mat-table [dataSource]="dataSource">
      ...
      ...
   </mat-table>
   <mat-paginator
         [length]="allUsers.length"
         [pageSize]="5"
         [pageSizeOptions]="[5, 10, 20]">
   </mat-paginator>
</div>

Solution 1: Move the mat-paginator code block outside of the ngIf conditioned block as shown below:

<div *ngIf="isDataLoaded">
   <mat-table [dataSource]="dataSource">
      ...
      ...
   </mat-table>
</div>
<mat-paginator
         [length]="allUsers.length"
         [pageSize]="5"
         [pageSizeOptions]="[5, 10, 20]">
</mat-paginator>

Solution 2: Use hidden as alternative for ngIf directive as shown below:

<div [hidden]="!isDataLoaded">
   <mat-table [dataSource]="dataSource">
      ...
      ...
   </mat-table>
   <mat-paginator
         [length]="allUsers.length"
         [pageSize]="5"
         [pageSizeOptions]="[5, 10, 20]">
   </mat-paginator>
</div>

Note: And of course, following mandatory steps for initializing mat-table data and mat-paginator

this.dataSource = new MatTableDataSource(this.allUsers);
this.dataSource.paginator = this.paginator;

Happy Coding...Cheerzz

That was a great catch regarding `ngIf` I was struggling to find where I went wrong. Thanks! — eddyizm, Oct 07 '20 at 22:54

score 8 · Answer 2 · answered Mar 28 '19 at 13:19

8

You should assign your data to the this.allUsersDataSource.data. Also ngAfterViewInit is necessary to relate the paginator with the table. Change your code

ngOnInit() {
 this.allUsersDataSource = new MatTableDataSource(this.allUsers);
  this.allUsersDataSource.paginator = this.paginator;
}

with

ngOnInit() {
     this.allUsersDataSource.data = new MatTableDataSource(this.allUsers);
}
ngAfterViewInit() {
      this.allUsersDataSource.paginator = this.paginator;
}

answered Mar 28 '19 at 13:19

boyukbas

1,137
16
24

You're welcome. I will appreciate if you can upvote – boyukbas Mar 29 '19 at 21:31
Thanks for perfect solution. – Muhammad Saqlain Oct 25 '19 at 13:26
Got it! But what if I don't wanna load my data in mat-table on page load. I want to load it when user clicks on any buttons? – Jagdish Chopde Feb 14 '20 at 10:26
I didn't try it but I think you can move "this.allUsersDataSource.data = new MatTableDataSource(this.allUsers);" to the place you would like. – boyukbas Feb 14 '20 at 10:38
I had same issue all data was showing intitally and pagination and sorting did not work, This solution works for me. Thanks – Balasubramanian Ramamoorthi Oct 27 '22 at 10:31

score 3 · Answer 3 · answered Feb 04 '19 at 13:34

3

The data source for the table should be allUsersDataSource not allUsers.

So change:

<mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsers">
                                                                     /\

To,

<mat-table class="mt-4 table-container" fxFlex="100" [dataSource]="allUsersDataSource">

Stackblitz

answered Feb 04 '19 at 13:34

Prashant Pimpale

10,349
9
44
84

Ohh great thank you so much..it work,But i have 5 mat-tabs on page it is working on first page as you suggested me to change datasource,but on next tab pagination is not working i have done same for table second – Jayant Belekar Feb 04 '19 at 14:58
Do i have to create separate objects of paginator i.e @ViewChild(MatPaginator) paginator2: MatPaginator – Jayant Belekar Feb 04 '19 at 15:09
hello Sir https://stackblitz.com/edit/angular-xbgkht this is my url of my code, it is not working due to some issue,thanks in advance – Jayant Belekar Feb 05 '19 at 07:49
@JayantBelekar Check out this:https://stackoverflow.com/questions/47691186/angular-material-2-multiple-mat-table-sorting-is-working-on-first-table-only – Prashant Pimpale Feb 05 '19 at 12:02
Use different `MatPaginator` for different table – Prashant Pimpale Feb 07 '19 at 08:56
yes i did,ok i will see if there is anything else that is effecting it. – Jayant Belekar Feb 07 '19 at 09:42

score 1 · Answer 4 · answered Jun 14 '21 at 04:27

My problem was that the paginator was inside a div block with ngIf depending on the dataSource. So when in ngAfterViewInit() I call this.dataSource.paginator = this.paginator; this.paginator is not initialised. In my case the dataSource is initialised after the ngAfterViewInit is called due to the backend response time. The solution was to change ngIf with [hidden]. In that case the table and the paginator are not shown when there is no data, but this.paginator is initialised, so when the data comes in it will be set to the data dource properly.

score 0 · Answer 5 · edited May 29 '20 at 06:58

0

You should to initialize paginator like this:

@ViewChild(MatPaginator, {static: true}) set matPaginator(paginator: MatPaginator) {
    this.dataSource.paginator = paginator;
}

edited May 29 '20 at 06:58

youri

3,685
5
23
43

answered May 29 '20 at 06:13

Nematullah

1

score 0 · Answer 6 · answered Mar 20 '21 at 15:03

Use mat-table inside its own component, with ngAfterViewInit defined such as

@Component({
  selector: 'app-topics',
  templateUrl: './topics.component.html',
  styleUrls: ['./topics.component.scss']
})
export class TopicsComponent implements OnInit {
  @ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;


  ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

You can embed the mat-table component in the parent template (in this example with lazy loading) such as

<ng-template matExpansionPanelContent>
    <app-topics> </app-topics>
</ng-template>

Angular mat-table pagination not working, entire data is loaded on First page of mat-table

6 Answers6

Linked