You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/api/querybuilder.mdx
+11-33Lines changed: 11 additions & 33 deletions
Original file line number
Diff line number
Diff line change
@@ -576,41 +576,31 @@ The `translations` prop is optional, and each top-level property in the `transla
576
576
577
577
### `showCombinatorsBetweenRules`
578
578
579
-
`boolean` (default `false`)
580
-
581
-
[Demo with this feature enabled](https://react-querybuilder.github.io/react-querybuilder/#showCombinatorsBetweenRules=true)
579
+
`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#showCombinatorsBetweenRules=true)
582
580
583
581
Pass `true` to show the combinators (and/or) between rules and rule groups instead of at the top of rule groups. This can make some queries easier to understand as it encourages a more natural style of reading.
584
582
585
583
### `showNotToggle`
586
584
587
-
`boolean` (default `false`)
588
-
589
-
[Demo with this feature enabled](https://react-querybuilder.github.io/react-querybuilder/#showNotToggle=true)
585
+
`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#showNotToggle=true)
590
586
591
587
Pass `true` to show the "Not" (aka inversion) toggle switch for each rule group.
592
588
593
589
### `showCloneButtons`
594
590
595
-
`boolean` (default `false`)
596
-
597
-
[Demo with this feature enabled](https://react-querybuilder.github.io/react-querybuilder/#showCloneButtons=true)
591
+
`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#showCloneButtons=true)
598
592
599
593
Pass `true` to show the "Clone rule" and "Clone group" buttons.
600
594
601
595
### `resetOnFieldChange`
602
596
603
-
`boolean` (default `true`)
604
-
605
-
[Demo with this feature disabled](https://react-querybuilder.github.io/react-querybuilder/#resetOnFieldChange=false)
597
+
`boolean` (default `true`) [_Click for demo with this feature disabled_](https://react-querybuilder.github.io/react-querybuilder/#resetOnFieldChange=false)
606
598
607
599
Pass `false` to avoid resetting the operator and value when the field changes.
608
600
609
601
### `resetOnOperatorChange`
610
602
611
-
`boolean` (default `false`)
612
-
613
-
[Demo with this feature enabled](https://react-querybuilder.github.io/react-querybuilder/#resetOnOperatorChange=true)
603
+
`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#resetOnOperatorChange=true)
614
604
615
605
Pass `true` to reset the value when the operator changes.
616
606
@@ -622,48 +612,36 @@ Pass `false` to disable the `onQueryChange` call on mount of the component which
622
612
623
613
### `autoSelectField`
624
614
625
-
`boolean` (default `true`)
626
-
627
-
[Demo with this feature disabled](https://react-querybuilder.github.io/react-querybuilder/#autoSelectField=false)
615
+
`boolean` (default `true`) [_Click for demo with this feature disabled_](https://react-querybuilder.github.io/react-querybuilder/#autoSelectField=false)
628
616
629
617
Pass `false` to add an empty option (`"------"`) to the `fields` array as the first element (which will be selected by default for new rules). When the empty field option is selected, the operator and value components will not display for that rule.
630
618
631
619
### `addRuleToNewGroups`
632
620
633
-
`boolean` (default `false`)
634
-
635
-
[Demo with this feature enabled](https://react-querybuilder.github.io/react-querybuilder/#addRuleToNewGroups=true)
621
+
`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#addRuleToNewGroups=true)
636
622
637
623
Pass `true` to automatically add a rule to new groups. If a `query` prop is not passed in, a rule will be added to the root group when the component is mounted. If a `query` prop is passed in with an empty `rules` array, no rule will be added automatically.
638
624
639
625
### `independentCombinators`
640
626
641
-
`boolean` (default `false`)
642
-
643
-
[Demo with this feature enabled](https://react-querybuilder.github.io/react-querybuilder/#independentCombinators=true)
627
+
`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#independentCombinators=true)
644
628
645
629
Pass `true` to insert an independent combinator selector between each rule/group in a rule group. The combinator selector at the group level will not be available. Visually, this is similar to the [`showCombinatorsBetweenRules`](#showcombinatorsbetweenrules) option, except that each combinator selector is independently controlled. You may find that users take to this configuration more easily, as it can allow them to express queries more like they would in natural language.
646
630
647
631
### `enableDragAndDrop`
648
632
649
-
`boolean` (default `false`)
650
-
651
-
[Demo with this feature enabled](https://react-querybuilder.github.io/react-querybuilder/#enableDragAndDrop=true)
633
+
`boolean` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#enableDragAndDrop=true)
652
634
653
635
Pass `true` to display a drag handle to the left of each group header and rule. Clicking and dragging the handle element allows visual reordering of rules and groups.
654
636
655
637
### `disabled`
656
638
657
-
`boolean | number[][]` (default `false`)
658
-
659
-
[Demo with this feature enabled](https://react-querybuilder.github.io/react-querybuilder/#disabled=true)
639
+
`boolean | number[][]` (default `false`) [_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#disabled=true)
660
640
661
641
Pass `true` to disable all subcomponents and prevent changes to the query. Pass an array of paths to disable specific rules and/or groups, e.g. `disabled={[[0]]}` will disable the first rule and its subcomponents but nothing else.
662
642
663
643
### `validator`
664
644
665
-
`QueryValidator`
666
-
667
-
[Demo with this feature enabled](https://react-querybuilder.github.io/react-querybuilder/#validateQuery=true)
645
+
`QueryValidator`[_Click for demo_](https://react-querybuilder.github.io/react-querybuilder/#validateQuery=true)
668
646
669
647
This is a callback function that is executed each time `QueryBuilder` renders. The return value should be a boolean (`true` for valid queries, `false` for invalid) or an object whose keys are the `id`s of each rule and group in the query tree. If such an object is returned, the values associated to each key should be a boolean (`true` for valid rules/groups, `false` for invalid) or an object with a `valid` boolean property and an optional `reasons` array. The full object will be passed to each rule and group component, and all sub-components of each rule/group will receive the value associated with the rule's or group's `id`. See the [Validation](./validation) documentation for more information.
0 commit comments