using mat-paginator with mat-table using observable array as the datasource

Question

I am using an observable array as the datasource. This works fine except that i am unable to figure out how to use paginator now. below is the html and ts

html

 <table mat-table #TABLE [dataSource]="cards" class="mat-elevation-z8">          
                <!-- Email Column -->
             <ng-container matColumnDef="date">
                <th mat-header-cell *matHeaderCellDef  class="tbl-th"> Date </th>
                <td mat-cell *matCellDef="let element"> {{core.pretifyDate(element.date)}} </td>
              </ng-container>

            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
            <tr mat-row *matRowDef="let row; columns: displayedColumns;">
            </tr>
          </table>
          <mat-paginator [pageSizeOptions]="[5, 10, 20, 50, 100]" [pageSize]="pageSize" showFirstLastButtons></mat-paginator>

.ts

export class CardQueueComponent implements OnInit {

  @ViewChild('TABLE', {static: false}) table: MatTable<any>;
  @ViewChild(MatPaginator, {static: true}) paginator: MatPaginator;

  displayedColumns: string[] = [ 'image', 'customer', 'email',  'date', 'process' ];
  cards: Observable<Card[]> 
  pageSize = 5


  constructor(public dataSvc: SBDataService,
              public core:CoreService,
              private changeDetectorRefs: ChangeDetectorRef,
              ) { }

    async ngOnInit() {

      this.cards = this.dataSvc.fetchCards().pipe(
        map((cards: any) => cards.map(cardObj => {
          var c = new Card(cardObj.key, cardObj._frontImageUrl, cardObj._date, cardObj._rawData)

        return c
      }))
    );


    this.changeDetectorRefs.detectChanges();

    //this.dataSource.paginator = this.paginator;

  }

}

so the last commented line on paginator is something i need to figure out with after i directly associated cards observavble. Please advise

Julius Dzidzevičius · Accepted Answer · 2019-11-14T06:08:16.563

4

You just need to get a reference to your tables' DataSource and set your paginator in it. Eg:

dataSource = new MatTableDataSource()

async ngOnInit() {

  this.dataSvc.fetchCards().pipe(
    map((cards: any) => cards.map(cardObj => {
      var c = new Card(cardObj.key, cardObj._frontImageUrl, cardObj._date, cardObj._rawData)
  })).subscribe(cards => this.dataSource.data = cards);

);

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

  <mat-table [dataSource]="dataSource">

edited Nov 14 '19 at 06:08

answered Nov 13 '19 at 18:28

Julius Dzidzevičius

10,775
11
36
81

this.table.datasource.paginator = this.paginator; fails saying TypeError: Cannot set property 'paginator' of undefined – Moblize IT Nov 13 '19 at 18:38
Have you wrote datasource with capital - `dataSource`? If no, I recommend to install autocomplete plugin also to your IDE. I haven't checked the spellings – Julius Dzidzevičius Nov 13 '19 at 20:09
it;s written correctly as this.table.dataSource.paginator = this.paginator – Moblize IT Nov 13 '19 at 20:13
In your snippet this.table.dataSource.paginator = this.paginator is not in `ngAfterViewInit` – Julius Dzidzevičius Nov 13 '19 at 20:18
well paginator is highlighted as red saying it's not a property of CDKTableDataSourceInput so i dont think it matters where it is defined. – Moblize IT Nov 13 '19 at 20:22
Actually yes, dataSource is not the same, but placement does matter. Simple way would be to make own MatTableDatasource and provide to table. – Julius Dzidzevičius Nov 13 '19 at 20:31
well my code works for observable part. it is only attaching the paginator. so not sure why that should need to reimplemnt my own datasource provider – Moblize IT Nov 14 '19 at 03:43
one more thing the line u modified this.dataSource.data = c; gives me error as Type Card is missing the following properties from Unknown[] like push, pop and 18 others – Moblize IT Nov 14 '19 at 03:56
Because you want a simple way to make it work. MatTableDataSurce takes Paginator as input and reacts to its changes to render different data in the table. You simply no need to o anything else. Thats why I propose this way. About the error - it is fixed in updated snippet. – Julius Dzidzevičius Nov 14 '19 at 06:10

using mat-paginator with mat-table using observable array as the datasource

1 Answers1

Linked