Advanced filter

Conditions across columns joined with AND and OR, nested to any depth, from a builder dialog or setAdvancedFilter, applied with the column filters.

Paid feature · Advanced filter. Free for 30 days on a new domain; after that it needs a free personal key or a company key. See pricing

Two conditions per column with And / Or, and conditions across columns from a builder.

Code for this demo

import { createGrid } from '@freegridjs/core';
import { demoColumns, makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

export default function mount(ctx: DemoContext) {
  const { lang } = ctx;
  const h = (en: string, ko: string) => tr(lang, { en, ko });
  const grid = createGrid(ctx.host, { columns: demoColumns(lang), data: makeRows(2000), locale: lang, statusBar: true });
  grid.on('advancedFilterChange', e => ctx.log(`advancedFilterChange → ${JSON.stringify(e.advancedFilter)}`));
  grid.on('filterChange', e => ctx.log(`filterChange → ${JSON.stringify(e.filters)}`));

  text(ctx, h('Open a column menu: it takes two conditions joined with And / Or. Conditions across columns: right-click → Advanced filter…',
    '컬럼 메뉴에서 조건 두 개를 그리고/또는으로 묶을 수 있습니다. 여러 컬럼에 걸친 조건은 우클릭 → 고급 필터…'));
  separator(ctx);
  button(ctx, h('Q1 between 20,000 and 40,000', '1분기 2만~4만'), () =>
    grid.setFilter('q1', { type: 'combined', operator: 'and', conditions: [{ type: 'number', op: 'gte', value: 20000 }, { type: 'number', op: 'lte', value: 40000 }] }));
  button(ctx, h('(Japan and Q4 > 80,000) or name starts with "Kim"', '(일본 그리고 4분기 > 8만) 또는 이름이 Kim으로 시작'), () =>
    grid.setAdvancedFilter({ operator: 'or', conditions: [
      { operator: 'and', conditions: [
        { colId: 'country', model: { type: 'text', op: 'equals', value: 'Japan' } },
        { colId: 'q4', model: { type: 'number', op: 'gt', value: 80000 } },
      ] },
      { colId: 'name', model: { type: 'text', op: 'startsWith', value: 'kim' } },
    ] }));
  button(ctx, h('Open the builder', '조건 작성 창 열기'), () => grid.openFilterBuilder());
  button(ctx, h('Clear', '모두 해제'), () => {
    grid.setAdvancedFilter(null);
    grid.setFilter('q1', null);
  });
  return grid;
}

A column filter looks at one column. The advanced filter combines conditions across columns with AND and OR, nested as deep as you need: "(status is done and amount is over 100) or the customer starts with Kim". It applies on top of the column filters, the filter row and the quick search.

People build it in a dialog: right-click a cell and choose Advanced filter…, add a condition per line (column, operator, value) and join the lines with And or Or. Nested groups come from code: pass the structure to setAdvancedFilter, and the dialog shows each nested group as one line that can be removed. Each condition is a column id plus an ordinary filter model, so anything setFilter accepts works here too.

// (status = done AND amount > 100) OR customer starts with "Kim"
grid.setAdvancedFilter({ operator: 'or', conditions: [
  { operator: 'and', conditions: [
    { colId: 'status', model: { type: 'text', op: 'equals', value: 'done' } },
    { colId: 'amount', model: { type: 'number', op: 'gt', value: 100 } },
  ] },
  { colId: 'customer', model: { type: 'text', op: 'startsWith', value: 'kim' } },
] });

grid.getAdvancedFilter();     // the same object, or null
grid.openFilterBuilder();     // the dialog; right-click → Advanced filter… opens it too
grid.setAdvancedFilter(null); // clear it (the column filters stay)
grid.on('advancedFilterChange', e => save(e.advancedFilter));

// server data: getRows receives it as params.advancedFilter
createGrid(el, { columns, datasource: { getRows: p => api.rows({ ...p, where: p.advancedFilter }) } });

Saving and server data

The advanced filter is plain JSON, and getState() includes it, so it is saved and restored with each person's view. With a datasource, getRows receives it as advancedFilter; the server helpers turn it into SQL with bound parameters.

Options, methods and events

Name	Type	Description
`setAdvancedFilter(filter \| null)`	`AdvancedFilter`	Set the conditions across columns, or clear them with null. They apply together with the column filters.
`getAdvancedFilter()`	`AdvancedFilter \| null`	The current advanced filter.
`openFilterBuilder()`	`void`	Open the dialog where people build the conditions (also right-click → Advanced filter…).
`AdvancedFilter`	`{ operator: 'and' \| 'or', conditions: (AdvancedFilter \| { colId, model })[] }`	Groups nest to any depth; model is a column filter model such as { type: 'number', op: 'gt', value: 100 }.
`advancedFilter`	`boolean (option)`	false hides "Advanced filter…" in the right-click menu; setAdvancedFilter still works.
`advancedFilterChange`	`{ advancedFilter } (event)`	The advanced filter changed, from code or the dialog.

Questions about this page

Can a filter combine several columns with AND and OR?

Yes. setAdvancedFilter takes nested groups of conditions such as (status = done AND amount > 100) OR name starts with Kim, and people can build one from right-click → Advanced filter….