svelte-treeview Svelte Themes

Svelte Treeview

demo

svelte-treeview

installation

npm i @bolduh/svelte-treeview

usage

<TreeView emptyTreeMessage="nothing to show" selectable root={root} childrenAccessor={accessor} nodeTemplate={Node} filter={nodefilter} ></TreeView>

The treeview display a tree data structure that must inherit from TVNode

export interface TVNode {
    children : TVNode[]; // list of children (may be undefined if no children)
    id:any; // unique identifier
}

We will assume that NodeType is the node type of our treeview for now on.

TreeView attributes:

  • root (NodeType): the full tree datastructure
  • emptyTreeMessage (string) : message to display when filter do not return any node
  • selectable (boolean, default is false) : if set add checkbox in front of every node/leaf
  • nodeTemplate : a svelte component used to render nodes and leafs. it must accept an attribute data of the node type (NodeType)
  • filter ((node:NodeType, filter:string ) => boolean ): a function used to filter nodes on a simple text input. if not set no search widget is displayed. returns true if the node matches the filter.
  • for custom filters. The TreeView can accept custom filters. A filter must be mapped to a typescript interface, there is no constraint on the type. for now on this class will be customFilter
    • complexFilter((node:NodeType, filter:CustomFilter) => boolean). A function that returns true if the node matches the filter
    • filterTemplate : a svelte component displaying the custom filter. It must throw a filterChanged event whenever the filter change. the event payload must be an object of type CustomFilter

TreeView events:

The TreeView could raise a selectionChanged event whenever a node is selected / deselected (when node selection is enabled with selectable attribute). The event payload contains a list of NodeType : NodeType[]

styling a TreeView


Use the following CSS template in your svelte app to customize tree icons (using emojis). 


<style>

// hide the default triangle   
:global(summary[ref="withStyle"]) {
  display: block;
}

// set βž• as the closed node icon
:global(.tv-node[ref="withStyle"]::before) {
  margin-left: 1ch;
  display: inline-block;
  content: 'βž•';
  transition: 0.2s;
}

// set βž– as the opened node icon
:global(details[ref="withStyle"][open] > .tv-node::before) {  
  content: 'βž–';
  transition: 0.2s;
}

// set πŸ¦ΈπŸ»β€β™‚οΈ as the leaf icon
:global(.tv-leaf[ref="withStyle"]::before) {
        content: 'πŸ¦ΈπŸ»β€β™‚οΈ'
    }
</style>

<TreeView 
  emptyTreeMessage="Mikey Mouse" 
  ref="withStyle" 
  {root} {childrenAccessor} 
  nodeTemplate={Node} 
  {filter}></TreeView>

Top categories

Loading Svelte Themes