QHierarchy

QHierarchy is a Quasar App Extension. It allows you to display data in hierarchy structure on your page.

Install

To add this App Extension to your Quasar application, run the following (in your Quasar app folder):

quasar ext add qhierarchy

Uninstall

To remove this App Extension from your Quasar application, run the following (in your Quasar app folder):

quasar ext remove qhierarchy

Defining the columns

[
    {
        name: 'label',
        label: 'Label',
        align: 'left',
        field: 'label',
        // (optional) tell QHierarchy 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",
                        }
                    ],
                }
            ],
    }
 ]

Source

can be found here.

Docs

can be found here.

Demo (source) Project.

can be found here.

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!!!