JSFiddle - React, Tailwind, and code Playground

by javaparknet

HTML

<table id="treegrid"></table>

JavaScript

jQuery('#treegrid').jqGrid({
    url: '/tree.json',
    mtype: 'post',
    datatype: 'json',
    page: 1,
    colNames: ["ID", "Name", "Quantity", "Price", "Color"],
    colModel: [{
        "searchoptions": {
            "searchhidden": true
        },
            "name": "ID",
            "key": true,
            "hidden": true,
            "index": "ID"
    }, {
        "name": "Name",
            "width": 200,
            "searchoptions": {},
            "index": "Name"
    }, {
        "name": "Quantity",
            "searchoptions": {},
            "index": "Quantity"
    }, {
        "name": "Price",
            "searchoptions": {},
            "index": "Price"
    }, {
        "name": "Color",
            "searchoptions": {},
            "index": "Color"
    }],
    viewrecords: true,
    scrollrows: false,
    prmNames: {
        id: "ID"
    },
    treeGrid: true,
    treedatatype: 'json',
    treeGridModel: 'adjacency',
    treeReader: {
        level_field: 'tree_level',
        parent_id_field: 'tree_parent',
        leaf_field: 'tree_leaf',
        expanded_field: 'tree_expanded',
        loaded: 'tree_loaded',
        icon_field: 'tree_icon'
    },
    ExpandColumn: 'Name',
    hoverrows: false,
    rowNum: 10,
    rowList: [10, 20, 30],
    jsonReader: {
        id: "ID",
        repeatitems: false,
        subgrid: {
            repeatitems: false
        }
    },
    sortorder: 'asc',
    width: '650',
    height: '300%',
    viewsortcols: [false, 'vertical', true]
});