DevExtreme Vue - Overview

The TreeView widget is a tree-like representation of textual data.

View Demo Watch Video

The following code adds a simple TreeView to your page:

jQuery
HTML
JavaScript
<div id="treeViewContainer"></div>
$(function() {
    $("#treeViewContainer").dxTreeView({
        dataSource: [{
            id: '1',
            text: 'Fruits',
            expanded: true,
            items: [
                { id: '1_1', text: 'Apples' },
                { id: '1_2', text: 'Oranges' }
            ]
        }, {
            id: '2',
            text: 'Vegetables',
            expanded: true,
            items: [
                { id: '2_1', text: 'Cucumbers' },
                { id: '2_2', text: 'Tomatoes' }
            ]
        }]
    });
});
Angular
HTML
TypeScript
<dx-tree-view
    [dataSource]="hierarchicalData">
</dx-tree-view>
import { DxTreeViewModule } from "devextreme-angular";
// ...
export class AppComponent {
    hierarchicalData = [{
        id: '1',
        text: 'Fruits',
        expanded: true,
        items: [
            { id: '1_1', text: 'Apples' },
            { id: '1_2', text: 'Oranges' }
        ]
    }, {
        id: '2',
        text: 'Vegetables',
        expanded: true,
        items: [
            { id: '2_1', text: 'Cucumbers' },
            { id: '2_2', text: 'Tomatoes' }
        ]
    }];
}
@NgModule({
    imports: [
        // ...
        DxTreeViewModule
    ],
    // ...
})

Note that the data source in the code above has a hierarchical structure, however, it also supports data sources with a plain structure. See the Use Hierarchical Data and Use Plain Data articles to learn how you can customize hierarchical and plain data sources.

See Also