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.
