Skip to content
ZenGrid

Column Filters

Community

Introduction

Section titled “Introduction”

A column filter is the funnel that appears in a column’s header. Click it and ZenGrid opens a small popup where a reader picks an operator, types a value, and narrows the grid to the rows that match — without touching your source data. Column filters are core: mark a column filterable and the header grows the funnel; everything below configures how that popup behaves.

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

Only columns with filterable: true get a funnel. Everything else renders a plain header, so you decide exactly which columns a reader can filter.

Pick the popup type

Section titled “Pick the popup type”

filterType picks the operator set the popup offers and how it parses typed input. It only shapes the built-in UI — the filter engine matches any operator against any value.

filterType Input Operators
'text' (default) text Contains, Equals, Starts with, Ends with, Not contains, Not equals, Is blank, Is not blank
'number' numeric Equals, Not equals, Greater than, Less than, ≥, ≤, Between, Is blank, Is not blank
'date' date picker Equals, After, Before, Between, Is blank, Is not blank

Stack conditions

Section titled “Stack conditions”

Inside a popup, Add condition stacks a second rule on the same column. Once there are two, a match control appears so the reader chooses AND (rows must satisfy both) or OR (either is enough). The blank / notBlank operators take no value — handy for finding empty cells. Stacked conditions live in a single FilterModel for that column.

Tailor the operators

Section titled “Tailor the operators”

filterParams refines the popup per column without leaving core:

  • filterOptions restricts and reorders the operators the dropdown shows. Entries are matched against the column’s type set; unknown operators are dropped, and if nothing matches the full set is kept (a typo can never produce an operator-less popup).
  • defaultOption is the operator the popup pre-selects for a fresh condition. It must be one of the offered operators.
{
  field: 'name', header: 'Name', filterable: true,
  filterParams: {
    filterOptions: ['equals', 'contains'], // only these two, in this order
    defaultOption: 'equals',               // popup opens on "Equals"
  },
}

Try it live

Section titled “Try it live”

Each tab configures the same grid a different way. Click a header’s funnel to open its popup, or edit the code and re-run.

Only filterable columns grow a funnel — MRR has none. Text columns (Name, Role, Region, Status) open text operators; Revenue is a number filter, so its popup offers Greater than / Between with a numeric input.

Driving filters from code

Section titled “Driving filters from code”

Everything the popup does has an imperative twin on grid.filter.* (with grid shorthands) — set a single condition, stack several with a logic mode, read the active FilterModel[], restore a saved set, or clear one column. See the Filtering Overview for the full table, and Applying Filters for controlling when filters run.

Next

Section titled “Next”