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.