Filtering specific column in Angular Material table in angular 5

Question

In Angular material official website it is mentioned that filterPredicate: ((data: T, filter: string) => boolean) will filter data based on specific field. But don\'t gettin

Answer 1

You can get to filter by a dynamic column, as in no hardcoded column name, doing the following:

// On input focus: setup filterPredicate to only filter by input column
setupFilter(column: string) {
  this.dataSource.filterPredicate = (d: TableDataSourceType, filter: string) => {
    const textToSearch = d[column] && d[column].toLowerCase() || '';
    return textToSearch.indexOf(filter) !== -1;
  };
}

applyFilter(filterValue: string) {
  this.dataSource.filter = filterValue.trim().toLowerCase();
}

In the template you can have something like this:

Or a more complex example, dynamically create a header row with per-column filtering:

Be aware that you cannot have multiple header rows with the same keys, so this will not work: