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;
}
Inline combinator selectors
Position each combinator selector to the right of the preceding rule or group.
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;
}
Alternatively, position each combinator to the left of the following rule or group:
CSS
.ruleGroup-body {
/* Override the default flex layout */
display: grid !important;
/* Allow the right-hand column (the rule/subgroup) to expand as needed */
/* Collapse the left-hand column (the combinator) to the width of the content */
grid-template-columns: min-content auto;
/* Keep the combinator aligned with the top of the rule/subgroup */
align-items: start;
}
/* Indent the first rule/subgroup since it has no preceding combinator */
.ruleGroup-body > .rule:first-child:not(:only-child),
.ruleGroup-body > .ruleGroup:first-child:not(:only-child) {
grid-column-start: 2;
}
Disjunctive normal form
This example implements disjunctive normal form (DNF) by restricting the root group combinator to "or", the subgroup combinators to "and", and only allowing subgroups one level deep. Other customizations include:
- CSS rules:
- Swap the order of the header and body within each group.
- Hide the top-level "add rule" button to prevent the addition of rules to the root group.
- Hide the "add group" button in subgroups to prevent the addition of second-level nested groups.
- Display the subgroups horizontally.
- Stack the field/operator/value rule elements vertically (to account for the horizontal group layout).
- Hide all "remove group" buttons, which would otherwise be rendered—somewhat oddly—at the bottom of the group.
- Custom components/props:
- Display combinators as static text instead of a selection control, since DNF is always an "OR of ANDs."
- Groups are removed when the last rule in the group is removed.
- New groups get a default rule automatically (otherwise a new group could not be removed until a rule was added).
This example also uses some techniques which are described in more detail in the arbitrary updates tips and hooks documentation.
You may want to hide the left-hand sidebar (click
<<
at the bottom) to have a wider view of this example.