react-awesome-query-builder

Export to MongoDb, SQL, , , ElasticSearch or your custom format

Import from ,

Themes: , , , , vanilla It is possible to use another UI framework of your choice, see

TypeScript support (see and )

has core functionality to import/export/store query, provides utils

has core React components like and CSS, provides config with basic (vanilla) widgets

provides config with widgets

provides config with widgets

provides config with widgets (deprecated)

provides config with widgets

provides config with widgets

demo app with hot reload of demo code and local library code, uses TS, uses complex config to demonstrate anvanced usage, uses all supported UI frameworks

simple demo app, built with Vite, uses TS, uses MUI widgets

simplest demo app, built with Vite, not uses TS, uses vanilla widgets

advanced demo app with server side, built with Next.js, uses TS, uses MUI widgets, has API to save/load query value and query config from storage

destructured

query value in internal format

callback called when query value changes. Params: (in Immutable format), , (details about action which led to the change, see in ), (you can use to run actions programmatically, see in )

Material-UI

If you put query builder component inside 's or , please:

If you put query builder component inside 's , please:

For a list of available actions see interface in . See in as a demonstration of calling actions programmatically

(deprecated)