QDraggableTree (Supports Vue3)

QDraggableTree is a Quasar App Extension. It is a component that displays hierarchical data with drag and drop ability.

Support

If this helped you, you can contribute to this project by supporting me:

💜 Support my open-source work on GitHub

Please check out my sponsor page.

(GitHub currently doubles your support! So if you support me with $5/mo, I will get $10 instead! 😉)

Thank you very much!!

NPM Package: https://www.npmjs.com/package/quasar-app-extension-qdraggabletree

Install

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

quasar ext add qdraggabletree

After version 0.0.4, it is mandatory to have children object (Ex. children: []) even if the item has no children present.

Uninstall

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

quasar ext remove qdraggabletree

Defining the data

    [
        {
            id: 1,
            label: 'Satisfied customers',
            children: [
                {
                    id: 2,
                    label: 'Good food',
                    children: [
                        {
                            id: 3,
                            label: 'Quality ingredients',
                            children: [],
                        },
                        {
                            id: 4,
                            label: 'Good recipe',
                            children: [],
                        }
                    ]
                },
                {
                    id: 5,
                    label: 'Good service',
                    children: [
                        {id: 6, label: 'Prompt attention', children: [],},
                        {id: 7, label: 'Professional waiter', children: [],}
                    ]
                },
                {
                    id: 8,
                    label: 'Pleasant surroundings',
                    children: [
                        {id: 9, label: 'Happy atmosphere', children: [],},
                        {id: 10, label: 'Good table presentation', children: [],},
                        {id: 11, label: 'Pleasing decor', children: [],}
                    ]
                }
            ]
        }
    ]

Source

can be found here.

Docs

can be found here.

Examples

can be found here.

Demo Project.

can be found here.

Roadmap

Default Expansion