How to do filter in angular material data table for specific column

Question

i am trying angular material data table.

As we know filtering happened for each row by default.

If i want to filter column specific, then what should i do?

Should i have to write method for getting all records, then iterate over it and compare specific column?

component.ts

ngOnInit() {
    this.service.getUser().subscribe( results => {
        if(!results){

          return;
        }
        console.log(results);
        this.dataSource = new MatTableDataSource(results);
        this.dataSource.sort = this.sort;
    })


onSearchClear(){
    this.searchKey="";
    this.applyFilter();
  }

  applyFilter(){
    this.dataSource.filter = this.searchKey.trim().toLowerCase();
  }

component.html

<mat-form-field class="search-form-field">
      <input matInput [(ngModel)]="searchKey" placeholder="search by userName" (keyup)="applyFilter()">
    </mat-form-field>

ysf · Accepted Answer · 2019-06-17 07:37:42Z

10

you should use filterPredicate property of MatTableDataSource

after you initialize this.dataSource, define a custom filterPredicate function as follows;

this.dataSource = new MatTableDataSource(results);
this.dataSource.sort = this.sort;
this.dataSource.filterPredicate = function(data: any, filterValue: string) {
  return data.specificColumn /** replace this with the column name you want to filter */
    .trim()
    .toLocaleLowerCase().indexOf(filterValue.trim().toLocaleLowerCase()) >= 0;
};

edited Jun 17, 2019 at 7:37

answered Jun 16, 2019 at 19:38

ysf

4,9023 gold badges31 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

mohan Over a year ago

this will do exact match....if i want to match a part of any username... suppose mohan is the userName, and if i enter moh....it is not showing that

ysf Over a year ago

i have updated my answer to include partial match. please take a look.

Royer Adames Over a year ago

where is this.sort coming from?

ysf Over a year ago

this.sort it is an instance of MatSort defined within the component class but not shared in the question. My answer just refers to the code provided in the question.

ysf Over a year ago

also please see the following material.angular.io/components/sort/overview

Code Spy · Accepted Answer · 2020-04-09 04:50:55Z

8

Check this tutorial and working demo

edited Apr 9, 2020 at 4:50

answered Apr 4, 2020 at 12:13

Code Spy

9,9744 gold badges72 silver badges46 bronze badges

Collectives™ on Stack Overflow

How to do filter in angular material data table for specific column

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related