JavaScript data widgets

UI data widgets by Webix offer a wide range of features for convenient data management, e.g., all-in-one-piece data loading, CRUD operations, fast data sorting, on-the-fly filtering, grouping, and styling. All the components suit for cross-platform app development.

JavaScript DataTable UI widget

DataTable (or DataGrid) is a JS grid control based on HTML5. This widget offers a wide variety of features. First of all, DataTable is fully editable and sortable. Table items can be filtered with the help of built-in filters. You can check whether the inserted data is correct. If your DataTable works with a great deal of data, you can split it into several pages. There are also such functionalities as saving the current state, drag-n-drop for rows and columns, clipboard support, resizable columns and rows, advanced editors and filters, header menu, grid grouping, sparklines, vertical headers, sub-rows and sub-views and other.

Webix JavaScript DataTable UI widget
DataView UI widget

DataView is a client-side JavaScript widget for displaying various objects in a compelling way. You can group information, effortlessly add and remove items, load only the data that you need at the moment (dynamic data loading), sort and filter items with ease. Among other capabilities, there is paging for convenient navigation, several ways of selecting items, quick editing, drag-and-drop operations, pictures allowing end users to find the required elements quicker.

Webix DataView UI widget
JavaScript List UI widget

JavaScript List is a UI widget for presenting listed data items. It performs well with thousands of data records. Users can edit items by clicking on them. This widget also offers predefined validation rules, dynamic data loading, lazy rendering, hierarchical grouping by category, X-list for horizontal data patterning, Unitlist for grouping large amounts of messy information, animated paging, easy filtering, drag-and-drop, and hotkeys for making work with a clipboard more convenient.

Webix JavaScript List UI widget
JavaScript GroupList UI widget

GroupList is a widget which allows you to divide items into groups. Data organization of groups is hierarchical. It means that any item can start its own category. Besides, there are convenient sorting and filtering features for time-saving data management.

Webix JavaScript GroupList UI widget
Property Sheet UI widget

Property Sheet UI is an editable and configurable list of properties. This widget allows you to change the look and behavior of the components in visual editors. Property Sheet UI offers different editing modes so that you could create custom editors. Instead of using standard popup editors, you can define custom ones based on the Webix Popup Window.

Webix Property Sheet UI widget
JavaScript Query Builder

Query Builder is a widget for creating filters of any complexity to search for records in datasets. It's a separate widget which can be used with other data components, e.g., DataTable. Query Builder facilitates filtering of large data sets. You can add any number of filtering rules, unite them into groups with AND/OR logic, delete rules and create your own. This widget is also easy to style.

Webix JavaScript Query Builder
JavaScript Tree UI widget

JavaScript Tree presents hierarchically organized data in a clear and logical way. You can effortlessly see all the dependency levels and expand or collapse child nodes with one click. The widget has asynchronous JavaScript tree level loading, two- and three-state checkbox modes, keyboard navigation, and hotkey management for fewer mouse manipulations. The component also offers a great number of CRUD operations, a set of icons, different filtering modes, and drag-and-drop. There is also an ability to save the state of the Tree to cookie, local or session storage restore it later.

Webix JavaScript Tree UI widget
JavaScript TreeTable UI control

TreeTable (or TreeGrid) combines JavaScript Table and JavaScript Tree functions. This widget is fully editable. You can save the current state of the JavaScript TreeGrid and export your data to Excel, PNG, and PDF. There are lots of other features such as two- and three-state checkboxes, 8 selection modes, client-side filtering with built-in filters (you can also define the custom ones), clipboard support, and 6 types of graphs to visualize your data.

Webix JavaScript TreeTable UI control