JavaScript Tree component is a very popular and convenient control that helps create data-rich applications. A hierarchical approach to data organization provides many benefits to an end-user. You can find tree lists in applications of all kinds.
The main advantage of UI trees is the opportunity to display large amounts of information compactly. But one of the shortcomings is that it’s quite difficult to work with large trees. The information from such trees does not fit in the visible area of interfaces and as a result it becomes necessary to organize horizontal and vertical scrolling (e. g., the process of editing the registry of MS Windows).
A TreeTable component appeared as a logical answer to the complexity of work with UI Trees. On the one hand, TreeTable is a classic DataGrid that enables convenient presentation of information in tabular form. On the other hand, it performs a tree-like, hierarchical grouping of tabular data just like a Tree widget.
Do not confuse the TreeTable component with such features as DataGrid Rows and Columns grouping. Even though some advanced SpreadSheet JS widgets may have a hierarchical data grouping tool (similar to Excel), TreeTable is a more sophisticated and complex solution as it groups not just individual data, but the entire arrays of information.
In this article, we’d like to review the top 5 TreeTable web widgets which are available for developers these days. As you know, the use of ready-made JavaScript components significantly speeds up front-end web development. Nowadays programmers just need to choose the appropriate components. This overview is aimed at facilitating this choice. We are going to consider the TreeGrid components of such JavaScript UI libraries and frameworks as Webix.com, Treegrid.com, jQuery.com, DHTMLX.com, and Sencha.com.
Webix TreeTable Widget
Webix javascript treetable is based on the DataGrid component and that’s why possesses all of its features and peculiarities, including Sparklines, Clipboard support, advanced filters, and many others. Webix TreeTable component combines its functionality with different groupings of information that are available in DataGrid, for example, rowspan, colspan, and grid grouping. The widget can boast its thorough elaboration of Drag-n-drop separately for rowsand columns, the possibility to change the width of all margins and create vertical headers. You can find more information in this overview.
TreeGrid
Editable JavaScript TreeGrid is a DHTML component that allows displaying and editing data in grid, table, tree grid, tree view, or bar chart on an HTML page. It’s a fast AJAX grid with a lot of cutting edge features such as advanced cell formulas and calculations; multi-level Pivot tables; creating of Gantt charts; display and update of custom JavaScript objects and external objects such as Adobe Flash, Microsoft SilverLight; different editing masks; a calendar component; mass cell changes; export to MS Excel or other spreadsheet programs that handle XLS, XLSX, CSV files or HTML tables; localization to any languages; and many other features. The TreeGrid component allows loading data in XML and JSON formats. The widget is available under the Basic, Personal, Standard, and Grand licenses.
jQuery TreeTable
jQuery TreeTable is a plugin for the jQuery JavaScript library. This component unobtrusively displays a tree in the form of an HTML table. The widget allows creating multiple columns to display additional information besides the tree. The tree depth can be unlimited. jQuery TreeTable is released by Ludo van den Boom and is available under the GPLv2 and the MIT license. In general, jQuery JS library is very fast and lightweight which makes the process of web development much easier. It contains easy-to-use APIs that support a number of browsers.
DHTMLX TreeGrid component
TreeGrid by DHTMLX is an extension of dhtmlxGrid component, which complements the functionality of a powerful datagrid with expandable rows, smart XML parsing, smart rendering, and paging support. As an AJAX-based JavaScript treegrid with dynamic loading, the component is able to display an unlimited number of rows and handle large amounts of data on the fly. It provides end users with convenient inline editing, advanced drag-and-drop of rows and columns, split mode, sorting and coloring of columns as well as a range of math formulas. Besides, dhtmlxTreeGrid has easy styling via CSS and predefined skins. It is available as part of a JavaScript UI framework of dhtmlxSuite or as a standalone component under Professional edition.
Sencha TreeGrid widget
Sencha has a JavaScript framework that provides a number of ready-made UI components for building data-intensive, cross-platform web apps. One of the prominent components of this library is its high-performance TreeGrid widget. This component has such features as sorting, filtering, multiple headers, keyboard navigation, preloading of nodes with a single AJAX request, header hiding / showing / reordering / resizing, custom icons, etc. Sencha Ext JS is available under the GNU GPLv3 and Commercial License.
Let’s compare the main features of the JavaScript TreeTable widgets mentioned above.
Conclusion
The main aim of JavaScript TreeGrid component is to combine the functions of Tree and Table in one widget. In this article we’ve reviewed the top 5 JavaScript TreeGrid widgets. All of them have their own remarkable characteristics and functionality. Judging from the comparison chart, DXTMLX and Webix JS libraries present the most feature-rich TreeGrid widgets that help integrate a tree into an editable grid thus facilitating work with big volumes of data.