Column Binding in React Query Builder UI

4 Sep 202620 minutes to read

Column definitions define the schema for the React Query Builder UI, controlling how fields appear and behave. These definitions map to the dataSource and directly influence all query operations, including rule and group creation and deletion. The field property is essential for binding data source values to query builder columns.

If the column field is not specified in the dataSource, the column values will remain empty.

Auto generation

When the columns property is empty or undefined during initialization, the React Query Builder UI automatically generates columns from all fields in the dataSource.

import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from './datasource';
function App() {
    return (<QueryBuilderComponent width='100%' dataSource={employeeData}/>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from './datasource';

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

When columns are auto-generated, the column type is inferred from the first record in the dataSource.

Labels

By default, the column label is derived from the column field name. To customize the label, define the label property.

Operators

Define the available operators for each column using the operators property. The following operators are supported based on data type:

Operators Description Supported Types
startswith Checks whether the value begins with the specified string. String
endswith Checks whether the value ends with the specified string. String
contains Checks whether the value contains the specified string. String
equal Checks whether the value equals the specified value. String, Number, Date, Boolean
notequal Checks whether the value does not equal the specified value. String, Number, Date, Boolean
greaterthan Checks whether the value is greater than the specified value. Date, Number
greaterthanorequal Checks whether a value is greater than or equal to the specified value. Date, Number
lessthan Checks whether the value is less than the specified value. Date, Number
lessthanorequal Checks whether the value is less than or equal to the specified value. Date, Number
between Checks whether the value is between the two specified values. Date, Number
notbetween Checks whether the value is not between the two specified values. Date, Number
in Checks whether the value is one of the specified values. String, Number
notin Checks whether the value is not in the specified values. String, Number
isempty Checks whether the value is empty. String
isnotempty Checks whether the value is not empty. String
isnull Checks whether the value is null. String, Number
isnotnull Checks whether the value is not null. String, Number

Step

The React Query Builder UI allows you to set step values for number fields, making numeric input easier to navigate. Use the step property to define the increment applied to the numeric textbox. The default value is 1, and accepted values are positive non-zero numbers.

Format

The React Query Builder UI formats date and number values. Use the format property to format date and number values.

import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from './datasource';
function App() {
    let columnData = [
        { field: 'EmployeeID', label: 'Employee ID', operators: [{ key: 'Equal', value: 'equal' },
                { key: 'Greater than', value: 'greaterthan' }, { key: 'Less than', value: 'lessthan' }], step: 10, type: 'number' },
        { field: 'FirstName', label: 'First Name', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'Hire Date', 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': 'Employee ID',
                'operator': 'equal',
                'type': 'number',
                'value': 1001
            },
            {
                'field': 'HireDate',
                'label': 'Hire Date',
                'operator': 'equal',
                'type': 'date',
                'value': '07/05/1991'
            },
            {
                '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'));
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';

function App() {

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'Employee ID', operators: [{ key: 'Equal', value: 'equal' },
            { key: 'Greater than', value: 'greaterthan' }, { key: 'Less than', value: 'lessthan' }],  step: 10, type: 'number'},
        { field: 'FirstName', label: 'First Name', type: 'string' },
        { field: 'TitleOfCourtesy', label: 'Title Of Courtesy', type: 'boolean', values: ['Mr.', 'Mrs.'] },
        { field: 'Title', label: 'Title', type: 'string' },
        { field: 'HireDate', label: 'Hire Date', 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': 'Employee ID',
            'operator': 'equal',
            'type': 'number',
            'value': 1001
        },
        {
            'field': 'HireDate',
            'label': 'Hire Date',
            'operator': 'equal',
            'type': 'date',
            'value': '07/05/1991'
        },
        {
            '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'));

Validations

Validation allows you to validate the conditions and it displays errors for invalid fields when using the validateFields method. To enable validation in the React Query Builder UI, set allowValidation to true. Column fields are validated once allowValidation is set to true. You should manually configure the validation for the Operator and Value fields through the validation property.

Additionally, the validation model supports isRequired, min, max, and message properties for customizing field-level error messages and constraints.

import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from './datasource';
function App() {
    let qryBldrObj;
    let columnData = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number', validation: { isRequired: true } },
        { 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', format: 'dd/MM/yyyy', label: 'HireDate', type: 'date' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];
    function onClick() {
        qryBldrObj.validateFields();
    }
    return (<div>
            <QueryBuilderComponent width='100%' dataSource={employeeData} columns={columnData} allowValidation={true} ref={(scope) => { qryBldrObj = scope; }}/>
            <div className="e-qb-button">
                <ButtonComponent id="validatebtn" cssClass='e-primary' content='Validate Fields' onClick={onClick}/>
            </div>
        </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('querybuilder'));
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
import { ColumnsModel, QueryBuilderComponent } from '@syncfusion/ej2-react-querybuilder';
import * as React from 'react';
import * as ReactDom from 'react-dom';
// @ts-ignore
import { employeeData } from './datasource';

function App() {
    let qryBldrObj: QueryBuilderComponent;

    let columnData: ColumnsModel[] = [
        { field: 'EmployeeID', label: 'EmployeeID', type: 'number', validation: { isRequired: true } },
        { 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', format: 'dd/MM/yyyy', label: 'HireDate', type: 'date' },
        { field: 'Country', label: 'Country', type: 'string' },
        { field: 'City', label: 'City', type: 'string' }
    ];

    function onClick(): void {
        qryBldrObj.validateFields();
    }

    return (
        <div>
            <QueryBuilderComponent width='100%' dataSource={employeeData} columns={columnData} allowValidation={true} ref={(scope) => { qryBldrObj = scope as QueryBuilderComponent; }}/>
            <div className="e-qb-button">
                <ButtonComponent id="validatebtn" cssClass='e-primary' content='Validate Fields' onClick = {onClick} />
            </div>
        </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('querybuilder'));

Set isRequired validation for Operator and Value fields.
Set min, max values for number values.