# Filter row

The Kendo UI for Vue Grid provides diverse filtering options for displaying Grid records which meet specified criteria.

## Getting Started

To enable filtering:

1. Set the [filterable](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#filterable) and [filter](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#filter) options of the Grid.
2. Handle the [filterchange](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#onfilterchange) event of the Grid, and filter the data manually by applying the filter from the argument of the event.

## Filter Row

By default, when filtering is enabled, the Grid renders a filter row in its column headers. Based on the type of data the columns contain, the filter row displays textboxes in each column header where the user can filter string, numeric, or date inputs.

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

## Customizing the Filter Row

To render a custom filter cell, set [`filterCell`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcellssettings#filtercell) in the [`cells`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridcolumnprops#cells) option of a column. To apply the same custom filter cell to all columns, set `filterCell` in the [`cells`](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops#cells) prop of the Grid.

The following example uses a named slot for the `ProductName` filter cell.

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

## Using Switch in Filter Row

The following example uses the [Switch](https://www.telerik.com/kendo-vue-ui-develop/components/inputs/switch) component in the Filter Row of the Grid. The custom slot is assigned to `cells.filterCell` for the `Discontinued` column.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/filtering/row/custom-switch/source.txt)

## Using DropDownList in Filter Row

The following example uses the [DropDownList](https://www.telerik.com/kendo-vue-ui-develop/components/dropdowns/dropdownlist) component in the Filter Row of the Grid. The custom slot is assigned to `cells.filterCell` for the `Category.CategoryName` column.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/filtering/row/custom-dropdownlist/source.txt)

## Using DateRangePicker in Filter Row

The following example uses the [DateRangePicker](https://www.telerik.com/kendo-vue-ui-develop/components/dateinputs/daterangepicker) component in the Filter Row of the Grid. The custom slot is assigned to `cells.filterCell` for the `FirstOrderedOn` column.

[Demo Source](https://demos.telerik.com/kendo-vue-ui/grid/filtering/row/custom-daterangepicker/source.txt)

## Suggested Links

* [API Reference of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api/gridprops)
* [API Index of the Grid](https://www.telerik.com/kendo-vue-ui-develop/components/grid/api)