Popularity
2.2
-
Activity
3.5
-
324
17
67

Description

A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.

Monthly Downloads: 0
Programming language: JavaScript
Tags: Frameworks     Testing Frameworks     Tree     vue     Treeview    
Latest version: v0.2.33

Liquor Tree alternatives and similar libraries

Based on the "Frameworks" category

Do you think we are missing an alternative of Liquor Tree or a related project?

Add another 'Frameworks' Library

Popular Comparisons

README

Liquor Tree

A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.

documentation | demos

Features

  • drag&drop
  • mobile friendly
  • events for every action
  • flexible configuration
  • any number of instances per page
  • multi selection
  • keyboard navigation
  • filtering
  • sorting
  • integration with Vuex

Installation

Npm:

$ npm install liquor-tree

Yarn:

$ yarn add liquor-tree

Live Playground

To run that demo on your own computer:

  • Clone this repository
  • npm install
  • npm run build
  • npm run storybook
  • Visit http://localhost:9001/

There are a lot of examples for you. All sources of stories are located in liquor-tree/docs/storybook/stories.

Usage

  <!-- Vue Component -->
  <template>
    <tree
        :data="items"
        :options="options"
        ref="tree"
    />
  </template>

  <script>
    import Vue from 'Vue'
    import LiquorTree from 'liquor-tree'

    Vue.use(LiquorTree)

    export default {
      ...
      data() {
        return {
          items: [
            {text: 'Item 1'},
            {text: 'Item 2'},
            {text: 'Item 3', children: [
              {text: 'Item 3.1'},
              {text: 'Item 3.2'}
            ]}
          ],
          options: {
            checkbox: true
          }
        }
      }
      ...
    }
  </script>

Development

Check out the package.jsons script section. There are 2 scripts:

  • npm run dev - it will open browser and you can play with code
  • npm run build - it will craete a module file in production mode

License

MIT


*Note that all licence references and agreements mentioned in the Liquor Tree README section above are relevant to that project's source code only.