npm i @bolduh/svelte-treeview
<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.
NodeType
): the full tree datastructurestring
) : message to display when filter do not return any nodeboolean
, default is false) : if set add checkbox in front of every node/leafdata
of the node type (NodeType
)(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
. customFilter
(node:NodeType, filter:CustomFilter) => boolean
). A function that returns true if the node
matches the filter
filterChanged
event whenever the filter change. the event payload must be an object of type CustomFilter
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[]
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>