Number Filter

Community

Introduction

The number filter is the popup a numeric column opens when you click its header funnel. A text column is the default, so you opt a column in by setting filterType: 'number' — that swaps the operator list to numeric comparisons and renders a numeric input (<input type="number">) in the popup.

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

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

The operators

A number filter offers nine operators. The comparisons work on the cell’s raw numeric value; between takes two values (an inclusive range) and blank / notBlank take none.

Operator	Value	Matches when the cell…
equals (default)	number	equals the value
notEquals	number	does not equal the value
greaterThan	number	is strictly greater
greaterThanOrEqual	number	is greater or equal
lessThan	number	is strictly less
lessThanOrEqual	number	is less or equal
between	[min, max]	falls inside the inclusive range
blank	—	is empty / null
notBlank	—	has a value

Non-numeric cells (and values that don’t parse as numbers) never match a comparison — they’re excluded rather than throwing.

Restrict, reorder, and pre-select the operators

filterParams tailors the popup per column without leaving core — the same knobs as every other built-in filter:

• 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: 'revenue', header: 'Revenue', filterable: true, filterType: 'number',
  filterParams: {
    filterOptions: ['between', 'greaterThan', 'lessThan'], // a range-first column
    defaultOption: 'between',                              // popup opens on "Between"
  },
}

Try it live

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

The operatorsRanges & the APITailor operators

CodeDemoSplit

ResetRun ⌘⏎

Open the Revenue funnel: try "Greater than" 150000, then "Between" 100000 and 200000 (two inputs appear), then "Is not blank". filterType: "number" is what swaps text operators for these numeric ones + a number input.

Driving the number 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 (pass a [min, max] array for between), grid.filter.setColumn(col, conditions, logic) to stack several with AND / OR. The buttons in the Ranges & the API tab call grid.filter.set directly. See the Filtering Overview for the full API.

Next

• Date Filter — comparisons over dates, with a date picker in the popup.
• BigInt Filter — the same comparisons for arbitrarily large integers.
• Text Filter — the default string filter.
• Column Filters — enabling filters and stacking AND / OR conditions.