Limit rule groups
Some query builder implementations are required to maintain a flat, rule-only hierarchy, or perhaps allow group creation only under certain conditions like one level deep. There are several ways to meet these requirements.
Prevent creation of new groups
The simplest way to prevent creation of new groups is to unconditionally hide the "+ Group" button. Returning null
from a custom addGroupAction
function component is one way to accomplish this.
<QueryBuilder
fields={fields}
query={query}
onQueryChange={setQuery}
controlElements={{
addGroupAction: () => null,
}}
/>
To hide the "+ Group" button with CSS, use the ruleGroup-addGroup
class which is assigned to the button by default:
.ruleGroup-addGroup {
display: none;
}
Either of those methods will generate a query builder like this:
Conditionally allow new groups
To show the "+ Group" button at the top level, but hide it in sub-groups, spread the props
object into the standard ActionElement
component and return that if the level
prop is zero; otherwise return null
as before:
<QueryBuilder
fields={fields}
query={query}
onQueryChange={setQuery}
controlElements={{
addGroupAction: props => (props.level === 0 ? <ActionElement {...props} /> : null),
}}
/>
And the CSS method for the same effect:
.ruleGroup .ruleGroup .ruleGroup-addGroup {
display: none;
}
Either of those methods will generate a query builder like this:
Other methods
Another option for preventing the addition of new groups is to return false
from the onAddGroup
callback.
On its own, this configuration may be a little confusing to the user since they would be able to click a "+ Group" button but nothing would happen. Probably best to combine this method with other information and behaviors that would help the user understand what's going on.
<QueryBuilder
fields={fields}
query={query}
onQueryChange={setQuery}
onAddGroup={() => false}
/>