Ngx-datatable: column-based filtering

[elvisbegovic]

PRPOSITION:
Does it envisageable add filter input under each column ? A litle like http://i.imgur.com/ERUHmza.png

[amcdnl]

You could do this with a header template and then just filtering the rows via normally but only including that in your function.

We tend to shy away from implementing these type of features since they are pretty specific to your business use case how you want to present filtering, the options that you want to allow and controls to do which additionally how to filter ( client or server ).

Instead I think a demo of how to accomplish this would be better than a core feature.

[elvisbegovic]

@amcdnl first thanks. Please apologize In documentation I do not have example of headerTemplate, the tools is very nice but doc site is poor, when I type in input search doc: noresult!

I have to try each example to find this ? Or do you have some plunker example thanks

[amcdnl]

No problem! The doc is not our library and ya I agree the search is pretty hit and miss.

I just realized there is no demo up on the docs, here is a demo in the code tho - https://github.com/swimlane/angular2-data-table/blob/master/src/demos/template.ts#L22

[elvisbegovic]

@amcdnl please apologize I try to apply what you say but no successs (I catch against solution since 6days) I think the demo page aren't very expressives could you get a look to my plunker http://plnkr.co/edit/fFGt2X6h1ZN8TfSuEi6K?p=preview

Juste click on button "Get data1" and you will see the first column header isn't replaced by input, I tried tempalte solution ... just switch between component.ts and component.html, thanks a lot!

[touqeershafi]

@istiti if you can do a good plunker on this that will be very help full for the community.

[kevinding0218]

I am also looking forward a stable and dynamic column filter as expected!

[francisminu]

Please find a working plunker here:
https://plnkr.co/edit/2F1Jol1i9BsYYWNat42V

[COLTstreet]

Did anyone ever make a working version of this?

[francisminu]

For some weird reason, my plunks are not running as expected. Please try the below:
.HTML file:
#myTable
class='material'
[rows]='actualData'
[columnMode]="'force'"
[headerHeight]="50"
[footerHeight]="50"
[rowHeight]="30"
>


PropertyName

type='text'
id="PropertyName"
style='width:100%;height:30px;border:1px;'
placeholder='Filter..'
(keyup)='FilterData($event)'
/>

.TS file:
@ViewChild(DatatableComponent) myTable: DatatableComponent;
tempData = actualData;

FilterData(event) {
let columnName = event.currentTarget.id;
const val = event.target.value.toLowerCase();
const filteredData = this.tempData.filter(function(d) {
return d[columnName].toLowerCase().indexOf(val) !== -1 || !val;
});
this.actualData= filteredData;
this.myTable.offset = 0;
}

Let me know if this works.

[danielehrhardt]

Is it now in Scope?