Join the DZone community and get the full member experience.Join For Free
With the rapid advancement of information technologies, it is hard to imagine a business web application without the ability to present data in a tabular format. Every day business people are exposed to large amounts of information that may also require hierarchical division. Without using special tools such as a TreeGrid (also known as TreeTable), it can be very time-consuming to analyze big data sets and make the right decisions.
TreeGrid is a user interface element that helps to show complex data in rows and columns with expandable/collapsible nodes and enables users to interact with it. It combines qualities of standard DataGrid and Tree components. The main peculiarity of TreeGrid is that it allows you to group arrays of data hierarchically, thereby contributing to more convenient work with the given information. This functionality is highly demanded in financial and analytic systems, reporting tools, CRMs, etc.
Easy to follow initialization process and TypeScript support help to make DHTMLX TreeGrid a part of your app much faster. This control is delivered in a bundle with other UI widgets included in the DHTMLX Suite package or as a stand-alone component.
Trial version: DHTMLX TreeGrid
Price: from $509
Webix TreeTable works seamlessly with large amounts of multidimensional data thanks to dynamic loading. Multiple filtering and sorting options give users opportunities to quickly find required pieces of information in the table and, if necessary, edit them on the fly. Various selection and copy-paste modes make it much easier to borrow data from the table. The widget also allows utilizing math formulas and charts (Bar, Pie, Spline, etc.) in the grid. The list of available data exporting formats includes PDF, PNG, Excel. The documentation page provides more interesting details on the practical usage of this JS widget and its features.
Trial version: Webix
Price: from $849 (for a full package of UI widgets)
EJS TreeGrid also gives a chance to add some extra tools to the grid such as a Gantt chart, calendar, rich text editor. You can work with external objects like Flash Adobe or custom JS objects in the tree table. It is also possible to set animations for various TreeGrid actions. The tree grid interface can be adapted to various languages using the localization feature (including the RTL option for Middle East languages). The appearance of the tree grid is fully customizable via CSS styles. The table content can be saved to Excel or PDF format and printed if needed. If you want to learn more details about EJS TreeGrid, check out the documentation section.
Trial version: EJS TreeGrid
Price: from $600
jqxTreeGrid is a part of the jQWidgets library used to lay out data utilizing a tree-like setup. This lightweight jQuery widget offers a range of core features with flexible configuration for manipulating data the way you need. Large volumes of data can be broken down into smaller parts for more convenient navigation using the paging feature. Load on Demand (also known as a virtual mode) is one more function that helps to ensure optimal performance with big data in tree grids. With this feature on board, child rows of the tree are generated and initialized only when the parent rows are opened. Other noteworthy features of this widget are pinned columns, aggregates, custom editors, cell formatting, custom cell rendering.
jqxTreeGrid supports multiple data binding and exporting options. You can make the tree grid interface understandable to users from different countries by enabling various locales. Utilizing customizable default themes, you can create a unique design for your tree grid. If you want to test all capabilities of the jqxTreeGrid widget in practice, there is a special jsEditor tool.
Trial version: jQWidgets
Price: from $199 (for a full package of UI widgets)
Ignite UI Tree Grid
The Ignite UI library provides a number of UI components for the faster accomplishment of various web development goals, including hierarchical presentation of data. Two Ignite UI tools suit this purpose, namely - Hierarchical Grid and Tree Grid. Both grids are similar in terms of functionality, as they support the main features that are commonly expected from a grid component such as sorting, filtering, in-cell editing. But the Tree Grid is a more preferable option when building a table where the parent and child nodes have the same structure or if you want to offer end-users a simpler experience.
Like in the case with jqxTreeGrid, good performance with large data sets is ensured by implementing pagination and Load on Demand features. Infragistics also equips developers with two online tools to facilitate the work with Ignite UI grid components. The HTML5 Page Designer tool helps to try Ignite UI widgets in action with simple drag-and-drop manipulations, while the Theme Generator allows tuning the look and feel of the tree grid to your liking. Online documentation will give you a clear idea of how to use the potential of this JS component to the maximum.
Trial version: Ignite UI
Price: from $849 (for a full package of UI widgets)
Syncfusion Tree Grid
Data can be loaded in the table from local and remote sources (JSON, RESTful, OData, and WCF services). The control relies on several performance-related techniques. You can apply row virtualization and infinite scrolling to improve user experience with large bundles of data. In addition, it is also possible to enable the immutable mode that boosts the tree grid re-rendering performance. The control also supports localization and internationalization libraries that help to make the text content and date/number objects in the tree table understandable to users from different countries. If users require a hard copy of the information presented in the grid, export it in PDF, Excel, CSV formats. More details on Syncfusion Tree Grid and how to get started with it in real projects can be found on the documentation page.
Trial version: Syncfusion
Price: from $995 (for a full package of UI widgets)
Opinions expressed by DZone contributors are their own.