Search by column

[SimplyCorey]

Hey, first off thanks for the awesome component!

In your opinion, what would be the best way to add a search field to each column. I would like this search field to only search that column.

Here is a quick example of what I would like:

Thanks!

[ratiw]

@SimplyCorey I usually prefer a single text input for simple search on top of the table. This would only allow searching for obvious columns like name, email. For more search conditions, I usually prefer a modal where the user can specify search criteria for each searchable column. I do see the benefit of having filter column underneath the header, but I personally don't like how it looks. That's why I do not implement it.

However, lately, I've been asked a lot about this feature and I might decide implement it as an option feature if I can find the time. But in order for it to work, you will still have to implement it in your backend as well.

[SimplyCorey]

@ratiw Thanks for the response. I currently have it implemented in my backend for a different vue-tables library that I am trying to move away from. I basically have it pass in an encoded array like this:

query => [
    columnName => query,
    otherColumnName => query.
]

I'm still trying to wrap my head around your library. I think the best way to go about it would be to fork the project and then add the search box to the template here: https://github.com/ratiw/vuetable-2/blob/master/src/components/Vuetable.vue#L7

I think it would be best to add this as an option and check within the template whether to display the field. The part I don't understand is how would I add the extra API params to the call when a user types into these search boxes?

I wouldn't mind creating a pull request to add this to the project. I want to make sure before I do that though that:

1. You would like it added and,
2. I do it in a way that makes sense and is an approach that you would approve of.

I think a better approach would be to make a component that is applied to the template in vuetable if the option is enabled. From there, an event could fire that modifys the append-params that is set up. I'm still trying to figure out how the append-params is working though.

[ratiw]

@SimplyCorey There is this PR that tries to do the same thing and he gets a lot quite right, but there are many things that are not quite the way I would do it.

There are no standard way to follow when implementing the filter functionality on the server side, and no one seems to agree on what the best way to send the filter parameters via HTTP query string. In my opinion, I think all the filter criteria should be passed in one key like filter=.

Vuetable should not assume the format of this criteria and that means it should look for a callback or overloaded method that it would send all the parameters to and let that method combine and encoded everything to be sent via filter= key. The rest is up to the backend to decide what to do with the value from filter key.

[gabrielwillemann]

I also need this feature. There is a prevision for development?

[yusupprog]

Hi. Have you implemented this feature?

[faragos]

State about this feature?

[vlakarados]

This is a show-stopper for many on using vuetable 2. Is there anything happening at all about this feature?

[xtepwxly]

it's really weird, that you can't give opportunity for developers to filter information by column.

[ratiw]

@Nnxoxo It is not available out of the box, but it doesn't mean it can't be done. As I mentioned earlier, some people had already done that and their solutions are available in the PR. The only problem is that it is not inside the table. However, in v2.0 of Vuetable-2, you can write your own filter row as part of the rendered table and hopefully, people should be able to share and reuse it easier than before.

[frruit]

Hi there, i see that many others have the same wish like I and it's not new. Is there an example link or a good demo that illustrates how to do the column filtering ?