JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="//unpkg.com/bootstrap@4.3.1/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@2.0.2/dist/bootstrap-vue.css">
<script src="//unpkg.com/babel-polyfill/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@2.6.10/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.0.2/dist/bootstrap-vue.js"></script>
<div id="app">
<div id="app">
<div>
<b-input-group>
<b-form-input type="search" v-model="filterText"></b-form-input>
<b-input-group-append is-text>
<span style="width: 1rem;">
<b-spinner small v-if="filtering"></b-spinner>
<span v-else> </span>
</span>
</b-input-group-append>
</b-input-group>
<b-table show-empty
sticky-header="1250px"
no-border-collapse
filter-debounce="4000"
:items="items"
:fields="['name', 'number']"
:filter="computedfilter"
:filter-function="filterFunction"
small
hover
@filtered="onFiltered"
>
</b-table>
<p>
Filter: {{ this.filterText }}
</p>
</div>
</div>
</div>
CSS
body { padding: 1rem; }
JavaScript
window.onload = () => {
new Vue({
el: '#app',
data() {
return {
items: (new Array(2000)).fill('').map((v, index) => (
{ name: `Item ${index}`, number: index }
)),
filterText: '',
filtering: false
}
},
computed: {
computedfilter() {
return this.filterText ? this.filterText : '';
},
},
watch: {
filterText(newVal, oldVal) {
this.filtering = true
}
},
methods: {
onFiltered() {
this.filtering = false
},
filterFunction(item, criteria) {
console.log('run')
//testing with computed property
if(this.computedfilter !== ''){
//do something with this
}
//testing with data attribute
if(this.filterText !== ''){
//do something with this
}
return item.name.includes(criteria);
}
}
})
}