Components: 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
// 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:
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??
RahulKesarwani
All 12 comments
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
andrewseguin
on 29 Nov 2017
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.
phspies
on 13 Feb 2018
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.
alexpeasley
on 28 Feb 2018
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
andrewseguin
on 6 Mar 2018
Even i am facing same issue for dynamic data. Can anyone give the solution for this bug.
Aarti15
on 29 Mar 2018
Why is this issue closed? I have the same problem :(
Please reopen.
ghost
on 29 Mar 2018
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.
alexpeasley
on 29 Mar 2018
@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.
andrewseguin
on 29 Mar 2018
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
Hennessy811
on 15 Nov 2018
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
https://github.com/angular/material2/issues/10205
47arathore
on 11 Jan 2019
just call
this.dataSource.paginator = this.paginator;
after table data updated.
pullatjunaid
on 4 May 2019
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._
![angular-automatic-lock-bot[bot] picture](https://avatars.githubusercontent.com/in/40213?v=4&s=40)
angular-automatic-lock-bot[bot]
on 10 Sep 2019
Related issues
kara
路
3Comments
crutchcorn
路
3Comments
julianobrasil
路
3Comments
vanor89
路
3Comments
MurhafSousli
路
3Comments
Most helpful comment
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.