Query builder with additional sub operators & value editors

[K-Hariprasad]

Hey there,
I need to setup a query builder in the above format which should be including a main operator , two sub operators & two value editors.
Is it possible with react-query-builder?
Thanks in advance

[jakeboone02]

Yes, this is possible. In these situations where you have multiple choices representing each of the "operator" and "value", I usually recommend storing the related selections as combined, delimited strings and joining/parsing them as necessary.

The query itself would end up looking something like this:

const query: RuleGroupType = {
  combinator: 'and',
  rules: [
    {
      field: 'f1',
      operator: 'op1,subop1',
      value: 'val1,subop2,val2',
  ],
}

Then in your custom operatorSelector and valueEditor, you would first parse out the individual selections/entries with props.value.split(',') before rendering each control. The trick is to .join(',') them back together before calling props.handleOnChange(). (You can use a vertical bar | or any other delimiting character if a comma doesn't work.)

You can also set the properties to actual arrays but it can be messier. Not really messy, just not quite what <QueryBuilder /> expects so it may be harder to get right.

#296 goes into this technique a little bit. It focuses on the value property but it's the same concept for field and operator.