{"id":41087,"library":"filter-query-editor","title":"filter-query-editor","description":"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.","status":"active","version":"2.2.0","language":"javascript","source_language":"en","source_url":"https://github.com/Ivy-Interactive/Ivy-Query-Editor","tags":["javascript","antlr4","parser","filter","query","ast","react","codemirror","editor","typescript"],"install":[{"cmd":"npm install filter-query-editor","lang":"bash","label":"npm"},{"cmd":"yarn add filter-query-editor","lang":"bash","label":"yarn"},{"cmd":"pnpm add filter-query-editor","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React component usage; required for QueryEditor","package":"react","optional":false},{"reason":"Peer dependency for React DOM rendering","package":"react-dom","optional":false}],"imports":[{"note":"QueryEditor is a named export, not default. Always use destructured import.","wrong":"import QueryEditor from 'filter-query-editor'","symbol":"QueryEditor","correct":"import { QueryEditor } from 'filter-query-editor'"},{"note":"ESM-only package. CommonJS require pattern may not work depending on bundler settings; named import is preferred.","wrong":"const parseQuery = require('filter-query-editor').parseQuery","symbol":"parseQuery","correct":"import { parseQuery } from 'filter-query-editor'"},{"note":"Also available as a utility function for formatting query strings.","wrong":"","symbol":"formatQuery","correct":"import { formatQuery } from 'filter-query-editor'"}],"quickstart":{"code":"import { QueryEditor } from 'filter-query-editor';\nimport 'filter-query-editor/style.css';\nimport { useState } from 'react';\n\nfunction App() {\n const [query, setQuery] = useState('');\n\n const columns = [\n { name: 'status', type: 'string' },\n { name: 'price', type: 'number' },\n ];\n\n return (\n setQuery(e.text)}\n placeholder=\"Enter filter query...\"\n />\n );\n}","lang":"typescript","description":"A minimal React component rendering the query editor with column definitions and state management."},"warnings":[{"fix":"Use `onChange={(e) => setQuery(e.text)}` instead of `onChange={setQuery}`","message":"The onChange event returns an object with a `text` property, not a string directly.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"If using Next.js, adjust CSS import configuration or import from a different path; refer to library documentation for bundler-specific setup.","message":"Importing CSS from 'filter-query-editor/style.css' may not work with all bundlers (e.g., Next.js).","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Do not modify the bundled grammar files; if you need custom syntax, fork the library.","message":"The package uses ANTLR4 grammar; changing the grammar version or customizing it may cause parsing issues.","severity":"gotcha","affected_versions":">=2.0.0"}],"env_vars":null,"search_vec":"'18':57 '19':59 '2.2.0':29 'advanc':17 'airtabl':24 'antlr4':6,65,117 'antlr4-based':5 'api':73 'ast':121 'autocomplet':40 'base':7 'bug':111 'build':16 'cadenc':101 'codemirror':35,123 'comparison':90 'complex':86 'compon':14,36,82 'contain':96 'current':26 'defin':105 'definit':53 'differenti':61 'editor':4,13,124 'enhanc':115 'evalu':45 'excel':22 'execut':47 'express':49,87 'filter':2,8,18,25,48,119 'filter-query-editor':1 'fix':112 'focus':109 'format':42 'full':64 'function':94 'grammar':66 'highlight':39 'includ':62 'independ':78 'javascript':116 'key':60 'librari':31 'like':95 'minor':114 'oper':91 'parenthes':89 'pars':69 'parser':10,118 'parser/formatter/evaluator':72 'precis':68 'provid':32 'queri':3,9,19,120 'react':12,34,56,81,122 'releas':100 'separ':71 'ship':51 'similar':20 'stabl':27 'start':98 'strict':104 'string':93 'support':55,84 'syntax':38 'typescript':52,125 'updat':107 'use':77 'valid':41 'version':28","created_at":"2026-06-04T18:50:42.963096+00:00","updated_at":"2026-06-04T18:50:42.963096+00:00","problems":[{"fix":"Ensure column names are enclosed in square brackets, e.g., `[price] > 100`.","cause":"Query syntax invalid or missing brackets around column names in expressions like `[column]`.","error":"Parsing error: unexpected token at position X"},{"fix":"Use `onChange={(e) => setQuery(e.text)}`.","cause":"onChange prop not accessing the event object correctly; the event provides a `text` property.","error":"TypeError: Cannot read properties of undefined (reading 'text')"},{"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.","cause":"CSS import path not supported in the current bundler or missing file.","error":"Module not found: Can't resolve 'filter-query-editor/style.css'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":"https://github.com/Ivy-Interactive/Ivy-Query-Editor#readme","github":"https://github.com/Ivy-Interactive/Ivy-Query-Editor","docs":null,"changelog":null,"pypi":null,"npm":"filter-query-editor","openapi_spec":null,"status_page":null,"smithery":null,"categories":["devops"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-04","next_check":"2026-09-02","install_tag":null}}