JSFiddle - React, Tailwind, and code Playground

by Cerlin ST

HTML

<script src="https://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxcore.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxdata.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxbuttons.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxscrollbar.js"></script>
<script src="https://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/jqxtreegrid.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-documentation/jqwidgets/styles/jqx.base.css">
<div id="treeGrid"></div>

JavaScript

var employees = [
    {
        "FirstName": "Nancy",
        "LastName": "Davolio",
        "Title": "Sales Representative",
    },
    {
        "FirstName": "Andrew",
        "LastName": "Fuller",
        "Title": "Vice President, Sales",
    },
    {
        "FirstName": "Janet",
        "LastName": "Leverling",
        "Title": "Sales Representative",
    },
    {
        "FirstName": "Margaret",
        "LastName": "Peacock",
        "Title": "Sales Representative",
    },
    {
        "FirstName": "Steven",
        "LastName": "Buchanan",
        "Title": "Sales Manager",
    },
    {
        "FirstName": "Michael",
        "LastName": "Suyama",
        "Title": "Sales Representative",
    },
    {
        "FirstName": "Robert",
        "LastName": "King",
        "Title": "Sales Representative",
    },
    {
        "FirstName": "Laura",
        "LastName": "Callahan",
        "Title": "Inside Sales Coordinator",
    },
    {
        "FirstName": "Anne",
        "LastName": "Dodsworth",
        "Title": "Sales Representative",
    }
];
            // prepare the data
            var source =
            {
                dataType: "json",
                dataFields: [
                    { name: 'FirstName', type: 'string' },
                    { name: 'LastName', type: 'string' },
                    { name: 'Title', type: 'string' },
                ],
                hierarchy:
                {
                    keyDataField: { name: 'EmployeeID' },
                    parentDataField: { name: 'ReportsTo' }
                },
                id: 'EmployeeID',
                localData: employees
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            // create Tree Grid
            $("#treeGrid").jqxTreeGrid(
            {
                width: 500,
                source: dataAdapter,
                ready: function () {
                    $("#treeGrid").jqxTreeGrid('expandRow', '2');
                },
         ...