Skip to content zachleat Project

🚾Web Component Star Search

A searchable catalog of standalone web components.

<vaadin-grid-filter>

`<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.

Category
Layout
Built with
Lit
Library
Vaadin
Author
Vaadin
Package
@vaadin/grid
Component size
11.3 kB JS (minified + gzipped, JS includes dependencies beyond the library)
Library size
19.9 kB JS (shared by every Vaadin component, loaded once per page)
Popular
4 out of 5
Downloads
288,102/week · jsDelivr 18,202 hits/month (whole @vaadin/grid package)
Latest stable version
25.3.2
Last published
Component last changed
(in 25.0.0)
License
Apache-2.0

<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;
};

Attributes

Events