Skip to content
ZenGrid

Text Filter

Community

Introduction

Section titled “Introduction”

The text filter is the popup a string column opens when you click its header funnel. It’s the default: any filterable column is a text filter unless you set filterType to 'number' or 'date'. A reader picks an operator, types a value, and ZenGrid narrows the grid to the matching rows — your source data is untouched.

const grid = new Zengrid(el, {
  rowCount: rows.length,
  columns: [
    { field: 'name', header: 'Name', filterable: true }, // text filter (default)
  ],
});

Text filtering is core — no license, no plugin. Everything below configures the same built-in popup.

The operators

Section titled “The operators”

A text filter offers eight operators. The four substring operators are the workhorses; blank / notBlank take no value and find (or exclude) empty cells.

Operator Value Matches when the cell…
contains (default) text contains the term anywhere
notContains text does not contain the term
equals text equals the term
notEquals text does not equal the term
startsWith text starts with the term
endsWith text ends with the term
blank — is empty / null / whitespace
notBlank — has any non-whitespace text

Matching is case-insensitive by default

Section titled “Matching is case-insensitive by default”

All text operators fold case — contains "acme" matches ACME Corp, and equals "active" matches Active. Set filterParams.caseSensitive: true on a column to require an exact-case match instead:

{
  field: 'region', header: 'Region', filterable: true,
  filterParams: { caseSensitive: true }, // "apac" no longer matches "APAC"
}

Case sensitivity is a column setting: it applies to every operator on that column, whether the reader drives it from the popup or you call grid.filter.* from code.

Restrict, reorder, and pre-select the operators

Section titled “Restrict, reorder, and pre-select the operators”

filterParams tailors the popup per column without leaving core:

  • filterOptions restricts and reorders which operators the dropdown shows. Unknown entries are dropped; an empty result falls back to the full set, so a typo can never produce an operator-less popup.
  • defaultOption is the operator a fresh condition opens on. It must be one of the offered operators.
{
  field: 'name', header: 'Name', filterable: true,
  filterParams: {
    filterOptions: ['startsWith', 'contains'], // only these two, in this order
    defaultOption: 'startsWith',               // popup opens on "Starts with"
  },
}

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 text popup, or edit the code and re-run.

Open the Name funnel and walk the dropdown: Contains "an", Starts with "A", Ends with "a", then Equals a full name. Try "Is not blank" — it needs no value and keeps every named row.

Driving the text filter from code

Section titled “Driving the text filter from code”

Everything the popup does has an imperative twin on grid.filter.* (with grid shorthands) — grid.filter.set(col, op, value) for a single condition, grid.filter.setColumn(col, conditions, logic) to stack several. The buttons in the case-sensitivity tab above call grid.filter.set directly. See the Filtering Overview for the full API.

Next

Section titled “Next”