Хотите перемешать / отфильтровать строку таблицы по столбцам в HTML Таблица в angular

Question

Я новичок в angular, я хочу фильтровать строки на основе столбцов, например, предположим, у меня есть 4 столбца в моей таблице (ProjectName, CostEngineer, ProjectManager, Location), Допустим, я хочу возможность фильтрации по ProjectManager или еще Местоположение.

Может кто-нибудь помочь, пожалуйста?

Вот мой код компонента HTML:

<table class="table table-striped header-fixed">
      <thead>
        <tr>
          <th *ngFor="let header of columnHeaders">{{ header }}</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let s of segmentLibrary | keyvalue" (mouseenter)="hoverRow(s.value)"
          (mouseout)="unhoverRow()" [class.selectedRow]="s.value['id_segment'] === id_segment_to_copy"
          [class.hoveredRow]="s.value === hoveredProject">
          <td>{{ s.value["segment_name"] }}</td>
          <td>{{ s.value["segment_description"] }}</td>
          <td>{{ s.value["phase1"] }}</td>
          <td>{{ s.value["phase2"] }}</td>
          <td>{{ s.value["phase3"] }}</td>
          <td>{{ s.value["phase4"] }}</td>
          <td>{{ s.value["phase5"] }}</td>
          <td>{{ s.value["effective_created_date"] }}</td>
          <td>{{ s.value["total_cost"] }}</td>
          <td>{{ s.value["project_name"] }}</td>
          <td><a class="estimate-btn" (click)="setSegmentFromLibrary(s.value)">Select</a></td>
        </tr>
      </tbody>
    </table>