syncfusion-javascript-query-builder

What problem does it solve?

Enables developers to create, manage, and persist complex filter UIs without reinventing query logic, reducing bugs and improving developer productivity when building data-driven TypeScript applications.

Core Features & Use Cases

• Visual rule building: Compose nested AND/OR groups, single rules, and complex hierarchies without writing raw SQL or Mongo queries.
• Data binding and export: Supports local arrays and remote DataManager sources, with JSON, parameterized SQL, and MongoDB import/export pathways.
• Customization & integration: Custom templates for fields and values, drag-and-drop reordering, cloning/locking rules, accessibility (WCAG 2.1 AA) and RTL support for production apps.
• Operational scenarios: Advanced search filters, report parameterization, ETL pre-filters, saved query templates, and server-side query generation for APIs.

Quick Start

Create a QueryBuilder in your TypeScript app by defining columns and dataSource, load an initial RuleModel, render it to your container, and then use getSqlFromRules or getParameterizedSql to export the built query.