How to implement Angular Material table with filter?

I try to create an Angular Material table with filter like this one https://material.angular.io/components/table/examples I'm only able to show my JSON data in the table, but fail to implement filtering and pagination.

I use data.service.ts to fetch data from my API.

Here are my codes

app.component.html

    <div class="example-container mat-elevation-z8">
        <div class="example-header">
                <mat-form-field>
                  <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
                </mat-form-field>
              </div>            
    <mat-table #table [dataSource]="dataSource">

      <ng-container matColumnDef="name">
        <mat-header-cell *matHeaderCellDef> Name </mat-header-cell>
        <mat-cell *matCellDef="let mobster"> {{mobster.name}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="rank">
        <mat-header-cell *matHeaderCellDef> Rank </mat-header-cell>
        <mat-cell *matCellDef="let mobster"> {{mobster.rank}} </mat-cell>
      </ng-container>

      <ng-container matColumnDef="_id">
        <mat-header-cell *matHeaderCellDef> ID </mat-header-cell>
        <mat-cell *matCellDef="let mobster"> {{mobster._id}} </mat-cell>
      </ng-container>

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

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import 'rxjs/add/operator/map';
import { DataService } from './data.service';
import { Observable } from 'rxjs/Observable';
import { Mobster } from './mobster.model';
import { MatPaginator, MatTableDataSource } from '@angular/material';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  displayedColumns = ['name', 'rank', '_id'];
  dataSource: any = [];

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  showData() {
  this.dataService.getData()
    .subscribe((res) => {
      this.dataSource = res;
    });
  }

  constructor(private dataService: DataService) {}

  ngOnInit() {
    this.showData();
  }


}

data.service.ts

import { Injectable } from '@angular/core';
import { NgModule } from '@angular/core';
import { OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { Mobster } from './mobster.model';
import 'rxjs/add/operator/map';

@Injectable()
export class DataService {
  url = 'http://localhost:3000/api/mobsters' || 'https://mobster-api.herokuapp.com/api/mobsters';
  constructor(private http: HttpClient) { }

  getData() {
    return this.http.get(this.url);
  }

}