MatPaginator not working in dynamically generated table.

[RahulKesarwani]

I am generating data Dynamically, and displaying it in Data Table, but I`m unable to link MatPaginator with the data table. Data is getting displayed in the table. Following is the sample code snippet (also attaching it ):

sCollectionList = null;
dataSource = new MatTableDataSource<object>(this.sCollectionList);
displayedColumns: string[] = [];

// SCollectionService Holds my custom HTTP methods //
constructor(private stColServ: SCollectionService) {
}


// Calling it when a Button from UI is clicked //
submitFilter() {

  // stFilter is a valid objet which is getting passed to my custom post request// 
  this.stColServ.stationFilter(this.stFilter).subscribe(
    data => {
    this.sCollectionList = data;

    this.displayedColumns = ['System Data' , 'Product Identifer' , 'Collected Date' , 'No Stations ?' , 'No Smnp ?', 'Export'];
this.dataSource.data = this.sCollectionList;

//      this.streamOfDataUpdates.subscribe(newData => this.dataSource.data = this.sCollectionList);
    this.dataSource.paginator = this.paginator;
    },
  );

}


@ViewChild(MatPaginator) paginator: MatPaginator;

/**
 * Set the paginator after the view init since this component will
 * be able to query its view for the initialized paginator.
 */
ngAfterViewInit() {
    this.dataSource.paginator = this.paginator;
}

I am Able to see the paginator on the UI, but it is totally unresponsive. Following is my sample HTML MatTable code, which displays data in the table:

<div style="margin-left: 30px;" class="example-container mat-elevation-z8 col-md-6 col-md-offset-3">

            <mat-table #table [dataSource]="dataSource">
            <ng-container matColumnDef="System Data"> 
            <mat-header-cell fxFlex="200px"
                *matHeaderCellDef> System Data </mat-header-cell>
            <mat-cell
                *matCellDef="let station"> <textarea readonly rows="8"
                wrap='off' show-tail> {{station['collectedData']}}</textarea> </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="Product Identifer"> <mat-header-cell
                *matHeaderCellDef>Product Identifer</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.productIdentifier}}
            </mat-cell> </ng-container> 
            <ng-container matColumnDef="Collected Date"> <mat-header-cell
                *matHeaderCellDef>Collected Date</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.collectionDate}} </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="No Stations ?"> <mat-header-cell
                *matHeaderCellDef>No Stations ?</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.noIpStations}} </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="No Smnp ?"> <mat-header-cell
                *matHeaderCellDef>No Smnp ?</mat-header-cell> <mat-cell
                *matCellDef="let station"> {{station.snmpFlagOn}} </mat-cell> </ng-container> 
            <ng-container
                matColumnDef="Export"> <mat-header-cell
                *matHeaderCellDef> Export </mat-header-cell> <mat-cell
                *matCellDef="let station">
            <button
                (click)="downloadCSV(station.productIdentifier,station.collectedData)">Export
                CSV</button>
            </mat-cell> </ng-container> 
            <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
            <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
            </mat-table>



            <mat-paginator *ngIf="sCollectionList" class="marginless-paginator-range-label"
                #paginator
                [pageIndex]="0"
                 [pageSize]="5"
                [pageSizeOptions]="[5, 10, 20]"> </mat-paginator>

        </div>

Following is the array response I receive, which is what I`m trying to display on UI:

[{
"productIdentifier":"365",
"snmpFlagOn":false,
"collectedData":"ahsgabbs s[lsnnspm] n",
"noIpStations":true,
"collectionDate":1511721000000
}]

Am I missing anything??

[andrewseguin]

Your best bet it to set up a plunker or stackblitz with a working example of your issue and posting it on StackOverflow. We want to keep issues open only for bugs and features

[phspies]

Same issue here. When pagination data is static, all works, but when this information is updated from a API call, the data is not displayed properly.

[alexpeasley]

Any update on this? I'm having the same sort of issues. I have search button that pulls back data from an API. Weird thing is that if I select my search button twice, then Pagination and Sort are set correctly. Just don't understand why it's not working on the first search.

[andrewseguin]

If you open an issue with a link to stackblitz reproducing the issue, we can figure it out. Otherwise it's ambiguous what the trouble is

[Aarti15]

Even i am facing same issue for dynamic data. Can anyone give the solution for this bug.

Why is this issue closed? I have the same problem :(
Please reopen.

[alexpeasley]

Hi guys, I finally figured this out, but it's not the cleanest solution. I was hiding the datatable on load based on an ngif. When that array was loaded then the table would show. At that point if I were to search my service again, then the paginator had a value and worked as expected. So my solution for now is to just show the empty mat-table. That way, pagination works on the first click. The drawback is that an empty table shows on load.

[andrewseguin]

@CHQ-synaix Unfortunately without a reproduction of the issue, we cannot help to provide guidance. Feel free to add a stackblitz showing your issue and we can see if there's a fix.

[malakhov-dmitrii]

I have solution on that we are placing table with paginators in child component which inits when our data is already loaded (with *ngIf, for example). This way pagination and sorting works properly called in OnInit lifehook

[47arathore]

Hi guys, I finally figured this out, but it's not the cleanest solution. I was hiding the datatable on load based on an ngif. When that array was loaded then the table would show. At that point if I were to search my service again, then the paginator had a value and worked as expected. So my solution for now is to just show the empty mat-table. That way, pagination works on the first click. The drawback is that an empty table shows on load.

I even faced the same issue. What I did is to load the table datasource inside onInit, and load the paginator view child inside afterViewInit. Both with checks that the data is available. This way your ngIf works correctly and you don't show an empty table.

  ngOnInit() {
    this.loadTable();
  }

  ngAfterViewInit() {
    this.loadTableViewChild();
  }

  loadTable() {
    if (this.rawTableData) {
      // this variables toggles the ngIf for complete div which includes table and paginator
      this.isDataSource = true;
      this.dataSource = new MatTableDataSource(this.rawTableData);
    }
  }

  loadTableViewChild() {
    if (this.rawTableData) {
      this.dataSource.paginator = this.paginator;
    }
  }

Paginator not loading correctly due to a ngIf is a bug that it is being tracked, you can refer this
#10205

[pullatjunaid]

just call
this.dataSource.paginator = this.paginator;

after table data updated.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}