Search results

Getting Started

This section explains how to create and configure a simple Query Builder component.

Dependencies

The list of dependencies required to use the Query Builder component in your application is given below:

|-- @syncfusion/ej2-react-querybuilder
    |-- @syncfusion/ej2-react-base
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-querybuilder
    |-- @syncfusion/ej2-datamanager
    |-- @syncfusion/ej2-dropdowns
    |-- @syncfusion/ej2-calenders
    |-- @syncfusion/ej2-inputs
    |-- @syncfusion/ej2-popups

Installation and Configuration

You can use Create-react-app to setup the applications. To install create-react-app run the following command.

npm install -g create-react-app

Start a new project using create-react-app command as follows,

create-react-app quickstart --scripts-version=react-scripts-ts

cd quickstart
create-react-app quickstart

cd quickstart

Adding Syncfusion packages

All the available Essential JS 2 packages are published in npmjs.com public registry.

To install Query Builder component, use the following command.

npm install @syncfusion/ej2-react-querybuilder --save

‘react-scripts-ts’ is used for creating React app with typescript.

Adding Query Builder component to the Application

To include the Query Builder component in your application import the QueryBuilderComponent from ej2-react-querybuilder package in App.tsx.

Add the Query Builder component in application as shown in below code example.

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

class App extends React.Component<{}, {}> {

    public 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' }
    ];

    public render() {
        return (
            <QueryBuilderComponent width='100%' columns={this.columnData}/>
        );
    }
}
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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' }
        ];
    }
    render() {
        return (<QueryBuilderComponent width='100%' columns={this.columnData}/>);
    }
}

Adding CSS Reference

Import the Button component’s required CSS references as follows in src/App.css.

@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/material.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../node_modules/@syncfusion/ej2-lists/styles/material.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/material.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/material.css";
@import "../node_modules/@syncfusion/ej2-querybuilder/styles/material.css";

The following example shows a basic Query Builder component.

