Popularity
2.3
Growing
Activity
0.0
Declining
351
17
73

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
License: MIT License
Tags: Frameworks     Testing Frameworks     Tree     vue     Treeview    
Latest version: v0.2.33

Liquor Tree alternatives and similar libraries

Based on the "Frameworks" category.
Alternatively, view Liquor Tree alternatives based on common mentions on social networks and blogs.

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

Add another 'Frameworks' Library

Popular Comparisons

SaaSHub - Software Alternatives and Reviews
Sponsored www.saashub.com

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.