oda-framework/components/grids/table/tree/index.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<oda-tester>
    <oda-tree id="tree" key-name="col1" show-tree-lines auto-expand-alone></oda-tree>
</oda-tester>

<script type="module">
    import '../../../../oda.js';
    import './tree.js';
    tree.dataSet = [
        {col1:"2 строка", fix: false,
            items:[
                {col1:"2.1 строка"},
                {col1:"2.2 строка",
                    items:[
                        {col1:"2.2.1 строка", template: 'my-next-template'},
                        {col1:"2.2.2 строка"},
                        {col1:"2.2.3 строка"},
                        {col1:"2.2.4 строка"},
                        {col1:"2.2.5 строка"},
                        {col1:"2.2.6 строка"},
                        {col1:"2.2.7 строка", template: 'my-template'},
                        {col1:"2.2.8 строка"},
                        {col1:"2.2.9 строка"},
                        {col1:"2.2.10 строка"}
                    ]},
                {col1:"2.3 строка",
                    items: [
                        {col1:"2.3.1 строка"},
                    ]
                },
                {col1:"2.4 строка"},
                {col1:"2.5 строка"}
            ]
        },
        {col1:"1 строка", icon: 'class', template: 'my-template'},
        {col1:"3 строка",
            items:[
                {col1:"3.1 строка"},
                {col1:"3.2 строка"},
                {col1:"3.3 строка", template: 'my-template'},
                {col1:"3.4 строка"},
                {col1:"3.5 строка", template: 'my-template'},
                {col1:"3.6 строка"},
                {col1:"3.7 строка"},
                {col1:"3.8 строка"},
                {col1:"3.9 строка"},
                {col1:"3.10 строка"}
            ]
        },
        {col1:"4 строка"},
        {col1:"5 строка",
            items:[
                {col1:"5.1 строка"},
                {col1:"5.2 строка",
                    items:[
                        {col1:"5.2.1 строка"},
                        {col1:"5.2.2 строка"},
                        {col1:"5.2.3 строка"},
                        {col1:"5.2.4 строка"},
                        {col1:"5.2.5 строка"},
                        {col1:"5.2.6 строка"},
                        {col1:"5.2.7 строка"},
                        {col1:"5.2.8 строка"},
                        {col1:"5.2.9 строка"},
                        {col1:"5.2.10 строка"}
                    ]},
                {col1:"5.3 строка"},
                {col1:"5.4 строка"},
                {col1:"5.5 строка"},
                {col1:"5.6 строка"},
                {col1:"5.7 строка"},
                {col1:"5.8 строка"},
                {col1:"5.9 строка"},
                {col1:"5.10 строка"}
            ]
        },
        {col1:"6 строка"},
        {col1:"7 строка",
            items:[
                {col1: 'новая ветка'}
            ]},
        {col1:"8 строка"},
        {col1:"9 строка"},
        {col1:"10 строка"}
    ];


    ODA({is: 'my-template', imports: '@oda/icon', template:`
            <style>
                :host{
                    @apply --horizontal;
                    align-items: center;
                }
            </style>
            <oda-icon icon="class"></oda-icon>
            <span>{{item[column.name]}}</span>`,
        $public: {
            column:{},
            item:{}
        }
    });
    ODA({is: 'my-next-template', imports: '@oda/icon', template:`
            <style>
                :host{
                    @apply --horizontal;
                    align-items: center;
                }
            </style>
        <oda-icon icon="object" style="background-color: #0aa7e8"></oda-icon>
        <span  style="background-color: #0aa7e8">2.2.1. Моя строка</span>`,
        $public: {
            column:{},
            item:{}
        },
    });
</script>