vue-bootstrap4-table
vue-bootstrap4-table copied to clipboard
customFilters, how do they work?
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?
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:-)
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.
Hi @mat813 ,
Thanks for your suggestions, I will try to include them in the next release.
Cheers, Ruby.