Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to create custom filtering using MatTableDataSource in angular 5?

In Angular material official website Angular Material Table it is mentioned that filterPredicate: ((data: T, filter: string) => boolean) will filter data based on a specific field. But don't know how to start. Is there any example is present for this.

like image 464
Tanvi Shah Avatar asked Apr 19 '18 17:04

Tanvi Shah


People also ask

How do you put a filter on a mat table?

Save this question. Show activity on this post. export class TableFilteringExample { displayedColumns = ['position', 'name', 'weight', 'symbol']; dataSource = new MatTableDataSource(ELEMENT_DATA); applyFilter(filterValue: string) { filterValue = filterValue.

How do you filter on specific columns with filterPredicate in an angular material table?

Material has implemented its own search feature you can override it by updating the filterPredicate property on the date source. Call the generateTable function on ngOninit() life cycle. Whenever you wish to apply the filter, update the filter property on dataSource to the string value to be searched.

What is filterPredicate in angular?

Default filterPredicate function combines all columns values and checks if the filter string exists in the combined string. filterPredicate uses a special character(◬) in between the column values while appending.


1 Answers

This answer seems to show how to use the filter predicate:

https://stackoverflow.com/a/50174938/6130716

It works like so:

this.dataSource.filterPredicate = (data: MyObject, filter: string) => {
  return data.property == filter;
};

this.dataSource.filter = myValue;
like image 172
Pete Avatar answered Oct 02 '22 13:10

Pete