Treeselect JS component

A multi-select js component with nested options.

• React wrapper - https://www.npmjs.com/package/react-treeselectjs
• Vue wrapper - https://www.npmjs.com/package/vue-treeselectjs
• Full key support (ArrowUp, ArrowDown, Space, ArrowLeft, ArrowRight, Enter)
• Screen sensitive direction
• Typescript support

Build data:

• treeselectjs.mjs 51.08 kB │ gzip: 11.59 kB
• treeselectjs.umd.js 41.45 kB │ gzip: 10.57 kB
• treeselectjs.css 6.93 kB │ gzip: 1.38 kB

Live Demo: https://dipson88.github.io/treeselectjs/

Getting Started

npm install --save treeselectjs

Import treeselectjs (ES)

import Treeselect from 'treeselectjs'

@import 'treeselectjs/dist/treeselectjs.css' // Styles

Import treeselectjs (UMD)

<script src="https://cdn.jsdelivr.net/npm/treeselectjs@0.11.0/dist/treeselectjs.umd.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/treeselectjs@0.11.0/dist/treeselectjs.css" />
...
<script>
  ...
  const treeselect = new Treeselect({ ...props })
  ...
</script>

Example

import Treeselect from 'treeselectjs'

const options = [
  {
    name: 'England',
    value: 1,
    children: [
      {
        name: 'London',
        value: 2,
        children: [
          {
            name: 'Chelsea',
            value: 3,
            children: []
          },
          {
            name: 'West End',
            value: 4,
            children: []
          }
        ]
      },
      {
        name: 'Brighton',
        value: 5,
        children: []
      }
    ]
  },
  {
    name: 'France',
    value: 6,
    children: [
      {
        name: 'Paris',
        value: 7,
        children: []
      },
      {
        name: 'Lyon',
        value: 8,
        children: []
      }
    ]
  }
]

// Use slot if you need
const slot = document.createElement('div')
slot.innerHTML='<a class="treeselect-demo__slot" href="https://github.com/dipson88/treeselectjs/blob/main/">Click!</a>'

const domElement = document.querySelector('.treeselect-demo')
const treeselect = new Treeselect({
  parentHtmlContainer: domElement,
  value: [4, 7, 8],
  options: options,
  listSlotHtmlComponent: slot
})

treeselect.srcElement.addEventListener('input', (e) => {
  console.log('Selected value:', e.detail)
})

slot.addEventListener('click', (e) => {
  e.preventDefault()
  alert('Slot click!')
})

Props

Core props

List settings props

Input settings props

Callback props

Check Emits section for more info.

Additional props

Option description

Emits

Methods

Notes

1) If you want to change the padding of the element you can use CSS selector. I've added 'group' and 'level' attributes, but you have to use !important. 2) If you want to update props, set props to the entity of the class and then call mount() method. 3) Use updateValue() method to update only the value. 4) If you need to delete List from the DOM when you don't need treeselect anymore - call destroy(). 5) Do not use duplicated values for the options. You will see a error with duplicated values. But you can use duplicated names. 6) Value prop inside the options prop should be a String or Number. 7) If you use isSingleSelect prop, you should pass only a single value without an array. 8) If you use isSingleSelect prop, you can set showTags to false. It helps to show treeselect as a dropdown. Also you can disable selecting of group's nodes with help of disabledBranchNode.

Support

You can buy me a coffee if you want to support my work. Thank you!