How to setup search input on mat-table?

I am trying to set up a filter text input for my mat-table. I want this filter to take into consideration : 3 columns (name, weight and symbol). This means that the same input will be searching corresponding letters in all 3 of the table columns.

Here is my setup :

<mat-form-field>
  <mat-label>Filter</mat-label>
  <input matInput (keyup)="applyFilter($event)" placeholder="Ex. ium" #input>
</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>

  <!-- Row shown when there is no matching data. -->
  <tr class="mat-row" *matNoDataRow>
    <td class="mat-cell" colspan="4">No data matching the filter "{{input.value}}"</td>
  </tr>
</table>

And the component with the data displayed in the mat-table :

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'},
];

  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
  dataSource = new MatTableDataSource(ELEMENT_DATA);

applyFilter(event: Event) {
    I don't know what to put here in order to filter by "name" and "symbol" and "weight" with the same mat-input above....
  }

This is my ngOnInit function (it already has a dataSource.filterPredicate function) :

this.dataSource.filterPredicate = ((data, filter) => {
          
           const b = !filter.position || data.position === filter.position;
           const c = !filter.weight || data.weight === filter.weight;
          return b && c;
        }) as (PeriodicElement:any, string:any) => boolean;


    
        this.formControl.valueChanges.subscribe((value:any) => {
          const filter = {
            ...value,
            position:value.position,
            weight:value.weight,
          } as string;
          this.dataSource.filter = filter;

        });

It is simple, you just have to get the value from event.target.value and then assign this value to this.dataSource.filter.

Following example filters on all columns in your datasource (which is default behaviour):

applyFilter(event: Event) {
    // applies filtering to all columns ('position', 'name', 'weight', 'symbol')
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
}

If you want to apply filter to only specific columns, then you have to modify dataSource.filterPredicate to only filter on your required columns:

ngOnInit() {
    // to apply filtering to specific columns (for example 'name' and 'symbol' only)
    this.dataSource.filterPredicate = function(data, filter: string): boolean {
      return data.name.toLowerCase().includes(filter) || data.symbol.toLowerCase().includes(filter);
    };
}

// the code for apply filter stays the same
applyFilter(event: Event) {
    // now applies filtering only to 'name' and 'symbol' columns since we defined filterPredicate.
    const filterValue = (event.target as HTMLInputElement).value;
    this.dataSource.filter = filterValue.trim().toLowerCase();
}