Quick Start

Use this guide when you need the shortest path from an unfiltered grid to a useful filtering workflow. RevoGrid Core already includes text and number conditions. Add AdvanceFilterPlugin only when you need selection lists, sliders, dates, expressions, grouped logic, quick filtering, or the structured filter types.

Choose a filter model

Use the smallest model that expresses the product requirement:

Need	Recommended model	Why
Ordinary local column filters	multiFilterItems	The smallest Core-compatible model; columns combine with AND.
Existing Core or legacy remote integration	multiFilterItems	Keeps the familiar column-condition format.
Saved views, remote requests, cross-column OR, nested groups, or NOT	FilterAst	JSON-safe canonical tree with one portable meaning.

For a new remote integration, start with FilterAst and the accompanying executionContext; do not build a new backend contract around runtime-only values in multiFilterItems. The Filter State and Presets guide shows both shapes, and the Canonical Filter AST guide defines the remote contract.

1. Enable filtering

Set the grid-level filter property explicitly, then choose a filter family on each column that needs filtering:

const grid = document.querySelector('revo-grid')!;

grid.columns = [
  { prop: 'name', name: 'Name', filter: 'string' },
  { prop: 'status', name: 'Status', filter: 'string' },
  { prop: 'amount', name: 'Amount', filter: 'number' },
  { prop: 'internalId', name: 'Internal ID', filter: false },
];

grid.filter = true;
grid.source = [
  { name: 'Anna', status: 'Open', amount: 120 },
  { name: 'John', status: 'Pending', amount: 80 },
  { name: 'Steve', status: 'Closed', amount: 240 },
];

The grid-level property enables the filter plugin. It defaults to true; setting it explicitly makes application intent clear. The column-level property controls the button and available operators for that column. Do not initialize the grid with filter = false and expect a later true assignment to install the plugin dynamically.

Column filter value	Use it for
true or 'string'	Text values
'number'	Numeric comparisons
false	No filter button
string[]	Several Core, Pro, or custom filter families

2. Choose an operator

Core string columns provide these saved operator IDs:

Operator	Meaning
contains / notContains	Includes or excludes text
begins	Starts with text
eq / notEq	Equal or not equal
empty / notEmpty	Is blank or is not blank

Core number columns provide eqN, neqN, gt, gte, lt, lte, empty, and notEmpty. Operator IDs are used in saved state, configuration, and event payloads; the popup shows readable labels such as Contains, >=, and Is blank.

3. Start with an applied filter

Use multiFilterItems for both single and multiple conditions. The following configuration shows rows whose status is Open and whose amount is from 100 through 500:

grid.filter = {
  multiFilterItems: {
    status: [{ id: 1, type: 'eq', value: 'Open', relation: 'and' }],
    amount: [
      { id: 2, type: 'gte', value: 100, relation: 'and' },
      { id: 3, type: 'lte', value: 500, relation: 'and' },
    ],
  },
};

Conditions inside one column can use and or or. Different columns combine with AND. Use the Canonical Filter AST when you need cross-column OR, nested groups, or NOT.

Update conditions reactively without replacing configuration

The filter property is reactive. When the grid already has localization, Pro options, or custom filters, spread the current object into a new configuration before replacing its active conditions:

const currentFilter = typeof grid.filter === 'object' ? grid.filter : {};

grid.filter = {
  ...currentFilter,
  multiFilterItems: {
    amount: [
      { id: 1, type: 'gte', value: 100, relation: 'and' },
      { id: 2, type: 'lte', value: 500, relation: 'and' },
    ],
  },
};

Assign a new object rather than mutating grid.filter.multiFilterItems in place; the new reference triggers the reactive update. Framework applications should use the equivalent state update. For a Pro tree with cross-column logic, use the same pattern with filterAst instead of multiFilterItems.

4. Apply only after confirmation

Filtering updates while the user edits by default. For a Save/Cancel workflow, disable dynamic filtering:

