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

Column Filter Options


type Object

A collection of filter specific properties within a column object.

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 
  // ...


type: Boolean Switch to enable column filter.


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


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


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


type Array of strings or Array of objects

allows creating a dropdown for filter as opposed to an input

filterDropdownItems: ['Blue', 'Red', 'Yellow']
filterDropdownItems: [  
  { value: 'n', text: 'Inactive' },  
  { value: 'y', text: 'Active' },  
  { value: 'c', text: 'Check' }  


type Array of strings or Array of objects with labels

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

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


type Function

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

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
Last Updated: 2/20/2020, 4:48:17 PM