Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sytanta/svelte-treeview-dnd
Simple and easy-to-use JSON-based treeview component with custom icon, controlled & uncontrolled modes support
https://github.com/sytanta/svelte-treeview-dnd
component svelte treeview
Last synced: 20 days ago
JSON representation
Simple and easy-to-use JSON-based treeview component with custom icon, controlled & uncontrolled modes support
- Host: GitHub
- URL: https://github.com/sytanta/svelte-treeview-dnd
- Owner: sytanta
- Created: 2023-02-11T04:43:31.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-02-13T16:12:57.000Z (over 1 year ago)
- Last Synced: 2024-10-11T17:24:00.237Z (28 days ago)
- Topics: component, svelte, treeview
- Language: Svelte
- Homepage: https://svelte-treeview-dnd.netlify.app
- Size: 367 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```bash
npm i svelte-treeview-dnd
```
## Usage
- Basic usage
```bash
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' }
}
```
- Custom icons
```bash
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 }
}
```
## To be implemented
- animation
- drag-and-drop