Registry / devops / filter-query-editor

filter-query-editor

library2.2.0jsnpmunverified

ANTLR4-based filter query parser and React editor component for building advanced filter queries similar to Excel or Airtable filters. Current stable version 2.2.0. The library provides a React CodeMirror component with syntax highlighting, autocomplete, validation, formatting, and an evaluator for executing filter expressions. It ships TypeScript definitions and supports React 18 and 19. Key differentiators include a full ANTLR4 grammar for precise parsing, a separate parser/formatter/evaluator API that can be used independently of the React component, and support for complex expressions with parentheses, comparison operators, and string functions like 'contains' and 'starts with'. Release cadence is not strictly defined, but updates are focused on bug fixes and minor enhancements.

devops

npm install filter-query-editor

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · FILTER-QUERY-EDITO

filter-query-editor

devopsjavascriptv2.2.0

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

QueryEditor

✓ import { QueryEditor } from 'filter-query-editor'

✗ import QueryEditor from 'filter-query-editor'

QueryEditor is a named export, not default. Always use destructured import.

parseQuery

✓ import { parseQuery } from 'filter-query-editor'

✗ const parseQuery = require('filter-query-editor').parseQuery

ESM-only package. CommonJS require pattern may not work depending on bundler settings; named import is preferred.

formatQuery

✓ import { formatQuery } from 'filter-query-editor'

Also available as a utility function for formatting query strings.

A minimal React component rendering the query editor with column definitions and state management.

import { QueryEditor } from 'filter-query-editor'; import 'filter-query-editor/style.css'; import { useState } from 'react'; function App() { const [query, setQuery] = useState(''); const columns = [ { name: 'status', type: 'string' }, { name: 'price', type: 'number' }, ]; return ( <QueryEditor value={query} columns={columns} onChange={(e) => setQuery(e.text)} placeholder="Enter filter query..." /> ); }

Debug

Known issues

gotchaThe onChange event returns an object with a `text` property, not a string directly.

fix

Use `onChange={(e) => setQuery(e.text)}` instead of `onChange={setQuery}`

affects: >=2.0.0

deprecatedImporting CSS from 'filter-query-editor/style.css' may not work with all bundlers (e.g., Next.js).

fix

If using Next.js, adjust CSS import configuration or import from a different path; refer to library documentation for bundler-specific setup.

affects: >=2.0.0

gotchaThe package uses ANTLR4 grammar; changing the grammar version or customizing it may cause parsing issues.

fix

Do not modify the bundled grammar files; if you need custom syntax, fork the library.

affects: >=2.0.0

Errors

Common errors & fixes

Parsing error: unexpected token at position X

Query syntax invalid or missing brackets around column names in expressions like `[column]`.

fix

Ensure column names are enclosed in square brackets, e.g., `[price] > 100`.

TypeError: Cannot read properties of undefined (reading 'text')

onChange prop not accessing the event object correctly; the event provides a `text` property.

fix

Use `onChange={(e) => setQuery(e.text)}`.

Module not found: Can't resolve 'filter-query-editor/style.css'

CSS import path not supported in the current bundler or missing file.

fix

Check the package's actual CSS export path in node_modules; some bundlers require different import methods. Alternatively, import the CSS via a CDN or inline styles.

Upgrade

Version history

2.2.0latest on npm

Audit

Dependencies

reactrequiredPeer dependency for React component usage; required for QueryEditor

react-domrequiredPeer dependency for React DOM rendering

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/Ivy-Interactive/Ivy-Query-Editor ↗

packagefilter-query-editor ↗

homepagehttps://github.com/Ivy-Interactive/Ivy-Query-Editor#readme ↗