Webix JavaScript Query is a modern tool for filtering large amounts of data. The minimalistic design combined with the user-friendly interface of the widget make it an effective assistant when working with tables. This solution is successfully used in own Webix projects.

Filtration

The widget’s functionality allows you to filter information using a set of specific conditions. Conditions may differ depending on the type of data being filtered. The interface is designed in such a way that you can easily and quickly create, edit, group and remove filters according to your requirements.

Grouping and combining

You can create subgroups of filters of any nesting to define more precise search conditions.

When creating several filters or their groups, the widget will set additional conditions “AND” or “OR” between them. If the “AND” condition is set, then the filtering will take into account the conditions of both filters at the same time, if the “OR” condition – any of them.

Working with data

The versatility of JS Query lies in the fact that the widget is able to process data both on the client side using the built-in API and on the server.

To facilitate the process of integration with the server side, Webix Query provides ready-made backend solutions (Go, NodeJS). The system can generate SQL queries in accordance with the configurations of the filters you created.

Display modes

The laconic design is designed in such a way that you can easily integrate the widget into your application, while using a minimum of work space. For this, the horizontal (Topbar) and vertical (Sidebar) placement modes are provided.

JS Query functionality is independent of the set mode. The difference lies in the convenience of using vertical placement when working with large amounts of data, when the created filters are in the form of a list. Horizontal placement is more suitable for working with small amounts of information. In this case, the filters will be placed as a string.

Application

The Webix Filter widget served as the basis for creating a comprehensive Webix Query solution. The complexity of Query lies in the fact that it allows you to create many filters, which are essentially mini JS Filter widgets. With this approach, the filtering process is not limited to one parameter, but allows you to take into account many selection conditions.

One of our best projects where this widget is successfully applied is Webix Report Manager. The application uses Query to filter data for generating reports.

Conclusion

By using JS Query, the process of filtering large amounts of data will no longer be a problem for you. You no longer need to waste precious time “reinventing the wheel”. We made sure that these tasks were solved comprehensively and efficiently, and the process of integrating JavaScript Query with your application was as simple and convenient as possible.