title: How to select a column in a table for searching values inside it?
body: <p>I just added the search bar in my Angular project with pipes.
  At the moment the search bar works for all the elements in my table.</p>
  
  <p>I would like to select a column in a dropdown or just with a checkbox and search the values just of that specific column.
  How can I do it?</p>
  
  <p>My columns are from an array of getColumns() in my service.</p>
  
  <p>COMPONENT.HTML</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;ul class="table-wrapper"&gt;
      &lt;div class="table-title"&gt;
        &lt;div class="row"&gt;
          &lt;div class="col-sm-4"&gt;
            &lt;div class="show-entries"&gt;
              &lt;span&gt;Show&lt;/span&gt;
              &lt;label&gt;
                &lt;select [(ngModel)]="pageSize"&gt;
                  &lt;option *ngFor="let maxPerPage of rowsOnPageSet"
                          (click)="maxElements(maxPerPage)"&gt;{{maxPerPage}}&lt;/option&gt;
                &lt;/select&gt;
              &lt;/label&gt;
              &lt;span&gt;users&lt;/span&gt;
            &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-4"&gt;
            &lt;h2 class="text-center"&gt;Users &lt;b&gt;Details&lt;/b&gt;&lt;/h2&gt;
            &lt;button *ngIf="metadata &amp;&amp; metadata.addMD" (click)="addFunc(metadata)"&gt;{{metadata.addMD.label}}&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="col-sm-4"&gt;
            &lt;div class="search-box"&gt;
              &lt;div class="input-group"&gt;
  
      --&gt;MODIFY SOMETHING HERE
                &lt;span class="input-group-addon"&gt;&lt;i class="material-icons"&gt;&amp;#xE8B6;&lt;/i&gt;&lt;/span&gt;
                &lt;input type="text" class="form-control" name="searchString" placeholder="Search..." [(ngModel)]="searchString"&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;table class="table table-bordered"&gt;
        &lt;thead&gt;
        &lt;tr&gt;
          &lt;th *ngFor="let col of columns" (click)="sortTable(col)"&gt;{{col}}
            &lt;i *ngIf="col === columnSorted &amp;&amp; !direction" class="material-icons"&gt;keyboard_arrow_up&lt;/i&gt;
            &lt;i *ngIf="col === columnSorted &amp;&amp; direction" class="material-icons"&gt;keyboard_arrow_down&lt;/i&gt;
          &lt;/th&gt;
          &lt;th&gt;Actions&lt;/th&gt;
        &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody&gt;
        &lt;tr *ngFor="let user of users | paginate: {itemsPerPage: pageSize,
                                                 currentPage: page,
                                                 totalItems: users.length}  | filterAll: searchString"&gt;
          &lt;td *ngFor="let col of columns"&gt;{{user[col]}}&lt;/td&gt;
          &lt;td&gt;
            &lt;button [ngClass]="getClassCondition(act.actionType)" *ngFor="let act of actions"
                    (click)="actionFunc(act, user)"&gt;{{act.label}}&lt;/button&gt;
          &lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;
      &lt;/table&gt;
  
      &lt;div align="center"&gt;
        &lt;!--&lt;div class="hint-text"&gt;Showing &lt;b&gt;{{totUsersPerPage}}&lt;/b&gt; out of &lt;b&gt;{{users.length}}&lt;/b&gt; entries&lt;/div&gt;--&gt;
        &lt;ul align="center"&gt;
          &lt;pagination-controls (pageChange)="pageChanged($event)"&gt;&lt;/pagination-controls&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
  
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>PIPE.TS</p>
  
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  
  @Pipe({
    name: 'filterAll'
  })
  export class FilterPipe implements PipeTransform {
    transform(value: any, searchText: any): any {
      if (!searchText) {
        return value;
      }
      return value.filter((data) =&gt; this.matchValue(data, searchText));
    }
  
    matchValue(data, value) {
      return Object.keys(data).map((key) =&gt; {
        return new RegExp(value, 'gi').test(data[key]);
      }).some(result =&gt; result);
    }
  }
  </code></pre>