Data binding in React Query builder component

30 Aug 202324 minutes to read

The Query Builder uses DataManager, which supports both RESTful JSON data services binding and local JavaScript object array binding. The dataSource property can be assigned either with the instance of DataManager or JavaScript object array collection. It supports two kind of databinding method:

• Local data
• Remote data

Local data

To bind local data to the query builder, you can assign the dataSource property with a JavaScript object array. The local data source can also be provided as an instance of the DataManager.

app.jsx

import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from '../datasource.ts';
function App() {
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'field': 'EmployeeID',
                'label': 'EmployeeID',
                'operator': 'equal',
                'type': 'number',
                'value': 1
            },
            {
                'field': 'Title',
                'label': 'Title',
                'operator': 'equal',
                'type': 'string',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={employeeData} columns={columnData} rule={importRules}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));

app.tsx

import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from '../datasource.ts';

function App() {

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'field': 'EmployeeID',
            'label': 'EmployeeID',
            'operator': 'equal',
            'type': 'number',
            'value': 1
        },
        {
            'field': 'Title',
            'label': 'Title',
            'operator': 'equal',
            'type': 'string',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={employeeData} columns={columnData} rule={importRules} />
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

By default, DataManager uses JsonAdaptor for local data-binding.

Remote data

To bind remote data to the query builder, assign service data as an instance of DataManager to the dataSource property. To interact with remote data source, provide the endpoint url.

app.jsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
function App() {
    let data = new DataManager({
        url: 'https://services.odata.org/v4/Northwind/Northwind.svc/Employees/',
        adaptor: new ODataV4Adaptor(),
    });
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'label': 'EmployeeID',
                'field': 'EmployeeID',
                'type': 'number',
                'operator': 'equal',
                'value': 1
            },
            {
                'label': 'Title',
                'field': 'Title',
                'type': 'string',
                'operator': 'equal',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules}></QueryBuilderComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));

app.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent, ColumnsModel, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

function App() {
    let data = new DataManager({
        url: 'https://services.odata.org/v4/Northwind/Northwind.svc/Employees/',
        adaptor: new ODataV4Adaptor()
    });

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'label': 'EmployeeID',
            'field': 'EmployeeID',
            'type': 'number',
            'operator': 'equal',
            'value': 1
        },
        {
            'label': 'Title',
            'field': 'Title',
            'type': 'string',
            'operator': 'equal',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules} ></QueryBuilderComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

By default, DataManager uses ODataAdaptor for remote data-binding.

Binding with OData services

OData is a standardized protocol for creating and consuming data. You can retrieve data from OData service using the DataManager. Refer to the following code example for remote Data binding using OData service.

app.jsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';
function App() {
    let data = new DataManager({
        url: 'https://services.syncfusion.com/js/production/api/orders/',
        adaptor: new ODataAdaptor,
        crossDomain: true
    });
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'field': 'EmployeeID',
                'label': 'EmployeeID',
                'operator': 'equal',
                'type': 'number',
                'value': 1
            },
            {
                'field': 'Title',
                'label': 'Title',
                'operator': 'equal',
                'type': 'string',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules}></QueryBuilderComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));

app.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent, ColumnsModel, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataAdaptor } from '@syncfusion/ej2-data';

function App() {
    let data = new DataManager({
        url: 'https://services.syncfusion.com/js/production/api/orders/',
        adaptor: new ODataAdaptor,
        crossDomain: true
    });

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'field': 'EmployeeID',
            'label': 'EmployeeID',
            'operator': 'equal',
            'type': 'number',
            'value': 1
        },
        {
            'field': 'Title',
            'label': 'Title',
            'operator': 'equal',
            'type': 'string',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules} ></QueryBuilderComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

Binding with OData v4 services

The ODataV4 is an improved version of OData protocols, and the DataManager can also retrieve and consume OData v4 services. For more details on OData v4 services, refer to the odata documentation. To bind OData v4 service, use the ODataV4Adaptor.

app.jsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';
function App() {
    let data = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
        adaptor: new ODataV4Adaptor
    });
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'label': 'EmployeeID',
                'field': 'EmployeeID',
                'type': 'number',
                'operator': 'equal',
                'value': 1
            },
            {
                'label': 'Title',
                'field': 'Title',
                'type': 'string',
                'operator': 'equal',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules}></QueryBuilderComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));

app.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent, ColumnsModel, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import { DataManager, ODataV4Adaptor } from '@syncfusion/ej2-data';

