Search Options

Vue-good-table supports two ways of filtering the table.

1. A global search that searches through all records in the table
2. 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',
    skipDiacritics: true,
    searchFn: mySearchFn,
    placeholder: 'Search this table',
    externalQuery: searchQuery
    @on-search="onSearch"
  }">
</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>

Search

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%

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>

Search

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%

skipDiacritics

type: boolean (default: false)

By default, search does a diacriticless comparison so you can search through accented characters. This however slows down the search to some extent. If your data doesn't have accented characters, you can skip this check and gain some performance.

<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    skipDiacritics: true,
  }">
</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...
  };
}

External Query

Name	Age	Created On	Percent
John	20	Jul 2nd 11	3.34%
Jane	24	Oct 31st 11	3.34%
Susan	16	Oct 30th 11	3.34%