v
v
vue-bootstrap4-table
1.1.10
Search…
⌃K

Global search

Global search searches the complete list of rows for the given search keyword.
You can enable or disable search text input with custom configuration as shown in the below example.

Example

GlobalSearchExample.vue
<template>
<div id="app">
<vue-bootstrap4-table :rows="rows" :columns="columns" :config="config">
</vue-bootstrap4-table>
</div>
</template>
<script>
import VueBootstrap4Table from 'vue-bootstrap4-table'
export default {
name: 'App',
data: function() {
return {
rows: [
...
],
columns: [
...
],
config: {
...
global_search: {
placeholder: "Enter custom Search text",
visibility: true,
case_sensitive: false,
showClearButton: false,
searchOnPressEnter: false,
searchDebounceRate: 1000,
init: {
value : "Christin"
}
},
...
}
}
},
components: {
VueBootstrap4Table
}
}
</script>

Attributes details

Attributes
Description
Type
Default
global_search.placeholder
Placeholder is hint text for search text box
String
"Enter search text"
global_search.visibility
Show/Hide global search text input
Boolean
true
global_search.case_sensitive
Enable/Disable case sensitive searching.
Boolean
false
global_search.showClearButton
Show/Hide clear button in the global search input text.
Boolean
true
global_search.searchOnPressEnter
Enable/Disable global search on "enter" key press.
Boolean
false
global_search.searchDebounceRate
Defines the wait time for searching between the key strokes. Value should be in milliseconds.
Number
60
global_search.init.value
Assign initial value to the the global search filter before rendering the table.
String
Empty string

Clear button icon slot

You can override the default clear button icon in the global search text input.
ClearButtonIconSlot.vue
...
<vue-bootstrap4-table :rows="rows" :columns="columns">
<template slot="global-search-clear-icon">
<i class="fas fa-times-circle"></i>
</template>
</vue-bootstrap4-table>
...