Vue-good-table
Vue-good-table
Source
Edit
History

Search Options

카탈로그
  1. 1. Search Options
    1. 1.1. enabled
    2. 1.2. trigger
    3. 1.3. skipDiacritics
    4. 1.4. searchFn
    5. 1.5. placeholder
    6. 1.6. externalQuery

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.

1
2
3
4
5
6
7
8
9
10
11
12
<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

::: warning
Enabling this option disables column filters
:::

1
2
3
4
5
6
7
<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. 

1
2
3
4
5
6
7
8
<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    trigger: 'enter'
  }">
</vue-good-table>

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. 

1
2
3
4
5
6
7
8
<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

1
2
3
4
5
6
7
8
<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    searchFn: myFunc
  }">
</vue-good-table>
1
2
3
4
5
6
// 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

1
2
3
4
5
6
7
8
<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

1
2
3
4
5
6
7
8
9
<input type="text" v-model="searchTerm" >
<vue-good-table
  :columns="columns"
  :rows="rows"
  :search-options="{
    enabled: true,
    externalQuery: searchTerm
  }">
</vue-good-table>
1
2
3
4
5
6
7
// and in data
data(){
  return {
    searchTerm: '',
    // rows, columns etc...
  };
}