[Table] Multiple parameters filter using a separator (eg : value1+value2)

[WizardPC]

Bug, feature request, or proposal:

Proposal, having a native filter predicate wich work on multiple columns.

What is the expected behavior?

Having the native possibility to use the pattern "filter1+filter2+..." to further reduce the results of the datatable.

What is the current behavior?

Using one parameter is okay, but if i want to add another parameter (separated by blank, coma, +...) it doesn't return any lines.

What are the steps to reproduce?

I have made a filterPredicate doing the job :
https://stackblitz.com/edit/sb-issue-multiple-filter

What is the use-case or motivation for changing an existing behavior?

Improve user experience.

Is there anything else we should know?

Actually it's possible to acheive this behavior with the filterPredicate, but for me it will be better if the use of + become native to Angular Material, many website as this behavior.

Perhaps it can be another separator too or a parameterisation. What do you think ?

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

See SB.

[Znow]

@WizardPC Do you have an example with searching for multiple values on the same column? Thanks

[JayAhn2]

Definitely, we need this functionality...

[aniketsjagtap]

dataSource = new MatTableDataSource();
applySearch(filterValue : string){
let words = [];
this.dataSource.data = initiallyAssignedArray;
words = filterValue.split("+");
words.map((word)=>{
searchFunction(word);
})
}

searchFunction(word : string){
this.dataSource.filter = word.trim().toLowerCase();
this.dataSource.data = this.dataSource.filteredData;
if(this.dataSource.paginator){
this.dataSource.paginator.firstPage();
}
}

[sarahs3]

dataSource = new MatTableDataSource();
applySearch(filterValue : string){
let words = [];
this.dataSource.data = initiallyAssignedArray;
words = filterValue.split("+");
words.map((word)=>{
searchFunction(word);
})
}

searchFunction(word : string){
this.dataSource.filter = word.trim().toLowerCase();
this.dataSource.data = this.dataSource.filteredData;
if(this.dataSource.paginator){
this.dataSource.paginator.firstPage();
}
}

Thx you so much !!! :) You save me !! :D

[blairjanis]

@aniketsjagtap Thanks for this great solution! It solves 1/2 of a different but similar problem I'm facing. In my use case I have two search fields. If one is populated then I search from the value in that field. If the other is populated then I just use the other one. And if both are populated then I use your technique to apply both terms. Works like a charm.

The problem I have is my use case requires the ability to do an "or" search as well as an "and" search. So I need to return any rows that have either search 1 or search 2 or both. I came up with a solution but there are things to not like about it. This is what I did:

dataSource = new MatTableDataSource();
tempDataSource1 = new MatTableDataSource();
tempDataSource2 = new MatTableDataSource();

...

applySearch() {
    this.dataSource = new MatTableDataSource(this.initiallyAssignedArray);
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
    var doSearch1 = this.search1Word.length > 0;
    var doSearch2 = this.search2Word.length > 0;
    if (doSearch1 && doSearch2) {
        if (this.searchOperator === 'and') {
            [this.search1Word, this.searchWord2].map(word: string) => {
                this.searchFunction(word, this.dataSource);
            });
        } else if (this.searchOperator === 'or') {
            this.tempDataSource1.data = this.initiallyAssignedArray;
            this.searchFunction(this.search1Word, this.tempDataSource1);

            this.tempDataSource2.data = this.initiallyAssignedArray;
            this.searchFunction(this.search2Word, this.tempDataSource2);

            var newArray = this.tempDataSource1.data;
            for (const item of this.tempDataSource2.data) {
                if (!newArray.includes(item)) newArray.push(item);
            }
        }

        this.dataSource = new MatTableDataSource(newArray);
        this.dataSource.paginator = this.paginator;
        this.dataSource.sort = this.sort;
        this.dataSource.paginator.firstPage();
    } else if (doSearch1) this.searchFunction(this.search1Word, this.dataSource);
    else if (doSearch2) this.searchFunction(this.search2Word, this.dataSource);
}

searchFunction(word: string, dataSource: MatTableDataSource<any>) {
    dataSource.filter = word.trim().toLowerCase();
    dataSource.data = dataSource.filteredData;

    if (this.dataSource.paginator) {
        this.dataSource.paginator.firstPage();
    }
}

I don't love having to re-initialize the dataSource object on each filter run but that was the only way I could see getting my new combined "or" array into the table. There is probably a more elegant solution which I why I'm posting this. If anyone happens to run across it and can see a better way I'm open to suggestions.

[angular-robot]

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

[angular-robot]

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.