RevoGrid Filtering

Filtering lets users narrow the visible rows without changing the original source. RevoGrid keeps the full dataset available and hides non-matching physical row indexes through the trimming pipeline, so filtering works together with virtual scrolling, sorting, editing, and getVisibleSource().

Enable filtering

Turn on the built-in filter plugin with the grid-level filter prop:

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

grid.source = [
  { name: 'Steve', role: 'Admin', score: 92 },
  { name: 'Anna', role: 'Editor', score: 76 },
  { name: 'John', role: 'Viewer', score: 61 },
];

grid.columns = [
  { prop: 'name', name: 'Name' },
  { prop: 'role', name: 'Role' },
  { prop: 'score', name: 'Score', filter: 'number' },
];

grid.filter = true;

The grid-level filter value enables the plugin. The column-level filter value decides whether a column has a filter button and which filter family the panel should use.

RevoGrid filter propColumn filter option

Column filter options

Use filter on a column when you need to override the default behavior.

const columns = [
  { prop: 'name', name: 'Name' },
  { prop: 'internalId', name: 'Internal ID', filter: false },
  { prop: 'score', name: 'Score', filter: 'number' },
  { prop: 'status', name: 'Status', filter: ['string', 'selection'] },
];

Value	Use it for
true	Enable the default filter family for the column.
false	Hide the filter UI for the column.
'string'	Text matching such as contains, starts with, and equals.
'number'	Numeric comparisons such as greater than and less than.
string[]	Multiple filter families, often used by Pro or custom filters.

Built-in filter operations

String columns support notEmpty, empty, eq, notEq, begins, contains, and notContains.

Number columns support notEmpty, empty, eqN, neqN, gt, gte, lt, and lte.

These operation ids are the values used in saved filter state, include, localization, and event payloads.

FilterItemFilterType

Configure ColumnFilterConfig

Pass an object to grid.filter when you need controlled behavior instead of the default plugin setup.

grid.filter = {
  include: ['contains', 'eq', 'notEmpty', 'gt', 'gte', 'lt', 'lte'],
  disableDynamicFiltering: true,
  closeFilterPanelOnOutsideClick: false,
};

Important options:

Option	Purpose
collection	Restores single-filter state by column prop.
multiFilterItems	Restores multiple filters per column, including and / or relations.
include	Limits the operations shown in the dropdown.
customFilters	Registers custom operations.
filterProp	Uses a custom column property instead of filter to decide whether a column is filterable.
localization	Replaces filter captions and operation names.
disableDynamicFiltering	Applies changes only when the user confirms.
closeFilterPanelOnOutsideClick	Controls whether outside clicks close the filter panel.

ColumnFilterConfigFilterCollectionItemMultiFilterItem

Restore saved filters

Use collection for simple saved filters:

grid.filter = {
  collection: {
    role: { type: 'eq', value: 'Admin' },
    score: { type: 'gte', value: 80 },
  },
};

Use multiFilterItems when a column needs several conditions:

grid.filter = {
  multiFilterItems: {
    score: [
      { id: 1, type: 'gte', value: 70 },
      { id: 2, type: 'lt', value: 95, relation: 'and' },
    ],
    role: [
      { id: 3, type: 'eq', value: 'Admin' },
      { id: 4, type: 'eq', value: 'Editor', relation: 'or' },
    ],
  },
};

Filter parsed values

If a cell displays formatted text but filtering should use normalized data, add cellParser to the column or column type.

const columns = [
  {
    prop: 'total',
    name: 'Total',
    filter: 'number',
    cellTemplate: (h, { model, prop }) =>
      h('span', `$${Number(model[prop]).toLocaleString()}`),
    cellParser: (model, column) => Number(model[column.prop] ?? 0),
  },
];

See Column Types and Formats and Custom Cell Formats for reusable parser patterns.

Create a custom filter

Register custom operations through customFilters. The columnFilterType must match the column's filter value.

const matchesPriority = (value, expected = 'critical') =>
  String(value).toLowerCase() === String(expected).toLowerCase();
matchesPriority.extra = 'input';

grid.columns = [
  { prop: 'ticket', name: 'Ticket' },
  { prop: 'priority', name: 'Priority', filter: 'ticketPriority' },
];

