customFilters, how do they work?

[mat813]

Hi,

I am migrating an app from server-side with datatables to vue.js using vue-bootstrap4-table. I am very happy with it, but for one point, there are some tables where I have buttons search helpers, usually helping filter hidden columns. I stumbled upon customFilters, and I wrote this (slightly edited to remove unimportant bits):

<bootstrap4-table :rows="c_products" :columns="columns" :custom-filters="customFilters" :config="config">
  <template slot="vbt-action-buttons">
    <div class="btn-group float-right" role="group">
      <button class="btn btn-info" v-for="b in stateButtons" :data-search="b.search" :class="{active: my_state === b.search}" @click="onStateSelect(b.search)">{{b.text}}</button>
    </div>
  </template>
</bootstrap4-table>

import VueBootstrap4Table from 'vue-bootstrap4-table';

export default {
  data: function() {
    return {
      c_products: [],
      columns: [
        {
          label: 'state',
          name: 'product_state',
          sort: true,
          visibility: false,
          filter: {
            type: 'simple'
          }
        },
        {
          label: 'Id',
          name: 'c_product_id',
          uniqueId: true,
          sort: true,
          row_text_alignment: 'text-left'
        },
    // ...
      ],
      config: {
        card_mode: false,
        per_page_options: [10, 25, 50, 100],
        per_page: 10
      },
      my_state: '',
      stateButtons: [
        { text: 'Tous',       name: 'tous',      search: '' },
        { text: 'Brouillon',  name: 'brouillon', search: 'brouillon' },
        { text: 'Actif',      name: 'actif',     search: 'actif' },
        { text: 'Terminé',    name: 'termine',   search: 'termine' },
        { text: 'A résilier', name: 'resilier',  search: 'a_resilier' }
      ]
    };
  },
  components: {VueBootstrap4Table},
  computed: {
    customFilters: function() {
      var ret;
      ret = [];
      if (this.my_state !== '') {
        ret.push({ name: 'product_state', text: this.my_state, type: 'custom' });
      }
      return ret;
    }
  },
  methods: {
    onStateSelect: function(s) {
      return this.my_state = s;
    }
  }
};

The idea is to have those buttons filter the products by product_state column. At first, the product_state column did not have a filter defined, but this gave an error, so I added one.

My problem is, now, it does not give out an error, but clicking on the buttons does not do anything.

So I am wondering, how do customFilters work exactly? Am I doing it wrong?

[mat813]

Ok, I knew that writing my problem down would end into me finding how to do it.

I amended my hidden column's definition to:

      {
        label: 'state'
        name: 'product_state'
        sort: true
        visibility: false
        filter:
          validator: (rowValue, filterText) ->
            rowValue == filterText
      }

and it now works as expected. It would be great if it was documented 0:-)

[mat813]

I do have one thing to report, that is more of a cosmetic thing, the hidden column is the only one to have a search filter, and I have a small grey bar that is below the column names. I assume it is where filters would end up. I think it should only be there if there are filters in visible columns. Reading the code, I think showFilterRow needs a bit of patching to only return true for columns that have visibility to true.

[rubanraj54]

Hi @mat813 ,

Thanks for your suggestions, I will try to include them in the next release.

Cheers, Ruby.