Webix JavaScript Query widget Review

Webix JavaScript UI library
3 min readFeb 5, 2021

Webix JavaScript Query is a modern tool for filtering big datasets. The laconic design with a user-friendly interface helps you to manage your data tables at lightning speed. This solution is successfully applied in the proprietary Webix projects.

Features Overview

Filtering

The widget is intended to filter the information using a set of particular conditions. Depending on the data type being filtered, the conditions may be different. In this way, you can easily and quickly create, edit, group and delete filters according to your demands.

There is a “simple mode” of filtering as well. In this case, you may only create and delete filters, while editing and grouping will be restricted.

Grouping and Combining

You can create filter groups and nest them into each other to define more precise search conditions.

When you create several filters or their groups, the widget will set linking conditions “AND” or “OR” between them. The condition “AND” will consider both filters, while “OR” will take any of them.

Data processing

JS Query is capable of processing data on the client-side, using the built-in API, as well as on the server-side.

For integration with the server-side, Webix Query is shipped with ready-to-use backend solutions (Go, NodeJS). Server scripts can generate SQL queries according to your filter configurations.

Display modes

The concise design of JS Query is created for convenient integration with your application, using a minimum screen space. For this purpose the widget provides horizontal (Topbar) and vertical (Sidebar) modes of positioning.

vertical mode

JS Query functionality doesn’t depend on the placement. These modes are used in different cases. You can use the vertical mode if you work with large datasets. In this case, the filters will be displayed as a list. The horizontal positioning is more suitable for working with small data so that the filters can be placed in a row.

horizontal mode

Implementation

Webix Query is developed on the base of the Webix Filter widget. Any filter created in the application is a JS Filter widget. In this way, the filtering process is not limited to a single parameter and considers many conditions.

JS Query is integrated into one of our best projects, Webix Report Manager. In this application, the Query widget implements data filtering in the report generation process.

Conclusion

When using JS Query, the data filtering process won’t be a problem for you anymore. You don’t need to reinvent the wheel. Appreciate your time and use it for more rewarding things. We did our best to solve this task quickly and efficiently, while the integration of Query into your application is as simple as possible.

--

--

Webix JavaScript UI library

#JavaScript UI library for #cross-platform #web app development with 100+ #UI widgets and fully-featured #CSS / #HTML5 JavaScript controls. www.webix.com