Filtering with multiple filters.

[onkar-joshi-invimatic]

I understand that you have given the privilege to filter multiple columns of the table at once. But i would like to have multiple searchboxes, each one dedicated to filter one particular column of the table. Is this possible in any way? If you dont get what i am trying to achieve, please do tell me. Il illustrate with an example. Thankyou

[hjalmers]

Well it's possible to have multiple search boxes but if remember correctly (I'm not able to access the code from a computer right now), they'll search all columns with search enabled. There are ways in which it could be implemented with the existing version but it would be nicer and cleaner if the search function would accept a column in which to search for matches. I'll look into it in a couple of days when I'm back from my vacation:)

[mklein994]

A project called ng-table written in AngularJS has this feature. You can see it in action on their website.

Here's the example:

---

With the letter s:

[mklein994]

@hjalmers I'm wanting to tackle this one. I'll try to use your suggestion of adding a column parameter to the search pipe. That seems like the least disruptive approach.

[hjalmers]

Thanks @mklein994, all help is appreciated:) I'd like to move away from the usage of pipes for these kind of things and adopt a more solid pattern using Observables and/or maybe introduce ngrx but that would be a pretty big rewrite and it might make more sense to create a different branch for a big change like that, in the meantime let me know if I can assist you in anyway as it might be a bit hard to navigate through the code with the current setup and the extensive use of pipes.

[mklein994]

Yeah I was poking around gt-search.pipe.ts and how it was used with generic-table.component.ts, and it became confusing. If you don't mind, could you give an overview of how these pieces work together, specifically the pipes?

I was thinking of creating a separate component in @angular-generic-table/core/components, and maybe a service(?) to go along with that. The last thing I want to do is reopen a bunch of issues by refactoring, but starting fresh would make things easier.

If I refactor, how would you recommend I piece it all together? Should I refactor the global search while I'm at it?

I'll contribute a branch to this that I've been working on, but this is just a work in progress.

[mklein994]

@hjalmers are you familiar with ngrx at all? I'm not, so I'd appreciate advice in how to approach this. From a cursory overview, ngrx seems pretty involved, and might take some time for me to grasp. I'll try learning it on the side, but in the meantime, I'll start by using Observables and see how far I get.

What's your thoughts on this?

[hjalmers]

A big portion of the code is just a port from the first version created for AngularJs where filters as they were called back then, were used mainly as a means of controlling the order of execution and for view presentation which made sense back then and before all the custom features were added.

So currently the pipes do a bit more then they should, I think they work great and make sense for pure transformations but they shouldn't be aware of states or as they are now. I guess one approach that wouldn't require a total rewrite just to add this feature would be to add another pipe that runs after the global search (in case we want support for both at the same time), and maybe use the same approach as the current implementation of filters. Instead of just passing search terms as a string, it could be an object with a separate property for each column and property for global search i.e.

{
  "global": "This string is used for global search",
  "objectKey": "This string is only checked against matching row key (row.objectKey)",
  "anotherObjectKey": "Checked against row.anotherObjectKey",
  ...
}

It would be a quick fix, maybe not the nicest but it would work.

The nice thing with the global search function as it works today is that it only performs one check per row instead of going through each individual cell on each row which would be required for this. It would be interesting to see if it would have an impact on performance going through each cell and not just check the merged row values but to begin with I think it would make sense to treat them as two different functions run them separately when needed.

[hjalmers]

@mklein994 I haven't used ngrx myself yet but it's on my "bucket list" and I think the handling of states and being able to revert to previous states etc would play very nice with a table component. We use generic table for a lot of projects at work and some of my colleagues have started porting some of our older angularJs apps to angular 5 and at the same time looking at ngrx (where it makes sense to use it) and my hope is that some of them will be able to help out more with future releases of generic table too. But the first step would probably be to move to using observables and change the way pipes are used for v5 of angular generic-table and maybe v6 could be ngrx if it still makes sense.

There are a lot of interesting things to explore, especially with new frameworks such as stenciljs popping up and I actually created a small POC for stencil-generic-table (it's still a private repo) but it supports the same config and some of the basic functions like sort and row expand but I think it needs to mature a bit and with the coming release of Angular 6 and later Angular 7 and the concept of angular elements, the need for something like stencil might not be necessary.

[kksrini89]

@hjalmers can you please give me any doc or code snippet or idea how to approach the filtering in angular generic table the way implemented the filtering in ng-table.

[manrav2508]

"if the search function would accept a column in which to search for matches. " Has this been implemented? I want to use this feature..please do reply