title: DataGrid doesn't update search on Project Clarity
body: <p>I have a table which shows data from cloud firestore. I have implemented my own search to search from the firestore directly, when I console I am able to get the data but it does't show on the datagrid.</p>
  
  <p>my front-end</p>
  
  <pre><code>&lt;input type="text" (keydown)="searchPhone($event)" placeholder="search phone no" class="input"&gt;
  &lt;div class="row"&gt;
      &lt;div class="col-sm"&gt;
          &lt;clr-datagrid [clDgRowSelection]="true"&gt;
              &lt;clr-dg-column [clrDgField]="'first_name'"&gt;
                  &lt;ng-container *clrDgHideableColumn="{hidden: false}"&gt;
                      Name
                  &lt;/ng-container&gt;
              &lt;/clr-dg-column&gt;
              &lt;clr-dg-column [clrDgField]="'phone_no'"&gt;
                  &lt;ng-container *clrDgHideableColumn="{hidden: false}"&gt;
                      Phone NO
                  &lt;/ng-container&gt;
              &lt;/clr-dg-column&gt;
  
              &lt;clr-dg-placeholder&gt;We couldn't find any data.&lt;/clr-dg-placeholder&gt;
              &lt;clr-dg-row *clrDgItems="let contractor of contractors" [clrDgItem]="contractor" (click)="transactionView(contractor)"&gt;
                  &lt;clr-dg-cell&gt;{{ contractor.first_name }} {{ contractor.last_name }}&lt;/clr-dg-cell&gt;
                  &lt;clr-dg-cell&gt;{{ contractor.phone_no }}&lt;/clr-dg-cell&gt;
              &lt;/clr-dg-row&gt;
          &lt;/clr-datagrid&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>on my ts file is as folows</p>
  
  <pre><code>task: any;
  contractors: any;
  dataCollection: any;
  data: Observable&lt;ContractorDoc[]&gt;;
  search: any;
  startAt = new Subject()
  endAt = new Subject()
  
  
  constructor(
      private afs: AngularFirestore,
      private router: Router) {
  }
  
  ngOnInit() {
      this.dataCollection = this.afs.collection('contractors')
      this.data = this.dataCollection.valueChanges()
      this.data.forEach(elem =&gt; {
          this.contractors = elem;
          console.log('Contractors', this.contractors);
      })
  }
  
  searchPhone($event) {
      let search = $event.target.value
      this.startAt.next(search)
      this.endAt.next(search + "\uf8ff")
  
      console.log(search);
      this.dataCollection = this.afs.collection('contractors').ref.where('phone_no', '==', search).onSnapshot((res) =&gt; {
          res.forEach(elem =&gt; {
              this.contractors = elem.data();
              console.log('My search event', elem.data());
          })
      })
  }
  </code></pre>
  
  <p>What am I doing wrong?</p>