Компонент **Tree** предназначен для вывода иерархических данных в виде дерева.

Для использования этого компонента необходимо подключить модуль «**tree.js**» и добавить в HTML-код пользовательский тэг \<**oda-tree**>.

Например:

```javascript _run_line_edit_loadoda_[my-component.js]_h=120_
import '/components/grids/tree/tree.js';
ODA({
    is: 'my-component',
    template: `
        <oda-tree :data-set key-name="col1"></oda-tree>
    `,
    props: {
        dataSet: [
            {col1: "1 строка"},
            {col1:"2 строка",
                items:[
                    {col1:"2.1 строка"},
                    {col1:"2.2 строка",
                    items:[
                        {col1:"2.2.1 строка"},
                        {col1:"2.2.2 строка"},
                        {col1:"2.2.3 строка"},
                    ]},
                    {col1:"2.3 строка"}
                ]
            },
            {col1:"3 строка"},
        ],
    }
});
```

Исходные данные для компонента хранятся в виде массива объектов в свойстве **dataSet**. Элементы этого массива будут отображаться в виде отдельных узлов дерева. Каждый объект может содержать вложенный массив элементов **items**, объекты которого будут отображаться на следующем иерархическом уровне.

Имя свойства, значение которого должно использоваться в качестве надписи узлов дерева, необходимо указать в атрибуте **key-name** компонента, при условия, что оно отличается от значения **name**, принятого для надписей узлов по умолчанию. В данном примере для надписи узлов дерева используется свойство объектов **col1**.
