Documentation

Treetable

API Reference

Overview

Ui-related treetable inherits from view. Being a hybrid between DataTable and tree it shares a number of their properties and methods.

Initialization

Note that you need to set {common.treetable()} template for a column that should display the tree. Otherwise, you'll get standard datatable.

webix.ui({
    view:"treetable",
    columns:[
        { id:"id",  header:"", width:50},
        { id:"value", header:"Film title", template:"{common.treetable()} #value#"},
        { id:"chapter", header:"Mode",  width:200}
    ],
    data: "..." //dataset, variable or path
})

Related sample:  Basic initialization

Tree table is populated with hierarchical data coming in XML and JSON data formats. IDs of the coulmns must coincide with data keys from the initial dataset

Working with Treetable

Common tasks here include the following and coincide with those of the datatable and tree:

1 . Data Loading including Dynamic Loading of large datasets inportions;

Related sample:  Static and dynamic loading

2 . Filtering - built-in and custom filtering in various filter modes;

Related sample:  Filtering in TreeTable

3 . Selection by cells, row and columns in multiselect and blockselect modes;

Related sample:  Selecting items in TreeTable

4 . Item Editing by click or dblclick or any custom action;

Related sample:  Editing data in TreeTable

5 . Using Math in Treetable - built-in logic for storing data as mathematic formulas as well as editing these formulas directly in treetable.

Related sample:  Using formulas

6 . Data Grouping - built-in logic for preseting hierarchical data in a tree-like manner;

Related sample:   Aggregating data while grouping

7 . Data Export to Excel and PDF

Related sample:  Export to PDF, Excel

8 . Copy-Paste Operations

Related sample:  Different copy-paste modes

Related Articles

Back to top