Search Options
Vue-good-table supports two ways of filtering the table.
- A global search that searches through all records in the table
- Column filters that filter based on a given column
This section talks about how to configure global search options.
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
trigger: 'enter',
searchFn: mySearchFn,
placeholder: 'Search this table',
externalQuery: searchQuery
}">
</vue-good-table>
enabled
type: Boolean (default: false)
Allows a single search input for the whole table
WARNING
Enabling this option disables column filters
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true
}">
</vue-good-table>
trigger
type: String (default: '')
Allows you to specify if you want search to trigger on 'enter' event of the input. By default table searches on key-up.
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
trigger: 'enter'
}">
</vue-good-table>
searchFn
type: Function
Allows you to specify your own search function for the global search
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
searchFn: myFunc
}">
</vue-good-table>
// in js
methods: {
myFunc(row, col, cellValue, searchTerm){
return cellValue === 'my value';
},
}
placeholder
type: String (default: 'Search Table')
Text for global search input place holder
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
placeholder: 'Search this table',
}">
</vue-good-table>
externalQuery
type: String
If you want to use your own input for searching the table, you can use this property
<input type="text" v-model="searchTerm" >
<vue-good-table
:columns="columns"
:rows="rows"
:search-options="{
enabled: true,
externalQuery: searchTerm
}">
</vue-good-table>
// and in data
data(){
return {
searchTerm: '',
// rows, columns etc...
};
}