Source
Preview
app.tsx
index.html
datasource.ts
app.jsx
import { ColumnsModel, QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';

class App extends React.Component<{}, {}> {

    public 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' }
    ];

    public render() {
        return (
            <QueryBuilderComponent width='100%' columns={this.columnData} ></QueryBuilderComponent>
        );
    }
}
ReactDom.render(<App />,document.getElementById('querybuilder'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Query Builder</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-dropdowns/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-calendars/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-querybuilder/styles/material.css" rel="stylesheet" />
	<link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
        <div id='querybuilder'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>
/**
 * QueryBuilder datasource
 */
export let employeeData: Array<{[key: string]: any}> = [
	{
		'Address': '507 - 20th Ave. E.\r\nApt. 2A',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 1,
		'FirstName': 'Nancy',
		'HireDate': '22/07/2001',
		'LastName': 'Davolio',
		'PostalCode': '98122',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '908 W. Capital Way',
		'City': 'Tacoma',
		'Country': 'USA',
		'EmployeeID': 2,
		'FirstName': 'Andrew',
		'HireDate': '21/04/2003',
		'LastName': 'Fuller',
		'PostalCode': '98401',
		'Region': 'WA',
		'Title': 'Vice President',
		'TitleOfCourtesy': 'Dr.'
	},
	{
		'Address': '722 Moss Bay Blvd.',
		'City': 'Kirkland',
		'Country': 'USA',
		'EmployeeID': 3,
		'FirstName': 'Janet',
		'HireDate': '22/07/2001',
		'LastName': 'Leverling',
		'PostalCode': '98033',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '4110 Old Redmond Rd.',
		'City': 'Redmond',
		'Country': 'USA',
		'EmployeeID': 4,
		'FirstName': 'Margaret',
		'HireDate': '22/07/2004',
		'LastName': 'Peacock',
		'PostalCode': '98052',
		'Region': 'WA',
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mrs.'
	},
	{
		'Address': '14 Garrett Hill',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 5,
		'FirstName': 'Steven',
		'HireDate': '02/04/2001',
		'LastName': 'Buchanan',
		'PostalCode': 'SW1 8JR',
		'Region': null,
		'Title': 'Sales Manager',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Coventry House\r\nMiner Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 6,
		'FirstName': 'Michael',
		'HireDate': '22/01/2003',
		'LastName': 'Suyama',
		'PostalCode': 'EC2 7JR',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': 'Edgeham Hollow\r\nWinchester Way',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 7,
		'FirstName': 'Robert',
		'HireDate': '22/07/2001',
		'LastName': 'King',
		'PostalCode': 'RG1 9SP',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Mr.'
	},
	{
		'Address': '4726 - 11th Ave. N.E.',
		'City': 'Seattle',
		'Country': 'USA',
		'EmployeeID': 8,
		'FirstName': 'Laura',
		'HireDate': '22/07/2001',
		'LastName': 'Callahan',
		'PostalCode': '98105',
		'Region': 'WA',
		'Title': 'Inside Sales Coordinator',
		'TitleOfCourtesy': 'Ms.'
	},
	{
		'Address': '7 Houndstooth Rd.',
		'City': 'London',
		'Country': 'UK',
		'EmployeeID': 9,
		'FirstName': 'Anne',
		'HireDate': '22/07/2001',
		'LastName': 'Dodsworth',
		'PostalCode': 'WG2 7LT',
		'Region': null,
		'Title': 'Sales Representative',
		'TitleOfCourtesy': 'Ms.'
	}
];
export let expenseData: Array<{[key: string]: any}>  = [
	{
		'Amount': '7',
		'Category': 'Food',
		'Description': 'Boiled peanuts',
		'FormattedDate': '06/01/2017 09:12 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Credit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100001'
	},
	{
		'Amount': '8',
		'Category': 'Food',
		'Description': 'Peanuts in Coke',
		'FormattedDate': '06/04/2017 02:43 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100024'
	},
	{
		'Amount': '11',
		'Category': 'Food',
		'Description': 'Palmetto Cheese, Mint julep',
		'FormattedDate': '06/04/2017 08:35 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100025'
	},
	{
		'Amount': '9',
		'Category': 'Transportation',
		'Description': 'Cars and trucks, used',
		'FormattedDate': '06/04/2017 10:25 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100026'
	},
	{
		'Amount': '8',
		'Category': 'Transportation',
		'Description': 'Public and other transportation',
		'FormattedDate': '06/04/2017 03:55 PM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Debit Card',
		'TransactionType': 'Expense',
		'UniqueId': 'T100027'
	},
	{
		'Amount': '160',
		'Category': 'Shopping',
		'Description': 'Household things & Utilities',
		'FormattedDate': '06/04/2017 10:22 AM',
		'MonthFull': 'June, 2017',
		'MonthShort': 'Jun',
		'PaymentMode': 'Cash',
		'TransactionType': 'Expense',
		'UniqueId': 'T100028'
	},
	{
		'Amount': '110',
		'Category': 'Extra income',
		'Description': 'Income from Sale',
		'FormattedDate': '11/30/2017 02:42 PM',
		'MonthFull': 'November, 2017',
		'MonthShort': 'Nov',
		'PaymentMode': 'Cash',
		'TransactionType': 'Income',
		'UniqueId': 'T101284'
	}
];
export let hardwareData: Array<{[key: string]: any}>  = [
	{
		'AssignedTo': 'John Doe',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2878',
		'Name': 'Lenovo Yoga',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27932009',
		'Status': 'Assigned',
		'TaskID': 1,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Others',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-3456',
		'Name': 'Acer Aspire',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35728290',
		'Status': 'In-repair',
		'TaskID': 2,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2763',
		'Name': 'Apple MacBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB35628728',
		'Status': 'In-repair',
		'TaskID': 3,
		'WEO': '04/03/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '03/09/2018',
		'InvoiceNo': 'INV-2980',
		'Name': 'Lenovo ThinkPad',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56209872',
		'Status': 'Pending',
		'TaskID': 4,
		'WEO': '05/12/2021'
	},
	{
		'AssignedTo': 'David Anto',
		'Category': 'Laptop',
		'DOP': '01/10/2018',
		'InvoiceNo': 'INV-3782',
		'Name': 'Dell Inspiron',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289036',
		'Status': 'Assigned',
		'TaskID': 5,
		'WEO': '04/01/2021'
	},
	{
		'AssignedTo': 'Mary Saveley',
		'Category': 'Laptop',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-2712',
		'Name': 'HP Pavilion',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB56289305',
		'Status': 'Assigned',
		'TaskID': 6,
		'WEO': '05/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '06/16/2018',
		'InvoiceNo': 'INV-0984',
		'Name': 'Asus ZenBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB25637891',
		'Status': 'Pending',
		'TaskID': 7,
		'WEO': '09/01/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/19/2018',
		'InvoiceNo': 'INV-2561',
		'Name': 'HP EliteBook',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB27819726',
		'Status': 'Ordered',
		'TaskID': 8,
		'WEO': '05/21/2021'
	},
	{
		'AssignedTo': '',
		'Category': 'Laptop',
		'DOP': '02/12/2018',
		'InvoiceNo': 'INV-8970',
		'Name': 'Apple MacBook Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB05262880',
		'Status': 'Pending',
		'TaskID': 9,
		'WEO': '03/01/2023'
	},
	{
		'AssignedTo': '',
		'Category': 'Tablet',
		'DOP': '04/10/2018',
		'InvoiceNo': 'INV-4555',
		'Name': 'Apple iPad Air',
		'Note': 'Remarks are noted',
		'SerialNo': 'CB45262777',
		'Status': 'Pending',
		'TaskID': 10,
		'WEO': '05/01/2021'
	}
];
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.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' }
        ];
    }
    render() {
        return (<QueryBuilderComponent width='100%' columns={this.columnData}></QueryBuilderComponent>);
    }
}
ReactDom.render(<App />, document.getElementById('querybuilder'));