Description
A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.
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.
-
Cypress
Fast, easy and reliable testing for anything that runs in a browser. -
mocha
โ๏ธ simple, flexible, fun javascript test framework for node.js & the browser -
jasmine
Simple JavaScript testing framework for browsers and node.js -
halower/vue-tree
tree and multi-select component based on Vue.js 2.0 -
FrintJS
Modular JavaScript framework for building scalable and reactive applications -
Webix UI
Stable releases of Webix UI - JavaScript library for building mobile and desktop web apps -
Xeito
๐ค Xeito is a framework for building interactive web applications with Typescript and Tagged Template Literals. -
MonsterJS
Simple but powerful progressive JavaScript framework based on web components.
Appwrite - The open-source backend cloud platform
* Code Quality Rankings and insights are calculated and provided by Lumnify.
They vary from L1 to L5 with "L5" being the highest.
Do you think we are missing an alternative of Liquor Tree or a related project?
README
Liquor Tree
A Vue tree component that allows you to present hierarchically organized data in a nice and logical manner.
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.json
s script section. There are 2 scripts:
npm run dev
- it will open browser and you can play with codenpm run build
- it will craete a module file inproduction
mode
License
*Note that all licence references and agreements mentioned in the Liquor Tree README section above
are relevant to that project's source code only.