Tree View

Installation

Examples

Props

Schema

Type aliases from this item's source — use them to shape the data you pass in.

interface TreeViewContext {
  readonly expandedIds: Set<string>
  readonly selectedId: string | null
  readonly showIcons: boolean
  readonly showCheckboxes: boolean
  toggle: (item: TreeViewItem) => void
  select: (item: TreeViewItem) => void
}

interface TreeViewItem {
  id: string
  label: string
  icon?: Component
  children?: TreeViewItem[]
  disabled?: boolean
  selected?: boolean
  expanded?: boolean
  [key: string]: unknown
}

Files installed (5)

• src/lib/components/ui/tree-view/TreeView.svelte2.4 kB

  Copy

  <script lang="ts" module>
    import type { HTMLAttributes } from 'svelte/elements'
    import type { TreeViewItem } from './types'
  
    // Omit DOM event props shadowed by component callbacks (item payloads, not events).
    export interface TreeViewProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onselect' | 'ontoggle'> {
      items: TreeViewItem[]
      showIcons?: boolean
      showCheckboxes?: boolean
      defaultExpanded?: boolean
      selectedId?: string | null
      onselect?: (item: TreeViewItem) => void
      ontoggle?: (item: TreeViewItem) => void
      onSelectedIdChange?: (id: string | null) => void
      ref?: HTMLDivElement | null
    }
  </script>
  
  <script lang="ts">
    import { onMount } from 'svelte'
    import { cn } from '$lib/utils'
    import { setTreeViewContext } from './context'
    import TreeViewNode from './TreeViewNode.svelte'
  
    let {
      items,
      showIcons = true,
      showCheckboxes = false,
      defaultExpanded = false,
      selectedId = $bindable(null),
      onselect,
      ontoggle,
      onSelectedIdChange,
      class: className,
      ref = $bindable(null),
      ...restProps
    }: TreeViewProps = $props()
  
    let expandedIds = $state<Set<string>>(new Set())
  
    function toggle(item: TreeViewItem) {
      if (item.disabled) return
      const next = new Set(expandedIds)
      if (next.has(item.id)) next.delete(item.id)
      else next.add(item.id)
      expandedIds = next
      ontoggle?.(item)
    }
  
    function select(item: TreeViewItem) {
      if (item.disabled) return
      selectedId = item.id
      onselect?.(item)
      onSelectedIdChange?.(item.id)
    }
  
    // Getters keep the child rows reactive to parent state without a .svelte.ts store.
    setTreeViewContext({
      get expandedIds() {
        return expandedIds
      },
      get selectedId() {
        return selectedId
      },
      get showIcons() {
        return showIcons
      },
      get showCheckboxes() {
        return showCheckboxes
      },
      toggle,
      select,
    })
  
    onMount(() => {
      if (!defaultExpanded) return
      const next = new Set<string>()
      const walk = (list: TreeViewItem[]) => {
        for (const it of list) {
          if (it.children?.length) {
            next.add(it.id)
            walk(it.children)
          }
        }
      }
      walk(items)
      expandedIds = next
    })
  </script>
  
  <div
    bind:this={ref}
    data-uipkge
    data-slot="tree-view"
    role="tree"
    class={cn('text-sm', className)}
    {...restProps}
  >
    {#each items as item, i (item.id)}
      <TreeViewNode {item} depth={0} isLast={i === items.length - 1} />
    {/each}
  </div>
  

• src/lib/components/ui/tree-view/TreeViewNode.svelte6.6 kB

  Copy
• src/lib/components/ui/tree-view/context.ts0.7 kB

  Copy
• src/lib/components/ui/tree-view/types.ts0.2 kB

  Copy
• src/lib/components/ui/tree-view/index.ts0.2 kB

  Copy

Raw manifest:https://uipkge.dev/r/svelte/tree-view.json

Related components