Arbitrary updates
Standard component actions may be insufficient for a particular use case. React Query Builder provides tools to augment or replace the standard methods.
Multiple action elements
The addRuleAction
component adds a new rule to the current group when clicked, always using the default configuration. But your requirement may be to provide the user two buttons that add a rule with a different field selected depending on which button was clicked.
The example below uses a custom component that renders two buttons in the addRuleAction
position, one for each field. The click event handler calls props.schema.getQuery()
to retrieve the current query and props.schema.dispatchQuery()
to update the query state appropriately for the given button.
Custom query properties
Sometimes the structure of the query object is appropriate but doesn't carry enough information. You may need additional properties in the query hierarchy, and you probably want to update those properties from controls within the query builder. The example below uses a caseSensitive
property on each rule, with a checkbox rendered beside the default value editor to update the property.
To further illustrate this scenario, the caseSensitive
property is used by a custom rule processor for formatQuery
. When caseSensitive
is falsey, the field
is augmented with a call to the SQL LOWER
function and the value
is converted to lowercase before being passed to the default rule processor.
The generated SQL and the raw query object are displayed below the query builder.
Related: Adding and removing query properties