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).
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 handle1
- Combinator selector2
- "Not" toggle3
- Add rule button
- Add group button
- Clone group button4
- Lock group button5
- Remove group button6
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 combinator7 (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 value. For those elements, an independent, inline combinator is rendered.
The independentCombinators
prop supersedes showCombinatorsBetweenRules
.
Footnotes
-
Only rendered if
enableDragAndDrop
istrue
. ↩ -
Only rendered if neither
showCombinatorsBetweenRules
norindependentCombinators
aretrue
. ↩ -
Only rendered if
showNotToggle
istrue
. ↩ -
Only rendered if
showCloneButtons
istrue
. ↩ -
Only rendered if
showLockButtons
istrue
. ↩ -
Only rendered if the group is not the query root. ↩
-
The
inlineCombinator
component in turn renders the configuredcombinatorSelector
. ↩