Angular Material Table - Custom Predicate filter

 

Let's say I have the following data source used in an expandable table and I want to filter the table by the anomaly score.

export class DatasourceModel {

id: string;

sysplexSystem: string;

sysplex: string;

system: string;

peak: number;

col0hr: BarChartDetail;

col1hr: BarChartDetail;

col2hr: BarChartDetail;

col3hr: BarChartDetail;

col4hr: BarChartDetail;

col5hr: BarChartDetail;

col6hr: BarChartDetail;

col7hr: BarChartDetail;

col8hr: BarChartDetail;

col9hr: BarChartDetail;

col10hr: BarChartDetail;

col11hr: BarChartDetail;

col12hr: BarChartDetail;

col13hr: BarChartDetail;

col14hr: BarChartDetail;

col15hr: BarChartDetail;

col16hr: BarChartDetail;

col17hr: BarChartDetail;

col18hr: BarChartDetail;

col19hr: BarChartDetail;

col20hr: BarChartDetail;

col21hr: BarChartDetail;

col22hr: BarChartDetail;

col23hr: BarChartDetail;

constructor() { }

}

export interface BarChartDetail {

anomalyScore: number;

index: number;

limitedModel: string;

missing: boolean;

numNeverSeenBeforeMessages: number;

numNewMessages: number;

numNewMessagesFirstReported: number;

numUniqueMsgIds: number;

}

The default Material filter cannot filter the BarchartDetail object, therefore the need for a custom filter is needed.

Table component: (Basic code for table creation is omitted for clarity).

ngOnInit() {

this.dataSource = new MatTableDataSource(data);

this.dataSource.paginator = this.paginator;

this.dataSource.sort = this.sort;

this.dataSource.filterPredicate = this.createFilter();

}

private createFilter(): (input: DatasourceModel, filter: string) => boolean {

const filterFunction = function (input, filter): boolean {

for (let index = 0; index < 24; index++) {

const colName = `col${index}hr`;

if (input[colName].anomalyScore.toString().indexOf(filter) !== -1) {

return true;

}

}

if (input.sysplexSystem.trim().toLowerCase().indexOf(filter) !== -1 ||

input.sysplex.trim().toLowerCase().indexOf(filter) !== -1 ||

input.system.trim().toLowerCase().indexOf(filter) !== -1) {

return true;

}

return false;

};

return filterFunction;

}

applyFilter(filterValue: string) {

this.dataSource.filter = filterValue.trim().toLowerCase();

if (this.dataSource.paginator) {

this.dataSource.paginator.firstPage();

}

}

html:

<mat-form-field appearance="standard" class="select-container">

<mat-label>Filter</mat-label>

<input matInput (keyup)="applyFilter($event.target.value)" #input>

</mat-form-field>