Filter Expressions

The Pro advanced filter can expose an optional expression editor inside each filter popup. It is disabled by default. When enabled, the popup adds an Expression button and expandable editor panel at the bottom, after the regular filter controls. Users can type current-column filter logic as text; valid expressions apply live and compile into the grid’s standard multiFilterItems model.

1
import { AdvanceFilterPlugin } from '@revolist/revogrid-pro';
2

3
const grid = document.createElement('revo-grid');
4

5
grid.plugins = [AdvanceFilterPlugin];
6
grid.columns = [
7
  { prop: 'status', name: 'Status', filter: ['string', 'selection'] },
8
  { prop: 'score', name: 'Score', filter: ['number', 'slider'] },
9
  { prop: 'updated', name: 'Updated', filter: ['date'] },
10
];
11

12
grid.filter = {
13
  expressions: {
14
    enabled: true,
15
    applyDebounceMs: 300,
16
    buttonLabel: 'Expression',
17
    placeholder: 'between 10 and 50\ncontains "north" AND not empty',
18
  },
19
};

Current-column scope

Expressions are scoped to the column whose filter popup is open. You can omit the column name:

1
between 2024-01-01 and 2024-12-31 AND after 2024-06-01

You can also include the current column prop or name for readability:

1
updated between 2024-01-01 and 2024-12-31 AND updated after 2024-06-01

References to another column are invalid and do not change active filters.

For application-defined cross-column OR, nested groups, and NOT, use the public Canonical Filter AST. The popup editor remains deliberately scoped to its current column.

Parsed cell values

Expressions evaluate the current column’s parsed value when cellParser is defined, just like ordinary comparisons. Blank expression operators use the raw source value and property-presence context from Core. See Blank Values for the source-preserving contract.

Syntax

Use AND, OR, and parentheses to group expressions:

1
(contains "north" OR contains "west") AND not empty

String columns support:

1
empty
2
not empty
3
= "Active"
4
!= "Archived"
5
begins "A"
6
contains "north"
7
not contains "draft"

Array columns support strict, valueless length checks:

1
empty array
2
not empty array
3
is empty array
4
is not empty array

Number and slider columns support:

1
> 10
2
>= 25
3
< 100
4
<= 500
5
between 250 and 640.42

Date columns support:

1
equals 2024-06-01
2
before 2024-12-31
3
after 2024-01-01
4
on or before 2024-12-31
5
on or after 2024-01-01
6
not equal 2024-07-04
7
between 2024-01-01 and 2024-12-31
8
today
9
yesterday
10
last 7 days
11
this month
12
last month
13
this quarter
14
next quarter
15
previous quarter
16
this year
17
next year
18
previous year

Selection-style text supports:

1
is "Open"
2
in ("Open", "Pending")
3
not in ("Closed", "Archived")

Registered structured filters use the same lossless mirror without exposing their transport JSON. Objects, arrays, strings, numbers, booleans, and blank values remain typed:

1
structured "arrayTagsMatch" {
2
  mode: "none",
3
  values: ["renewal", "priority"],
4
  emptyOnly: false,
5
  exact: false
6
}

The editor highlights keywords, operators, properties, strings, numbers, booleans, and invalid tokens. The grouped filter’s Text view uses the same token presentation; when a structured filter provides describeCondition, that filter-owned readable description replaces its transport value. Legacy saved expressions containing a quoted JSON payload remain accepted.

Validation and applying

The editor validates while users type. Valid expressions apply after applyDebounceMs; invalid expressions show diagnostics and keep the previous valid filters unchanged. Press Ctrl+Enter or Cmd+Enter to apply immediately.

The expression panel does not replace the normal popup content. Selection lists, slider controls, date inputs, and condition controls remain visible while the expression panel is expanded.

Expression filters are stored as hidden Pro filter items, so reset, active header state, filter events, and server-side filter payload handling continue to use the standard multiFilterItems flow.

Localization

Expression labels use the existing filter localization path:

1
grid.filter = {
2
  expressions: true,
3
  localization: {
4
    captions: {
5
      expressionButton: 'Expression',
6
      expressionTitle: 'Filter expression',
7
      expressionPlaceholder: 'contains "north"',
8
      expressionApply: 'Apply',
9
      expressionInvalid: 'Invalid expression',
10
    },
11
  },
12
};