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.
npm install v-tree-data-table
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);
| 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. |
When a row is double clicked
event - Browser event
node - Node that was clicked
Mouse right click
event - Browser event
node - Node that was clicked
Called when the data should be reloaded into the items property
pagination - Pagination data from v-data-table
When a row is selected
selected - Selected Node
When a node is dropped
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
When a node is toggled
node - Node record that was toggled
To run the example, simple clone down repo and open index.html in a browser.
Tree Data Table is open-sourced software licensed under the MIT license.