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() {
  }

}

I had the same issue yesterday and I fix it by adding another temp array name it temp2, so each time you press a key the row will be filled with temp2 data that is basically the initial value of row data. like this :

import { Component, NgModule } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { NgxDatatableModule } from '@swimlane/ngx-datatable';

@IonicPage()
@Component({
  selector: 'page-commande',
  templateUrl: 'commande.html',
})
export class CommandePage {
  rows = [
    { name: 'Austin', gender: 'Male', company: 'Swimlane' },
    { name: 'Dany', gender: 'Male', company: 'KFC' },
    { name: 'Molly', gender: 'Female', company: 'Burger King' },
  ];
  columns = [
    { prop: 'name' },
    { name: 'Gender' },
    { name: 'Company' }
  ];
  temp = [];
  temp2 = this.rows; // this the new temp array
  table = {
   offset: 0,
  };

  updateFilter(event) {
   const val = event.target.value.toLowerCase();
   this.rows = [...this.temp2]; // and here you have to initialize it with your data
   this.temp = [...this.rows];
    // filter our data
    const temp = this.rows.filter(function(d) {
      return d.name.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;
 }
}