JavaScript Query Builder UI widget

Query Builder is a widget for creating filters of any complexity to search for records in datasets. In addition to being used as a standalone widget, it can be applied to various data components (e.g. DataTable, Pivot) to enhance their filtering functionality. Query Builder is easy to localize and customize, as you can create your own rules and use them alongside the available ones.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Overview

Query Builder is extremely useful for filtering large data sets, thus enhancing the filtering functionality of data components that normally allow searching for data according to one rule only. Query Builder is also great for configuring data sources while working with the server side. You can add any number of filtering rules within it, unite them into groups with AND/OR logic, delete rules and create your own conditions, if necessary.

Easy to create

Initializing Query Builder requires only a few lines of code, and as a result you’ll get a powerful and useful means of selecting data.

Easy to style

By making use of its properties, you can effortlessly customize the appearance of the Query Builder widget to your liking: you can change its size, add borders and paddings, arrange its elements vertically or horizontally (the latter being the default layout), add a CSS class to define the style and many more.

Easy to use with Data widgets

Apart from being used as a standalone component for filtering data sets, Query Builder can be combined with data widgets like DataTable or Pivot. It can even be nested into a datatable and used as its built-in filter.

Easy to grasp

The filtering logic of Query Builder is straightforward and clear, so you can effortlessly manipulate the built-in rules. If the built-in filtering rules aren’t enough, you can create your own rules by analogy.