grid.filter = {
  disableDynamicFiltering: true,
};

5. Read and clear the result

Read the currently visible models with getVisibleSource():

const visibleRows = await grid.getVisibleSource();

Clear through the active plugin to preserve configuration such as localization, selection options, expressions, and structured type registrations:

import { FilterPlugin } from '@revolist/revogrid';

const filterPlugin = (await grid.getPlugins()).find(
  (plugin) => plugin instanceof FilterPlugin,
);

await filterPlugin?.clearFiltering();

AdvanceFilterPlugin extends FilterPlugin, so the same lookup works for Pro and also clears its quick-filter and canonical AST state. If your application controls grid.filter by assignment instead, recreate the complete configuration with multiFilterItems: {}; assigning only the empty model would replace the other options.

6. React to changes

Use afterfilterapply for UI that depends on the filtered result. Use the cancelable beforefilterapply event when the application needs to inspect, rewrite, or delegate a request to a backend.

grid.addEventListener('afterfilterapply', async (event) => {
  const visibleRows = await grid.getVisibleSource();
  console.log(event.detail.multiFilterItems, visibleRows.length);
});

grid.addEventListener('beforefilterapply', (event) => {
  console.log('About to apply', event.detail.filterItems);
});

7. Add Pro filter controls

Register AdvanceFilterPlugin, then add the filter type to each matching column:

import {
  AdvanceFilterPlugin,
  FIlTER_SELECTION,
  FIlTER_SLIDER,
  FILTER_DATE,
} from '@revolist/revogrid-pro';
import '@revolist/revogrid-pro/dist/revogrid-pro.css';

grid.plugins = [AdvanceFilterPlugin];
grid.columns = [
  { prop: 'status', filter: ['string', FIlTER_SELECTION] },
  { prop: 'amount', filter: ['number', FIlTER_SLIDER] },
  { prop: 'createdAt', filter: [FILTER_DATE] },
];
grid.filter = true;

Customize the experience

Each concern has a focused customization boundary; combine only the ones your UI needs.

Need	Configure or call
Application-specific operator	filter.customFilters
Purpose-built filter popup	filter.structuredFilterTypes
Server-backed selection values	filter.selection.getItems(prop, { search, signal })
Global toolbar search	grid.quickFilter
Visual nested-rule editor	filter.groupedFilter or plugin.mountFilterAstEditor()
Saved view or remote query	plugin.getFilterAst() and plugin.setFilterAst()

Use the Filter Events guide when the application owns remote loading. Its example covers canceling local evaluation, sending the canonical request, and accepting only the latest response.

Choose a focused guide next:

• Text Filter for contains, equality, and begins-with conditions
• Number Filter for comparisons and numeric ranges
• Selection Filter for checklists of values
• Excel-Style Filter for staged Apply/Cancel checklists
• Slider Filter for numeric ranges
• Date Filter for calendar-day rules
• Datetime Filter for exact instants
• Boolean Filter for strict Yes/No conditions
• Array Filter for empty and non-empty arrays
• Structured Filter Types for purpose-built popup controls
• Quick Filter for multi-word search across columns
• Filter Events for observation and remote delegation
• Filter Badges for synchronized active-filter summaries
• Filter State and Presets for reusable and persisted views
• Custom Filter Operators for application-specific predicates
• Advanced Filtering Overview for quick filtering, badges, expressions, presets, and grouped logic

Common mistakes

• Setting a column’s filter but not enabling grid.filter or registering the Pro plugin.
• Using string operators such as eq on a numeric column; use eqN for Core numeric equality.
• Expecting multiFilterItems to express cross-column OR; use FilterAst for that shape.
• Filtering formatted display text without a cellParser; conditions evaluate the parsed value when a parser exists.
• Treating 0 or false as blank. The default blank policy does not.

Related guides

• Blank Values
• Filter Header
• Filter Expressions
• Clear Filtering demo
• Core filtering guide