Implementing NGX Datatable filtering on all columns

Question

I\'ve been trying to get this working with no luck. I\'ve been referencing these resources for help: http://swimlane.github.io/ngx-datatable/#filter
https://github.com/swiml

Answer 1

There were a few issues when using some of the above answers to i am adding my own...

First its best to store the keys in a global variable, because things get overwritten on each iteration.

problems solved...

1. if data is pushed via an input we need to reset the keys especially if there was no data to begin with.

2. Store everything in a temp variable to always retain original data.**

I am posting my entire usage here..

import {
  Component,
  ElementRef,
  EventEmitter,
  Input,
  OnChanges,
  OnInit,
  Output,
  SimpleChanges,
  ViewChild,
} from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'verasci-data-table',
  templateUrl: './data-table.component.html',
  styleUrls: ['./data-table.component.scss'],
})
export class DataTableComponent implements OnInit, OnChanges {
  @ViewChild('table') table;
  @Input() rows;
  @Input() columns;
  @Input() searchBar;
  keys;
  temp: Array;
  @Output() selectEvent$ = new EventEmitter();
  selected = [];
  readonly pageLimit = 10;
  readonly headerHeight = 50;
  readonly rowHeight = 50;

  constructor(private readonly el: ElementRef, private readonly router: Router) { }

  async ngOnInit() {
    this.temp = this.rows;
    this.keys = this.rows[0] ? Object.keys(this.rows[0]) : null;
    setTimeout(() => { this.dataLoaded = true; }, 200);
  }

  // we need to reset keys and temp data if data is pushed to the table.
  ngOnChanges(changes: SimpleChanges) {
    this.keys = this.rows[0] ? Object.keys(this.rows[0]) : null;
    this.temp = this.rows;
  }       

  filterSingle(event) {
    const val = event.target.value.toLowerCase();

    // filter our data
    const temp = this.temp.filter((d) => {
      return d.sponsor.toLowerCase().indexOf(val) !== -1 || !val;
    });

    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
  }

  filterMulti(event) {
    // get the value of the key pressed and make it lowercase
    const val = event.target.value.toLowerCase();
    // get the amount of columns in the table
    const colsAmt = this.columns.length;
    // get the key names of each column in the dataset
    const keys = this.keys; // just need to keys from the first set of rw
    // filter our data
    const temp = this.temp.filter(item => {
    // iterate through each row's column data
    for (let i = 0; i < colsAmt; i++) {
    // check for a match on properties that are not null
      if (item[keys[i]] != null && (item[keys[i]].toString().toLowerCase().indexOf(val) !== -1 || !val)) {
        // found match, return true to add to result set
        return true;
      }
     }
   });
    // update the rows
    this.rows = temp;
    // Whenever the filter changes, always go back to the first page
    this.table.offset = 0;
  }

  onSelect({ selected }) {
    this.selectEvent$.emit({ selected: selected[0] });
  }

}