Do you have a UX team? I Would really appreciate their feedback on my new product - UserBit

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
  }">
</vue-good-table>

enabled

type: Boolean (default: false)

Allows a single search input for the whole table

Enabling this option disables column filters

<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true
  }">
</vue-good-table>
NameAgeCreated OnPercent
John 20 3.34%
Jane 24 Oct 304th 11 3.34%
Susan 16 Oct 303rd 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>
NameAgeCreated OnPercent
John 20 3.34%
Jane 24 Oct 304th 11 3.34%
Susan 16 Oct 303rd 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
NameAgeCreated OnPercent
John 20 3.34%
Jane 24 Oct 304th 11 3.34%
Susan 16 Oct 303rd 11 3.34%
Last Updated: 10/11/2018, 11:02:24 PM