More flexibility on operators

[FZ-Iskandar]

It would be great if we could filter by more operators.

Heare are some examples/ideas.

• List Filters

in_list: ['Bascom', 'Coultervillle']
not_in_list: ['Bascom', 'Coultervillle']

for that the columnProps object could depend on a "options" list (or even better a callback function that does an api call to the backend on demand)

• Multiple Conditions

Another cool idea would be to support multiple conditions by each filter. Take prime vue for inspiration:

https://primevue.org/datatable/#advanced_filter

• Filter Slot

If the prior options seem like too much trouble, another option might just give the possibility to make a slot for the filter menu and allow there to modify the filter conditions

Thanks for the package!

[FZ-Iskandar]

Also, even if it is not really related... The 'bool' type filter, should be also translatable 😉

[bhaveshpatel200]

Hi,

I will add List Filters features in future but not sure above the Multiple condition and filter slot which is complexed and its very advanced features.

For now i am focusing on other required basic features and i have other task in my list already. so will think about after all my task list completed.

[FZ-Iskandar]

Sorry, but do you know more or less when you can get the list options done?
Dont want to preasure you, but I think that this feature is really important for filters.

This is an idea of how it could be done:

<select v-else-if="col.type === 'select'" v-model="col.value" class="bh-form-control" @change="emit('filterChange')" @click="props.isOpenFilter = null">
    <option v-for="option in col.options" :value="option && option.value !== undefined ? option.value : option">{{ option && option.text !== undefined ? option.text : option }}</option>
</select>

And this is how the bool option could be more flexible:

<select v-else-if="col.type === 'bool'" v-model="col.value" class="bh-form-control" @change="emit('filterChange')" @click="props.isOpenFilter = null">
    <option :value="col && col.allValue !== undefined ? col.allValue : undefined">{{ col && col.allText !== undefined ? col.allText : 'All' }}</option>
    <option :value="col && col.trueValue !== undefined ? col.trueValue : true">{{ col && col.trueText !== undefined ? col.trueText : 'True' }}</option>
    <option :value="col && col.falseValue !== undefined ? col.falseValue : false">{{ col && col.falseText !== undefined ? col.falseText : 'False' }}</option>
</select>