how to search by multiple keywords separated by space using Mat Table

Question

I found an example where simple filter is applied. You can find the link below.

https://stackblitz.com/edit/angular-mat-table-inline-editing?file=app%2Ftable-editing-example.ts

As you see the code, once you put the search keyword, trim it like 'heliumLi' for 'Helium Li'. What if I want to find based on each word? like 'Helium' or 'Li'. I have to foreach and show the result if the column value has 'Helium' or 'Li'. How do i achieve that?

Answer 1

You can override the default filtering behaviour by defining a custom filterPredicate function (see https://material.angular.io/components/table/overview#filtering). For your example, try something like the following to match on exact symbol or partial name (both case insensitive) separated by space:

@Component({
  selector: 'table-editing-example',
  styleUrls: ['table-editing-example.css'],
  templateUrl: 'table-editing-example.html',
})
export class TableEditingExample {
  displayedColumns = ['position', 'name', 'weight', 'symbol', 'fav'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  ngOnInit() {
    this.dataSource.filterPredicate = this.filterObject;
  }

  applyFilter(filterValue: string) {
    filterValue = filterValue.trim(); // Remove whitespace
    filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
    this.dataSource.filter = filterValue;
  }

  filterObject(obj, filter): boolean {
    return filter.split(' ').some(
      item => obj.name.toLowerCase().indexOf(item) >= 0 || obj.symbol.toLowerCase() == item
    );
  }
}