Webix TreeGrid Web Widget Overview

Webix
Webix
May 30 · 4 min read

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:

  • Editing;
  • Filtering;
  • Saving current TreeGrid state;
  • Data export to Excel, PNG and PDF;
  • Selecting modes;
  • Checkboxes;
  • Sparklines;
  • Clipboard support.

Let’s consider each feature in greater detail.

Editing

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.

Filtering

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

With JavaScript TreeGrid you can export data to Excel, PDF, and PNG files in order to process them afterwards. It’s also possible to specify the visual appearance of the table by adding different export options.

Selecting modes

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.

Checkboxes

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.

Sparklines

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.

Clipboard support

This feature allows copying and pasting data items within the TreeTable and to other components. There are such modes as ‘repeat’, ‘selection’, and ‘block’.

Bottom line

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.

Webix

Written by

Webix

#JavaScript UI library for #cross-platform #web app development with 99+ #UI widgets and fully-featured #CSS / #HTML5 JavaScript controls. www.webix.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade