Sorting, pagination and filter in mat-table with custom datasource?

Question

I'm trying to sort, paginate and filter table with Angular Material "mat-table" getting its data from custom datasource.

I'm using angular 5.2.5 with chrome navigator

This is the component...

constructor(
    private jobsService: JobsService,
    public dialog: MatDialog,
    private snackBar: MatSnackBar,
    private aps: ApplicationsService,
    private bindingsService: BindingsService
  ) {
    this.jobs = new Jobs(jobsService);
    this.jobsDataSource = new JobDataSource(this.jobs);
  }

This is my own datasource (JobDataSource)

import { DataSource } from '@angular/cdk/table';
import { Jobs } from './jobs';
import { Observable } from 'rxjs/Observable';
import { Job } from './job.model';
import { SatelliteResponse } from './satelliteresponse.model';

export class JobDataSource extends DataSource<SatelliteResponse> {

    constructor(private jobs: Jobs) {
        super();
    }

    /** Connect function called by the table to retrieve one stream containing the data to render. */
    connect(): Observable<SatelliteResponse[]> {
        const displayDataChanges = [
            this.jobs.dataChange,
            this.jobs.jobList
        ];

        return Observable.merge(...displayDataChanges).map((data) => {
            return data;
        });
    }

    disconnect() { }

}

The thing I need is like the example...

dataSource = new MatTableDataSource<PeriodicElement>(ELEMENT_DATA);

so... I think I need my JobDataSource class extends MatTableDataSource (because MatTableDataSource is a child of DataSource). I change the code, but it shows me an error saying "connect" is not a method for MatTableDataSource.

How can I achieve it? How can I modify JobDataSource to still getting data with an observable and also get MatTableDataSource properties for filtering, sorting... etc.

Thank you

Lisa Copeland Lisa Copeland · Accepted Answer · 2019-07-18T15:57:14

You must first implement a service to get the data from your http call and then implement the datasource class from @angular/cdk/collections - I think that is where your confusion lies please see https://blog.angular-university.io/angular-material-data-table/ - It explains very clearly how to implement a custom data source for mat table

Sorting, pagination and filter in mat-table with custom datasource?

2 Answers