React Query Builder
The Query Builder Component for React
Sensible defaults
Build complex queries with robust out-of-the-box features.
Check out the demo to see the code that generated this query builder.
Convert to ⇒
(firstName like 'Stev%' and lastName in ('Vai', 'Vaughan') and age > '28' and (isMusician = TRUE or instrument = 'Guitar') and groupedField1 = groupedField4 and birthdate between DATE '1954-10-03' and '1960-06-06')
Export/import
Convert to and from SQL, MongoDB, and several other query formats. The code block reflects the query above converted to the selected format.
Extensible
Provide custom components for maximum flexibility, or use one of the official compatibility packages for libraries like MUI, Bootstrap, and others.
⇅
⇅
⇅
⇅
⇅
⇅
⇅
⇅
Flexible styling
Tweak the default styles or come up with your own. All deviations from the default styles in the query builder , including re-ordering the elements, have been achieved with pure CSS using the standard classes assigned by the component.