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.