Skip to main content
Version: Next

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. Setting the addGroupAction component to null (or () => null) 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:

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={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:

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