A full featured Svelte TreeView component for the rest of us!
About • Features • Usage • Demos • Samples
At last... a full featured tree component for the Svelte eco-system.
This package is a port of the excellent he-tree, ported from Vuejs 3 to Svelte 5. It took me a long time to adjust to the vuejs syntax, learn svelte 5, port sub-components svelte-virtuallists and port the code. Many thanks to the original author, this project would have not made it if the code was not opensourced.
At this point, I can confidently state that Svelte 5 has a natural syntax, breaking away from other frameworks without sacrificing features or performance.
-
❺❺➎⓹⓹ Svelte 5+ only Build for Svelte 5+ in Typescript.
-
🚀 Performant Can render large tree elements, thanks to its optimization with svelte-virtuallists.
-
🛠 Configurable Headless, themeable, unobtrusive, easily adjustable, with built-in styling and behavioral parameters.
-
💠 Advanced Features Headless, Drag and drop, Key controls, Tree and tabular shaped data, Checkboxes, Indetermined state, Right to left...etc.
-
🧩 Programming Interface Powerful API and events to integrate in all your projects.
-
💼 Small Compact, one dependency – Only ~7kb when compressed.
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ | 11 ✔ |
npm i svelte-treeviews
<script>
import { Tree } from 'svelte-treeviews';
const data = [{text:'A'},{ text:'B'}, { text:'C', children: [{ text:'C1'},{ text:'C2'},{ text:'C3'}]} ];
</script>
<Tree class='mystyle' style='width:100%;height=600px' model={data}>
</Tree>The component accepts the following properties
| Property | Type | Required? | Description |
|---|---|---|---|
| model | NodeData[] |
✓ | the model, the data for the items to display in the list. |
| updateBehavior | modify or new or disabled (modify) |
||
| indent | number (20) | Node indent in pixels | |
| scrollable | boolean (false) | is the tree rendered as part of a scrollable viewport | |
| scrollablePrerenderCount | number (20) | Used for SSR, when scrollable is active: how many records to pre-render | |
| defaultOpen | boolean (false) | When true, the tree displays as fully open, at all levels. | |
| rtl | boolean (system default) | Right to Left rendering | |
| btt | boolean (false) | Bottom to top rendering inverses the tree upside down | |
| treeLineStyle | none or singleline or orthogonal (none) |
Render tree lines that connect each node of the tree with different styles. | |
| treeLineOffset | number (8) | Horizontal displacement of tree lines in pixels | |
| class | string | Any css class to apply on the tree | |
| style | string | Any css styles to apply on the tree |
NodeDatais a generic type
| Property | attributes | Required? | Description |
|---|---|---|---|
| tree_slot | { data: NodeData, info: NodeInfo, tree: Tree } | ✓ | Snippet called to render every visible item of the model |
| treeLine | { data: NodeData, info: NodeInfo, tree: Tree } | Snippet which can be used to customize how tree lines are rendered | |
| placeholder | { tree: Tree} | Snippet which can be used to customize the drop placeholder UI |
Tree state events
| Property | Type | Description |
|---|---|---|
| onNodeChecked | (NodeInfo):void |
Triggered when a node is checked |
| onNodeSelected | (NodeInfo):void |
Triggered when a node is selected |
| onNodeOpened | (NodeInfo):void |
Triggered when a grouping node is opened |
| onNodeClosed | (NodeInfo):void |
Triggered when a grouping node is closed |
| onUpdateValue | (NodeInfo):void |
Triggered when node value changes, or batch update completed - behavioe depends up updateBehavior |
Positioning events
| Property | Type | Description |
|---|---|---|
| onAfterScroll | {offset:number, event} |
When scrollable is used, fires when the scrollbar changes position. |
| onVisibleRangeUpdate | {start:number, end:number} |
When scrollable is used, fires when the visible window is sliding to display new items. start and end are expressed as model indexes. |
Drag&Drop events
| Property | Type | Description |
|---|---|---|
| onBeforeDragStart | dragNode | Triggered before drag start |
| onAfterDrop | Triggered after drop. Only triggered on dropped tree | |
| onDropChange | Triggered after changed by drop. Triggered on both 2 trees when drag cross trees | |
| onDragEnter | DragEvent | Triggered when drag enter a tree |
| onDragLeave | DragEvent | Triggered when drag leave a tree |
| API Function | Type | Description |
|---|---|---|
| add | `(nodeData:NodeData, parent: NodeInfo | undefined, index?: number): void` |
| addMulti | (dataArr: any[], parent?: NodeInfo, startIndex?: number | null ): void |
Add multiple continuously nodes. parent is null means roo |
| batchUpdate | (task: () => any): void |
Merge multiple data updates, events are only riased once |
| closeAll | (): void |
Close all nodes. |
| getChecked | (withDemi?: boolean): NodeInfo[] | Get all checked nodes. Param withDemi means including half checked |
| getData | (filter?: ((data: never) => never), root?: NodeInfo): NodeData[]; | Generate and get current data without stat. Param filter can handle each node data |
| getSiblings | (node: NodeInfo): NodeInfo[]; | Get all siblings of a node including it self. |
| getNodeInfo | (node:NodeData): NodeInfo | Get stat by node data. |
| getUnchecked | (withDemi?: boolean): NodeInfo[] | Get all unchecked nodes. Param withDemi means including half checked. |
| has | (nodeData: unknown): boolean | Detect the tree if has the stat of given node data. |
| isVisible | (node: NodeInfo |NodeData): boolean | Detect if node is visible. When parent invisible or closed, children are invisible. The parameter can n be a nodeInfo or a nodeData. |
| iterateParent | (node: NodeInfo, opt?: { withSelf: boolean }): Generator | Iterate all parents of a node. Param opt.withSelf means including it self |
| move | (node:NodeInfo, parent?: NodeInfo, index: number): boolean | Move node. parent is null means root. Similar to add, check the example of add |
| openAll | (): void | Open all nodes |
| openNodeAndParents | (node: NodeData | NodeInfo): void | Open a node and its all parents to make it visible. The argument nodeDataOrInfo can be node data or node info |
| remove | (node:NodeInfo): boolean | Remove node. |
| removeMulti | (dataArr: any[]): boolean | Remove multiple nodes, ensure only one change event is raised |
| updateCheck | (): void | Recalculate checked state of all nodes from end to root. |
NodeData
NodeData is a generic type representing the custom user data of each node. NodeData[] is typically given as the model amd processes as items in snippets or events
NodeInfo
NodeInfo is a superset of NodeData. It stores the metadata used by the tree to render and process the tree structure properly.
interface NodeInfo<T> {
// user data
data: T;
// pointer to parent node, undefined for top node
parent?: NodeInfo<T>;
// list of children, grouping nodes will have children.length > 0
children: NodeInfo<T>[];
// is the node open?
expended: boolean;
// depth, 0 is top level
level: number = 0;
// is the node hidden?
hidden: boolean;
// is the checkbox active? 0 means indetermined
checked: boolean | 0;
// is the node draggable? undefined means inherit parent
draggable?: boolean;
// is the node droppable? undefined means inherit parent
droppable?: boolean;
// any style to apply to this node, undefined means inherit parent
style?: string;
// any class to apply to this node, undefined means inherit parent
class?: string;
}DragContext
DragContext provides the context is which a drag&drop action is run.
StartInfo
{
tree: DraggableTreeType; // Draggable component instance.
dragNode: NodeInfo<T>; // The dragging node.
parent: NodeInfo<T> | null; // Parent of dragging node.
siblings: NodeInfo<T>[]; // Siblings of dragging node.
indexBeforeDrop: number; // Index of dragging node before drop.
}Please read CODE OF CONDUCT and the CONTRIBUTION guide for more details.