Skip to content
ZenGrid

Filtering Overview

Community

Introduction

Section titled “Introduction”

Filtering narrows the rows the grid shows without touching your source data. ZenGrid ships filtering in core — mark a column filterable and it grows a funnel button in its header that opens a filter popup; the grid slots an active-filter chip bar above the rows and re-filters as you go. A grid-wide quick filter searches every column at once, and an imperative filter API lets you set, read, and clear filters from code.

const grid = new Zengrid(el, {
  rowCount: rows.length,
  rowHeight: 44,
  columns: [
    { field: 'name',    header: 'Name',    filterable: true },                        // text popup
    { field: 'revenue', header: 'Revenue', filterable: true, filterType: 'number' },  // number popup
  ],
});


grid.setData(rows);

Turn a column into a filter with filterable: true. Add filterType to pick the popup’s operator set and input:

  • 'text' (default) — Contains, Equals, Starts with, Ends with, Not contains, Is blank, …
  • 'number' — Equals, Greater than, Less than, Between, … with a numeric input.
  • 'date' — Equals, After, Before, Between with a date picker.

The popup lets a reader stack conditions on one column with AND / OR logic. filterType only shapes the built-in UI — the underlying filter engine evaluates any operator against any value.

The filter API

Section titled “The filter API”

Every column filter has an imperative twin on grid.filter.* (with shorthands on the grid itself), so you can drive filtering from your own controls.

Method Shorthand Effect
grid.filter.set(col, op, value) grid.setFilter(col, op, value) Set a single condition on a column (0-based index).
grid.filter.setColumn(col, conditions, logic) grid.setColumnFilter(...) Set multiple conditions with 'AND' / 'OR'.
grid.filter.clearColumn(col) grid.clearColumnFilter(col) Clear one column’s filter.
grid.filter.clear() grid.clearFilters() Clear every column filter.
grid.filter.getState() grid.getFilterState() Read the active FilterModel[].
grid.filter.setState(models) grid.setFilterState(models) Restore a saved set of filters.
grid.filter.setQuick(query, cols?) grid.setQuickFilter(...) Search across all (or the given) columns.
grid.filter.clearQuick() grid.clearQuickFilter() Clear the quick filter.

Column filters and the quick filter compose: rows must pass both.

Try it live

Section titled “Try it live”

Each tab is a different way to filter the same grid. Click a header’s funnel, edit the code, or drive it with the buttons.

Click the funnel in a header. Name/Role/Region are text filters; Revenue/MRR are number filters — note the Greater than / Between operators. Stack conditions with AND/OR.

Where filtering lives

Section titled “Where filtering lives”

The building blocks above — filterable columns, type-aware popups, the quick filter, and the filter API — are all core, free in every grid. On top of them ZenGrid layers richer, Enterprise filter types, each with its own page:

Next

Section titled “Next”