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 getting how to start.
I have seen example but not getting:-https://stackblitz.com/edit/angular-material2-table?file=app%2Fapp.component.html
By default it filter based on whole object but i want to search only based on single property of json.
Working filters on each column, demo link Stackblitz.
To filter specific column in mat-table, add a search field for the column as below;
<mat-form-field class="filter" floatLabel="never">
<mat-label>Search</mat-label>
<input matInput [formControl]="nameFilter">
</mat-form-field>
And we connect the inputs to FormControls from the ReactiveFormsModule.
filterValues = {
name: '',
id: '',
colour: '',
pet: ''
};
And we will watch the value of the filter inputs and modify this filter object and the data source’s filter property when they change. We must assign the stringified version of the filter object to the data source’s filter property
ngOnInit() {
this.nameFilter.valueChanges
.subscribe(
name => {
this.filterValues.name = name;
this.dataSource.filter = JSON.stringify(this.filterValues);
}
)
this.idFilter.valueChanges
.subscribe(
id => {
this.filterValues.id = id;
this.dataSource.filter = JSON.stringify(this.filterValues);
}
)
this.colourFilter.valueChanges
.subscribe(
colour => {
this.filterValues.colour = colour;
this.dataSource.filter = JSON.stringify(this.filterValues);
}
)
this.petFilter.valueChanges
.subscribe(
pet => {
this.filterValues.pet = pet;
this.dataSource.filter = JSON.stringify(this.filterValues);
}
)
}
We have to change the data source’s filterPredicate to tell it how to interpret the filter information.
constructor() {
this.dataSource.data = this.people;
this.dataSource.filterPredicate = this.tableFilter();
}
tableFilter(): (data: any, filter: string) => boolean {
let filterFunction = function(data, filter): boolean {
let searchTerms = JSON.parse(filter);
return data.name.toLowerCase().indexOf(searchTerms.name) !== -1
&& data.id.toString().toLowerCase().indexOf(searchTerms.id) !== -1
&& data.colour.toLowerCase().indexOf(searchTerms.colour) !== -1
&& data.pet.toLowerCase().indexOf(searchTerms.pet) !== -1;
}
return filterFunction;
}
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:
<ng-container matColumnDef="item-filter">
<th mat-header-cell *matHeaderCellDef>
<input (keyup)="applyFilter($event.target.value)" (focus)="setupFilter('name')" />
</th>
</ng-container>
Or a more complex example, dynamically create a header row with per-column filtering:
<table mat-table [dataSource]="dataSource">
<ng-container *ngFor="let filterCol of ['names', 'age', 'address']">
<ng-container matColumnDef="filterCol">
<th mat-header-cell *matHeaderCellDef>
<input (keyup)="applyFilter($event.target.value)" (focus)="setupFilter(filterCol)"/>
</th>
</ng-container>
</ng-container>
<tr mat-header-row *matHeaderRowDef="['names', 'age', 'address']"></tr>
</table>
Be aware that you cannot have multiple header rows with the same keys, so this will not work:
<tr mat-header-row *matHeaderRowDef="['names', 'age', 'address']"></tr>
<tr mat-header-row *matHeaderRowDef="['names', 'age', 'address']"></tr>
You have to override the filterPredicate of your dataSource.
You want to specify what properties in your data the filter is applied to :-
this.dataSource.filterPredicate = function(data, filter: string): boolean {
return data.name.toLowerCase().includes(data.symbol.toLowerCase().includes(filter) || data.position.toString().includes(filter);
};
Use filterPredicate to override filter logic using customFilter()
Demo Link
Source Link
...
ngOnInit() {
this.getRemoteData();
// Overrride default filter behaviour of Material Datatable
this.dataSource.filterPredicate = this.createFilter();
}
...
// Custom filter method fot Angular Material Datatable
createFilter() {
let filterFunction = function (data: any, filter: string): boolean {
let searchTerms = JSON.parse(filter);
let isFilterSet = false;
for (const col in searchTerms) {
if (searchTerms[col].toString() !== '') {
isFilterSet = true;
} else {
delete searchTerms[col];
}
}
let nameSearch = () => {
let found = false;
if (isFilterSet) {
for (const col in searchTerms) {
searchTerms[col].trim().toLowerCase().split(' ').forEach(word => {
if (data[col].toString().toLowerCase().indexOf(word) != -1 && isFilterSet) {
found = true
}
});
}
return found
} else {
return true;
}
}
return nameSearch()
}
return filterFunction
}
To expand on Naresh's answer, the following HTML snippet shows how to get both sorting and filtering in the same column and also the little "x" button to clear filter terms:
<ng-container matColumnDef="description">
<th mat-header-cell *matHeaderCellDef mat-sort-header>
<mat-form-field >
<mat-label>Search Description</mat-label>
<input matInput
[formControl]="descriptionFilter"
(click)="$event.stopPropagation()">
<button mat-button
*ngIf="descriptionFilter.value"
matSuffix mat-icon-button
aria-label="Clear"
(click)="descriptionFilter.setValue('')">
<mat-icon>close</mat-icon>
</button>
</mat-form-field>
</th>
<td mat-cell *matCellDef="let assessment">
{{assessment?.description}} </td>
</ng-container>
This helped me :
https://www.freakyjolly.com/angular-material-table-custom-filter-using-select-box/#.YB4GBugzbIU
And If you want to have "and" condition over all select fields, then have an array - foundThisField[], instead of boolean found = true/false
Eg. foundThisField : number = []
then if field/column/property is found , do foundThisField.push(1) or else foundThisField.push(0)
and at end, return foundThisField.includes(0)?false:true
If you are looking for a range predicate to filter out a range of values on one attribute:
applyRangePredicate() {
this.datasource.filterPredicate = (data:
{id: string}, filter: string) => {
let searchlist = JSON.parse(filter);
var found = false
searchlist.forEach(item => {
if (data.id.indexOf(item) !== -1)
found = true
})
return found
}
}
then assign a json string to stream filtered data to the UI
this.applyRangePredicate()
this.datasource.filter = JSON.stringify(string[])
