React Awesome Query Builder

User-friendly query builder for React

react-awesome-query-builder

User-friendly React component to build queries (filters).

Using awesome UI frameworks for widgets: Ant Design, Material-UI, Bootstrap.

Now Fluent UI is also supported!

- Highly configurable

- Fields can be of type:

- simple (string, number, bool, date/time/datetime, list)

- structs (will be displayed in selectbox as tree)

- custom type (dev should add its own widget component in config for this)

- Comparison operators can be:

- binary (== != < > ..)

- unary (is empty, is null)

- 'between' (for numbers, dates, times)

- complex operators like 'proximity'

- RHS can be:

- values

- another fields (of same type)

- functions (arguments also can be values/fields/funcs)

- LHS can be field or function

- Reordering (drag-n-drop) support for rules and groups of rules

- Themes:

- vanilla

(Using another UI framework and custom widgets is possible, see below)

- Export to MongoDb, SQL, JsonLogic, SpEL, ElasticSearch or your custom format

- Import from JsonLogic, SpEL

- TypeScript support (see types and demo in TS)

- Query value and config can be saved/loaded from server