How to filter in more than one column in ng2-table?

Question

I am using ng2-table: https://github.com/valor-software/ng2-table component but i need to add a filter for each column.

In my code i have the filtering in the column: name but i want to add a filter for the code too.

  public columns:Array<any> = [
    {title: 'Code', name: 'code',sort: 'asc'},
    {title: 'Name', name: 'name', sort: 'asc'}
  ];
  public page:number = 1;
  public itemsPerPage:number = 1;
  public maxSize:number = 5;
  public numPages:number = 1;
  public length:number = 0;
  public config:any = {
    paging: true,
    sorting: {columns: this.columns},
    filtering: {filterString: '', columnName:'name'}

  };

How can i add another filter?

I really appreciate if someone can give me an example.

Answer 1

First thing is to create config for the fields you want to filter. I am going to use the example provided in http://valor-software.com/ng2-table/ as a base. So in your component.ts you would have:

public config: any = {
    sorting: { columns: this.columns },
    filtering: {
      position: { filterString: '' },
      office: { filterString: '' }
    }
};

Each column to filter will store the specified string in the filterString field. The columnName one is not necessary here, as I am hardcoding it. Then, in the html, create the inputs, one per filter:

<input placeholder="Position"
       [ngTableFiltering]="config.filtering.position"
       (tableChanged)="onChangeTable(config)"/>
<input  placeholder="Office"
       [ngTableFiltering]="config.filtering.office"
       (tableChanged)="onChangeTable(config)"/>

<ng-table [config]="config.sorting"
              (tableChanged)="onChangeTable(config)"
              [rows]="rows" [columns]="columns">
</ng-table>

And finally, the real filter of the data (again in the component.ts file):

public changeFilter(data: any, config: any): any {
    return data.filter((item: any) =>
      item["position"].match(this.config.filtering.position.filterString) &&
      item["office"].match(this.config.filtering.office.filterString));
}

Note that I am using the AND logic here to filter, you might want OR'ing them.