---
title: GridFilter
description: GridFilter
element: vaadin-grid-filter
---

## Description

`<vaadin-grid-filter>` is a helper element for the `<vaadin-grid>` that provides out-of-the-box UI controls,
and handlers for filtering the grid data.

#### Example:
```html
<vaadin-grid-column id="column"></vaadin-grid-column>
```
```js
const column = document.querySelector('#column');
column.headerRenderer = (root, column) => {
  let filter = root.firstElementChild;
  if (!filter) {
    filter = document.createElement('vaadin-grid-filter');
    root.appendChild(filter);
  }
  filter.path = 'name.first';
};
column.renderer = (root, column, model) => {
  root.textContent = model.item.name.first;
};
```

## Properties

### path

**Type:** `string | null | undefined`

JS Path of the property in the item used for filtering the data.

### value

**Type:** `string | null | undefined`

Current filter value.

## Methods

### focus

**Type:** `(options?: FocusOptions | undefined) => void`



## Events

### value-changed

**Type:** [GridFilterValueChangedEvent](#gridfiltervaluechangedevent)

Fired when the `value` property changes.

## Types

### GridFilterValueChangedEvent

```ts
/**
 * Fired when the `value` property changes.
 */
export type GridFilterValueChangedEvent = CustomEvent<{ value: string }>;
```