Skip to content

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

License

Notifications You must be signed in to change notification settings

pratik227/vue-hierarchy

Repository files navigation

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:

Be sure to check out my sponsor page.

Thank you so much!!!

About

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

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Sponsor this project

 

Packages

No packages published