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/jqxdatatable.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 source = [
    {
        "REC_ID": null,
        "OPTY_ID": null,
        "QUOTE_ID": "4704891598",
        "QUOTE_STATUS": null,
        "SALES_AGENT_NAME": null,
        "ACCOUNT_MANAGER": null,
        "WORKSPACE_EXPECTED_BOOK_DATE": null,
        "WORKSPACE_FORECAST_STATUS": null,
        "EXPECTED_BOOK_DATE": null,
        "FORECAST_STATUS": null,
        "QUOTE_CREATED_DATE": null,
        "QUOTE_EXPIRY_DATE": null,
        "INV_RES_DATE": null,
        "INV_RESERVATION_EXPIRY_DATE": null,
        "PRODUCT_ID": null,
        "RESERVED_FGI": null,
        "RESERVED_DGI": null,
        "TOTAL_RESERVED": null,
        "OLD_RESERVED_FGI": null,
        "OLD_RESERVED_DGI": null,
        "OLD_TOTAL_RESERVED": null,
        "THEATER": null,
        "SHIP_TO_COUNTRY": null,
        "APPROVAL_FLAG": null,
        "LAST_UPDATED_BY": null,
        "LAST_UPDATED_DATE": null,
        "IS_QUOTE_MODIFIED": null
    },
    {
        "REC_ID": null,
        "OPTY_ID": null,
        "QUOTE_ID": "4708240730",
        "QUOTE_STATUS": null,
        "SALES_AGENT_NAME": null,
        "ACCOUNT_MANAGER": null,
        "WORKSPACE_EXPECTED_BOOK_DATE": null,
        "WORKSPACE_FORECAST_STATUS": null,
        "EXPECTED_BOOK_DATE": null,
        "FORECAST_STATUS": null,
        "QUOTE_CREATED_DATE": null,
        "QUOTE_EXPIRY_DATE": null,
        "INV_RES_DATE": null,
        "INV_RESERVATION_EXPIRY_DATE": null,
        "PRODUCT_ID": null,
        "RESERVED_FGI": null,
        "RESERVED_DGI": null,
        "TOTAL_RESERVED": null,
        "OLD_RESERVED_FGI": null,
        "OLD_RESERVED_DGI": null,
        "OLD_TOTAL_RESERVED": null,
        "THEATER": null,
        "SHIP_TO_COUNTRY": null,
        "APPROVAL_FLAG": null,
        "LAST_UPDATED_BY": null,
        "LAST_UPDATED_DATE": null,
        "IS_QUOTE_MODIFIED": null
    },
    {
        "REC_ID": null,
        "OPTY_ID": null,
        "QUOTE_ID": "4708273906",
        "QUOTE_STATUS": null,
        "SALES_AGENT_NAME": null,
     ...