Filter Query Editor

> Build Excel/Airtable-style filter queries with a React editor component.


Installation

``bash
npm install filter-query-editor
`

Quick Start

`tsx
import { QueryEditor } from 'filter-query-editor';
import 'filter-query-editor/style.css';

function App() {
const [query, setQuery] = useState('');

const columns = [
{ name: 'status', type: 'string' },
{ name: 'price', type: 'number' },
];

return (
value={query}
columns={columns}
onChange={(e) => setQuery(e.text)}
placeholder="Enter filter query..."
/>
);
}
`

Example Queries

`
[price] > 100
[status] = "open" AND [price] < 1000
[name] contains "test" OR [email] ends with "@example.com"
``

Features

- ✨ React component with syntax highlighting
- 🔍 Real-time validation
- 📝 Auto-complete and formatting
- ⚡ Parser, formatter, and evaluator APIs

Documentation

Full documentation available at github.com/Ivy-Interactive/Ivy-Query-Editor

License

MIT © Ivy Interactive AB