# Filtering

The Kendo UI for Vue TreeList enables you to display only those TreeList records which meet specified criteria.

## Getting Started

To enable filtering:

1. Set the [`filter`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#filter) prop of the TreeList. The filtering conditions are declared as [`FilterDescriptors`](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/filterdescriptor).
2. Handle the [`onFilterChange`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#onfilterchange) or the [`onDataStateChange`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#ondatastatechange) event of the TreeList, and filter the data manually or by using the [`filterBy`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/filterby) function.
3. Pass the component which will be responsible for the filtering of the column by using the [`filter`](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistcolumnprops#filter) prop.

Each consecutive filter is added to the previous ones and reduces the subset of data.

## Filter Rows

By default, when filtering is enabled, the TreeList renders a filter row in its header. Based on the type of the filter component which is set in the `filter` prop of the columns, the filter row displays components in each column header where the user can filter string, numeric, boolean, or date inputs.

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

## Suggested Links

* [FilterDescriptors](https://www.telerik.com/kendo-vue-ui-develop/components/dataquery/api/filterdescriptor)
* [onDataStateChange](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops#ondatastatechange)
* [API Reference of the TreeList](https://www.telerik.com/kendo-vue-ui-develop/components/treelist/api/treelistprops)