https://github.com/mayank091193/quasar-draggable-tree

QDraggableTree is a component that displays hierarchical data with drag and drop ability.
https://github.com/mayank091193/quasar-draggable-tree

app-extension javascript quasar-application quasarframework vuejs

Last synced: 3 months ago
JSON representation

QDraggableTree is a component that displays hierarchical data with drag and drop ability.

• Host: GitHub
• URL: https://github.com/mayank091193/quasar-draggable-tree
• Owner: mayank091193
• License: mit
• Created: 2020-02-22T16:19:22.000Z (almost 5 years ago)
• Default Branch: next
• Last Pushed: 2023-07-05T06:34:24.000Z (over 1 year ago)
• Last Synced: 2024-05-23T09:33:19.263Z (8 months ago)
• Topics: app-extension, javascript, quasar-application, quasarframework, vuejs
• Language: JavaScript
• Homepage: https://next-quasar-draggable-tree.netlify.com/
• Size: 692 KB
• Stars: 75
• Watchers: 6
• Forks: 19
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• quasar-awesome - QDraggableTree

README

        
# QDraggableTree (Supports Vue3)

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

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):

```bash

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](https://github.com/mayank091193/quasar-draggable-tree).

# Docs

can be found [here](https://next-quasar-draggable-tree.netlify.com).

# Examples

can be found [here](https://next-quasar-draggable-tree.netlify.com).

# Demo Project.

can be found [here](https://github.com/mayank091193/quasar-draggable-tree/tree/next).

# Roadmap

Default Expansion