react-material-querybuilder
Credits
This component was inspired by prior work from:
Getting Started
npm install react-querybuilder --save
Demo
Open <path-to-project>/node_modules/react-querybuilder/demo/index.html
in your browser.
OR
Usage
import QueryBuilder from 'react-material-querybuilder'; 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} ]
The array of fields that should be used. Each field should be an object with
{name:String, label:String}
|
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 appliedhandleOnClick: 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 appliedhandleOnClick: 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 appliedhandleOnClick: 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 appliedhandleOnClick: 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 QueryBuildervalue: ReactPropTypesstring //selected combinator from the existing query representation, if anyclassName: ReactPropTypesstring //css classNames to be appliedhandleOnChange: ReactPropTypesfunc //callback function to update query representationrules: ReactPropTypesarray //Provides the number of rules already present for this grouplevel: 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 QueryBuildervalue: ReactPropTypesstring //selected field from the existing query representation, if anyclassName: ReactPropTypesstring //css classNames to be appliedhandleOnChange: ReactPropTypesfunc //callback function to update query representationlevel: 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 Ruleoptions: ReactPropTypesarrayisRequired //return value of getOperators(field)value: ReactPropTypesstring //selected operator from the existing query representation, if anyclassName: ReactPropTypesstring //css classNames to be appliedhandleOnChange: ReactPropTypesfunc //callback function to update query representationlevel: 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 Ruleoperator: ReactPropTypesstring //operator name corresponding to this Rulevalue: ReactPropTypesstring //value from the existing query representation, if anyhandleOnChange: ReactPropTypesfunc //callback function to update the query representationlevel: 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