custom filter in mat-table

by

I found the solution here.

It’s necessary to rewrite filterPredicate, and just use it as usual, filterPredicate needs to return true when filter passes and false when it doesn’t

export interface Element {
 name: string;
 position: number;
 weight: number;
 symbol: string;
}


dataSource = new MatTableDataSource(ELEMENT_DATA);
/* configure filter */
this.dataSource.filterPredicate = 
  (data: Element, filter: string) => data.name.indexOf(filter) != -1;


applyFilter(filterValue: string) {
   filterValue = filterValue.trim(); // Remove whitespace
   filterValue = filterValue.toLowerCase(); // MatTableDataSource defaults to lowercase matches
   this.dataSource.filter = filterValue;
 }

More Related Contents:

  1. Angular 6 MatTable Performance in 1000 rows
  2. Apply a directive conditionally
  3. SassError: Can’t find stylesheet to import. @use ‘~@angular/material’ as mat;
  4. Confirm password validation in Angular 6 [duplicate]
  5. Angular + Material – How to refresh a data source (mat-table)
  6. mat-form-field must contain a MatFormFieldControl
  7. How to import Angular Material in project?
  8. Working example of Angular 2.0 Material MdDialog with Angular 2.0
  9. Expandable table rows in angular 4 with angular material
  10. Angular Material: mat-select not selecting default
  11. How can i make a MatDialog draggable / Angular Material
  12. Angular CDK : attach overlay to a clicked element
  13. Array of formGroup within mat-table for each row
  14. How can I use custom theme palettes in Angular?
  15. How to pass data to dialog of angular material 2
  16. Angular Material 2 DataTable Sorting with nested objects
  17. How to translate mat-paginator in Angular 4?
  18. Dynamically load a component inside a Material MatDialog
  19. how to support same column size when screen size reducing in angular material table
  20. Default sorting in Angular Material – Sort header
  21. How to use paginator from material angular?
  22. Angular 4 Material table highlight a row
  23. Angular Mat Select Multiple selectionchange finding which option was changed
  24. How to change angular material datepicker format
  25. How to manually set focus on mat-form-field in Angular 6
  26. Angular Material Tab : Prevent tab change of mat-tab-group if the form in current tab is dirty
  27. How to implement drag and drop in cypress test?
  28. Disable click outside of angular material dialog area to close the dialog (With Angular Version 4.0+)
  29. Angular Material2 theming – how to set app background?
  30. Filtering specific column in Angular Material Table with filtering in angular?

Leave a Comment