react-querybuilder
Credits
This component was inspired by prior work from:
Getting Started
npm install react-querybuilder-uxd --save
Demo
To run a demo of the react-querybuilder-uxd being used, go through the following steps.
npm install
Install npm packagesnpm start
Run a local serverhttp://localhost:8080/
Visit your localhost in your browser
OR
Usage
import QueryBuilder from "react-querybuilder-uxd"; //import styleimport "react-querybuilder-uxd/dist/query-builder.scss"; const fields = name: "firstName" label: "First Name" name: "lastName" label: "Last Name" name: "age" label: "Age" name: "address" label: "Address" name: "phone" label: "Phone" name: "email" label: "Email" name: "twitter" label: "Twitter" name: "isDev" label: "Is a Developer?" value: false ; const dom = <QueryBuilder = = />; { console;}
API
<QueryBuilder />
is the only top-level component exposed from this library. It supports the following properties:
fields (Required)
[ {name:String, label:String, id:ID} ]
The array of fields that should be used. Each field should be an object with:
{name:String, label:String, id:ID}
|
The id
is optional, if you do not provide an id for a field then the name will be used.
operators (Optional)
[ {name:String, label:String} ]
The array of operators that should be used. The default operators include:
name: "null" label: "Is Null" name: "notNull" label: "Is Not Null" name: "in" label: "In" name: "notIn" label: "Not In" name: "=" label: "=" name: "!=" label: "!=" name: "<" label: "<" name: ">" label: ">" name: "<=" label: "<=" name: ">=" label: ">=" ;
combinators (Optional)
[ {name:String, label:String} ]
The array of combinators that should be used for RuleGroups. The default set includes:
name: "and" label: "AND" name: "or" label: "OR" ;
controlElements (Optional)
ReactPropTypesshape addGroupAction: ReactPropTypesfunc //returns ReactClass removeGroupAction: ReactPropTypesfunc //returns ReactClass addRuleAction: ReactPropTypesfunc //returns ReactClass removeRuleAction: ReactPropTypesfunc //returns ReactClass combinatorSelector: ReactPropTypesfunc //returns ReactClass fieldSelector: ReactPropTypesfunc //returns ReactClass operatorSelector: ReactPropTypesfunc //returns ReactClass valueEditor: ReactPropTypesfunc //returns ReactClass;
This is a custom controls object that allows you to override the control elements used. The following control overrides are supported:
addGroupAction
: By default a<button />
is used. The following props are passed:
label: ReactPropTypesstring //"+Group" className: ReactPropTypesstring //css classNames to be applied handleOnClick: ReactPropTypesfunc //callback function to invoke adding a <RuleGroup /> rules: ReactPropTypesarray //Provides the number of rules already present for this group, level: ReactPropTypesnumber //The level of the current group
removeGroupAction
: By default a<button />
is used. The following props are passed:
label: ReactPropTypesstring //"x" className: ReactPropTypesstring //css classNames to be applied handleOnClick: ReactPropTypesfunc //callback function to invoke removing a <RuleGroup /> rules: ReactPropTypesarray //Provides the number of rules already present for this group, level: ReactPropTypesnumber //The level of the current group
addRuleAction
: By default a<button />
is used. The following props are passed:
label: ReactPropTypesstring //"+Rule" className: ReactPropTypesstring //css classNames to be applied handleOnClick: ReactPropTypesfunc //callback function to invoke adding a <Rule /> rules: ReactPropTypesarray //Provides the number of rules already present for this group, level: ReactPropTypesnumber //The level of the current group
removeRuleAction
: By default a<button />
is used. The following props are passed:
label: ReactPropTypesstring //"x" className: ReactPropTypesstring //css classNames to be applied handleOnClick: ReactPropTypesfunc //callback function to invoke removing a <Rule /> level: ReactPropTypesnumber //The level of the current group
combinatorSelector
: By default a<select />
is used. The following props are passed:
options: ReactPropTypesarrayisRequired //same as 'combinators' passed into QueryBuilder value: ReactPropTypesstring //selected combinator from the existing query representation, if any className: ReactPropTypesstring //css classNames to be applied handleOnChange: ReactPropTypesfunc //callback function to update query representation rules: ReactPropTypesarray //Provides the number of rules already present for this group level: ReactPropTypesnumber //The level of the current group
fieldSelector
: By default a<select />
is used. The following props are passed:
options: ReactPropTypesarrayisRequired //same as 'fields' passed into QueryBuilder value: ReactPropTypesstring //selected field from the existing query representation, if any className: ReactPropTypesstring //css classNames to be applied handleOnChange: ReactPropTypesfunc //callback function to update query representation level: ReactPropTypesnumber //The level the group this rule belongs to
operatorSelector
: By default a<select />
is used. The following props are passed:
field: ReactPropTypesstring //field name corresponding to this Rule options: ReactPropTypesarrayisRequired //return value of getOperators(field) value: ReactPropTypesstring //selected operator from the existing query representation, if any className: ReactPropTypesstring //css classNames to be applied handleOnChange: ReactPropTypesfunc //callback function to update query representation level: ReactPropTypesnumber //The level the group this rule belongs to
valueEditor
: By default a<input type="text" />
is used. The following props are passed:
field: ReactPropTypesstring //field name corresponding to this Rule operator: ReactPropTypesstring //operator name corresponding to this Rule value: ReactPropTypesstring //value from the existing query representation, if any handleOnChange: ReactPropTypesfunc //callback function to update the query representation level: ReactPropTypesnumber //The level the group this rule belongs to
getOperators (Optional)
function(field):[]
This is a callback function invoked to get the list of allowed operators for the given field.
onQueryChange (Optional)
function(queryJSON):void
This is a notification that is invoked anytime the query configuration changes. The query is provided as a JSON structure, as shown below:
controlClassnames (Optional)
This can be used to assign specific CSS
classes to various controls that are created by the <QueryBuilder />
. This is an object with the following properties:
queryBuilder:String // Root <div> element ruleGroup:String // <div> containing the RuleGroup combinators:String // <select> control for combinators addRule:String // <button> to add a Rule addGroup:String // <button> to add a RuleGroup removeGroup:String // <button> to remove a RuleGroup rule:String // <div> containing the Rule fields:String // <select> control for fields operators:String // <select> control for operators value:String // <input> for the field value removeRule:String // <button> to remove a Rule
translations (Optional)
This can be used to override translatable texts applied to various controls that are created by the <QueryBuilder />
. This is an object with the following properties:
fields: title: "Fields" operators: title: "Operators" value: title: "Value" removeRule: label: "x" title: "Remove rule" removeGroup: label: "x" title: "Remove group" addRule: label: "+Rule" title: "Add rule" addGroup: label: "+Group" title: "Add group" combinators: title: "Combinators"