grid.filter = {
  include: ['isHighPriority'],
  customFilters: {
    isHighPriority: {
      columnFilterType: 'ticketPriority',
      name: 'High priority',
      func: matchesPriority,
    },
  },
};

The filter function receives the parsed cell value and the extra value from the filter panel. func.extra = 'input' asks the panel to render an input for that operation. The filter API also supports datepicker or a custom extra-field renderer for specialized UIs.

CustomFilter

Event hooks

Filtering is event-driven. Use these hooks when your app needs to observe, rewrite, or replace filtering behavior.

grid.addEventListener('beforefilterapply', event => {
  const { collection } = event.detail;

  for (const prop of Object.keys(collection)) {
    if (collection[prop].value === '') {
      delete collection[prop];
    }
  }
});

grid.addEventListener('beforefiltertrimmed', event => {
  console.log('Rows about to be hidden', event.detail.itemsToFilter);
});

Useful events:

Event	When to use it
beforefilterapply	Inspect or modify the filter collection before rows are evaluated.
beforefiltertrimmed	Inspect or replace the physical row indexes that will be hidden.
beforetrimmed	Intercept trimming generally, including filtering-driven trimming.
aftertrimmed	React after visible rows have changed.
filterconfigchanged	Persist new filter config when the filter prop changes.

For the full event table, see API: Events and API: RevoGrid. For the filtering event flow, see Event Patterns and Lifecycles.

Read filtered rows

After a filter is applied, use getVisibleSource() when the application needs the current visible dataset.

const visibleRows = await grid.getVisibleSource();
const visibleEmails = visibleRows.map(row => row.email);

See Programmatic Control.

Pro filtering

The open-source filter plugin is a strong base: text and number operations, custom functions, localization, saved state, and event hooks are all available in the Community package. RevoGrid Pro builds on the same API and makes filtering feel closer to a full spreadsheet or back-office data product.

Import the Pro plugins and stylesheet, then add the plugins to the grid plugins list. AdvanceFilterPlugin adds selection, slider, quick-search, and date filter operations; FilterHeaderPlugin adds always-visible header inputs.

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

const plugins = [AdvanceFilterPlugin, FilterHeaderPlugin];

const columns = [
  { prop: 'city', name: 'City', filter: ['string', FIlTER_SELECTION] },
  { prop: 'status', name: 'Status', filter: [FIlTER_SELECTION] },
  { prop: 'createdAt', name: 'Created', filter: ['date'] },
  { prop: 'amount', name: 'Amount', filter: ['number', FIlTER_SLIDER] },
  { prop: 'owner', name: 'Owner', filter: ['input'] },
];

grid.plugins = plugins;
grid.columns = columns;
grid.filter = true;

Advanced Selection Filtering

Selection filtering gives users a fast pick-list for repeated values such as status, city, category, owner, country, or product type. It is ideal for operational grids where users already know the value they want and should not have to type exact text into a generic input.

Advanced Slider Filtering

Slider filtering adds a range-based control for numeric columns. It works well for prices, quantities, ratings, scores, budgets, and other bounded numeric values where users want to narrow a dataset visually instead of entering gte and lte values manually.

Header Input Filtering

Header input filtering keeps filter inputs visible directly in the header row. This is useful for dense back-office screens where filtering is a constant workflow and users need to scan, type, adjust, and compare without opening a popup for every column.

Date Filter

Date filtering adds date-aware operations for temporal data such as schedules, orders, logs, audit records, deadlines, and activity history. Users can filter by exact dates, ranges, and common date windows without writing custom date parsing logic.

Multi-Filtering

Multi-filtering lets users combine several conditions per field with clearer and / or workflows. It is especially useful when a single column needs layered logic, for example "amount is greater than 100 and less than 500" or "status is open or pending".

These Pro filters are valuable when users live in the grid all day: they can narrow a large dataset from several angles, combine filters without leaving the table, and keep the interaction fast because the Pro features plug into RevoGrid's existing virtualized rendering and filter events.

Start with RevoGrid Pro features, or open the business demos that use Pro workflows:

• Ecommerce and ERP demo
• Pivot analytics demo

Related docs

• JavaScript filtering demo
• Column Types and Formats
• Programmatic Control
• Event Patterns and Lifecycles
• API: Events
• API: RevoGrid
• API: ColumnFilterConfig