https://github.com/pratik227/quasar-qhierarchy

QHierarchy allows you to display data in hierarchy structure.
https://github.com/pratik227/quasar-qhierarchy

Last synced: about 2 months ago
JSON representation

QHierarchy allows you to display data in hierarchy structure.

• Host: GitHub
• URL: https://github.com/pratik227/quasar-qhierarchy
• Owner: pratik227
• License: mit
• Created: 2020-01-04T08:37:10.000Z (almost 5 years ago)
• Default Branch: next
• Last Pushed: 2024-10-19T23:48:14.000Z (about 2 months ago)
• Last Synced: 2024-10-24T12:09:58.474Z (about 2 months ago)
• Language: Vue
• Homepage: https://next-quasar-qhierarchy.netlify.app
• Size: 5.64 MB
• Stars: 41
• Watchers: 5
• Forks: 10
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

• quasar-awesome - QHierarchy

README

        
# QHierarchy

QHierarchy is a [Quasar App Extension](https://quasar.dev/app-extensions/introduction).  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):

```bash

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](https://github.com/pratik227/quasar-qhierarchy).

# Docs

can be found [here](https://next-quasar-qhierarchy.netlify.app/).

# Demo (source) Project.

can be found [here](https://github.com/pratik227/quasar-qhierarchy/tree/next/demo).

# 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](https://github.com/sponsors/pratik227)

Be sure to check out my sponsor page.

Thank you so much!!!