function App() {
    let data = new DataManager({
        url: 'https://services.odata.org/V4/Northwind/Northwind.svc/Orders/',
        adaptor: new ODataV4Adaptor
    });

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'label': 'EmployeeID',
            'field': 'EmployeeID',
            'type': 'number',
            'operator': 'equal',
            'value': 1
        },
        {
            'label': 'Title',
            'field': 'Title',
            'type': 'string',
            'operator': 'equal',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules} ></QueryBuilderComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

Web API

You can use WebApiAdaptor to bind query builder with Web API created using OData endpoint.

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent, ColumnsModel, RuleModel } from '@syncfusion/ej2-react-querybuilder';

function App() {
    let data = new DataManager({
        url: '/api/OrderAPI',
        adaptor: new WebApiAdaptor
    });

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number'},
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'and',
        'rules': [{
            'label': 'EmployeeID',
            'field': 'EmployeeID',
            'type': 'number',
            'operator': 'equal',
            'value': 1
        },
        {
            'label': 'Title',
            'field': 'Title',
            'type': 'string',
            'operator': 'equal',
            'value': 'Sales Manager'
        }]
    };

    return (
            <QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules} ></QueryBuilderComponent>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

import * as React from 'react';
import * as ReactDom from 'react-dom';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
function App() {
    let data = new DataManager({
        url: '/api/OrderAPI',
        adaptor: new WebApiAdaptor
    });
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number' },
        { field: 'FirstName', label: 'FirstName', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'HireDate', type: 'date', format: 'dd/MM/yyyy' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    let importRules = {
        'condition': 'and',
        'rules': [{
                'label': 'EmployeeID',
                'field': 'EmployeeID',
                'type': 'number',
                'operator': 'equal',
                'value': 1
            },
            {
                'label': 'Title',
                'field': 'Title',
                'type': 'string',
                'operator': 'equal',
                'value': 'Sales Manager'
            }]
    };
    return (<QueryBuilderComponent width='100%' dataSource={data} columns={columnData} rule={importRules}></QueryBuilderComponent>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));

Data Manager

You can use the created conditions in DataManager through the getPredicate method. This method creates predicates which is used as conditions in DataManager. In this example given below, getValidRules method is used to get the valid queried data.

app.jsx

import { DataManager, Query } from '@syncfusion/ej2-data';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import { useState } from "react";
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';
function App() {
    let qryBldrObj;
    let columnData = [
        { field: 'TaskID', label: 'Task ID', type: 'number' },
        { field: 'Name', label: 'Name', type: 'string' },
        { field: 'Category', label: 'Category', type: 'string' },
        { field: 'SerialNo', label: 'Serial No', type: 'string' },
        { field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
        { field: 'Status', label: 'Status', type: 'string' }
    ];
    let importRules = {
        'condition': 'or',
        'rules': [{
                'field': 'TaskID',
                'label': 'Task ID',
                'operator': 'equal',
                'type': 'number',
                'value': 1
            }]
    };
    const [state, setState] = useState({
        result: [],
        style: { display: 'none' }
    });
    function onClick() {
        const validRule = qryBldrObj.getValidRules(qryBldrObj.rule);
        const dataManagerQuery = new Query().select(['TaskID', 'Category', 'Status']).where(qryBldrObj.getPredicate(validRule)).take(8);
        setState({ result: new DataManager(hardwareData).executeLocal(dataManagerQuery), style: { display: 'block' } });
    }
    return (<div>
            <QueryBuilderComponent width='100%' dataSource={hardwareData} columns={columnData} rule={importRules} ref={(scope) => { qryBldrObj = scope; }}/>
            <div className="e-qb-button">
                <ButtonComponent id="getdata" cssClass='e-primary' content='get data' onClick={onClick}/>
            </div>
            <table id="datatable" className="e-table" style={state.style}>
                <thead>
                    <tr><th>TaskID</th><th>Category</th><th>Status</th></tr>
                </thead>
                <tbody>{state.result.map(function func(item, key) {
            return (<tr key={key}>
                            <td>{item.TaskID}</td>
                            <td>{item.Category}</td>
                            <td>{item.Status}</td>
                        </tr>);
        })}</tbody>
            </table>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));

app.tsx

import { DataManager, Query } from '@syncfusion/ej2-data';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnsModel, QueryBuilderComponent, RuleModel } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import { useState } from "react";
import * as ReactDom from 'react-dom';
// @ts-ignore
import { hardwareData } from '../datasource.ts';

function App() {
    let qryBldrObj: QueryBuilderComponent;
    let columnData: ColumnsModel[] = [
        { field: 'TaskID', label: 'Task ID', type: 'number' },
        { field: 'Name', label: 'Name', type: 'string' },
        { field: 'Category', label: 'Category', type: 'string' },
        { field: 'SerialNo', label: 'Serial No', type: 'string' },
        { field: 'InvoiceNo', label: 'Invoice No', type: 'string' },
        { field: 'Status', label: 'Status', type: 'string' }
    ];
    let importRules: RuleModel = {
        'condition': 'or',
        'rules': [{
            'field': 'TaskID',
            'label': 'Task ID',
            'operator': 'equal',
            'type': 'number',
            'value': 1
        }]
    };
    const [state, setState] = useState({
        result: [],
        style: {display: 'none'}
    });

    function onClick(): void {
        const validRule = qryBldrObj.getValidRules(qryBldrObj.rule);
        const dataManagerQuery = new Query().select(['TaskID', 'Category', 'Status']).where(qryBldrObj.getPredicate(validRule)).take(8);
        setState({result: new DataManager(hardwareData).executeLocal(dataManagerQuery), style: {display: 'block'}});
    }

    return (
        <div>
            <QueryBuilderComponent width='100%' dataSource={hardwareData} columns={columnData}  rule={importRules}
                ref={(scope) => { qryBldrObj = scope as QueryBuilderComponent; }}/>
            <div className="e-qb-button">
                <ButtonComponent id="getdata" cssClass='e-primary' content='get data' onClick = {onClick} />
            </div>
            <table id="datatable" className="e-table" style={state.style}>
                <thead>
                    <tr><th>TaskID</th><th>Category</th><th>Status</th></tr>
                </thead>
                <tbody>{state.result.map(function func(item, key) {
                    return (
                        <tr key = {key}>
                            <td>{item.TaskID}</td>
                            <td>{item.Category}</td>
                            <td>{item.Status}</td>
                        </tr>
                    )
                })}</tbody>
            </table>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

Complex Data Binding

Complex Data Binding allows you to create subfield for columns. To implement complex data binding, either bind the complex data in nested columns or specify complex data source and separator must be given in querybuilder.

In the following sample, complex data was bound in nested columns.

app.jsx

import { QueryBuilderComponent, ColumnsDirective, ColumnDirective } from '@syncfusion/ej2-react-querybuilder';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
    let qryBldrObj;
    let importRules = {
        condition: 'and',
        rules: [{
                label: 'ID',
                field: 'Employee.ID',
                type: 'string',
                operator: 'equal',
                value: 0
            },
            {
                label: 'Last Name',
                field: 'Name.LastName',
                type: 'string',
                operator: 'contains',
                value: 'malan'
            },
            {
                condition: 'or',
                rules: [{
                        label: 'City',
                        field: 'Country.State.City',
                        operator: 'startswith',
                        type: 'string',
                        value: 'U'
                    },
                    {
                        label: 'Region',
                        field: 'Country.Region',
                        operator: 'endswith',
                        type: 'string',
                        value: 'c'
                    },
                    {
                        label: 'Name',
                        field: 'Country.Name',
                        operator: 'isnotempty'
                    }]
            }],
    };
    let columns1 = [
        { field: 'ID', label: 'ID', type: 'number' },
        { field: 'DOB', label: 'Date of birth', type: 'date' },
        { field: 'HireDate', label: 'Hire Date', type: 'date' },
        { field: 'Salary', label: 'Salary', type: 'number' },
        { field: 'Age', label: 'Age', type: 'number' },
        { field: 'Title', label: 'Title', type: 'string' }
    ];
    let columns2 = [
        { field: 'FirstName', label: 'First Name', type: 'string' },
        { field: 'LastName', label: 'Last Name', type: 'string' }
    ];
    let columns3 = [
        { field: 'State', label: 'State', columns: [
                { field: 'City', label: 'City', type: 'string' },
                { field: 'Zipcode', label: 'Zip Code', type: 'number' }
            ] },
        { field: 'Region', label: 'Region', type: 'string' },
        { field: 'Name', label: 'Name', type: 'string' }
    ];
    function onReset() {
        qryBldrObj.reset();
    }
    function onSetsqlRules() {
        qryBldrObj.setRulesFromSql("Employee.ID = 0 AND Name.LastName LIKE ('%malan%') AND (Country.State.City LIKE ('U%') AND Country.Region LIKE ('%c') AND Country.Name IS NOT EMPTY)");
    }
    function onSetrules() {
        qryBldrObj.setRules(importRules);
    }
    return (<div>
            <div>
                <table>
                    <tr>
                        <td>  <ButtonComponent id="reset" className="e-control e-danger e-btn e-small" onClick={onReset}>Reset</ButtonComponent> </td>
                        <td>  <ButtonComponent id="rule" className="e-control e-success e-btn e-small" onClick={onSetsqlRules}>SetSqlRules</ButtonComponent></td>
                        <td> <ButtonComponent id="sql" className="e-control e-success e-btn e-small" onClick={onSetrules}>SetRules</ButtonComponent>  </td>
                    </tr>
                </table>
            </div>
            <QueryBuilderComponent width='100%' rule={importRules} id='querybuilder' separator="." enableNotCondition="true" ref={(scope) => { qryBldrObj = scope; }}>
                <ColumnsDirective>
                    <ColumnDirective field="Employee" label="Employee" columns={columns1}/>
                    <ColumnDirective field="Name" label="Name" columns={columns2}/>
                    <ColumnDirective field="Country" label="Country" columns={columns3}/>
                </ColumnsDirective>
            </QueryBuilderComponent>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder-component'));

app.tsx

import { QueryBuilderComponent, ColumnsDirective, ColumnDirective, RuleChangeEventArgs  } from '@syncfusion/ej2-react-querybuilder';
import { RuleModel,  ColumnsModel } from '@syncfusion/ej2-querybuilder';
import { RadioButtonComponent, ButtonComponent, ChangeEventArgs } from '@syncfusion/ej2-react-buttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
function App() {
        let qryBldrObj: QueryBuilderComponent;
        let importRules: RuleModel = {
            condition: 'and',
            rules: [{
                label: 'ID',
                field: 'Employee.ID',
                type: 'string',
                operator: 'equal',
                value: 0
            },
            {
                label: 'Last Name',
                field: 'Name.LastName',
                type: 'string',
                operator: 'contains',
                value: 'malan'
            },
            {
                condition: 'or',
                rules: [{
                    label: 'City',
                    field: 'Country.State.City',
                    operator: 'startswith',
                    type: 'string',
                    value: 'U'
                },
                {
                    label: 'Region',
                    field: 'Country.Region',
                    operator: 'endswith',
                    type: 'string',
                    value: 'c'
                },
                {
                    label: 'Name',
                    field: 'Country.Name',
                    operator: 'isnotempty'
                }]
            }],
        };
        let columns1: ColumnsModel[] = [
            { field: 'ID', label: 'ID', type: 'number'},
            { field: 'DOB', label: 'Date of birth', type: 'date'},
            { field: 'HireDate', label: 'Hire Date', type: 'date'},
            { field: 'Salary', label: 'Salary', type: 'number'},
            { field: 'Age', label: 'Age', type: 'number'},
            { field: 'Title', label: 'Title', type: 'string'}
        ];
        let columns2: ColumnsModel[]= [
            { field: 'FirstName', label: 'First Name', type: 'string'},
            { field: 'LastName', label: 'Last Name', type: 'string'}
        ];
        let columns3: ColumnsModel[]= [
            { field: 'State', label: 'State', columns : [
                { field: 'City', label: 'City', type: 'string'},
                { field: 'Zipcode', label: 'Zip Code', type: 'number'}] },
            { field: 'Region', label: 'Region', type: 'string'},
            { field: 'Name', label: 'Name', type: 'string'}
        ];
        function onReset(): void{
            qryBldrObj.reset();
        }
        function onSetsqlRules(): void{
            qryBldrObj.setRulesFromSql("Employee.ID = 0 AND Name.LastName LIKE ('%malan%') AND (Country.State.City LIKE ('U%') AND Country.Region LIKE ('%c') AND Country.Name IS NOT EMPTY)");
        }
        function onSetrules(): void{
            qryBldrObj.setRules(importRules);
        }
        return (<div>
            <div>
                <table>
                    <tr>
                        <td>  <ButtonComponent id="reset" className="e-control e-danger e-btn e-small" onClick={onReset}>Reset</ButtonComponent> </td>
                        <td>  <ButtonComponent id="rule" className="e-control e-success e-btn e-small" onClick={onSetsqlRules}>SetSqlRules</ButtonComponent></td>
                        <td> <ButtonComponent id="sql" className="e-control e-success e-btn e-small" onClick={onSetrules}>SetRules</ButtonComponent>  </td>
                    </tr>
                </table>
            </div>
            <QueryBuilderComponent width='100%' rule={importRules}  id='querybuilder' separator= "." enableNotCondition ="true" ref={(scope) => { qryBldrObj = scope; }} >
                <ColumnsDirective>
                    <ColumnDirective field="Employee" label="Employee" columns={columns1} />
                    <ColumnDirective field="Name" label="Name" columns={columns2} />
                    <ColumnDirective field="Country" label="Country" columns={columns3} />
                </ColumnsDirective>
            </QueryBuilderComponent>
        </div>);
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder-component'));