JSFiddle - React, Tailwind, and code Playground

by ermakovnikolay

HTML

<script src="https://static.jstree.com/3.0.0-beta3/assets/dist/jstree.min.js"></script>
<div id="select_cats"></div>

JavaScript

var data = [
     { "id" : "allCategories", "parent" : "#", "type" : "catRoot", "text" : "All Cats", "state": {"opened": true } },
     { "id" : "cat1", "parent" : "allCategories", "type" : "category", "text" : "Cat 0.1", "state": {"opened": true } },
     { "id" : "cat2", "parent" : "allCategories", "type" : "category", "text" : "Cat 0.2" },
     { "id" : "cat3", "parent" : "allCategories", "type" : "category", "text" : "Cat 0.3" },
     { "id" : "cat01", "parent" : "cat1", "type" : "category", "text" : "Cat 0.1.0" },
     { "id" : "cat02", "parent" : "cat1", "type" : "category", "text" : "Cat 0.1.1" },
     { "id" : "cat03", "parent" : "cat1", "type" : "category", "text" : "Cat 0.1.2" }
]
  
$.jstree.defaults.core = {
    themes      : {
        url        : true
    }
};



$('#select_cats').jstree({
    "core" : {
        "data" : data,
        "themes" : {
            "responsive": false
        }            
    },
    "types" : {
        "default" : {
            "icon" : "fa fa-folder icon-state-warning icon-lg"
        },
        "file" : {
            "icon" : "fa fa-file icon-state-warning icon-lg"
        }
    },
    "checkbox": {
        "three_state": true
    },
    "plugins": ["types", "checkbox"]
 });