Vue Hierarchy

Vue-Hierarchy is a npm package that allows you to display data in hierarchy structure on your page.

Install

To add this npm package run the following (in your vue js app folder):

npm install vue-hierarchy

Uninstall

To remove this npm package form vue js project:

npm  uninstall vue-hierarchy

Defining the columns

[
    {
        name: 'label',
        label: 'Label',
        align: 'left',
        field: 'label',
        // (optional) tell VueHierarchy you want this column sortable
        sortable: true
    },
    {
        name: 'Description',
        label: 'Description',
        sortable: true,
        field: 'description',
        align: 'center',
    },
    {
        name: 'note',
        label: 'Note',
        sortable: true,
        field: 'note',
        align: 'left',
    }
],

Defining Data

 [
        {
            label: "Node 1",
            description: "Node 1 description",
            note: "Node 1 note",
            children: [
                {
                    label: "Node 1.1",
                    description: "Node 1.1 description",
                    note: "Node 1.1 note",
                },
                {
                    label: "Node 1.2",
                    description: "Node 1.2 description",
                    note: "Node 1.2 note",
                    children: [
                        {
                            label: "Node 1.2.1",
                            description: "Node 1.2.1 description",
                            note: "Node 1.2.1 note",
                        },
                        {
                            label: "Node 1.2.2",
                            description: "Node 1.2.2 description",
                            note: "Node 1.2.2 note",
                        }
                    ],
                }
            ],
    }
 ]

Sponsors

Support

If this helped you in any way, you can contribute to this project for long term survival by supporting me:

💜 Support my open-source work on GitHub

Be sure to check out my sponsor page.

Thank you so much!!!