GridFilter

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: #

<vaadin-grid-column id="column"></vaadin-grid-column>

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

Fired when the value property changes.

Types #

GridFilterValueChangedEvent #

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