источник данных в таблице матов с использованием Angular Material в методе Angular 8 get

Question

Я пытаюсь создать Mat Mat Table, используя Angular и Django для построения фильтра и метода нумерации страниц и т. Д. Дело в том, что я использую Django как backend и Angular Fronted, и у меня есть метод Get, Insert, Alter и Delete. весь этот метод работает на 100%, но я понятия не имею, как я могу сделать фильтр, используя эти методы для построения фильтра и кнопок разбивки на страницы. Мне нужно знать, если я могу построить метод фильтра, например, используя только передний, или мне нужно оба метода make.

service .ts

    baseurl = "http://127.0.0.1:8000";
    constructor(private http: Http, private httpClient: HttpClient) { }
    private headers = new Headers({ 'Content-Type': 'application/json', Authorization: `JWT ${localStorage.getItem("token")}` });

getDoctores(): Promise<Doctor[]> {
        return this.http.get(this.baseurl + '/doctor?format=json', { headers: this.headers })
            .toPromise()
            .then(response => response.json() as Doctor[])
    }
    deleteDoctor(id: number): Promise<void> {
        const url = `${this.baseurl + "/doctor"}/${id}`;
        return this.http.delete(url, { headers: this.headers })
            .toPromise()
            .then(() => null)
    }
    createDoctor(d: Doctor): Promise<Doctor> {
        return this.http
            .post(this.baseurl + "/doctor", JSON.stringify(d), { headers: this.headers })
            .toPromise()
            .then(res => res.json() as Doctor)
    }
    updateDoctor(doctores): Observable<any> {
        const body = { nombreDoc: doctores.nombreDoc, apellidoDoc: doctores.apellidoDoc, rutDoc: doctores.rutDoc, release_date: doctores.release_date, direccionDoc: doctores.direccionDoc, telefonoDoc: doctores.telefonoDoc };
        return this.http.put(this.baseurl + '/doctor/' + doctores.id, body,
            { headers: this.headers });
    }

component .ts

 doctores: Doctor[];
  selectedDoctor;
  constructor(private dataService: dataService, public dialog: MatDialog,
        private router: Router) {
    this.getDoctores();
    this.selectedDoctor = {
      id: -1, nombreDoc: '', apellidoDoc: '', rutDoc: '', direccionDoc: ''
      , telefonoDoc: '', release_date: ''
    }
  }
  getDoctores(): void {
    this.dataService
      .getDoctores()
      .then(doctores => this.doctores = doctores);
  }

пример