title: Keyup filter table
body: <p>I have a user table that is currently filtered by groups - the users are assigned a group when they are added. I have an updateFilter function which searches by the users last name. The issue I'm currently having is when a group is selected, the users are shown, but when I search for a name and delete the searched characters for another name, the full list appears when I need it to only show and return whatever group is selected.</p>
  <p>Search div -</p>
  <pre><code>&lt;div class=&quot;col-4&quot;&gt;
     &lt;input
       type='text'
       class=&quot;form-control w-200px&quot;
       placeholder='Search by Last Name...'
       (keyup)='updateFilter($event)'/&gt;
   &lt;/div&gt;
  </code></pre>
  <p>Filter function -</p>
  <pre><code>  updateFilter(event) {
      const val = event.target.value.toLowerCase();
  
      this.rows = this.temp.filter(function (d) {
        return d.lastName.toLowerCase().indexOf(val) !== -1 || !val;
      });
  
      if (this.table) {
        this.table.offset = 0;
      }
    }
  </code></pre>
  <p>Group filter -</p>
  <pre><code>onGroupSelected($event) {
      const groupId = $event.target ? $event.target.value : $event;
      if (groupId === 'none') {
        this.rows = this.temp;
      } else {
        const groupUsers = this.groupUserMap.get(groupId);
        if (groupUsers) {
          this.rows = this.temp.filter((serviceUser) =&gt; groupUsers.includes(serviceUser.id));
        } else {
          this.rows = [];
        }
      }
      // @ts-ignore
      this.userSelections = this.userSelections ? this.userSelections : {};
      this.userSelections.groupId = groupId;
      localForage.setItem(this.username, this.userSelections);
    }
  </code></pre>