How do I apply paginator and sorting to my mat-table if im defining dataSource as dataSource: any[]?

Question

I just finished making a mat-table that populates itself through an http API call; it worked normally; but now I'm trying to add pagination and sorting and im getting an error (multiple actually) like this "Property 'paginator' does not exist on type 'any[]'.48 this.dataSource.paginator = this.paginator;" This is due to the fact I define DataSource as 'any'; but I had no way around this as my DataSource is pulling data from an API and I cannot define the data as anything. Here is my code.

import { Component } from '@angular/core';  
import {ServiceService} from './service.service';  
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MatTableModule } from '@angular/material/table';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { ViewChild } from '@angular/core';
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'EmployeeFE';  
     
  constructor(private ServiceService: ServiceService) { }  
  data: any;  
  EmpForm: FormGroup;  
  submitted = false;   
  EventValue: any = "Save";  
  dataSource: any[];
  displayedColumns: string[] = [
    "eId",
    "eName",
    "eAddress",
    "eAge",
    "editAction",
    "deleteAction"
  ];

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  ngOnInit(): void {  
    this.getdata();  

    this.EmpForm = new FormGroup({  
      eId: new FormControl(null),  
      eName: new FormControl("",[Validators.required]),        
      eAddress: new FormControl("",[Validators.required]),  
      eEmail:new FormControl("",[Validators.required]),  
      eAge: new FormControl("",[Validators.required]),  
    })    
  }

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

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  getdata() {  
    this.ServiceService.getData().subscribe((data: any[]) => {  
      this.data = data;
      this.dataSource = data;
    })  
  }  


}

Any ideas?

I've already suggested you to use dataSource: MatTableDataSource<any>; => dataSource = new MatTableDataSource<any>(); and update data through this.dataSource.data = data It will work out of the box — yurzui
@yurzui I tried that; that just leaves me with this error: ERROR in src/app/app.component.ts:64:7 - error TS2740: Type 'any[]' is missing the following properties from type 'MatTableDataSource<any>': _data, _renderData, _filter, _internalPageChanges, and 16 more. 64 this.dataSource = data; ~~~~~~~~~~~~~~~ Although that does seem to get rid of the other errors. — AAnon
Please read carefully dataSource = new MatTableDataSource<any>(); and this.dataSource.data = data — yurzui
@yurzui Yeah I literally copy pasted your code, it throws the error in reference to "this.dataSource=data" inside the getdata() function not to the variable definition — AAnon
Oh just saw your edit, thank you man that did it; I wasn't changing the this.dataSource to this.dataSource.data originally. — AAnon

Jobelle Jobelle · Accepted Answer · 2020-08-04T15:33:13

Declaration should be

dataSource = new MatTableDataSource<any>()

Set data in dataSource

this.dataSource.data = data;

Updated code

import { Component } from '@angular/core';  
import {ServiceService} from './service.service';  
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { MatTableModule } from '@angular/material/table';
import { MatTableDataSource } from '@angular/material/table';
import { MatPaginator } from '@angular/material/paginator';
import { MatSort } from '@angular/material/sort';
import { ViewChild } from '@angular/core';
@Component({  
  selector: 'app-root',  
  templateUrl: './app.component.html',  
  styleUrls: ['./app.component.css']  
})  
export class AppComponent {  
  title = 'EmployeeFE';  
     
  constructor(private ServiceService: ServiceService) { }  
  data: any;  
  EmpForm: FormGroup;  
  submitted = false;   
  EventValue: any = "Save";  
  public dataSource = new MatTableDataSource<any>()
  displayedColumns: string[] = [
    "eId",
    "eName",
    "eAddress",
    "eAge",
    "editAction",
    "deleteAction"
  ];

  @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
  @ViewChild(MatSort, { static: true }) sort: MatSort;

  ngOnInit(): void {  
    this.getdata();  

    this.EmpForm = new FormGroup({  
      eId: new FormControl(null),  
      eName: new FormControl("",[Validators.required]),        
      eAddress: new FormControl("",[Validators.required]),  
      eEmail:new FormControl("",[Validators.required]),  
      eAge: new FormControl("",[Validators.required]),  
    })    
  }

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

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();

    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

  getdata() {  
    this.ServiceService.getData().subscribe((data: any[]) => {  
      this.data = data;
      this.dataSource.data = data;
    })  
  }  


}

How do I apply paginator and sorting to my mat-table if im defining dataSource as dataSource: any[]?

1 Answers