ngx-datatable in angular2 filter back results on backspace

Question

I am using ngx-datatable (http://swimlane.github.io/ngx-datatable/#filter) in my angular project and trying to add a filter. The filter is added successfully on the column specified, however when I erase the filter characters with backspace, my original list data is not populated back.

My HTML:

<input
    type='text'
    style='padding:8px;margin:15px auto;width:30%;'
    placeholder='Type to filter the task name column...'
    (keyup)='updateFilter($event)'
  />
<div>
    <ngx-datatable  class="material"
    [rows]="tasks"
    [columns]="columns">
</ngx-datatable>

and in my component I have:

rows = [];
columns = [
{ name: 'Id' },
{ name: 'What task', prop: 'what_task' },
{ name: 'Budget', prop:'tentative_budget' }
];

temp = [];
ngOnInit() {

    this.taskListService.getTasks().subscribe(
        tasks => {
            console.log(tasks);
            this.tasks=tasks;
            this.tableData=this.tasks;
            this.tableModel.addAll(this.tableData);

        }
        )
}

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

    // filter our data
    const temp = this.tasks.filter(function(d) {
        console.log(d.what_task.toLowerCase().indexOf(val) !== -1 || !val)
        return d.what_task.toLowerCase().indexOf(val) !== -1 || !val;
    });

    // update the rows
    this.tasks = temp;

}

What am I missing?

score 1 · Accepted Answer · answered Sep 29 '17 at 10:52

1

You made a simple logical mistake. Try something like this

HTML

<ngx-datatable  class="material"
[rows]="tableData"
[columns]="columns">

TS

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

// filter our data
const temp = this.tasks.filter(function(d) {
    console.log(d.what_task.toLowerCase().indexOf(val) !== -1 || !val)
    return d.what_task.toLowerCase().indexOf(val) !== -1 || !val;
});

// update the rows
this.tableData= temp;

}

answered Sep 29 '17 at 10:52

Mateusz Ciężczak

26
3

Hey thanks! It worked, what should be the type of tableData though? I am asking because I had it used but that was from angular2-mdl table I used which had type IMdlTableModelItem – Thinker Sep 29 '17 at 11:03
I assume you get tasks as a JSON. So you can make a simple model class and us it as a type. You can parse json to TS class using something like this http://json2ts.com/ – Mateusz Ciężczak Sep 29 '17 at 12:16

ngx-datatable in angular2 filter back results on backspace

1 Answers1