angular table filter on specific columns

Question

In the official website, there is an example of how to implement filtering which basically searches over all columns. I'm using the exact same code but I would like to only have it filter over the columns Position and Weight. Is there a way to exclude the other columns from the filtering or only include these two?

Edit: I see that my question is getting voted to close due to it being unclear. This is the code from the example:

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium">
</mat-form-field>

<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">

  <!-- Position Column -->
  <ng-container matColumnDef="position">
    <th mat-header-cell *matHeaderCellDef> No. </th>
    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
  </ng-container>

  <!-- Name Column -->
  <ng-container matColumnDef="name">
    <th mat-header-cell *matHeaderCellDef> Name </th>
    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
  </ng-container>

  <!-- Weight Column -->
  <ng-container matColumnDef="weight">
    <th mat-header-cell *matHeaderCellDef> Weight </th>
    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
  </ng-container>

  <!-- Symbol Column -->
  <ng-container matColumnDef="symbol">
    <th mat-header-cell *matHeaderCellDef> Symbol </th>
    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
  </ng-container>

  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>

import {Component} from '@angular/core';
import {MatTableDataSource} from '@angular/material/table';

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

const ELEMENT_DATA: PeriodicElement[] = [
  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
];

/**
 * @title Table with filtering
 */
@Component({
  selector: 'table-filtering-example',
  styleUrls: ['table-filtering-example.css'],
  templateUrl: 'table-filtering-example.html',
})
export class TableFilteringExample {
  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

  applyFilter(event: Event) {
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
  }
}

/* Structure */
table {
  width: 100%;
}

.mat-form-field {
  font-size: 14px;
  width: 100%;
}

This searches over all columns but i would like it to only search over the aforementioned columns. Hope it is clear like this

I've followed this answer on SO but it is not working.

Arun Mohan · Accepted Answer · 2020-05-06T11:34:59.333

1

Add a custom filter function to override the default filter predicate.

    ngAfterViewInit() {
    this.dataSource.filterPredicate = function(data, filter: string): boolean {
      return (
        data.position.toString().includes(filter) ||
        data.weight.toString().includes(filter)
      );
    };
  }

Here numbers are converted to string to match 11 and 111 if user type 11

edited May 06 '20 at 11:34

answered May 06 '20 at 11:18

Arun Mohan

1,207
1
5
11

Where am i supposed to add this exactly? – May 06 '20 at 11:19
after this dataSource = new MatTableDataSource(ELEMENT_DATA); – Arun Mohan May 06 '20 at 11:21
this gives many errors like `Duplicate declaration` on `this.dataSource.filterPredicate` and `non-arrow functions are forbidden(only-arrow-functions)` on `function` crashing the export class and therefore the application – May 06 '20 at 11:23
sorry forgot to mention about ngAfterViewInit – Arun Mohan May 06 '20 at 11:27
this works great, thanks. I'm wondering whether i could add column `name` as well. I've tried adding the following as an extra or clause `data.name.toString().includes(filter)` and `data.weight.toString().indexOf(filter) !== -1` but both didn't work. Any suggestions? – May 06 '20 at 11:39
data.position.toString().includes(filter) || data.weight.toString().includes(filter) || data.name.toString().includes(filter) Should work – Arun Mohan May 06 '20 at 11:41
It, unfortunately, doesn't but I will accept ur answer already since this is only extra. – May 06 '20 at 11:53
data.name.toString().toLowerCase().includes(filter) need to convert casing also – Arun Mohan May 06 '20 at 11:56

angular table filter on specific columns

1 Answers1