Added a setTimeout to ngAfterViewInit which would set my paginator state and set my table data only if the table data came through before ngAfterViewInit was called.TableData = new MatTableDataSource(this.images) initialize our data source for our table and set flags for state This way I could ensure that the pagination state is set before the data. Added two flags in my component, one for if I had loaded the table data and one for if my pagination state had been set.Wrote a simple function for setting my table data as someone mentioned above:.This would make the paginator show page x, but the displayed data would always be the first page of data. My problem was that, when I would navigate to another component in my app, and return to my dynamic table data source, the table data would be set before the paginator state. When these events would happen in the this order the paginator worked just as expected.īecause I was using ReplaySubjects for getting the data for my tables, my paginator state would be set in ngAfterViewInit and then the table data would come in from my subscription (it depends on user ID so I don't have an initial value and that is why I didn't use BehaviorSubjects). For me, when I would first refresh my angular app, the paginator state would be set and then the data for my table would be set. My scenario was similar to the original issue above with a dynamic data source, but slightly different. Placing some console.logs() helped me figure out the order of events and why it didn't work consistently. This took me hours to finally track down and understand why my table wasn't working. This approach should also solve the problem (noted by one of the commenters here) of having the paginator rendered late when hidden behind an *ngIf template - the paginator will be sent to the data source even if it gets rendered very late. ĭataSource: MatTableDataSource = new MatTableDataSource() ĭisplayedColumns = ['col1', 'col2'.
It is also very useful to have a single data source and not replace it every load (as I've seen many people do) - just bind a data source to the mat-table and update it's data field. The correct methodology is to attach the to a property setter and set the data source paginator as soon (and as often) as that setter is called with a valid paginator.
Workarounds suggested here include using setTimeout() and ngAfterViewInit, are simply that - workarounds in the vein of "let's see how much we need to wait to make sure that the has set our component field with the correct paginator value". The question when the paginator is available in the view and can be retrieved and attached to the data source is the main crux of this issue and a common pitfall.
Similar code is working for the other component and table is getting rendered with the pagination properly, no clue what's wrong with this code. This.dataSource = new MatTableDataSource(somearray)
Below is my html: Īnd below is my code in component.ts: dataSource: MatTableDataSource ĭisplayedColumns = ['col1', 'col2'. Both have mat-table and paginators and pagination is working for one component and not working for the other component though the code is similar.