@synapxlab/jstree — Composant arbre TypeScript zéro dépendance

🌳 Démo interactive

Double-clic pour renommer, clic droit pour le menu contextuel, glisser-déposer pour déplacer, Ctrl+clic pour multi-sélectionner.

Chargement de l'arbre…

📦 Installation

npm install @synapxlab/jstree

Ou via CDN (ESM, aucune installation) :

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@synapxlab/jstree/dist/style.css">
<script type="module">
  import { JsTree } from 'https://cdn.jsdelivr.net/npm/@synapxlab/jstree/dist/jstree.es.js';
</script>

⚡ Démarrage rapide

import { JsTree } from '@synapxlab/jstree';
import '@synapxlab/jstree/style.css';

const tree = new JsTree('#tree', {
  plugins: ['wholerow', 'contextmenu', 'dnd', 'search', 'state', 'types'],
  core: {
    multiple: true,
    check_callback: true,
    data: [
      { id: '1', text: 'Racine', parent: '#', state: { opened: true } },
      { id: '2', text: 'Documents', parent: '1' },
      { id: '3', text: 'Rapport.pdf', parent: '2' },
    ],
  },
});

const tree = new JsTree('#tree', {
  core: {
    // Chargement paresseux : appelé à l'ouverture d'un nœud
    data: {
      url: (node) => `/api/nodes?parent=${node.id}`,
    },
  },
});

📖 API & méthodes

Le constructeur prend un sélecteur (ou un élément) et un objet d'options. L'instance expose des méthodes de manipulation des nœuds.

Méthode	Description
`edit(id)`	Renommage inline du nœud.
`create_node(parentId, opts)`	Crée un nœud enfant, renvoie son id.
`delete_node(id)`	Supprime un nœud (et ses enfants).
`move_node(id, parentId)`	Déplace un nœud sous un autre parent.
`open_node(id)` / `close_node(id)`	Ouvre / referme un nœud.
`select_node(id)`	Sélectionne un nœud (multi-sélection si activée).
`search(terme)`	Filtre l'arbre (plugin `search`).

Modèle de données : chaque nœud est { id, text, parent, icon?, state? }. parent: '#' désigne la racine. Format plat (liste) ou imbriqué (children).

🧩 Plugins

wholerow

Surlignage de la ligne entière au survol et à la sélection.

contextmenu

Menu clic droit personnalisable (renommer, créer, supprimer…).

dnd

Glisser-déposer pour réorganiser et déplacer les nœuds.

search

Filtrage et mise en évidence des nœuds correspondants.

state

Persistance de l'état (ouverture, sélection) en localStorage.

types

Types de nœuds avec icônes et règles (dossier, fichier…).

📡 Événements

Les événements sont émis comme CustomEvent natifs sur l'élément conteneur, suffixés .jstree.

tree.element.addEventListener('select_node.jstree', (e) => {
  console.log('Sélectionné :', e.detail.node.id, e.detail.node.text);
});

Événements disponibles : select_node, deselect_node, create_node, rename_node, delete_node, move_node, open_node, close_node.