Coder Social home page Coder Social logo

vuetify_tree_data_table's Introduction

Vuetify Tree Data Table

Tree functionality added to the Vuetify Data Table. Supports DnD sorting and moving nodes to new parents.

You must have Vuetify loaded to use this component.

Usage

NPM

npm install v-tree-data-table

Yarn

yarn add v-tree-data-table

To use simply register the component with Vue

import TreeDataTable from 'v-tree-data-table';
Vue.component('v-tree-data-table', TreeDataTable);

Props

Prop Type Required Usage
headers Array Yes Headers for the v-data-table
items Array Yes items for the v-data-table, should contain tree data. (expanded, children, loaded, depth)
pagination Object Yes Pagination object for the v-data-table
totalItems Number Yes total-items for v-data-table
loading Boolean Yes If the data is being loaded
rowsPerPageItems Array No Passed through to for v-data-table
rowsPerPageText String No Passed through to for v-data-table
selectAll [Boolean, String] No select-all for v-data-table
validDrop Function No Function that returns true or false if it is a valid drop.

Emits

dblclick

When a row is double clicked

Arguments

event - Browser event
node - Node that was clicked

contextmenu

Mouse right click

Arguments

event - Browser event
node - Node that was clicked

load

Called when the data should be reloaded into the items property

Arguments

pagination - Pagination data from v-data-table

input

When a row is selected

Arguments

selected - Selected Node

drop

When a node is dropped

Arguments

node - Node that was dropped
oldParent - The previous parent of the node
parentNode - The new parent of the node
previousSibling - The previous sibling of the node
nextSibling - The next sibling of the node
nodes - All nodes
revert - Function to revert drop

node-toggle

When a node is toggled

Arguments

node - Node record that was toggled

Example

To run the example, simple clone down repo and open index.html in a browser.

License

Tree Data Table is open-sourced software licensed under the MIT license.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.