SKILL.md
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 groups
- Multiple Data Types: Support for string, number, date, boolean, and custom types
- Operator Support: 16+ built-in operators (equal, contains, between, in, etc.)
- Query Conversion: Convert to SQL, Mongo, or parameterized queries
- Customization: Custom templates, themes, and styling
- Accessibility: WCAG compliant with keyboard navigation and screen reader support
- Advanced Features: Drag-and-drop, state persistence, cloning, locking