New to Kendo UI for Vue? Start a free 30-day trial

Filter Overview

The Kendo UI for Vue Filter is a powerful component that helps you filter complex data sets. The component allows you to build and edit a CompositeFilterDescriptor object that is used by the filterBy method to give you the desired result. By providing a visual representation of the applied filters with the Filter component you can easily track the parameters passed to the filterBy method.

The Kendo UI for Vue Filter is part of the Kendo UI for Vue library of Vue UI components. It is distributed through NPM under the kendo-vue-data-tools package.

Basic Usage

To configure the Filter you have to use the below properties:

  • fieldsSets the fields settings which describes field names, labels, filter editor components and filter operators.
  • valueSets the value of the filter.
  • onChangeThe onChange event which will be triggered when the Filter value is changed.
Example
View Source
Edit In Stackblitz  
Change Theme:

Custom Editors

The Filter supports the usage of custom editors when filtering your data.

Custom Operators

The Filter provides options to configure the operators available for given field.

Globalization

The Pager provides globalization support.