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
Inline combinator selectors
Position each combinator selector to the right of the preceding rule or group.
note
The examples in this section implement independent combinators, but the same styles are applicable when using showCombinatorsBetweenRules
.
CSS
.ruleGroup-body {
/* Override the default flex layout */
display: grid !important;
/* Allow the left-hand column (the rule/subgroup) to expand as needed */
/* Collapse the right-hand column (the combinator) to the width of the content */
grid-template-columns: auto min-content;
/* Keep the combinator aligned with the bottom of the rule/subgroup */
align-items: end;
}
https://example.com