Tree View

Display hierarchical data in a tree structure

npm run add TreeView

Use the TreeView component to display hierarchical data in a collapsible and expandable tree structure, making it easier to navigate nested information.

Preview

Docs
- Getting Started
- Components
  - common
    
    Accordion.astro
    
    Alert.astro
  - index.astro
Themes
- Light
- Dark

Unlock code

---
const data = [
    {
        label: 'Docs',
        children: [
            { label: 'Getting Started' },
            {
                label: 'Components',
                children: [ ... ]
            }
        ]
    },
    {
        label: 'Themes',
        children: [
            { label: 'Light', icon: 'sun', color: 'var(--w-color-warning)' },
            { label: 'Dark', icon: 'moon', color: 'var(--w-color-info)' }
        ]
    }
]
---

<TreeView data={data} />

The TreeView component only expects a data prop that describes the structure of the tree. Each node can have labels, icons, colors, and values/links. To nest items, simply pass another group of TreeNode to the children prop.

When a TreeNode gets an href prop, it’ll behave as a link. If a value prop is defined, it’ll be able to receive click events that you can listen to using the following code:

Unlock code

---
const data = [{
    label: 'Node with value',
    value: 'node-value',
    // href: '/link' - use `href` to link the node to a page
}]
---

<TreeView data={data} />

<script>
    import { listen } from 'webcoreui'

    listen('treeOnSelect', value => console.log('Selected:', value))
</script>

Collapse States

A node is automatically expanded when it has children. You can make it collapsed by default by setting the collapsed property on the node to true:

Docs
- Getting Started
- Components
  - common
    
    Accordion.astro
    
    Alert.astro
  - index.astro
Themes
- Light
- Dark

Unlock code

---
const data = [
    {
        label: 'Docs',
        collapsed: true
        children: [
            { label: 'Getting Started' },
            {
                label: 'Components',
                children: [ ... ]
            }
        ]
    }, { ... }
]
---

<TreeView data={data} />

If you want every node to be always expanded, you can also disable collapsible functionality for the entire tree by setting collapsible to false:

Docs
- Getting Started
- Components
  - common
    
    Accordion.astro
    
    Alert.astro
  - index.astro
Themes
- Light
- Dark

Unlock code

<TreeView
    data={data}
    collapsible={false}
/>

Configure Icons

Note that when the collapsible prop is set to false the collapse icons are also removed as they become obsolete. If you want to keep the tree collapsible but remove the icons only, you can disable them by setting showCollapseIcons to false:

Docs
- Getting Started
- Components
  - common
    
    Accordion.astro
    
    Alert.astro
  - index.astro
Themes
- Light
- Dark

Unlock code

<TreeView
    data={data}
    showCollapseIcons={false}
/>

In this case, the tree will still be interactive, but the collapse icons will not be shown. You can also get rid of icons entirely by setting showIcons to false as well, in which case, either bullet points or numbers will be shown, depending on the value of the type prop:

Docs
- Getting Started
- Components
  - common
    
    Accordion.astro
    
    Alert.astro
  - index.astro
Themes
- Light
- Dark

Docs
1. Getting Started
2. Components
  1. common
    
    Accordion.astro
    
    Alert.astro
  2. index.astro
Themes
1. Light
2. Dark

Unlock code

<TreeView
    data={data}
    type="ol" {/* Defaults to ul */}
    showCollapseIcons={false}
    showIcons={false}
    collapsible={false}
/>

If you need custom folder/file icons you can modify your TreeNode component directly, or overwrite the SVG icons themselves.

Disable Animation

You can disable animations by setting the animated prop to false:

Docs
- Getting Started
- Components
  - common
    
    Accordion.astro
    
    Alert.astro
  - index.astro
Themes
- Light
- Dark

Unlock code

<TreeView
    data={data}
    animated={false}
/>

API

Unlock code

type TreeNode = {
    label: string
    icon?: string
    color?: string
    collapsed?: boolean
    value?: string
    href?: string
    target?: '_self'
        | '_blank'
        | '_parent'
        | '_top'
        | '_unfencedTop'
    children?: TreeNode[]
}

type TreeViewProps = {
    data: TreeNode[]
    type?: 'ol' | 'ul'
    collapsible?: boolean
    showIcons?: boolean
    showCollapseIcons?: boolean
    animated?: boolean
    className?: string
}

type SvelteTreeViewProps = {
    onSelect?: (value: string) => void
} & TreeViewProps

type ReactTreeViewProps = {
    onSelect?: (value: string) => void
} & TreeViewProps

Prop	Default	Purpose
`data`	`[]`	Pass an array of `TreeNode` objects to create the tree.
`type`	`ul`	Sets the type of element to be used for the component.
`collapsible`	`true`	Set to `false` to make the component non-collapsible.
`showIcons`	`true`	Set to `false` to hide folder and file icons.
`showCollapseIcons`	`true`	Set to `false` to hide chevron icons.
`animated`	`true`	Set to `false` to disable animation.
`className`	`-`	Pass additional CSS classes for the component.

Node Prop	Purpose
`label`	Sets a label for the node.
`icon`	Sets an SVG icon for the node.
`color`	Sets the color of the node.
`collapsed`	Set to `true` to make the node collapsed by default.
`value`	Sets a value for the node that is retrieved on click with event listeners.
`href`	Sets a link for the node.
`target`	Sets a target for the link.
`children`	Pass additional `TreeNode` items for nesting.

Svelte & React Prop	Purpose
`onSelect`	Add select event listeners to nodes with a `value`.