Syncfusion Vue Query Builder UI

SyncfusionQuery EditorsJavaScript

Create complex data filters with a responsive Vue UI component.

  • Integrates effortlessly with data visualization controls.
  • Outputs structured JSON and SQL filter queries.
  • Supports customization with templates and multiple themes.
Syncfusion logo

Prices from:

Loading...
Available in
Syncfusion Essential Studio UI Component SuiteLoading
Syncfusion Essential Studio EnterpriseLoading
Syncfusion Vue Query Builder UI product image
Syncfusion Vue Query Builder UI provides a dynamic interface for constructing complex data filters using AND/OR logic. Designed for smooth integration with data visualization components like grids and charts, it supports various data sources and outputs filters in JSON or SQL formats. Its responsive design ensures usability across desktops and mobile devices, while offering extensive customization through templates and themes.

Data Integration

Bind data easily with various local and remote sources including JSON, OData, WCF, and RESTful services using a data manager, enabling flexible and robust data handling.

Flexible Filter Creation

Users can create and group multiple conditions using AND/OR logic through an intuitive UI, facilitating precise data filtering relevant to complex scenarios.

Structured Output Formats

Generates structured JSON filters and supports multiple SQL formats for filter queries, enabling straightforward parsing and integration with backend systems.

Customizable UI Templates

Supports adding custom controls like checkboxes, sliders, and dropdown lists using header, rule, and value templates to tailor the filtering experience.

Responsive and Mobile-Ready

Offers a highly responsive layout optimized for desktops, touchscreens, and smartphones across iOS, Android, and Windows platforms.

Multiple Built-In Themes

Includes themes such as Fluent, Tailwind CSS, Bootstrap, Material, and Fabric, with an online Theme Studio tool for easy theme customization.

Globalization and Localization Support

Adapts to different locales by formatting strings according to user preferences, enhancing accessibility for a global audience.

Import and Export Capabilities

Enables importing and exporting filter rules in JSON, SQL (inline, parameterized, named), and Mongo query formats for easy data exchange and persistence.

Advanced Features for Data Integrity

Provides functionality to lock and clone filter groups or rules, ensuring data integrity and enabling efficient filter management.

Accessibility Compliance

Fully supports WAI-ARIA accessibility standards and WCAG 2.0 guidelines, including keyboard interaction and right-to-left language support.

Product Compatibility

Review the details below to ensure this product is supported within your environment.

Component Type

  • JavaScript

JavaScript Platform

  • Vue.js