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.
Resizing
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.
Auto-calculating
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.
Selection
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