DevExtreme Vue - Use Hierarchical Data

If you use hierarchical data, set the dataStructure option to 'tree'. For an example of hierarchical data, see the following code.

jQuery
JavaScript
var hierarchicalData = [{
    fullName: "John Heart",
    position: "CEO",
    city: "Los Angeles",
    items: [{
        fullName: "Samantha Bright",
        position: "COO",
        city: "Los Angeles",
        items: [{
            fullName: "Kevin Carter",
            position: "Shipping Manager",
            city: "Los Angeles"
        }]
    }]
}, {
    fullName: "Robin Cosworth",
    position: "Shipping Assistant",
    city: "Los Angeles"
}];

$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: hierarchicalData,
        dataStructure: 'tree'
    });
});
Angular
TypeScript
HTML
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    hierarchicalData = [{
        fullName: "John Heart",
        position: "CEO",
        city: "Los Angeles",
        items: [{
            fullName: "Samantha Bright",
            position: "COO",
            city: "Los Angeles",
            items: [{
                fullName: "Kevin Carter",
                position: "Shipping Manager",
                city: "Los Angeles"
            }]
        }]
    }, {
        fullName: "Robin Cosworth",
        position: "Shipping Assistant",
        city: "Los Angeles"
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})
<dx-tree-list
    [dataSource]="hierarchicalData"
    dataStructure="tree">
</dx-tree-list>

All items with children have the items field. If you use another name for this field, specify it in the itemsExpr option.

jQuery
JavaScript
var hierarchicalData = [{
    fullName: "John Heart",
    position: "CEO",
    city: "Los Angeles",
    children: [{
        fullName: "Samantha Bright",
        position: "COO",
        city: "Los Angeles",
        children: [{
            fullName: "Kevin Carter",
            position: "Shipping Manager",
            city: "Los Angeles"
        }]
    }]
}];

$(function() {
    $("#treeListContainer").dxTreeList({
        dataSource: hierarchicalData,
        dataStructure: 'tree',
        itemsExpr: 'children'
    });
});
Angular
HTML
TypeScript
<dx-tree-list
    [dataSource]="hierarchicalData"
    dataStructure="tree"
    itemsExpr="children">
</dx-tree-list>
import { DxTreeListModule } from "devextreme-angular";
// ...
export class AppComponent {
    hierarchicalData = [{
        fullName: "John Heart",
        position: "CEO",
        city: "Los Angeles",
        children: [{
            fullName: "Samantha Bright",
            position: "COO",
            city: "Los Angeles",
            children: [{
                fullName: "Kevin Carter",
                position: "Shipping Manager",
                city: "Los Angeles"
            }]
        }]
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeListModule
    ],
    // ...
})

When you load data from a remote source, and your data objects have a field that defines whether a row has nested rows, assign this field name to the hasItemsExpr option. It will notify the widget which rows do not need the expand button.

See Also