How to filter multiple language text in angular material table?

Question

I have a table displaying multiple data columns some with Georgian (ქართული) text, some English and some both. The columns that contain just English text get filtered well, but I can't filter multilingual or just Georgian texts. I found the function that filters the tables.

  filterPredicate: ((data: T, filter: string) => boolean) = (data: T, filter: string): boolean => {
    // Transform the data into a lowercase string of all property values.
    const accumulator =
        (currentTerm: string, key: string) => currentTerm + (data as {[key: string]: any})[key];
    const dataStr = Object.keys(data).reduce(accumulator, '').toLowerCase();

    // Transform the filter by converting it to lowercase and removing whitespace.
    const transformedFilter = filter.trim().toLowerCase();

    return dataStr.indexOf(transformedFilter) != -1;
  }

filterPredicate can be found here on github. I tried to maybe get rid of toLowerCase, but it didn't help. I am using MatTableDataSource to create dataSource. In HTML I'm using the applyFilter function found on angular material page.

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">

<ng-container matColumnDef="vehicleOwner">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Owner </th>
      <td mat-cell *matCellDef="let vehicle"> {{vehicle.owner.ownerName}} </td>
    </ng-container>

    <ng-container matColumnDef="contactPhone">
      <th mat-header-cell *matHeaderCellDef mat-sort-header> Contact Phone </th>
      <td mat-cell *matCellDef="let vehicle"> {{vehicle.contactPhone}} </td>
    </ng-container>

In typescript file, the applyFilter is called:

 // table filter
  applyFilter(filterValue: string) {
    this.dataSource.filter = filterValue.trim().toLowerCase();
    if (this.dataSource.paginator) {
      this.dataSource.paginator.firstPage();
    }
  }

Vato Vato · Accepted Answer · 2018-10-15T04:53:56

I realized the multilingual filtering is working fine. The problem was that my MatTableDataSource include objects instead of just data. For example in my HTML code above in the question, you can see owner.ownerName. My problem is that I am trying to filter object owner instead of its property ownerName.

The Georgian(ქართული) filtering is working fine, when trying to filter just the properties. I need to create a dataSource only using properties in tables. I will post my solution, once I'm done with it.

How to filter multiple language text in angular material table?

1 Answers