---
title: GridFilterColumn
description: GridFilterColumn
element: vaadin-grid-filter-column
---

## Description

`<vaadin-grid-filter-column>` is a helper element for the `<vaadin-grid>`
that provides default header renderer and functionality for filtering.

#### Example:
```html
<vaadin-grid>
 <vaadin-grid-filter-column path="name.first"></vaadin-grid-filter-column>

 <vaadin-grid-column>
   ...
```

## Properties

### autoWidth

**Type:** `boolean`

Automatically sets the width of the column based on the column contents when this is set to `true`.

For performance reasons the column width is calculated automatically only once when the grid items
are rendered for the first time and the calculation only considers the rows which are currently
rendered in DOM (a bit more than what is currently visible). If the grid is scrolled, or the cell
content changes, the column width might not match the contents anymore.

Hidden columns are ignored in the calculation and their widths are not automatically updated when
you show a column that was initially hidden.

You can manually trigger the auto sizing behavior again by calling `grid.recalculateColumnWidths()`.

The column width may still grow larger when `flexGrow` is not 0.

### flexGrow

**Type:** `number`

Flex grow ratio for the cell widths. When set to 0, cell width is fixed.

### footerPartName

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

Custom part name for the footer cell.

### footerRenderer

**Type:** `GridHeaderFooterRenderer<any, GridColumn<any>> | null | undefined`

Custom function for rendering the footer content.
Receives two arguments:

- `root` The footer cell content DOM element. Append your content to it.
- `column` The `<vaadin-grid-column>` element.

See also: [GridHeaderFooterRenderer](#gridheaderfooterrenderer)

### frozen

**Type:** `boolean`

When true, the column is frozen. When a column inside of a column group is frozen,
all of the sibling columns inside the group will get frozen also.

### frozenToEnd

**Type:** `boolean`

When true, the column is frozen to end of grid.

When a column inside of a column group is frozen to end, all of the sibling columns
inside the group will get frozen to end also.

Column can not be set as `frozen` and `frozenToEnd` at the same time.

### header

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

Text to display as the label of the column filter text-field.

### headerPartName

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

Custom part name for the header cell.

### headerRenderer

**Type:** `GridHeaderFooterRenderer<any, GridColumn<any>> | null | undefined`

Custom function for rendering the header content.
Receives two arguments:

- `root` The header cell content DOM element. Append your content to it.
- `column` The `<vaadin-grid-column>` element.

See also: [GridHeaderFooterRenderer](#gridheaderfooterrenderer)

### hidden

**Type:** `boolean`

When set to true, the cells for this column are hidden.

### path

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

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

### renderer

**Type:** `GridBodyRenderer<any, GridColumn<any>> | null | undefined`

Custom function for rendering the cell content.
Receives three arguments:

- `root` The cell content DOM element. Append your content to it.
- `column` The `<vaadin-grid-column>` element.
- `model` The object with the properties related with
  the rendered item, contains:
  - `model.index` The index of the item.
  - `model.item` The item.
  - `model.expanded` Sublevel toggle state.
  - `model.level` Level of the tree represented with a horizontal offset of the toggle button.
  - `model.selected` Selected state.
  - `model.detailsOpened` Details opened state.
  - `model.hasChildren` Whether the item has children.

See also: [GridBodyRenderer](#gridbodyrenderer)

### resizable

**Type:** `boolean | null | undefined`

When set to true, the column is user-resizable.

### rowHeader

**Type:** `boolean`

When true, the cells for this column will be rendered with the `role` attribute
set as `rowheader`, instead of the `gridcell` role value used by default.

When a column is set as row header, its cells will be announced by screen readers
while navigating to help user identify the current row as uniquely as possible.

### textAlign

**Type:** `GridColumnTextAlign | undefined`

Aligns the columns cell content horizontally.
Supported values: "start", "center" and "end".

See also: [GridColumnTextAlign](#gridcolumntextalign)

### width

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

Width of the cells for this column.

Please note that using the `em` length unit is discouraged as
it might lead to misalignment issues if the header, body, and footer
cells have different font sizes. Instead, use `rem` if you need
a length unit relative to the font size.

## Types

### GridBodyRenderer

```ts
export type GridBodyRenderer<TItem, Column extends GridColumnMixin<TItem, Column>> = (
  root: HTMLElement,
  column: Column,
  model: GridItemModel<TItem>,
) => void;
```

### GridColumnTextAlign

```ts
export type GridColumnTextAlign = 'center' | 'end' | 'start' | null;
```

### GridHeaderFooterRenderer

```ts
export type GridHeaderFooterRenderer<TItem, Column extends ColumnBaseMixinClass<TItem, Column>> = (
  root: HTMLElement,
  column: Column,
) => void;
```

### GridItemModel

```ts
export interface GridItemModel<TItem> {
  index: number;
  item: TItem;
  selected?: boolean;
  expanded?: boolean;
  level?: number;
  detailsOpened?: boolean;
  hasChildren?: boolean;
}
```