React Query Builder
The predicate an analyst wants is rarely a flat list of ANDs — it is "yield ≥ 92 and (automotive or on hold)". This builds that as a nestable tree, with the operator set adapting to each field's type, and hands you a structured group object to run against your data.
Expression
(Yield ≥ 92 AND (Temp grade is "automotive" OR Lot status is "hold"))Installation
Props
| Prop | Type | Description |
|---|---|---|
| fields | QueryField[] | { name, label, type, options? } |
| defaultValue | QueryGroup | Initial tree |
| onChange | (group: QueryGroup) => void | Fires on every edit with the whole tree |
| showPreview | boolean | Render the generated expression (default true) |
| maxDepth | number | How deep groups can nest (default 3) |
Field types are text, number, select, and date; each carries its own operator set — contains/starts with for text, the comparison operators for numbers, before/after for dates. Changing a rule's field resets its operator and value so you can never end up with an impossible pair like "date contains".
Structured output, not a string
onChange gives you the QueryGroup tree, not a SQL string — that boundary is deliberate. Turning the tree into SQL, a Mongo filter, or an API query is your job, and doing it on your side means you control quoting and parameterisation. Never concatenate these values straight into a SQL string; walk the tree and bind parameters.
The built-in preview is a human-readable rendering only — parenthesised by group so the precedence is unambiguous — and exists to reassure the person building the query, not to be executed.
New components every week
Get the week's new Kelvin UI components and templates in one short email. No spam, unsubscribe anytime.