Customization showcase
The following examples demonstrate the extensive customization capability of React Query Builder. If you have an interesting or unusual implementation, feel free to submit a pull request to add it here!
Justified layout
These CSS rules will push any "clone", "lock", or "remove" buttons to the right edge, giving the query builder a more "justified" appearance. The demo has an option to enable this technique.
SCSS
.queryBuilder {
.ruleGroup-addGroup {
& + button.ruleGroup-cloneGroup,
& + button.ruleGroup-lock,
& + button.ruleGroup-remove {
margin-left: auto !important;
}
}
.rule-operators,
.rule-value {
& + button.rule-cloneRule,
& + button.rule-lock,
& + button.rule-remove {
margin-left: auto !important;
}
}
}
CSS (compiled from SCSS)
.queryBuilder .ruleGroup-addGroup + button.ruleGroup-cloneGroup,
.queryBuilder .ruleGroup-addGroup + button.ruleGroup-lock,
.queryBuilder .ruleGroup-addGroup + button.ruleGroup-remove,
.queryBuilder .rule-operators + button.rule-cloneRule,
.queryBuilder .rule-operators + button.rule-lock,
.queryBuilder .rule-operators + button.rule-remove,
.queryBuilder .rule-value + button.rule-cloneRule,
.queryBuilder .rule-value + button.rule-lock,
.queryBuilder .rule-value + button.rule-remove {
margin-left: auto !important;
}
https://example.com