JavaScript TreeTable UI control

Tree Table (or TreeGrid) is a JavaScript widget which is the right choice when you need to combine JavaScript Table and JavaScript Tree functions in one widget. It is a unique data widget, which allows to arrange huge multidimensional masses of information in a simple and clear way.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Support of All Modern browsers
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

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.

Webix TreeTable 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.

Click on any Tree Table item to edit it

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.

Click on any Tree Table item to edit it

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.

Click on 'Save state', open or close branches, then click 'Restore state'

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.

Click on any item to select a row

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.

Click on the buttons to export the Tree Table

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.

Three-state checkboxes. Click on checkboxes and then expand the tree

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.

Try using first level filter (the 1st table) and all levels filter (the 2nd table)

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'.

Use keyboard to copy and paste tree table items

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.

Click on a 'plus' icon to browse child items