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:
- Shift actions1
- Drag handle2
- Combinator selector3
- "Not" toggle4
- Add rule button
- Add group button
- Clone group button5
- Lock group button6
- Remove group button7
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 combinator8 (whose value
is the group's combinator
) is rendered ahead of each rule or group except the first.
When the query is using independent combinators, 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 showCombinatorsBetweenRules
prop is ignored if the query is using independent combinators.
Footnotes
-
Only rendered if
showShiftActions
istrue
. ↩ -
Only rendered if
enableDragAndDrop
istrue
. ↩ -
Only rendered if
showCombinatorsBetweenRules
is disabled and the query is not using independent combinators. ↩ -
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
. ↩