Web Component Tree

Lightweight component for displaying hierarchical data < 20k 😎
Compatible with React, Vue, Angular & other frameworks. Emits selections to parent component

Vue Usage

npm i web-component-tree

<script setup>
import TreeSelect from 'web-component-tree';

const items = [
  { groupLabel: 'Frontend Developer',
    children: [
      {groupLabel: 'Vue',
        children: [ { label:'Options Api', value: 'optionsApi'},
          { label: 'Composition Api', value: 'compositionApi' }]},
      { label: 'React', value: 'react'},
      { label: 'Angular', value: 'angular'}
    ]},
  { groupLabel: 'Backend Developer',
    children: [
      {label: 'Bun', value: 'bun' },
      { label: 'Deno', value: 'deno' },
      { label:'Node', value: 'node' }
    ]},
];

onMounted(() => {
  const treeElement = document.querySelector('#tree-select');
  treeElement.items = items;

  treeElement.selectionsChanged = (selections) => {
    console.log(selections);
  }

</script>


<template>
<tree-select id="tree-select"/>
</template>

vite config

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.includes('tree-select')
        }
      }
    })
  ],

Contact

Feel free to ping me 💫
connect@giladshohat.com

giladshohat.com