List Filter

Enterprise

Introduction

The List Filter replaces a column’s condition-builder popup with a checkbox list of every distinct value in the column. Instead of choosing an operator and typing text, the reader ticks the values they want — the classic spreadsheet “filter by selection” experience. It’s ideal for low-cardinality columns (status, region, category, owner) where the useful query is “show me these, hide those.”

setFilter() is an enterprise column helper. It builds the value list from your data, renders the checkbox popup, and — when the reader applies a subset — sets an in filter on the column.

import { setFilter } from '@zengrid/enterprise';

const grid = new Zengrid(el, {
  columns: [
    { field: 'name', header: 'Name' },
    setFilter({ field: 'region', header: 'Region' }),
  ],
});

setFilter() defaults filterable to true, so the header funnel appears automatically. Click it and the popup shows the checkbox list with a Select all row and a search box on top; the popup’s own Apply / Clear run the selection.

Under the hood

The seam is in core: a column may set a filterComponent that replaces the popup body while the popup keeps its header and Apply/Clear footer. setFilter() is the license-gated helper that supplies a value-list body and maps the ticked values to an in condition. (The same core seam backs Custom Column Filters.)

How the selection maps to a filter

• All boxes ticked → no filter (Apply clears the column). A fresh popup opens with everything ticked.
• A subset ticked → an in condition of exactly those values.
• Nothing ticked → in [], which matches no rows.

Because the match is an in set-membership test, values compare exactly — there’s no case-folding or substring logic here (that’s the Text Filter). Re-opening the popup restores the current selection from the active in condition.

Customising the list

setFilter() takes the usual ColumnDef fields plus a handful of list knobs:

Option	What it does
values	Replace the derived uniques — an array, or a function (derived) => list to filter/reorder/extend them.
valueFormatter	Label each value: (value) => string. Blank values show as (Blanks).
comparator	Order the rows: (a, b) => number. Default is ascending by label.
miniFilter	Show the search box. Default true.
selectAll	Show the “Select all” row (tri-state; acts on the visible rows). Default true.
showCount	Show each value’s occurrence count. Default false.

setFilter({
  field: 'status', header: 'Status',
  valueFormatter: (v) => v.toUpperCase(),
  comparator: (a, b) => ORDER.indexOf(a) - ORDER.indexOf(b),
  showCount: true,
});

Try it live

Click a Region, Role, or Status funnel to open the checkbox list. Tick a subset and press Apply, type in the search box to narrow the list, or use the buttons to drive the same in filter from code.

Pick from a listSearch + countsCustom values, labels & order

CodeDemoSplit

ResetRun ⌘⏎

Open the Region funnel → a checkbox list of the eight regions. Untick a few and press Apply to keep only the ticked ones. The buttons drive the same in filter from code.

Driving it from code

The List Filter is just an in condition on the column, so the imperative API is the ordinary filter API:

grid.filter.set(2, 'in', ['APAC', 'EU-West']); // keep these two regions
grid.filter.set(2, 'in', []);                  // keep none
grid.filter.clearColumn(2);                    // back to "all"

Setting the filter from code and opening the popup stay in sync — the checkboxes restore from whatever in condition is currently active on the column.

Next

• Column Filters — enabling filters and the in operator the List Filter builds on.
• Text Filter — substring and equality matching for free-text columns.
• Custom Column Filters — the core filterComponent seam for building your own popup body.