DevExtreme React - Use Hierarchical Data

For an example of hierarchical data, see the following code snippet.

JavaScript
var hierarchicalData = [{
    id: '1',
    text: 'Fruits',
    items: [
        { id: '1_1', text: 'Apples' },
        { id: '1_2', text: 'Oranges' }
    ]
}, {
    id: '2',
    text: 'Vegetables',
    items: [
        { id: '2_1', text: 'Cucumbers' },
        { id: '2_2', text: 'Tomatoes' }
    ]
}];

View Demo

As you can see, all items in a hierarchical data source have the id and text fields, and items with children have the items field. Those are conventional field names defined by the Default Item Template pattern. To use other names, change the keyExpr, displayExpr and itemsExpr options, respectively.

jQuery
JavaScript
var hierarchicalData = [{
    key: '1',
    name: 'Fruits',
    children: [
        { key: '1_1', name: 'Apples' },
        { key: '1_2', name: 'Oranges' }
    ]
}, {
    key: '2',
    name: 'Vegetables',
    children: [
        { key: '2_1', name: 'Cucumbers' },
        { key: '2_2', name: 'Tomatoes' }
    ]
}];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: hierarchicalData,
        keyExpr: 'key',
        displayExpr: 'name',
        itemsExpr: 'children'
    });
});
Angular
HTML
TypeScript
<dx-tree-view
    [dataSource]="hierarchicalData"
    keyExpr="key"
    displayExpr="name"
    itemsExpr="children">
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    hierarchicalData = [{
        key: '1',
        name: 'Fruits',
        children: [
            { key: '1_1', name: 'Apples' },
            { key: '1_2', name: 'Oranges' }
        ]
    }, {
        key: '2',
        name: 'Vegetables',
        children: [
            { key: '2_1', name: 'Cucumbers' },
            { key: '2_2', name: 'Tomatoes' }
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Frequently, the id of an item is also its text. In this case, set both the keyExpr and displayExpr options to a single value.

jQuery
JavaScript
var hierarchicalData = [{
    name: 'Fruits',
    items: [
        { name: 'Apples' },
        { name: 'Oranges' }
    ]
}, {
    name: 'Vegetables',
    items: [
        { name: 'Cucumbers' },
        { name: 'Tomatoes' }
    ]
}];

$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: hierarchicalData,
        keyExpr: 'name',
        displayExpr: 'name'
    });
});
Angular
HTML
TypeScript
<dx-tree-view
    [dataSource]="hierarchicalData"
    keyExpr="name"
    displayExpr="name">
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    hierarchicalData = [{
        name: 'Fruits',
        items: [
            { name: 'Apples' },
            { name: 'Oranges' }
        ]
    }, {
        name: 'Vegetables',
        items: [
            { name: 'Cucumbers' },
            { name: 'Tomatoes' }
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})
See Also