Material DataTable filtering control

Question

I am using Angular Material Data Table and am trying to implement filtering accross all the values. What i am noticing is that when using MatTableDataSource, filter only searches the top level of entities that are passed, if the entity has a related record attached it won't search it.

Is it possible control how deep a filter search goes and enable it to search the attached related entities?

Edit 1 Example Code generated by schematics:

@ViewChild(MatPaginator) paginator: MatPaginator;
  @ViewChild(MatSort) sort: MatSort;

  @Input() dataSource: MatTableDataSource<TestEntity>;

  /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
  displayedColumns = ['id', 'name', 'view_related_child'];

  ngOnInit() {
    this.dataSource.paginator = this.paginator;
    this.dataSource.sort = this.sort;
  }

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

Edit 2 Entities:

export class TestEntity {
    id: string;
    name: string;
    childEntity: ChildEntity;
}

export class ChildEntity {
    childId: string;
    childName: string;
    childDate: string;
}

did you check this [question](https://stackoverflow.com/questions/48506606/custom-filter-in-mat-table)? — Fateme Fazli, Jul 28 '18 at 09:31
@fatemefazli sure but won't help much at this stage, using the schematic to generate tables so its very much rudementary. — Aeseir, Jul 28 '18 at 09:35
@fatemefazli basically i want to be able to filter by entity childs data too — Aeseir, Jul 28 '18 at 09:38

score 2 · Answer 1 · answered Jul 28 '18 at 10:12

2

you can change your apply filter method to this:

applyFilter(filterValue: string) {
    console.log(filterValue)

    this.dataSource.filterPredicate = (data: TestEntity, filter: string) =>   data.childEntity.childName.indexOf(filter) != -1 
    filterValue = filterValue.trim(); 
    this.dataSource.filter = filterValue 
  }

to filter the data based on childName of childEntity, working demo

answered Jul 28 '18 at 10:12

Fateme Fazli

11,582
2
31
48

1

Thanks @fatemefazli, what about scenarios where you want to search more than one field in related entity, or go another level lower? – Aeseir Jul 29 '18 at 09:23

Material DataTable filtering control

1 Answers1