title: Angular material table with data source: pagination and filter is not working
body: <p>I have the following angular material table with data source property:</p>
  
  <pre><code>&lt;div class="dim"&gt;
    &lt;mat-form-field &gt;
      &lt;input matInput class="warn" (keyup)="applyFilter($event.target.value)" placeholder="Search"&gt;
      &lt;mat-icon matSuffix&gt;search&lt;/mat-icon&gt;
    &lt;/mat-form-field&gt;
  &lt;/div&gt;
  &lt;div class="mat-elevation-z2"&gt;
    &lt;table mat-table [dataSource]="dataSource" matSort&gt;
      &lt;ng-container matColumnDef="unit_id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;ID&lt;/th&gt;
        &lt;td class="alignTd" mat-header *matCellDef="let row"&gt;{{row.id}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="unit_type"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Type&lt;/th&gt;
        &lt;td mat-header *matCellDef="let row"&gt;{{row.unit_type}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="location_id_auto"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Location&lt;/th&gt;
        &lt;td mat-header *matCellDef="let row"&gt;{{row.location}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="user_id"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;User&lt;/th&gt;
        &lt;td mat-header *matCellDef="let row"&gt;{{row.user}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="unit_number_hh"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Number Of units&lt;/th&gt;
        &lt;td mat-header *matCellDef="let row"&gt;{{row.unit_number}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="unit_status"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Status&lt;/th&gt;
        &lt;td mat-header *matCellDef="let row"&gt;{{row.status}}&lt;/td&gt;
      &lt;/ng-container&gt;
  
      &lt;ng-container matColumnDef="unit_date_added"&gt;
        &lt;th mat-header-cell *matHeaderCellDef mat-sort-header&gt;Date Added&lt;/th&gt;
        &lt;td mat-header *matCellDef="let row"&gt;{{row.date_added}}&lt;/td&gt;
      &lt;/ng-container&gt;
      &lt;tr class="example-expanded-row" mat-header-row *matHeaderRowDef="displayedColumns"&gt;&lt;/tr&gt;
      &lt;tr mat-row *matRowDef="let row; columns: displayedColumns;"&gt;
  
      &lt;/tr&gt;
    &lt;/table&gt;
    &lt;mat-paginator [pageSizeOptions]="[5, 10, 25, 100]"&gt;&lt;/mat-paginator&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And here is the corresponding typescript for it:</p>
  
  <pre><code>import { Component, OnInit, ViewChild } from '@angular/core';
  import { MatTableDataSource, MatPaginator, MatSort } from '@angular/material';
  import { HttpClient } from 'selenium-webdriver/http';
  import { AuthApiService } from '../../auth-api.service';
  
  @Component({
    selector: 'app-registration',
    templateUrl: './registration.component.html',
    styleUrls: ['./registration.component.css']
  })
  export class RegistrationComponent implements OnInit {
    dataSource:  any;
    displayedColumns: String[]=['unit_id', 'unit_type', 'location_id_auto', 'user_id', 'unit_number_hh', 'unit_status', 'unit_date_added'];
    @ViewChild(MatPaginator) paginator: MatPaginator;
    @ViewChild(MatSort) sort: MatSort;
    constructor(private auth: AuthApiService) { }
  
    ngOnInit() {
      this.getUnitData();
      this.dataSource.paginator;
      this.dataSource.sort;
    }
  
    applyFilter(filterValue: string){
      this.dataSource.filter = filterValue.trim().toLowerCase();
  
      if(this.dataSource.paginator)
      {
        this.dataSource.paginator.firstPage();
      }
    }
  
    getUnitData(){
      this.auth.getUnitDataService().subscribe(
        (data)=&gt;
        {
          this.dataSource = Object.values(data);
        },
        (error)=&gt;
        {
          console.log("Error: "+error)
        }
      )
  
    }
  
  }
  </code></pre>
  
  <p>I am getting the data and are displayed normally, but I have 6 records, and instead of displaying 5 on the first page and 1 on the other, all 6 rows are displayed on the first page, and the filter is not working at all.</p>
  
  <p>Here is a <a href="https://stackblitz.com/edit/angular-kgx1d6" rel="nofollow noreferrer">plunker</a>, you can add an array of data instead.</p>
  
  <p>I have the following error:</p>
  
  <blockquote>
    <p>ERROR TypeError: Cannot read property 'paginator' of undefined
        at RegistrationComponent.push../src/app/dashboard/registration/registration.component.ts.RegistrationComponent.ngOnInit
    (registration.component.ts:20)</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/Eg2O7.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Eg2O7.jpg" alt="enter image description here"></a></p>