Ngx-datatable: Filters for individual columns

[stevandric]

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior
There is no option for column filters inside ngx datatable

Expected behavior
It would be very useful if filters for every column are implemented as option.

Reproduction of the problem

What is the motivation / use case for changing the behavior?

Please tell us about your environment:

• Table version: 0.8.x
  

• Angular version: 2.0.x
  

• Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
  

• Language: [all | TypeScript X.X | ES6/7 | ES5]

[MarkySparky]

My client has been asking for this for also. Any chance we can bump this or let us know if it'll be considered at some point?

[amcdnl]

Its very easy to implement your own filtering with templates. This is one of these features that we do not plan to implement because of the degree of variations and cases it can involve. I want the table to focus on displaying the data you give it, not making opinions about your data and what controls and how you get it.

See for more info: https://swimlane.gitbooks.io/ngx-datatable/content/introduction/architecture.html

[francisminu]

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

[saeedjassani]

@francisminu Although it serves the purpose, it does break the sorting of columns. Any working for getting that back?

[francisminu]

@saeedjassani not sure what happened to the plunker. I am no longer able to view it. Will try creating one and post once its done. Sorting is also possible.

[saeedjassani]

NP. I created my own and it's working properly. Thanks!

On 20 April 2018 at 03:55, Minu Francis [e-mail] wrote:

@saeedjassani https://github.com/saeedjassani not sure what happened to
the plunker. I am no longer able to view it. Will try creating one and post
once its done. Sorting is also possible.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/swimlane/ngx-datatable/issues/1085#issuecomment-382899521,
or mute the thread
https://github.com/notifications/unsubscribe-auth/ALTh8IItLCZ1Egdiy5PJu8A621W9EwtCks5tqQ7jgaJpZM4QJGxy
.

--
Thanks and Regards,
Saeed Jassani.

[sagar-sk15]

@saeedjassani Can you please provide implementaion and working link if possible?

[yirony199]

@amcdnl I make a posible solution for this feature. Can I upload in a new branch for new pull request? Because when i try ti do this i recieved a permission denied.

Thank you

[pnaponoceno]

@yirony199 can you share your working case?

[COLTstreet]

@yirony199 @saeedjassani @francisminu Is it possible for any of you to share your working case via plunker or some other method? I haven't been able to figure this out.

[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.

[francisminu]

@COLTstreet Hey, did you get a chance to try this?

[COLTstreet]

@francisminu Based on the question, I was under the impression it would be individual column filters. I believe your solution is a one input global filter (which works). But not quite what I was looking for. I've moved away from this to agGrid since it has what I'm looking for. I appreciate the follow-up response though. Thanks!

[salesh]

@COLTstreet

For example, I use (keyup)="updateFilter($event, column.prop)"
And then in my function

return d[propName].toLowerCase().indexOf(val) !== -1 || !val;

So its working for every filter for his column 👍

[jonclawson]

https://codesandbox.io/s/swimlane-filter-table-lldho