If you strive for organizing work with hierarchical data in your business solution, you can use TreeTable (or TreeGrid) component. In this article, we are going to dive into the peculiarities of JS TreeTable widget that makes part of Webix UI library.
Webix TreeGrid UI control is a complex and advanced widget that allows you to combine JS Tree and Table functions in one UI component. On the one hand, TreeGrid conveniently displays data in tabular form and has all the functionality of DataGrid. On the other hand, it groups tabular data hierarchically just like a Tree widget does.
TreeGrid has all the necessary features that help group large bulks of information in the most efficient way.
You can use the widget for prototyping at the proof-of-concept stage.
The TreeTable component is especially efficient for data-rich web applications, analytical dashboards, and business solutions that require the function of displaying hierarchical data in tables.
The most obvious use case is the integration of different tables with data in one hierarchical view. From a practical perspective, it’s a very convenient approach as you can see and manage many tables through a single view sreen instead of making separate screens for each table.
The additional benefits to such data management will be cross-cutting filters, search, cross-tabular drag-n-drop, and the ability to copy/paste data.
So, Webix TreeTable widget has a number of advanced features and properties that make it even more functional and performant:
- Saving current TreeGrid state;
- Data export to Excel, PNG and PDF;
- Selecting modes;
- Clipboard support.
Let’s consider each feature in greater detail.
You can easily edit data within a TreeTable component. Just type the new value in the input field or choose an option from a drop-down box.
TreeTable provides the possibility of filtering data items on the client side. You can either apply ready-made filters or customize them. You can use number, date, multicombo, richselect, or other filters depending upon the sort of data displayed in your table.
Saving current state
It’s very easy to save the ongoing state of the TreeTable. This feature will allow you to return to the table at any convenient time by means of embedded methods.
Data export to Excel, PNG and PDF
Another useful feature is the ability to select data in any of the following modes: cell, row, column, multi-cell, multi-row, multi column, block or area selection mode.
In addition to the possibility of selecting items, there are also checkboxes in the TreeGrid at your disposal. With checkboxes you can select multiple items for removing or editing . It’s possible to choose two-state or three-state checkboxes.
If you want to visualize data in your application, you can add little diagrams to the TreeGrid component. Sparklines include a wide range of diagrams such as Area, Line, Spline, SplineArea, Pie, and Bar. Take into account that now there is a possibility to add Webix tooltips to sparklines.
This feature allows copying and pasting data items within the TreeTable and to other components. There are such modes as ‘repeat’, ‘selection’, and ‘block’.
Webix TreeTable web widget is a powerful UI control created with the use of innovative web development technologies. It is packed with a bunch of cutting edge features that facilitate and speed up work with hierarchical data.