Skip to main content Home Creators syncfusion react-ui-components-skills syncfusion-react-query-builder
syncfusion-react-query-builder Comprehensive guide to implementing Syncfusion React Query Builder component. Use this skill when building advanced filter interfaces, creating complex data query systems, or implementing dynamic rule-based filtering. This skill covers query builder configuration, SQL query conversion, drag-and-drop filtering, customization, and state management.
Jump to install Skills Marketplace Discover and explore AI skills built by the community.
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Show prompt details A direct command skips the review prompt. Inspect the source before running it.
npx skills add https://github.com/syncfusion/react-ui-components-skills --skill syncfusion-react-query-builderThe command stays on one line. Scroll horizontally to inspect it before copying.
Prefer a local copy? Download the files currently available to SkillsMP.
Download Zip Downloading... More from this repository syncfusion-react-accordion Guide users to implement Syncfusion React Accordion component for collapsible content panels. Use this skill whenever the user needs to create expandable/collapsible sections, accordion layouts, tabbed content panels, multi-step forms, FAQs, or navigation with expandable items. Covers component setup, expand modes, animations, dynamic content loading, styling, events, lifecycle, React hooks integration, and complete API reference.
Create responsive navigation headers with AppBar component. Build top, bottom, or sticky app bars with buttons, menus, icons, and sidebars. Use when building navigation elements, toolbars, action bars, or responsive headers with dynamic content layout. Includes color modes (Light, Dark, Primary, Inherit), size modes (Regular, Prominent, Dense), spacing, separators, and full accessibility support.
syncfusion-react-breadcrumb Implement and configure Syncfusion React Breadcrumb component for navigation paths, routing, and site hierarchy. Use this skill whenever users need breadcrumb navigation, want to create hierarchical navigation paths, display location breadcrumbs, handle navigation between pages, customize overflow behaviors, or integrate breadcrumbs with routing libraries.
Related occupations SOC
Based on SOC occupation classification
name syncfusion-react-query-builder description Comprehensive guide to implementing Syncfusion React Query Builder component. Use this skill when building advanced filter interfaces, creating complex data query systems, or implementing dynamic rule-based filtering. This skill covers query builder configuration, SQL query conversion, drag-and-drop filtering, customization, and state management. metadata {"author":"Syncfusion Inc","version":"34.1.29","category":"Forms"}
Implementing Syncfusion React Query Builder
A comprehensive guide for implementing and customizing the Syncfusion React Query Builder component. The Query Builder is a powerful UI component for creating and managing complex filter conditions, with support for rule-based queries, multiple data types, SQL generation, and extensive customization options.
Component Overview
The Query Builder component provides a graphical interface for creating and editing complex filter rules. It outputs structured JSON that can be converted to SQL, Mongo queries, or custom predicates for filtering data. Key capabilities include:
Rule Management: Create, edit, delete, and nest rules and groupsMultiple Data Types: Support for string, number, date, boolean, and custom typesOperator Support: 16+ built-in operators (equal, contains, between, in, etc.)Query Conversion: Convert to SQL, Mongo, or parameterized queriesCustomization: Custom templates, themes, and stylingAccessibility: WCAG compliant with keyboard navigation and screen reader supportAdvanced Features: Drag-and-drop, state persistence, cloning, locking
Documentation and Navigation Guide
Getting Started
Installation and package setup
Basic component initialization
CSS imports and themes
Creating your first Query Builder
Column definition basics
Running the application
Columns and Operators
Defining column schema with ColumnsModel
Auto-generating columns from data sources
Configuring labels and field mappings
Supported operators by data type
Setting step and format properties
Column validation configuration
Data Binding
Binding local data arrays
Remote data with DataManager
ODataV4Adaptor integration
Dynamic data updates
Using DataManager with Query Builder
Handling data source changes
Rules and Filtering
Understanding rule structure (RuleModel)
Creating rules programmatically with addRules
Creating groups with addGroups
Deleting rules and groups
Managing nested rule hierarchies
Drag-and-drop rule management
Show buttons configuration
Query Conversion
Converting rules to SQL with getSqlFromRules
Generating Mongo queries with getMongoQuery
Creating parameterized SQL queries
Named parameter SQL generation
Converting predicates for DataManager
Importing rules from SQL queries
Handling localization in SQL conversion
Templates and Customization
Creating custom header templates
Custom component injection into templates
Styling with CSS classes and cssClass property
Theme Studio integration
Custom operator definitions
Handling actionBegin events for customization
Advanced Features
Display modes (Horizontal and Vertical layouts)
Cloning rules and groups with cloneRule/cloneGroup
Locking rules and groups for read-only access
Separate connectors for visual distinction
Restricting group operations
RTL (Right-to-Left) support
State persistence with enablePersistence
Sort direction configuration
Summary view display
Accessibility and keyboard navigation
API Reference
Complete properties list with types and defaults
All methods with parameters and return types
Event handlers and event arguments
Model interfaces (RuleModel, ColumnsModel, ShowButtonsModel)
Return type definitions and data structures
Property usage patterns
Quick Start Example import { ColumnsModel , QueryBuilderComponent , RuleModel } from '@syncfusion/ej2-react-querybuilder' ;
import React from 'react' ;
function App (const columnData : ColumnsModel [] = [
{ field : 'EmployeeID' , label : 'Employee ID' , type : 'number' },
{ field : 'FirstName' , label : 'First Name' , type : 'string' },
{ field : 'Title' , label : 'Title' , type : 'string' },
{ field : 'HireDate' , label : 'Hire Date' , type : 'date' , format : 'dd/MM/yyyy' },
{ field : 'Country' , label : 'Country' , type : 'string' }
];
const initialRules : RuleModel = {
condition : 'and' ,
rules : [
{
field : 'EmployeeID' ,
label : 'Employee ID' ,
operator : 'equal' ,
type : 'number' ,
value : 1001
}
]
};
return (
<QueryBuilderComponent
width ="100%"
columns ={columnData}
rule ={initialRules}
/> export default App ;
Common Patterns
Pattern 1: Retrieving Filtered Results as SQL let qryBldrObj : QueryBuilderComponent ;
function generateSQL (const sqlQuery = qryBldrObj.getSqlFromRules ();
console .log ('Generated SQL:' , sqlQuery);
}
Pattern 2: Programmatically Adding Rules function addFilter (addRules ([
{
field : 'Country' ,
label : 'Country' ,
operator : 'equal' ,
type : 'string' ,
value : 'USA'
}
], 'group0' );
}
Pattern 3: Converting SQL Back to Rules function importFilter (sqlString : string setRulesFromSql (sqlString);
}
Pattern 4: Displaying Summary View <QueryBuilderComponent
columns={columnData}
summaryView={true }
/>
Key Props Cheat Sheet Prop Type Default Purpose columnsColumnsModel[] - Defines available fields and operators ruleRuleModel {} Initial filter rules dataSourceObject[] | DataManager [] Data for binding displayMode'Horizontal' | 'Vertical' 'Horizontal' Layout orientation allowDragAndDropboolean false Enable drag-drop rule management enablePersistenceboolean false Save state to localStorage enableRtlboolean false Right-to-left layout allowValidationboolean false Validate rule conditions summaryViewboolean false Show filtered query summary showButtonsShowButtonsModel defaults Control add/delete button visibility maxGroupCountnumber 5 Maximum nested group depth readonlyboolean false Make component read-only
Common Use Cases
Use Case 1: Advanced Search Filter Create a filter interface for users to build complex search queries with multiple conditions:
Define columns for searchable fields
Initialize with empty or default rules
Set showButtons to enable rule management
Retrieve SQL on form submission
Execute query on backend
Use Case 2: Data-Driven Dashboard Build a dashboard where users filter data across multiple columns:
Bind DataManager with remote service
Configure columns based on data types
Enable drag-and-drop for better UX
Use getPredicate() to filter DataManager
Display filtered results dynamically
Use Case 3: Query Template System Allow users to save and load filter templates:
Set enablePersistence={true} for automatic state saving
Or manually save getRules() to database
Load rules with setRules() when needed
Display saved templates in a dropdown
Use Case 4: Report Builder Create a report filter UI with custom templates:
Design custom header template for branding
Use custom operators for domain-specific filtering
Enable validation with allowValidation
Display summaryView for clarity
Generate SQL for report execution
Next Steps
Getting Started: Install the package and create your first Query BuilderDefine Columns: Configure the fields users can filter onBind Data: Connect to local or remote data sourcesBuild UI: Add rules and groups with drag-and-drop supportGenerate Queries: Convert rules to SQL or other formatsCustomize: Apply themes, templates, and accessibility features
Need help? Check the specific reference files above for detailed examples and implementation patterns.
