# 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`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/compositefilterdescriptor) object that is used by the [filterBy](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/api/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](https://www.npmjs.com/package/@progress/kendo-vue-data-tools).

## Basic Usage

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

* [`fields`](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/api/filterprops#fields)—Sets the fields settings which describes field names, labels, filter editor components and filter operators.
* [`value`](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/api/filterprops#value)—Sets the value of the filter.
* [`onChange`](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/api/filterprops#onchange)—The onChange event which will be triggered when the Filter value is changed.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/datatools/filter/basic-usage/source.txt)

## Custom Editors

The Filter supports the usage of [custom editors](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/filter/custom-editors) when filtering your data.

## Custom Operators

The Filter provides options to configure the [operators](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/filter/custom-operators) available for given field.

## Globalization

The Pager provides [globalization support](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/globalization).

## Support and Learning Resources

* [Filter Homepage](https://www.telerik.com/kendo-vue-ui/filter)
* [API Reference of the Filter Component](https://www.telerik.com/kendo-vue-ui-develop/components/datatools/api/filterprops)
* [Getting Started with Kendo UI for Vue - JavaScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-composition-api)
* [Getting Started with Kendo UI for Vue - TypeScript (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-composition-api)
* [Getting Started with Kendo UI for Vue - JavaScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/javascript-options-api)
* [Getting Started with Kendo UI for Vue - TypeScript + Options API (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/typescript-options-api)
* [Getting Started with Kendo UI for Vue - Nuxt 3 (Online Guide)](https://www.telerik.com/kendo-vue-ui-develop/components/getting-started/get-started-nuxt-3)
* [Virtual Classroom (Training Course for Registered Users)](https://learn.telerik.com/learn/course/internal/view/elearning/45/kendo-ui-for-vue-with-typescript)
* [Filter Forum](https://www.telerik.com/forums/kendo-ui-vue?searchText=filter)
* [Knowledge Base](https://www.telerik.com/kendo-vue-ui/components/knowledge-base/)
* [Kendo UI Productivity Tools extension for VS Code](https://www.telerik.com/kendo-vue-ui-develop/components/vscode-extension)

## Additional Resources

* [Vue Blogs](https://www.telerik.com/blogs/tag/kendo-ui-for-vue)
* [Kendo UI for Vue Roadmap](https://www.telerik.com/support/whats-new/kendo-vue-ui/roadmap)