angular search specific columns by filter

0
votes

I created table with *ngfor in angular. and put a search filter in this table. Code is below.

<tr *ngFor="let new of variables | orderBy: key: reverse | filter:term" style="width: 100%;">
  <td *ngFor="let col of index" id="tablo_data">
    {{new[col]}}
  </td>
</tr>

this code does the search over the entire table. but I want to search in selected columns. Input type code below:

<div class="form-group">
    <input type="text" class="form-control" placeholder="Search Here" [(ngModel)]="term">
</div>

and term define:

  term: string;

all json data define is

  variables: Variables[] = [];
2
angularsearchfilterpipengfor
Do you mean angularJS? – berkobienb
no, angular8-9-10 – adobean

2 Answers

1
votes

The filter would be a custom pipe in your case, and you have full control over it. Try:

@Pipe({
    name: 'filter'
})
export class FilterPipe implements PipeTransform {
    transform(data: Array<Array<any>>, term: string, colNum: string): any {
        if (term && Array.isArray(data) && colNum) {
            return data.filter((row: Array<any>) => (row[colNum] as string).toUpperCase() === term.toUpperCase());
        } else {
            return data;
        }
    }
}
-1
votes

For your search input, when you bind the model with term, include an array of the headers for whatever columns you want to be included in the search.

<div class="form-group">
    <input type="text" class="form-control" placeholder="Search Here" [(ngModel)]="term['id','Name']">
</div>