svelte-treeview-dnd

Simple and easy-to-use JSON-based treeview component with:

• custom icons
• controlled & uncontrolled modes
• ability to disable tree nodes

Changelog

0.1.0 [BREAKING CHANGES]

• Change tree structure for future implementing dnd
• Add ability to disable nodes

Install the package

npm i svelte-treeview-dnd

Usage

• Basic usage

<script lang="ts">
    import TreeView, { type Tree } from 'svelte-treeview-dnd';

    const tree: Tree = {
		children: ['folder1', 'folder2'],
        folder1: { type: 'folder', name: 'Folder 1', id: 'folder1', collapsed: true },
		folder2: {
			type: 'folder',
			name: 'Folder 2',
			id: 'folder2',
			children: ['folder2a', 'folder2b', 'folder2c']
		},
		folder2a: { type: 'folder', name: 'Folder 2a', id: 'folder2a' },
		folder2b: { type: 'folder', name: 'Folder 2b', id: 'folder2b' },
		folder2c: { type: 'folder', name: 'Folder 2c', id: 'folder2c' }
	}
</script>

<TreeView {tree} />

• Custom icons

<script lang="ts">
    import TreeView, { type Tree } from 'svelte-treeview-dnd';

	import CustomIconFolder from '$lib/components/CustomIconFolder.svelte'
	import CustomIconFolderCollapsed from '$lib/components/CustomIconFolderCollapsed.svelte'
	import CustomIconFile from '$lib/components/CustomIconFile.svelte'

    const tree: Tree = {
		children: ['folder1', 'folder2'],
        folder1: {
			type: 'folder',
			name: 'Folder 1',
			id: 'folder1',
			collapsed: true,
			iconComponent: CustomIconFolder,
			iconComponentCollapsed: CustomIconFolderCollapsed
		},
		folder2: {
			type: 'folder',
			name: 'Folder 2',
			id: 'folder2',
			children: ['folder2a', 'folder2b', 'file']
		},
		folder2a: { type: 'folder', name: 'Folder 2a', id: 'folder2a' },
		folder2b: { type: 'folder', name: 'Folder 2b', id: 'folder2b' },
		file: { type: 'file', name: 'codument.docx', id: 'file', iconComponent: CustomIconFile }
	}
</script>

<TreeView {tree} />

To be implemented

• animation
• drag-and-drop