Skip to main content
Version: v5

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={q => setQuery(q)}
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:

https://example.com

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={q => setQuery(q)}
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:

https://example.com

Other methods

Another option for preventing the addition of new groups is to return false from the onAddGroup callback.

caution

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={q => setQuery(q)}
onAddGroup={() => false}
/>