Search in material-table not working with pipe

0
votes

In my material table I use @pipe to get name instead of position in position row...

I get a name from another JSON file...

<ng-container matColumnDef="position">
      <mat-header-cell *matHeaderCellDef> No. </mat-header-cell>
      <mat-cell *matCellDef="let element"> {{element.position | FilterData }} </mat-cell>


@Pipe({
  name: 'FilterData'
})
export class OrdinalPipe implements PipeTransform {

  transform(value: Element): string {
    var data =   ElementTitle.filter(
          ElementTitle => ElementTitle.position === value);  // ElementTitle is second JSON file
          return  data[0].name; 
  }
}

And now when I try to use SEARCH BOX in angular-material table to search by name there is no data, but if I enter position number I get filtered data properly.

Probably, problem is because datatables data is taken from a component but pipe change data in html...

How to TELL mat-table to also search by piped data in table?

Here is working example, try to search by the name (Nitrogen, Helium etc...) https://stackblitz.com/edit/angular-ttg6ux?file=src/app/table-filtering-example.ts

Thnx

2
angularangular-material

2 Answers

1
votes

Please refer below URL :

https://stackblitz.com/edit/angular-ttg6ux-sokueh?file=src/app/table-filtering-example.ts

Please let me know if you face any difficulty.

Thanks :)

1
votes

If you are using Material Table I suggest you to also use MatTableDataSource. Declare it at the begining of your typescript and load its data like if it were an array or a list.

datasource :MatTableDataSource<any>;

someMethodToLoadData(){
   // get your data
   this.datasource = new MatTableDataSource<any>(data);
}

With datasource now you can use its native property filter:

typescript

filterTable (filterValue :string) { 
   this.datasource.filter = filterValue.trim().toLowerCase(); 
}


html

<mat-form-field>
   <input matInput (keyup)="filterTable($event.target.value)">
</mat-form-field>