Skip to content

KeenMate/svelte-treeview

Repository files navigation

Svelte Treeview

The most elaborate treeview for svelte on earth (or even in our galaxy).

Features

  • load new nodes when expanding
  • choose what object properties to use to get necessary information (id, path, ...)
  • enable checkboxes on whole tree or just per node
  • recursive seletion mode, where leafes can be selected
  • build-in support for search
  • drag and drop functionality controlable per node
  • context menu
  • keyboard navigation

Instalation

install the package @keenmate/svelte-treeview using your favourite package manager.

Warning

Font awesome is required for expand/collapse icons. If you wish to not use FA, you need to change all icons in classes properties

Minimal usage

Tree and treeId are only mandatory attributes. Tree has to be list of nodes. Only mandatory property of node is nodePath. You can specify which keys to use for what properties by setting props.

<script lang="ts">
 import { TreeView } from '$lib/index.js';

 let tree = [
  { nodePath: 'animals', title: 'Animals', hasChildren: true },
    //...
  { nodePath: 'animals.insects.butterflies', title: 'Butterflies' }
 ];
</script>

<TreeView {tree} treeId="my-tree" let:node>
 {node.title}
</TreeView>

For more examples see src/routes/

Note

Both id and path is required for tree to work. By default tree uses nodePath property for both. So if you change propery fro path, you need to also change id property. You can change both using props attribute.

Properties

Name Type Default Description
treeId string value used to generate ids of nodes
tree array of nodes represents tree strucuture
value array of selected nodeIds []
verticalLines bool false show vertical guide lines
readonly bool false dont allow selection and drag and drop
separator string "."
recursiveSelection bool false changes behavior of selection, see Selection
selectionMode SelectionModes none changes selection mode, see Selection
onlyLeafCheckboxes bool false hides non leaf checkboxed, see Selection
hideDisabledCheckboxes bool false hides checkboxes instead of disabling, see Selection
loadChildrenAsync ExpandedCallback null function that is called when node is expanded, see Async loading
showContextMenu bool false On right click dispaly context menu defined in context-menu slot, see Context menu
expansionThreshold number 0 Expand all nodes when there is less than number provided
customClasses Partial {} changes classes used on same elements, see Custom classes
filter (node: Node) => boolean or null null function that is used for fitlering. It is called on every node
dragAndDrop bool false enables drag and drop, see Drag and drop
dropDisabledCallback (draggendNode: Node, targetNode: Node) => Promise or null null function called when draging over new node, see Drag and drop
useKeyboardNavigation bool false enables keyboard navigation , see Keyboard navigation
logger ((...data: any[]) => void) or null null function that acts as logger for tree, mostly used for debugging

Selection

Async loading

Context menu

Custom classes

Drag and drop

Note

In memory drag and drop is not yet supported. Tree just dispatches moved event with dragged node(node), target node (target) and insertion type (insertType). In future, this package will export function, that will allow you to easily compute new tree on frontend.

Keyboard navigation

Enable keyboard navigation by setting useKeyboardNavigation to true.

Use arrows to navigata tree. First you need to focus some node, you can use focusNode to do that. Use Enter or Space to select checkbox.