Filtering

To filter you must send an event with an object as a message.

The object must contain a filter and a col. The filter will contain the condition for excluding some rows, the col will restrict the scope of the filter to the specified fields.

You will find an example in the DEMO PAGE

Filter

In filter you can put a string or a function. If you put a string, the filtering will be a straightforward comparison with the string. If you put a function it must be return another function. The inner function will accept the value of the current row and will return a boolean: true for visible, false for filtered.

For example if you want to filter for the word "red" you will write:

this.$broadcast('filter', {filter: function () {
  return function (rowValue) {
    return rowValue === 'red'
  }
}, col: 'color'})

Normally you want to filter for some dynamic value, for example for a value entered by the used in an input form, in this case just pass the filter term as an argument to the outer function and close over it.

this.$broadcast('filter', {filter: function (term) {
  return function (rowValue) {
    return rowValue === term
  }
}, col: 'color'})

Furthermore you don't want to pass a function directly in the object. Since you usually need customized filtering function when dealing with complex objects and therefore most probably smart components, the recommended way is to put the customized filter inside the component itself.

Just add a method to your component named filterFunction

methods: {
  filterFunction: function (term) {
    return function (rowValue) {
      return rowValue === term
    }
  }
}

This way you can just send a string with the term in the filter message.

this.$broadcast('filter', {filter: 'red', col: 'color'})

Filtered Rows Appearance

The default action for a filter is to append the classes smart-filter custom-filter to the <tr> (table row). The smart-filter class will be an injected rule, namely it is

.smart-filter {
  display: none;
}

This means the filtered rows will simply disappear from the table. The custom-filter class is not liked to any rule. You can easily write a rule that overwrites the default behavior. For example if you wanted the filtered rows to gray out instead of disappearing you could write

 .smart-filter.custom-filter {
    display: table-row; /* necessary to revert display: none */
    opacity: 0.6; /* Normal browsers */
    filter: alpha(opacity = 60); /* "Special" browsers */
  }

Col

The col property must be either a string, useful when you want to filter only by one column. Or a set of columns, eg. ['col1', 'col3', col6'].

You can have more than one filter, but it is currently unsupported to have different filters with overlapping sets of columns. The behavior in this case is undefined (although I predict it will have a cumulative effect).