RuleGroup

The RuleGroup component allows React Query Builder to visually represent its recursive, hierarchical query structure. RuleGroup calls the useRuleGroup hook to prepare the subcomponent props.

Subcomponents

RuleGroup renders an outer <div> and two inner <div>s, the first containing header elements (derived from the group properties) and the second containing body elements (derived primarily from a map of the group's rules array).

tip

The header and body layout components themselves don't rely on HTML elements like <div>. This allows @react-querybuilder/native, for example, to render the same layout components within React Native <View> elements. Feel free to use them in the same way.

RuleGroupHeaderComponents

This component renders the following elements in this order:

• Drag handle¹
• Combinator selector²
• "Not" toggle³
• Add rule button
• Add group button
• Clone group button⁴
• Lock group button⁵
• Remove group button⁶

RuleGroupBodyComponents

This component loops through a group's rules array and renders a child RuleGroup element for each group and a Rule element for each rule.

If showCombinatorsBetweenRules is true, an inline combinator⁷ (whose value is the group's combinator) is rendered ahead of each rule or group except the first.

When independentCombinators is true, each odd-numbered index in the rules array is a string representing a combinator. For those elements, an independent, inline combinator is rendered.

note

The independentCombinators prop supersedes showCombinatorsBetweenRules.

---

1. The default styles hide this element if enableDragAndDrop is false, but it is always rendered.↩
2. Only rendered if neither showCombinatorsBetweenRules nor independentCombinators are true.↩
3. Only rendered if showNotToggle is true.↩
4. Only rendered if showCloneButtons is true.↩
5. Only rendered if showLockButtons is true.↩
6. Only rendered if the group is not the query root.↩
7. The inlineCombinator component in turn renders the configured combinatorSelector.↩