title: ERROR TypeError: this.dataSource.filter is not a function
body: <p>am using angular 6 to implement  Edit/ Add/ Delete Rows in Material Table with using Dialogs inline Row Operation but am getting the error datasource.filter is not a function when i press the update button i don't know whats the problem here and what am i missing.</p>
  
  <p><strong>Here is my update-admin-info.component.ts*</strong></p>
  
  <pre><code>```import { Component, ViewChild, OnInit, ChangeDetectorRef   } from '@angular/core';
  import {MatTableDataSource, MatTable} from '@angular/material/table';
  import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material/dialog';
  import { UserService } from '../services/user.service';
  import { User } from '../model/User.model'
  import { DialogeditComponent } from '../dialogedit/dialogedit.component';
  
  
  @Component({
    selector: 'app-update-admin-info',
    templateUrl: './update-admin-info.component.html',
    styleUrls: ['./update-admin-info.component.css']
  })
  export class UpdateAdminInfoComponent implements OnInit {
    displayedColumns: string[] = ['firstname', 'lastname', 'email','college','department','action'];
     dataSource;
    users: User[];
  
    @ViewChild(MatTable,{static:true}) table: MatTable&lt;any&gt;;
  
    applyFilter(filterValue: string) {
      this.dataSource.filter = filterValue.trim().toLowerCase();
    }
  
  
    constructor(public dialog: MatDialog,private userservice:UserService,private cdr: ChangeDetectorRef) { }
  
    ngOnInit() {
      this.userservice.getAdmins()
      .subscribe((users: User[]) =&gt; {
        this.users = users;
        this.dataSource = new MatTableDataSource(users);
  
      });
    }
  
    editUser(action,obj)
  {
    obj.action = action;
   const dialogRef = this.dialog.open(DialogeditComponent,{
      width: '250px',
      data:obj
  
    });
    dialogRef.afterClosed().subscribe(result =&gt; {
      if(result.event == 'update')
      {
        this.updateRowData(result.data);
      }
  
    });
  
       this.cdr.detectChanges();
  }
  
  updateRowData(row_obj){
    this.dataSource = this.dataSource.filter((value,key)=&gt;{
      if(value._id == row_obj.id){
        value.firstname = row_obj.firstname;
      }
      return true;
    });
  
   this.cdr.detectChanges();
   this.table.renderRows();
  }
  
  
  }```
  </code></pre>
  
  <p><strong>here is my Dialogedit.component.ts</strong></p>
  
  <pre><code>```import { Component, OnInit, Inject, ChangeDetectorRef } from '@angular/core';
  import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
  import { User } from '../model/User.model';
  import { UserService } from '../services/user.service';
  import { UpdateinfoService } from '../services/updateinfo.service';
  import { HttpClient } from '@angular/common/http';
  import { Router } from '@angular/router';
  import { FormGroup, Validators, FormControl, AbstractControl } from '@angular/forms';
  
  
  
  @Component({
    selector: 'app-dialogedit',
    templateUrl: './dialogedit.component.html',
    styleUrls: ['./dialogedit.component.css'],
    providers: [UserService]
  })
  export class DialogeditComponent implements OnInit {
  
    action:string;
    local_data:any;
  
    constructor(public dialogRef: MatDialogRef&lt;DialogeditComponent&gt;,
      @Inject(MAT_DIALOG_DATA) public data: User, public http: HttpClient, public updateinfo: UpdateinfoService, public router: Router, private userservice:UserService,private cdr: ChangeDetectorRef) {  console.log(data);
        this.local_data = {...data};
        this.action = this.local_data.action;}
  
    ngOnInit() {
  
  
    }
    onNoClick(): void {
      this.dialogRef.close({event:'Cancel'});
      this.cdr.detectChanges();
    }
  
    onEdit() {
      this.dialogRef.close({event:this.action,data:this.local_data});
      this.userservice.selectedUser =this.local_data;
      this.cdr.detectChanges();
    }
  
  
  }```
  </code></pre>
  
  <p><strong>here is my Dialogedit.component.html</strong></p>
  
  <pre><code>```&lt;h1 mat-dialog-title&gt;Row Action :: &lt;strong&gt;{{action}}&lt;/strong&gt;&lt;/h1&gt;
      &lt;div mat-dialog-content&gt;
          &lt;mat-form-field *ngIf="action != 'Delete'; else elseTemplate"&gt;
            &lt;input   matInput [(ngModel)]="local_data.firstname" placeholder="First Name"&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;input  matInput [(ngModel)]="local_data.lastname" placeholder="Last Name"&gt;
          &lt;/mat-form-field&gt;
        &lt;/div&gt;
        &lt;div mat-dialog-actions&gt;
          &lt;button mat-button (click)="onNoClick()"  mat-flat-button color="warn"&gt;Cancel&lt;/button&gt;
          &lt;button  mat-button (click) = "onEdit(local_data)"  &gt;{{action}}&lt;/button&gt;
        &lt;/div&gt;```
  </code></pre>
  
  <p><strong>The error am getting is in this line here <code>this.dataSource = this.dataSource.filter((value,key)=&gt;{</code></strong></p>