'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:
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.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 |
|---|
