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

Column Filter Options

카탈로그
  1. 1. Column Filter Options
    1. 1.1. filterOptions
    2. 1.2. enabled
    3. 1.3. placeholder
    4. 1.4. filterValue
    5. 1.5. trigger
    6. 1.6. filterDropdownItems
    7. 1.7. filterMultiselectDropdownItems
    8. 1.8. filterFn

Column Filter Options

filterOptions

type Object

A collection of filter specific properties within a column object.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
columns: [
  { 
    label: 'name',
    field: 'user_name',
    filterOptions: {
  	  enabled: true, // enable filter for this column
      placeholder: 'Filter This Thing', // placeholder for filter input
      filterValue: 'Jane', // initial populated value for this filter
      filterDropdownItems: [], // dropdown (with selected values) instead of text input
      filterMultiselectDropdownItems: [], // dropdown (with multiple selected values) instead of text input
      filterFn: this.columnFilterFn, //custom filter function that
      trigger: 'enter', //only trigger on enter not on keyup 
    },
  },
  // ...
]

enabled

type: Boolean
Switch to enable column filter.

placeholder

type: String
Placeholder to use on the column filter input.

filterValue

type: String
If you want filter to be pre-populated, use this property

trigger

type: String (default: '')
Allows specifying trigger for column filter. Default trigger is keyup. use ‘enter’ to filter only when enter key is pressed.

filterDropdownItems

type Array of strings or Array of objects

allows creating a dropdown for filter as opposed to an input

1
2
3
4
5
6
7
8
//array
filterDropdownItems: ['Blue', 'Red', 'Yellow']
//or
filterDropdownItems: [  
  { value: 'n', text: 'Inactive' },  
  { value: 'y', text: 'Active' },  
  { value: 'c', text: 'Check' }  
],

filterMultiselectDropdownItems

type Array of strings or Array of objects with labels

allows creating a dropdown for filtering multiple items as opposed to an input

1
2
//array of strings
filterMultiselectDropdownItems: ['Blue', 'Red', 'Yellow']
1
2
3
4
5
6
//array of objects
filterMultiselectDropdownItems: [
  { id: 1, label: 'Blue' },
  { id: 2, label: 'Red' },
  { id: 3, label: 'Yellow' }
]

filterFn

type Function

Custom filter, function of two variables: function(data, filterString), should return true if data matches the filterString, otherwise false

1
2
3
4
5
filterFn: function(data, filterString) {
  var x = parseInt(filterString)
  return data >= x - 5 && data <= x + 5;
}
// would create a filter matching numbers within 5 of the provided value