This section explains how to create and configure a simple React Query Builder component.
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
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
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.
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}/>);
}
}
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.
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'));
<!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/20.1.55/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-buttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-dropdowns/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-inputs/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-calendars/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/ej2-popups/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/20.1.55/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 { 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'));
You can also explore our React Query Builder example that shows how to render the Query Builder in React.