'Angular 2 - NGX-DataTable Filter - Replacing View Child

I'm trying to use NGX-DataTable's filtering option (doc here, demo here) and am trying to rewrite the ViewChild section of the code because I will be dynamically passing the table to a dialog component through the variable "config" so I can search through the "Purchase Order" column.

I can get the table to filter by the Purchase Order column but have 2 problems:

  1. I cannot undo filtering by deleting in the input.
    Ex: If I have 10 results by default, and then type "a" and have 4 results, and then type "aa" and have no results, even if I completely delete the input used for filtering I will still have no results.

  2. When the filter is updated the table is supposed to go back to the first page, right now it just stays where it is at.

So here is what I have so far in the dialog component that has the table info passed in through the variable config:

HTML in the dialog component:

 <input
    type='text'
    style='padding:8px;margin:15px auto;width:30%;'
    placeholder='Type to filter the name column...'
    autofocus
    (keyup)='updateFilter($event)'
  />

<ngx-datatable
  class='material'
  #table
  [rows]='config.rows'
  [columns]="config.columns"
  [columnMode]="'standard'"
  [headerHeight]="75"
  [footerHeight]="50"
  [scrollbarH]="true"
  [rowHeight]="'auto'"
  [limit]="5"
  [selectionType]="'multiClick'"
  >
</ngx-datatable>

TS:

import { Component, OnInit } from '@angular/core';
import { MdDialog, MdDialogRef } from '@angular/material';
import { KeysPipe} from '../keys.pipe';

@Component({
  selector: 'app-dialog-table',
  templateUrl: './dialog-table.component.html',
  styleUrls: ['./dialog-table.component.css']
})
export class DialogTableComponent implements OnInit {

    config: any;
    columns: any;
  table = {
    offset: 0,
  };
  temp = [];

  constructor(public dialogRef: MdDialogRef<DialogTableComponent>) { 
 
  }

  updateFilter(event) {
    const val = event.target.value;
    this.temp = [...this.config.rows];

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

    // update the rows
    this.config.rows = temp;

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

  ngOnInit() {
  }

}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source