MatPaginator not working in dynamically generated table.

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??

[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.

[angular-automatic-lock-bot[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.}