Vue-good-table: set columnFilter options programatically

[Jakobovski]

Issue Type

• [x] Enhancement Request

It would be great if there was a way to programmatic set/update the columnFilter options. When I update the this.serverParams.columnFilters it does not update the UI dropdown menus.

The use case for such a feature is as follows:
A user navigates to a page /mytable?page=1&name=bob and I want to take the query parameters from the URL and set the filters with them. This must work for both navigating back/forward and full page loads.

[ow-en]

@Jakobovski the column filter dropdown menus are not tied to serverParams.columnFilters.

Column filter dropdown menus are tied to the actual columns [{}] object within data. You would need to update the columns -> column[i] -> filterOptions -> filterDropdownItems [] array dynamically based on the current url's query string.

Updating serverParams.columnFilters is going to modify the filter query being sent to the server, but without modify your actual column object, nothing is going to change in the ui's column filter dropdown.

[ow-en]

Within the CRUD operation that is determining the current url's query string, bind those query string properties to data property(s). Then, within columns -> filterOptions -> filterDropdownItems, inject those data object(s) in place of/in addition to the default dropdown options.

That is a very brief explanation that isn't fully thought through, but that should work.

[Jakobovski]

@ow-en I think you misunderstood, probably because I explained my issue poorly.

I dont want to change the filterOptions. I want a way to programmatic change the selected filter value in the UI. EX: status=SUCCESS in the url params, I want to grab that and set the filter on the success column to be SUCCESS. Right now i can easily update the request that goes to the server, but change the item that is actually selected in the UI is tricky and I cant figure out how to do it.

[Jakobovski]

Partial solution here:

https://stackoverflow.com/questions/56215723/set-filter-options-on-vue-good-table-programmatically

[xaksis]

@Jakobovski can you show me how you're setting the filters options? I have a feeling this is about vue reactivity rather than VGT issue.

[Jakobovski]

@xaksis Yeah it may be. I ended up doing the following

for (var key in this.$route.query){
    var field = key;
    let found = this.columns.find((c) => {
      return c.field == field
    });

    if (found){
      found.filterOptions.filterValue = this.$route.query[key];
    }
}

This seems to only work inside vuejs created().

[xaksis]

Alright! phew... turned out the built files were stale so my changes were not reflected.
v2.17.5 should work now. here's a working example:
https://jsfiddle.net/aks9800/cyegzwL7/

Remember that you will have to use either $set or Object.assign as the documentation states:
https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats
in your case it'd be something like:

for (var key in this.$route.query){
    var field = key;
    let foundIndex = this.columns.findIndex((c) => {
      return c.field == field
    });

    if (foundIndex !== -1 ){
      this.$set(this.columns[foundIndex].filterOptions, 'filterValue', this.$route.query[key]);
    }
}

You can put this code in mounted or after and it should still work.
closing.