JavaScript TreeTable UI control

TreeTable live demo

Overview

What is TreeTable (TreeGrid)? It is a specialised component for working with big volumes of table data. TreeGrid allows to depict much information, as well as multidimensional tables, simultaneously in one compact UI widget. Data grouping occurs via collapsing information into hierarchichal elements similar to tree branches.

Unlike the classical tree, a user can collapse entire tables. This approach to data arrangement allows to:

avoid using pagination;
tightly arrange any amount of information;
unite unstructured information in one table;
receive intuitive interface to work with complex data structures.

The competitive edge of TreeTable is simplicity and perfect usability in comparison with other data widgets. Compact data structures are easily analyzed and used even by inexperienced customers.

TreeTable Key Features

End-to-end sorting

Table items can be sorted with a single click on the header of a column. You can use the sort function for specific sorting behaviour.

Fully editable Tree Table

Tree Table supports the full range of manipulations with the grid. You can easily edit its contents by typing the new value in the input field or selecting an option from a drop-down list that can even be supplied with checkboxes for better usability.

Saving current state

You can easily save the current state of the JavaScript TreeGrid in order to return to it later with the help of built-in methods.

Selection modes in JavaScript TreeGrid

TreeGrid allows you to select data in one of the available modes: cell, row, column, multi-cell, multi-row, multi column, block or area selection mode.

Data export to Excel, PNG and PDF

This JavaScript Tree Table component allows exporting data to PDF, PNG and Excel files for further processing. You can also define the appearance of the resulting table by adding various export options.

Checkboxes

Besides the item selection, you can use checkboxes in the TreeGrid component. This feature helps to choose multiple items for editing or removing at once. You can use either standard two-state checkboxes or three-state checkboxes with an additional 'indeterminate' state.

Filtering

Tree Table supports client-side filtering. You can either use built-in filters or define custom ones. According to the type of data presented in your table, you can use one of the available filters for the needed column: date filter, number filter, richselect filter, multicombo filter, etc.

Clipboard

Clipboard support allows you to copy and paste items within the Tree Table component as well as to paste data to other components. This feature works in several modes such as 'block', 'selection', and 'repeat'.

Sparklines

To visualize data, you can add small graphs to your Tree Table. Sparklines provide a number of graph types: Line, Area, Bar, Spline, SplineArea and Pie. Besides, you can add a tooltip to appear every time a user hovers a mouse pointer over the graph.

TreeTable related articles

Drag-and-Drop within Webix Widgets

Drag-and-Drop in Webix UI

Other data widgets

Tree

DataTable

Timeline

based on reviews of 49 customers