TreeGrid Feature Details

On this page, we describe the key functionality of the DHTMLX TreeGrid widget. You can use it along with other 20+ UI widgets of the Suite library or download it as a standalone component.

Drag-n-Drop of Columns and Rows
DHTMLX TreeGrid allows reordering columns and rows between grids with a single click. You can choose between 3 modes of dragging rows inside and between grids, as well as disable this functionality for a separate column of the grid.
Editable Data
You can set the editing feature to empower users to modify text in the whole grid or the specified columns only. Our TreeGrid offers several types of column editors, including an input and textarea for modifying cells with a text, date picker for cells with dates, select and combo box for cells with several options to choose from, and checkbox for cells with a two-state tick box.
Filtering and Sorting
By default, the TreeGrid widget allows sorting the content of any column by clicking on its header. You may disable this option or set a custom function for sorting. Moreover, you can apply filtering rules to headers and add a text field or a drop-down list with options to choose from.
Formatting Columns
You can define a format for numeric values to display in the cells of a TreeGrid column. The widget allows working with integer and fractional numbers, setting thousand and decimal separators, displaying the percentage value, and using the desired format for dates.
By default, users cannot resize TreeGrid columns since they have fixed width. However, you can make all or several columns resizable thus enabling users to change their width by dragging the right border with the mouse.
Export to XLSX and CSV
You can easily export data from the TreeGrid widget to Excel or CSV formats. The functionality is available via an Export module.
Autosize for Columns
DHTMLX TreeGrid allows you to configure column settings so that the width and height of its cells will automatically adjust to their content. You can also set the width of the column and make text splittable into multiple lines when it’s longer than the place it should fit.
The TreeGrid widget can automatically calculate and display the total value of cells in the footer of a grid.
Grouping Data
You can make TreeGrid data well-structured by classifying the content based on two specific criteria: by values of the specified column or the result of their calculation.
Frozen Columns
Columns and rows in DHTMLX TreeGrid can be fixed when the rest remain scrollable. You just need to set the number of left-sided columns you have to froze in the settings.
With DHTMLX TreeGrid, you can highlight its elements according to the selected mode. You may choose to move selection between grid rows or its cells as well as highlight both a selected cell and the row it is related to.
Custom HTML content
You can add custom content to each TreeGrid cell or the particular columns of your data table. Moreover, it's possible to set event handlers to the HTML elements defined in the data set of the widget.
Wide Customization
You are free to modify the overall look and feel of the TreeGrid via API methods or custom CSS classes. You can paint the background, style header and footer cells, change the appearance of rows and cells, add custom marks, and much more. Besides, our TreeGrid widget supports tooltips customization allowing you to manage the displayed content.

Estimate All UI Widgets

Create functional and easy-to-use web apps and interfaces, as well as save up to 40% by downloading the whole Suite UI library. You can benefit from:

Full toolkit of 20+ widgets

30 days of free trial

PRO features

Official technical support